こんにちは、後藤です。

以前にホームページのマルチデバイス対応の重要性を解説し、その方法の一つとしてレスポンシブデザインを紹介しました。

弊社のホームページ制作案件のほとんどはレスポンシブデザインです。

今回は、実際にレスポンシブデザインで制作した後にチェックするポイントを紹介します。

レスポンシブデザインのメリット・デメリット

レスポンシブデザインを簡単に説明すると、デバイスごとに表示を最適化させるデザインのことです。

PCで見やすいデザインと、スマホで見やすいデザインを作ります。

コーディングの際は、同じHTMLで、PC用とスマホ用のCSSをそれぞれ記述していきます。

メリット

ワンソース管理なので画像や文言修正等のメンテナンスが楽ですし、どのデバイスでも提供するコンテンツに差がでません。

モバイルSEO要素のモバイルフレンドリーに対応できるため、モバイルでの検索結果に有利に働きます。

（といっても、もはやどこのサイトもモバイルフレンドリーに対応してきているので、有利に働くというよりは、不利にならないといった表現の方が正しいかもしれません。）

URLが統一されているためリンクを共有しやすく、SNS等でシェアしやすいです。

デメリット

レスポンシブに対応した構成にする必要があり、デザインに制限が出てきます。

PCでは実現可能なデザインでも、スマホでは厳しいといったことがよくあります。

PCサイトのみの場合と比べて工数がかかります。

レスポンシブデザインのチェックポイント

PCでは正しく表示されていも、スマホになり画面幅が狭まった場合に正しく表示されるか、チェックする必要があります。

改行されるか

見出しやテキストが画面幅で改行されず、突き抜けてしまう場合があります。

その場合word-breakやword-wrapを指定します。

改行されたときの表示は正しいか

改行されたときの行間が正しいか確認が必要です。

line-heightを0に設定していると文字が被ります。

ボタンなどを作るときにline-heightを0にしてpaddingで高さを出して縦を中央揃えすることがありますが、文字が長くてスマホで改行されてしまうと文字が被ります。

画像は見やすいか

PC用に大きめの画像を使用する場合、画面内に収まるように、基本的に画像のmax-widthを100%に設定します。

また、widthを％で指定している場合、本来の画像のサイズよりも大きいサイズになり表示が粗くなってしまう場合があります。

その場合は、max-widthを本来の画像サイズ以下に指定します。

また、PCでは画像の内容が見やすくても、スマホだと画像が小さすぎて内容が見づらくなる場合があります。

その場合は、文字など伝えたい内容を大きめに配置するか、スマホ用の画像を作成し、PCとスマホで表示を分けます。

横並びのコンテンツが正しく表示されるか

float等を使用してコンテンツを横並びにしている場合、スマホで見たときに見づらくないか確認します。

見づらい場合は、横並びを解除することを検討します。

また、PCではwidthを指定せずに横並びにできていても、スマホではwidthを指定しないとカラム落ちする場合があります。

widthをそれぞれ％で指定するか、固定幅のコンテンツがある場合はcalcを使用してwidthを指定します。

表が見づらくなっていないか

tableを使用して表を作成した場合、セルの幅が狭くなって見づらくなっていないか確認します。

項目が多い場合はtableの幅を固定にして、tableの親要素にoverflow-x: scroll;を指定することで、横方向にスクロールさせることができます。

または列が2列のみの場合は、th,tdをdisplay: block;にすることで列を縦並びにすることも可能です。

ボタンやリンク同士が近すぎないか

スマホの場合は指でタッチするため、ボタンやリンクが近すぎると、意図していないところをタッチしてしまう場合があります。

ユーザービリティが下がってフラストレーションが溜まってしまうため、スマホはボタンやリンク同士の間隔を広めに取りましょう。

Google MapやYouTubeをレスポンシブ化したか

サイトにGoogle MapやYouTubeを埋め込むときは、あらかじめ高さと幅が指定されています。

PCでは画面が広いので全体を表示できますが、スマホだと画面内に収まらない場合があります。

レスポンシブ化することで、画面に合わせて拡大させることができます。

実機での確認

PCのブラウザの検証でOKでも、実機では表示が崩れている場合があるので、実機でも確認します。

最低でも、iOSのSafariとAndroidのChromeは確認しましょう。

また、横向きで表示したときに崩れていないか、縦→横→縦にしたときに表示が崩れていないか確認します。

PCとスマホのみ対応した場合は、タブレットでも表示が崩れていないか確認します。

まとめ

今回は、レスポンシブのウェブサイトを作成した際のチェックポイントを紹介しました。

スマホは画面幅が狭いので、狭い画面でも見やすいかがポイントです。