スマホサイト制作の時にレイアウトで気を付けるべき3つの注意事項

こんにちは。松本です。

早いもので、もう12月です。先日、インターン生に「一年てあっという間だよね!」と話しかけたところ、「そうですか?」と言われました。ええ、たしかに、大学時代はそんなこと思いませんでしたとも。年齢を感じる……

でも、まだまだ、修行中の身。来年の自分を『おお!!成長したな』って言えるように、頑張らなくては。

ずっと、Flash作業を続けていましたが、このたび、スマホ版のサイトを作るお仕事に関われることに!! まだ、準備段階ですが、スマホ版サイトはPC版サイトと操作も異なります、画面サイズも違います。

今回は、私なりに調べた、スマホサイトをつくるにあたっての3つの注意事項をお伝えしようと思います。

1.リキッドデザイン

ひと口にスマホ版サイトと言ってもデバイスの画面サイズも様々ですし、縦画面でも横画面でも表示出来ることが大切になります。スマホ版サイトは可変的であることが大事です。

リキッドレイアウトとは (liquid layout): – IT用語辞典バイナリ
リキッドレイアウトは、各列の幅をパーセンテージ(%)で指定し、それによってWebページの幅を相対的・可変的にすることを主とした手法である。リキッドレイアウトにすると、ウィンドウ幅に合わせて自動的に幅が調整されるので、多様な環境でユーザビリティが損なわれないWebページを作成することができる。

SSCのサイトは、ご覧の通り横幅にしたがってデザインが変化するように作られています。

【SSCサイト横ver.】
sma_002

【SSCサイト縦ver.】
sma_001

2.フォントサイズに注意

PCはだいたい腰を据えた状態で閲覧することが多いともいますが、スマホでサイトを閲覧するシーンて本当に様々です。

歩きながら、屋外、明るい場所、暗い場所、etc……

そのためスマートフォンサイトでは、フォントサイズ、フォントカラーは特に注意した方が良いです。薄い色のフォントは避け、フォントのサイズはスマホだからと小さくせずに14ptから16ptで作ると読みやすいです。

参考:スマートフォン最適化ノウハウコラム

3.タップ可能なサイズのボタン

『閉じる』ボタンとか、戻る』ボタンなどは、スマホの場合、指で操作するためにボタンサイズが重要になってきます。

一般的に、44px以上の幅をもたせてあげると押しやすいボタンになります。ちなみにAppleのガイドラインで定められているタップ可能なターゲット領域の目安が、「44px以上」とのこと。

参考:design color

こんな点に注意しながら、スマホサイトを作っていくと良いのではないかと思っている訳ですが、もしかしたら知らぬ間に『3の注意点とか注意足りなすぎだったーーー!!』と思うことが出てくると思いますで、その時は追記しますね。

まぁ、3つとか足りてないよね。
全然足りてない。
足りてないよ、まっちゃん……
追記して「30の注意点」とかにすればいいと思うよ。

オカベ

The following two tabs change content below.
松本

松本

埼玉県在住。アパレル会社での企画営業経て、2013年にスマートスタイル・コンプレックス株式会社へ入社。好きなことは歌うこと♪声の大きさは、社内No.1!最近はまっているのは登山。山ガールよ、集まれー。