コーディングファクトリートピックス

制作現場から見たレスポンシブWebデザインの潮流

最近多いレスポンシブWebデザイン(以下、RWD)の仕様やおすすめの設定について、現場のディレクターの意見をまとめました。必ずしもこれが正解というわけではありませんが、仕様決めで迷ったときは是非参考にしてみてください。

ブレークポイント

スマートフォンとPCの表示レイアウトを切り替えるブレークポイントとして、長いあいだ定番だったのが「768px」です。これはiPadをはじめとするタブレット端末でPC表示となるように意識して設定された数値ですが、大画面スマホの登場により状況が変わってきました。
大画面スマホでは、ブレークポイントを768pxに設定すると、ポートレート(縦向き)がスマートフォン表示、ランドスケープ(横向き)がPC表示になるケースがあります。このようにスマートフォンの実機でPC表示になってしまうと、次のような問題が起こります。

  • メガメニューがある場合、スマートフォンの画面いっぱいにメニューが表示されてしまい操作が困難になったり、不具合が発生することがある。
  • PCとスマートフォンでは、hoverやタップなど操作性が異なるため、意図した挙動にならないことがある。

そのため最近ではiPhone 11やiPhone Xs Maxの画面サイズにあわせて、ブレークポイントを「896px」に設定することが増えてきました。

スマートフォン(スマートフォン縦・横、タブレット縦)とPC(PC・タブレット横)の表示レイアウトを切り替えるブレークポイントとして、768pxではなく896pxに設定することが増えた

リキッド or アダプティブ

コンテンツエリアの仕様について、リキッド(可変)なのかアダプティブ(固定)なのかが、案件相談時に確定していないこともよくあります。全体的にリキッドを希望される方が多い印象ですが、デザインによってはリキッドでのコーディングが難しいケースがあります。

ウィンドウ幅を狭めたとき、アダプティブ(固定)はコンテンツが見切れてしまうが、リキッド(可変)は幅に合わせてコンテンツが縮小する

例えば3カラムのレイアウトの場合、リキッドにするとウィンドウサイズによってはカラムの幅が極端に狭まり、テキストの折り返しが増えて文章が読みにくくなってしまいます。
コンテンツエリアをリキッドにする際は、デザイン制作時にあらかじめ可変したときの見た目や挙動を考慮しておくことが重要です。

その他にもリキッドでは「position: absolute;」で配置された要素やGoogleマップのピンの位置など、ウィンドウサイズの可変によってレイアウトが崩れないよう細かな調整が必要となるので、コーディング期間が多少長くなることもあります。

ちなみに、現在PCモニターのシェア率の65%以上(※)が画面解像度1280pxより大きいサイズとなっており、多くのデザインはアダプティブでも見切れることなく全体を表示することができます。このような現状を踏まえた上で、リキッドかアダプティブか無理なく実装できる仕様の選定をおすすめします。

画像の高解像度ディスプレイ対応

スマートフォンでは画面の倍のサイズでデザインを制作し、高解像度ディスプレイ対応するのが定着していますが、昨今急激にPCディスプレイの高解像度化が進み、新しいPCでも等倍で切り出した画像がぼやけて表示されてしまうことがあります。
では今後、PCもスマートフォン同様に倍のサイズでデザイン・実装しなければならないのかというと、必ずしもそうではありません。

今はロゴやアイコンはSVG(拡縮しても画像が粗くならないベクター形式)で実装するのが主流なので、そもそも高解像度対応を意識する必要はありません。また、色数の多い写真などは高解像度のものを使用するとファイルサイズが大きくなり、サイトの表示速度遅延の原因となる恐れがあります。

すべての画像を高解像度で書き出すのではなく、サイトの特性やコンテンツの重要性を考慮し、使いどころを見極め、部分的なところから取り入れてみるのがおすすめです。

まとめ

Web業界は技術やトレンドが目まぐるしく変化します。先月iPhone12が発売されましたが、新しい機種は今後も出続けますので、常にこのような動向に目を向けてノウハウのバージョンアップをしていきましょう。
それと同時に、定期的にディレクターやコーダー同士で話し合いの場を設けることが重要だということも今回あらためて感じました。また、会社毎にもスタンダードが異なるため、社内の情報共有に留まらず、お客様とも情報交換の場を持つことできればいいなと考えています。

※「Statcounter Global Stats」国内デスクトップ画面解像度統計-2020年10月

お問い合わせはこちらからどうぞ

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

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

    お問い合わせ

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

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