スマホサイト制作の時にレイアウトで気を付けるべき３つの注意事項
こんにちは。松本です。
早いもので、もう12月です。先日、インターン生に「一年てあっという間だよね！」と話しかけたところ、「そうですか？」と言われました。ええ、たしかに、大学時代はそんなこと思いませんでしたとも。年齢を感じる……
でも、まだまだ、修行中の身。来年の自分を『おお!!成長したな』って言えるように、頑張らなくては。
ずっと、Flash作業を続けていましたが、このたび、スマホ版のサイトを作るお仕事に関われることに!! まだ、準備段階ですが、スマホ版サイトはPC版サイトと操作も異なります、画面サイズも違います。
今回は、私なりに調べた、スマホサイトをつくるにあたっての３つの注意事項をお伝えしようと思います。
１．リキッドデザイン
ひと口にスマホ版サイトと言ってもデバイスの画面サイズも様々ですし、縦画面でも横画面でも表示出来ることが大切になります。スマホ版サイトは可変的であることが大事です。
リキッドレイアウトとは (liquid layout)： – IT用語辞典バイナリ
リキッドレイアウトは、各列の幅をパーセンテージ（％）で指定し、それによってWebページの幅を相対的・可変的にすることを主とした手法である。リキッドレイアウトにすると、ウィンドウ幅に合わせて自動的に幅が調整されるので、多様な環境でユーザビリティが損なわれないWebページを作成することができる。
SSCのサイトは、ご覧の通り横幅にしたがってデザインが変化するように作られています。
【SSCサイト横ver.】
【SSCサイト縦ver.】
２．フォントサイズに注意
PCはだいたい腰を据えた状態で閲覧することが多いともいますが、スマホでサイトを閲覧するシーンて本当に様々です。
歩きながら、屋外、明るい場所、暗い場所、etc……
そのためスマートフォンサイトでは、フォントサイズ、フォントカラーは特に注意した方が良いです。薄い色のフォントは避け、フォントのサイズはスマホだからと小さくせずに14ptから16ptで作ると読みやすいです。
３．タップ可能なサイズのボタン
『閉じる』ボタンとか、戻る』ボタンなどは、スマホの場合、指で操作するためにボタンサイズが重要になってきます。
一般的に、44px以上の幅をもたせてあげると押しやすいボタンになります。ちなみにAppleのガイドラインで定められているタップ可能なターゲット領域の目安が、「44px以上」とのこと。
参考：design color
こんな点に注意しながら、スマホサイトを作っていくと良いのではないかと思っている訳ですが、もしかしたら知らぬ間に『３の注意点とか注意足りなすぎだったーーー!!』と思うことが出てくると思いますで、その時は追記しますね。
まぁ、3つとか足りてないよね。
全然足りてない。
足りてないよ、まっちゃん……
追記して「30の注意点」とかにすればいいと思うよ。
オカベ
松本
最新記事 by 松本 (全て見る)
- 企業SNSアカウント Facebookとtwitterの使い分けはどうする？ - 2016.12.10
- ブログのネタ探し3つのポイント｜読まれるブログの書き方 -初心者編- vol.1 - 2016.09.26
- 国内開催のフェス・夏祭り・パブリックビューイング情報を網羅した日本初の総合フェス情報サイト「FEStivaly-フェスティバリー」、7月30日（土）プレオープン！ - 2016.07.30
