レスポンシブデザイン制作時に注意したいこと

スマホページの文字は大きめ、画像は可変に

解像度が高くなったとはいえ、スマホのディスプレイはパソコンの画面よりは当然小さくなるので、パソコンと同じ文字サイズでは、文字が小さすぎて読めなくなってしまうこともあります。
パソコンサイトでは見た目12～14px程度が標準でしたが、スマホ用のページでは少し大きめに、14～16px程度にサイズを上げておきましょう。
HTML4.01までは画像にwidthとheightを指定してサイズを固定する必要がありましたが、HTML5では画像のサイズは可変にするため、基本的には％で幅を指定します。

また、ボタンは指で押しやすいように上下7pxほどの余白を入れるとよいでしょう。

Viewportを指定する

AppleのiPhoneやiPadでは、デフォルトでパソコン用のサイトもそのまま縮小して表示されます。
3カラムあるような幅広のページなども縮小されるので、端末の画面では小さくなりすぎてしまいます。

これを避けるために、以下に記載されているようなMETAタグで、Viewportをヘッダー内に指定し、デバイスのスクリーンサイズに合わせた幅で表示させるようにしましょう。

<meta name="viewport" content="width=device-width;" />

テキストの量や改行を見直し

パソコンでは最適だと思われる文章量でも、スマホ上では長文になって読みにくくなる場合があります。
内容を精査して、それでも量が多すぎるようでしたら思い切ってページを分けるなどの工夫も必要でしょう。

同様に改行の位置も、スマホの表示を考慮して入れる必要があります。

横並びのコンテンツを縦並びに変更

画像だけではなく、サイト全体的に可変を意識してサイズを％で指定します。
サイドナビをメインカラムの下に配置したり、アンケートなどの選択肢も、パソコンで横並びだった場合は押しやすいように文章の上下に余白をつけて広げ、縦並びに変更するとよいでしょう。

入力フォームの最適化

HTML5から導入されたinput typeの「email」や「tel」を使用すると、iPhoneやiPadでは入力時に自動的に半角英数字やテンキーに切り替わります。
キーボードと違って指一本で入力するのは手間がかかりますので、極力入力項目は少なくして、ユーザーが登録を諦めてしまうのを防ぎましょう。

まとめ

レスポンシブデザインでは、マウスとキーボードから指で操作するタッチパネルに変わること、リキッドレイアウトにするためコンテンツの横幅は％で指定すること、文章量に注意する必要があります。

最終チェック時には、タブレットやスマホの縦横表示を何度か変更して、レイアウトの崩れがないか確認しましょう。

このニュースを読んだあなたにおすすめ

Photoshop初心者必見！Photoshopを使いこなすために知っておくべき情報まとめ
全て無料！デザインの魅力をさらに引き立てる高品質PSDファイル60選
【10月編】無料のPSDファイル50選