海外デザインブログCanva Design Schoolで公開された「Responsive web design: What the Internet looks like in 2016」より許可をもらい、日本語抄訳しています。

 

スマートフォンやパソコン、マウスやタッチスクリーン操作などあらゆる状況でも、ウェブサイトの見た目と機能面が適切であることが重要です。これがレスポンシブWebデザインと呼ばれ、Googleのガイドラインによると、単一URLとすることで Googlebot がサイトをクロールしやすくなります。

 

 

統一感（英: Consistency）を保つことが、同じ見た目や機能性よりも、デザインの鍵となるでしょう。今回は、マルチスクリーンに対応した、参考にしたい実例ウェブサイト30個を、各スクリーンサイズ毎に比較、まとめています。

 

 

 

詳細は以下から。

 

 

 

01. 余白スペースを有効活用しよう。

 

こちらのサイトでは、すべての端末を通じて統一感のあるレイアウトが特長。イメージ写真の幅をのぞいて、文字テキストがうまく配置されています。モバイル端末でもイメージ写真の下に余白スペースを確保することで、文字の読みやすさを実現しています。

 

 

 

02. ロゴの位置を一貫しよう。

 

たくさんの異なるデザイン要素を利用することで、スクリーンの奥行き感を演出したウェブサイト。ウィンドウ幅がどのように変化しても、常にロゴマークは右上に配置されるように工夫されています。

 

 

 

03. 画面の縦向きと横向きを考えよう。

 

横長のランドスケープ・レイアウトは、デスクトップやノートパソコンなど幅の広いスクリーンに最適。縦長のポートレイト・レイアウトは、タブレット端末やスマートフォン端末に適しています。

 

 

上記サイトでは、縦向きポートレイトと横向きランドスケープごとにデザインすることで、必要な情報をよりはっきりと分かりやすくレイアウトしています。

 

 

 

04. スクロールを検討しよう。

 

ユーザーにページの下までスクロールしてもらうように工夫された参考サイト。スマートフォン端末では不要な要素を省き、もっとも重要なテキストのみを選択して表示しています。

 

 

 

05. タッチパネルに適した形とサイズを考えよう。

 

レスポンシブ Web デザインでは、ユーザーがどのようにボタンやリンクをクリックするか検討しましょう。上記サイトでは、ボタンやリンクのサイズを大きくすることで、指でタッチしやすくしています。

 

 

 

06. レイアウトをわずかに調整しよう。

 

より機能的になるようにすこしだけ調整することで、すべての端末で同じように閲覧することができます。デスクトップでは画面中央に表示したナビメニューは、幅のせまいスクリーンサイズでは、画面上部に移動させ、文字サイズを小さく調整しています。

 

 

 

07. 一行の文字数を制限しよう。

 

文字コンテンツが豊富なサイトでは、各端末ごとに文字が読みやすいように、見出しタイトルとボディ・コピーのフォントサイズを調整しましょう。デスクトップではおよそ65-70文字（全角32-35文字）、スマートフォン端末では30-40（全角15-20文字）を目安にしてみましょう。

 

 

 

08. 小さな画面では、過度な装飾を取り除こう。

 

ビジュアル要素を少なくすることで、ページの読み込み速度を改善することができます。スマートフォン端末ではできるだけ要素を少なくするなど、ユーザーが閲覧している環境に合わせることが大切です。

 

 

09. 写真を均一よく切り取ろう。

 

上記サイトでは、どの端末でも同じイメージ写真が表示されますが、それぞれ端末ごとに切り取り位置をすこしだけずらしています。こうすることで全体のデザインが調和がとれ、統一感を保つことができます。

 

 

 

10. 最重要コンテンにフォーカスしよう。

 

異なるスクリーンサイズごとに、レイアウトを戦略的に変更することで、もっとも重要なコンテンツに着目でき、もっとも読みやすいデザインに仕上げています。スマートフォン端末ではナビメニューをシンプル化しているのが分かります。

 

 

 

11. カラム数を調整しよう。

 

こちらのサイトでは、デスクトップ時に４カラム、タブレット端末では2カラム、スマートフォン端末では１カラムとレイアウトが変化します。すっきりと読みやすいレイアウトで、リンクのクリックしやすさにも工夫しましょう。

 

 

 

12. カラム数を一定にしよう。

 

前ステップとは対称的に、参考サイトではどの端末においても、2カラムのミニマルな見た目がブランドイメージとぴったりです。特にイメージ写真のみが表示したいときに、有効的なテクニックのひとつ。

 

 

 

13. アニメーションさせるか考えよう。

 

デスクトップ端末でのみアニメーションが適用され、タブレットやスマートフォン端末では静止画を利用しています。アニメーションを利用するときは、異なるスクリーンサイズでうまく動作しているか確認が必要になるでしょう。
 

 

14. 背景イメージを検討しよう。

 

デスクトップ用とタブレットとスマートフォン用に、異なる2枚のイメージ写真を利用してみるのも良いでしょう。上記サイトでは、デスクトップでのみフルスクリーン動画を利用しています。

 

 

 

15. 写真をズームアップさせよう。

 

上記サイトでは、イメージ写真を拡大した写真をスマートフォンとタブレットでは利用し、デスクトップでは余白スペースを利用してオリジナル写真を配置しています。どちらも効果的な見た目を実現しています。

 

 

 

16. 文字サイズを調整しよう。

シンプルな白の背景に、すっきりとした太字テキストのみが利用された参考サイト。文字テキストがコンテンツのメインとなるときは、各端末や画面サイズごとにフォントサイズを変更してみましょう。

 

 

 

17. 文字テキストを少なくしよう。

 

上記サンプルでは、小さなスクリーンサイズ時に、もっとも重要となる情報のみに絞り、画像は非表示にしているのが分かります。

 

 

 

18. メニューを変更しよう。

 

デスクトップでは水平方向、タブレットとスマートフォン端末では垂直方向のナビゲーションメニューを利用しています。また小さなスクリーンサイズでは、メニューがボタンクリックで非表示されます。フォントと余白スペースを揃えることで、統一感のある見た目を実現し、スマートフォン端末でクリックしやすいように、ナビメニュー間スペースをやや広くしています。

 

 

 

19. デザインを首尾一貫させよう。

 

上記サイトでは各デバイスを通して、商品アイテムのカラム数と、一行の文字数を調整することで、とても統一感のあるデザインを実現しています。

 

 

 

20. 見出しタイトルを読みやすくしよう。

 

すべての見出しタイトルにサンセリフ書体を利用することで、はっきりと読みやすくしています。スクリーンサイズごとに、カラム数も変更させているのも分かります。

 

 

 

21. シンプルにしよう。

 

上記サイトではヒーローイメージに、白黒写真、ブランド名、文字テキスト、メニューのみを配置した、すっきりとしたレイアウトを採用しています。デザインをシンプルにすることで、コンテンツも複製しやすく、どんな端末でもミニマルな印象を与えます。

 

 

 

22. ディテールを最小化しよう。

 

上記サイトは、。デスクトップ端末では、すべてのディテールが表示されていますが、スマートフォンの端末ではフッターメニューとして、すっきりまとめられています。自分に合ったオプション設定でカスタマイズ、購入ができるのが特長です。

 

 

 

23. 同一ナビメニューを利用しよう。

 

上記サイトでは、すべての端末において半透明で背景の透けるナビゲーションメニューを採用しています。

 

 

 

24. スワイプ or スクロール。

 

ある研究では、デスクトップ・ユーザーは垂直方向へのスクロールを好みのに対して、スマートフォン端末ユーザーはスワイプ動作による水平方向のコンテンツ移動を好む、ということも分かっています。

 

 

 

25. メニューだけを表示しよう。

 

上記サイトでは、もっとも重要となるコンテンツのナビゲーションメニューのみを、スマートフォンやタブレット端末で表示しています。

 

 

 

26. ヘッダーを固定しよう。

 

ヘッダーを固定し、ウェブサイトの閲覧に必要なスクロール量を減らしてみましょう。上記サイトでは、下にスクロールするときはナビメニューを非表示にし、上にスクロールするときに再度ナビメニューが表示されるように実装されています。

 

 

 

27. ファーストビューを意識しよう。

 

ウェブサイトでは、ページを開いたときにまず表示される、ファーストビューのデザインが重要となります。異なる端末ごとにそれぞれデザインが変わってしまうので、上記サイトでは、常にファーストビューを意識し、ユーザーにまず何を見てもらいたいのか、じっくり検討されています。

 

 

 

28. 動きのある写真、動画を利用しよう。

 

上記サイトの背景デザインには、ループするGIFアニメーションが利用することで、ロゴデザインをうまく強調しています。またスマートフォンとやタブレット端末では、別の静止イメージ画を用意し、切り替えています。

 

 

 

29. レイアウトを再アレンジしよう。

 

上記サイトでは、各デバイスごとにすこしずつ異なるレイアウトが採用されています。デスクトップでは文字と写真を隣同士に並べ、よりスクリーンサイズの小さなタブレット端末では要素を垂直方向に重ね、スマートフォン端末ではもっとも重要な文字テキストのみを表示しています。

 

 

 

30. 巨大で複雑なグラフィックは避けよう。

 

上記サイトのように、複雑で動画などを利用している場合、スマートフォン端末にはあまり適していないので、不要な要素は省くようにしましょう。シンプルにし、もっとも重要なコンテンツ（このケースではお問い合わせ先）のみを表示してみましょう。

 

 

 

さいごに、。

 

新しい端末がどんどん登場しているので、複数のデバイスを利用したり、異なるソフトウエアバージョン、異なるスクリーンサイズを用いて、ウェブサイトがどのように表示されるか確認してみましょう。

 

 

参照元リンク : Responsive web design: What the Internet looks like in 2016 – Canva Design School