コーディングメソドロジー

第70回 レスポンシブ制作で確認しておきたいこと

レスポンシブウェブデザインを採用する場合、通常のサイト制作時に必要な基本情報のほかに、レスポンシブウェブデザイン特有の仕様についても策定が必要です。
また、サイトのデザインも各デバイスの見え方を考慮し、それぞれに適したものを準備しましょう。今回はレスポンシブウェブデザイン制作時に確認しておきたい内容と、よくある問題の対処法をご紹介します。

●レスポンシブウェブデザイン特有の仕様

レスポンシブウェブデザインは1つのHTMLを元に、画面サイズに応じてレイアウト(CSS)を切り替え、各デバイスに最適化されたページを表示する手法です。JavaScriptなどでサイト閲覧者のWebブラウザの情報(ユーザーエージェント)を判別し、レイアウト切り替えを行う方法もありますが、現在はCSS3のメディアクエリを使用し、画面幅に応じてレイアウトを切り替える方法が主流です。そのレイアウトの分岐点(px)をブレークポイントといい、各サイトに適したブレークポイントの設定が必要となります。

●準備しておきたいもの

レスポンシブWebデザインの制作時に必要なものを、以下にリストアップします。

  • ・サイトに関する仕様書(ガイドライン・レギュレーション)
  • ・レスポンシブに関する仕様書
  • ・サイトマップ(ファイルリスト)
  • ・各デバイスごとのデザインデータ

●よくある問題の対処法

①ブレークポイントの設定値がわからない。

コーディングファクトリーでは下記のブレークポイントを推奨しています。

ブレークポイント

例)
ブレークポイントを640pxに設定した場合、「スマートフォン(横向き)」と「タブレット」間でレイアウトの切り替えが発生します。
※端末の解像度によっては、想定したレイアウトと異なる場合がございます。

②スマートフォンで見たとき、画像や表が見にくくなってしまう。

スマートフォンのように画面サイズの小さい端末で見たとき、コンテンツ内容によっては見にくくなってしまう場合があります。下図のように、小さい画面でも見やすくなるようにCSSを調整しましょう。

■画像の場合

PC

PCでよくあるレイアウト。
スマートフォンでは画像が小さくなってしまう。また、テキストの折り返しも多くなり読みにくい。

調整すると...

SP

「float」を解除すれば、画像を大きく表示できる幅がとれ、テキストの折り返しも調整されるので読みやすくなる。

■表組みの場合

PC

PCの組み方のままだと、表の幅が狭くなり、見にくくなってしまう。

調整すると...

SP

<th>、<td>を「display:block;」に設定することで、見出しと内容が分割され、それぞれの幅を確保することができる。

コーディングファクトリーでは、このようなレスポンシブの基礎や制作フローを
「レスポンシブウェブデザイン ご入稿の手引き」にまとめました。
もっと詳しく知りたい方は是非一度お問い合わせください。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム