レスポンシブデザインにすぐ使える！すごいアイデア30個
Post on:2016年3月4日
sponsors
サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。
レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。
Responsive web design: What the Internet looks like in 2016
以下、各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
- 01. 空白スペースを効果的に使う
- 02. ロゴの配置を一貫させる
- 03. 縦置きと横置きを考慮したデザイン
- 04. 縦長スクロールページの素晴らしいアイデア
- 05. 指のタップに合わせた形と大きさ
- 06. レイアウトにレスポンシブ用の微調整
- 07. 一行の文字数
- 08. 小さいスクリーンでは過度のビジュアル要素を減らす
- 09. 画像をクロップする
- 10. 最も重要な内容が目にとまるように
- 11. カラムの数を変更する理由
- 12. カラムの数を同じにするのも面白いアイデア
- 13. 異なるデバイスでのアニメーションの使い方
- 14. 異なるデバイスでの背景画像の使い方
- 15. 写真のポイントはクローズアップとワイドショットの使い分け
- 16. テキスト中心のコンテンツはフォントのサイズが重要
- 17. テキストを削除するのも一つの手
- 18. メニューをデバイスごとに変更する意味
- 19. 一貫したデザインでレスポンシブ対応に
- 20. 見出しは明確で、読みやすく
- 21. デザインをシンプルに保つ
- 22. デバイスごとのコンテンツの見せ方
- 23. デバイスごとに同じ要素を使う時のアイデア
- 24. デバイスごとにスクロールとスワイプを分ける
- 25. ページ全体をメニューにする
- 26. スティッキーヘッダを使う
- 27. 折り目を意識したデザイン
- 28. 動画を使った背景の扱い方
- 29. デバイスごとにレイアウトを最適化する方法
- 30. 大きくて複雑なグラフィックを使う場合
01. 空白スペースを効果的に使う
このサイトのデザインは、すべてのデバイスで整合性のあるレイアウトを実現しています。画像の幅だけでなく、テキストの配置もうまく機能しています。ポイントは空白スペースとネガティブスペースで、表示サイズが小さい時はテキストを画像の下に移動させ、読みやすくしています。
02. ロゴの配置を一貫させる
このサイトのデザインは、デバイスごとのスクリーンサイズいっぱいにさまざまな要素を配置しています。どのサイズのスクリーンでも円形のロゴは必ず同じ右側に配置されています。
03. 縦置きと横置きを考慮したデザイン
横置きのレイアウトはデスクトップなどの広いスクリーンでよく機能し、縦置きのレイアウトはタブレットやスマホでよく機能します。このサイトから分かるように、それぞれのデバイスのために横置きと縦置きのデザインを備えておくことはレイアウトが明確で、必要な情報を的確に伝えることができます。
04. 縦長スクロールページの素晴らしいアイデア
このサイトはよく見かける縦長スクロールのページですが、非常に素晴らしいアイデアが取り入れられています。縦長スクロールは当然、デスクトップで快適に機能します、そしてスマホではスクロールする必要性を排除するために重要なテキストを最上部に表示します。
05. 指のタップに合わせた形と大きさ
レスポンシブデザインで大切なことの一つは、ユーザーがどのようにスクリーン上のボタンやリンクを押すかです。デスクトップではマウス、そしてスマホやタブレットでは指を使用します。このサイトではボタンやリンクは非常に大きく、指でのタップ操作にやさしいデザインです。
06. レイアウトにレスポンシブ用の微調整
このサイトのデザインは、すべてのデバイスで同じように見えますが、ほんの少しの微妙な調整が非常によく機能しています。メニューへのリンクは常に左で、予約ボタンは常に右に配置されています。これは狭いスクリーンになってもテキストと干渉しないように、上部に移動します。
07. 一行の文字数
テキストが主体のサイトでは、特に読みやすいことに気をつける必要があります。それぞれのデバイスのために、見出しと本文のフォントサイズを調整します。1行の長さは、デスクトップでは60-75文字、スマホでは30-40文字が目安です。
※日本語の2バイト文字だと、半分の文字数が目安です。
08. 小さいスクリーンでは過度のビジュアル要素を減らす
スマホ時には、サイトのビジュアル要素の量を減らすのも一つの手です。このサイトではスクリーンサイズが小さくなるにつれ、ビジュアル要素の量を減らしています。
09. 画像をクロップする
このサイトではすべてのスクリーンサイズで、右側に同じイメージがあります。ポイントはスクリーンの幅に応じて画像をクロップさせ、重要な部分を必ず表示させています。これはビジュアルがもつ効果と役割を一貫した状態に保ちます。
10. 最も重要な内容が目にとまるように
異なるサイズのスクリーンのためにデザインをする時、何が注目されるか、何が目立たないか、戦略的にする必要があります。もちろん、最も重要な要素にフォーカスを合わせ、最も読みやすいデザインにしてください。
このサイトでは、最も重要なリンクを目立つ位置に配置し、スマホ時には過剰にならないように背景カラーの黒を取り除いています。
11. カラムの数を変更する理由
このサイトではスクリーンサイズごとにカラム数を変更しています。デスクトップでは4つ、タブレットでは2つ、スマホでは1つのカラムです。これはレイアウトを明確にし、テキストが読みやすく、リンクを押すことも簡単です。
12. カラムの数を同じにするのも面白いアイデア
11の「カラムの数を変更」とは対称的に、すべてのデバイスでカラムの数を同じにするのも面白いアイデアです。このコンテンツでは画像に伴うテキストがないため、読みやすさを確保するためにカラムのサイズを調整する必要はありません。
13. 異なるデバイスでのアニメーションの使い方
このサイトではトップの大きな画像を使って、アニメーションを使用しています。アニメーションはすべてのデバイスで完全に機能する必要があります。異なるアスペクト比でも、縦置きでも横置きでも、タブレットでもスマホでも同じように機能します。
14. 異なるデバイスでの背景画像の使い方
すべてのデバイスで同じ背景画像を使用すると、視覚的にうまく機能しないかもしれません。そんな時はデスクトップ用とスマホ・タブレット用の2つの背景画像を用意するのも手です。
15. 写真のポイントはクローズアップとワイドショットの使い分け
このサイトの写真の使い方は非常に面白いです。スマホやタブレットではクロップされたクローズアップ画像、デスクトップではフルサイズのワイドショット画像を使用しています。もし逆にクローズアップをデスクトップに、ワイドショットをスマホにしてしまうと効果的には見えません。
16. テキスト中心のコンテンツはフォントのサイズが重要
このサイトのアバウトページは、白い背景に黒のテキストだけを使った大胆でクリアなデザインです。テキストがメインなので、フォントのサイズが非常に重要です。フォントはスクリーンのサイズに応じて、最適なサイズで表示されます。
17. テキストを削除するのも一つの手
このサイトは小さいサイズのスクリーンで表示した時に、見た目が全く異なります。スマホ時には最も重要な情報をユーザーに届けるために、テキストや画像を削除しています。
18. メニューをデバイスごとに変更する意味
このサイトのメニューは、デスクトップ時は水平で、スマホ・タブレット時は垂直です。このメニューはスクロール時には、デスクトップでは常に上部に表示されており、スマホ・タブレット時にはアイコンの状態で表示されています。
ポイントは、使用しているフォントと空白スペースが一貫した見た目を保持していることと、小さいサイズのスクリーンでも押すことが簡単なボタンになっていることです。
19. 一貫したデザインでレスポンシブ対応に
このサイトはすべてのデバイスで非常に一貫したデザインを提供している素晴らしい例です。スクリーンサイズによって、カラム数は増減し、1行の文字数は変わり、メニューはスマホ時に上部に表示されます。
20. 見出しは明確で、読みやすく
それぞれのデバイスのためにカラムの数を調整し、明瞭なフォントを使うことで、記事の見出しは読みやすくなります。
21. デザインをシンプルに保つ
このサイトのデザインは赤いブロック、白黒の画像、ロゴ、テキストとメニューの選り抜きの要素で構成されています。デザインをシンプルに保つことは、どのデバイスでも操作を簡単にし、コンテンツを非常に見やすく分かりやすくします。
22. デバイスごとのコンテンツの見せ方
このサイトではナイフを販売しており、さまざまなオプションを組み合わせてナイフをカスタマイズできます。デスクトップとタブレットではすべてのオプションが表示された状態で、スマホではフッタにすべてのオプションが表示されます。
23. デバイスごとに同じ要素を使う時のアイデア
このサイトのメニューは、すべてのデバイスでまったく同じです。スクリーンが小さいサイズの時はコンテンツが隠れないように、透明にしているのがポイントです。
Brian Hoff Design
※この画像だと透明さが分かりにくいですが、実際はぎりぎり見えるくらいの不透明度です。
24. デバイスごとにスクロールとスワイプを分ける
ヤコブ・ニールセンの調査会社によると、スマホのユーザーは水平方向にスワイプして読むことが快適であると感じ、デスクトップのユーザーは垂直方向にスクロールして読むことが快適であると感じる結果がでています（調査報告書）。
このサイトではそれが取り入れられており、デスクトップでは垂直スクロール、タブレット・スマホでは水平スワイプが採用されています。
25. ページ全体をメニューにする
24のTeya Denkwerkのユーザビリティがわずかであると言うなら、このサイトは大胆で明白です。基本的にメニューがトップページです。最も重要な内容に導く4つのリンクがスクリーンいっぱいに配置されています。
26. スティッキーヘッダを使う
スティッキーヘッダの利点は、サイトをナビゲートするために必要なスクロールする量を減らすことです。下にスクロールする時に上部のナビゲーションバーが消え、上にスクロールすると、再び表示されます。これはすべてのデバイスで有益な機能です。
27. 折り目を意識したデザイン
折り目を考慮して、サイトのデザインをすることは重要です。しかし異なるデバイスのためにデザインすることは、スクリーンのサイズや縦置き・横置きで折り目が変化することを意味します。
それにも関わらずこのサイトでは折り目を考慮してデザインされており、ユーザーがスクロールする前のファーストビューで表示されるものが考慮されています。
28. 動画を使った背景の扱い方
キャプチャでは静止画ですが、このサイトのトップの背景には美しい動画が使われています。しかしデスクトップだけです、タブレットやスマホでは静止画を背景に使用しています。
29. デバイスごとにレイアウトを最適化する方法
このサイトのコンテンツは、それぞれのデバイスごとにコンテンツのレイアウトを変えています。デスクトップではテキストと画像はより広く配置されており、タブレットではそれらが積み重なり、スマホでは重要なコンテンツだけを届けるために画像はなくなります。
30. 大きくて複雑なグラフィックを使う場合
もしあなたのサイトに小さいスクリーンでは判別しにくい複雑な画像があるなら、小さいスクリーンでは削除してしまうのも手です。それはシンプルである状態を保ち、重要な要素だけを配置します。
sponsors
