レスポンシブデザインの参考になるサイト30選
レスポンシブデザインは、様々なデバイスのレイアウトに対応できる手法です。
ただし、レスポンシブデザインはコンバージョン率にも直接影響するため、下記のような課題が生じるかと思います。
『自社に向いているレスポンシブデザインを見つけたい』
『お手本となるレスポンシブデザインの参考サイトが知りたい』
本記事では、個人または企業のホームページに合ったレスポンシブデザインを探している方へ向けて「レスポンシブデザインの参考になるサイト」「参考サイトを生かす考え方」を紹介しています。
※今回のコラム記事で掲載している情報は、記事公開日（2021年12月29日）時点になります
レスポンシブデザインの参考になるサイト30選
レスポンシブデザインの参考になるサイト30選を紹介します。
下記サイトから、自社に向いているレスポンシブデザインを見つけましょう。
1.Sparkbox
出典：Sparkbox
Sparkboxは、アメリカにあるソフトウェア企業のホームページです。
コンテンツをほとんど変更しない、シンプルなレスポンシブデザインといえます。
Sparkboxのようなレスポンシブデザインは、見栄えもよく、簡単に実装できるので参考にしてみましょう。
2.豊中名曲 TOYONAKA MEIKYOKU
豊中名曲は、大阪の豊中市に拠点を置く、日本センチュリー交響楽団のホームページです。
ホームページのレスポンシブデザインでは、サイドバーのナビゲーションをハンバーガーメニューに変更し、一部をヘッダー部分に採用しています。
メインコンテンツとなる画像の高さをキープすることで、スマートフォンから閲覧しても、インパクトを残しているのが特徴です。
3.森ノ宮駅前歯科
出典：森ノ宮駅前歯科
森ノ宮駅前歯科は、大阪の森ノ宮駅前にある歯科のホームページです。
グローバルナビゲーションは、パソコンやスマートフォンともにハンバーガーメニューを採用しています。
パソコンで表示されている診療時間は、スマートフォンのファーストビューの直下に配置されているので、ユーザーニーズを考慮したレスポンシブデザインといえます。
4.PLUS-X|STREAM
PLUS-X|STREAMは、オンラインによる対談・講演などのライブ配信サービスを提供する企業です。
グリッドレイアウトを採用した、スタイリッシュなデザインが特徴です。
スマートフォンで表示されるコンテンツを、うまく配置できているレスポンシブデザインといえます。
5.Fisherman japan
Fisherman japan（フィッシャーマン・ジャパン）は、漁師の育成や漁業の魅力を発信しているホームページです。
ファーストビューにフルスクリーンを採用しているため、インパクトのあるデザインとなっています。
スマートフォンから閲覧しても、インパクトが軽減されていないので、フルスクリーンを採用している方には、参考になるレスポンシブデザインといえるでしょう。
6.KINASHI art gallery GION
KINASHI art gallery GIONは、木梨憲武さんが運営する京都祇園にあるアートギャラリーのホームページです。
ホームページで表示されるサイドバーメニューを、ハンバーガーメニューにするシンプルなレスポンシブデザインとなっています。
画像コンテンツが中心になる方は、参考にしてみましょう。
7.Dropbox
出典：Dropbox
Dropbox（ドロップボックス）は、オンラインストレージサービスを提供する企業です。
流動的なグリッドと柔軟なビジュアルを使用して、クオリティの高いレスポンシブデザインを設計しています。
たとえば、パソコンからスマートフォンに移動すると、テキストの色が背景色に合わせて変化します。
各デバイスに合わせた最高のエクスペリエンスを提供しているレスポンシブデザインといえるでしょう。
8.GitHub
出典：GitHub
GitHub（ギットハブ）は、ソフトウェア開発のプラットフォームです。
パソコン用のホームページでは、コンテンツを見つけやすくする内部検索機能が設けられています。
一方、スマートフォン向けのホームページでは、内部検索機能が排除されています。
これは、スペースが限られているスマートフォンの煩雑さを軽減するためと考えられます。
9.Shopify
出典：Shopify
Shopify（ショッピファイ）は、ECサイトのプラットフォームを提供するサービスです。
スマートフォン用のグローバルナビゲーションは、ハンバーガーメニューを採用しており、よく見ると、メニューオプションが分割線で区切られています。
これは「認知ユーザー」と「検討ユーザー」2つのグループユーザーに対しての配慮が考えられます。
細かい部分まで考えられたレスポンシブデザインといえるでしょう。
10.Dribbble
出典：Dribbble
Dribbble（ドリブル）は、世界のトップデザイナーが作成したデザインを公開しているギャラリーサイトです。
Dribbbleのホームページでは、レスポンシブデザインの特徴である柔軟なグリッドを活用したレイアウトになっています。
スマートフォン向けのホームページでは、メインコンテンツであるクリエティブを１列に凝縮しています。
11.Slack
出典：Slack
Slack（スラック）は、チームコミュニケーションツールを提供する企業です。
Slackのホームページは、スマートフォン向けに最適化されたレスポンシブデザインといえます。
たとえば、スマートフォン用のコンバージョンボタンは画面中央にまとめるのではなく、列全体にまたがるように配置されています。
これは、ユーザーが誤って別のリンクをクリックしないための配慮だといえるでしょう。
12.CSS Tricks
出典：CSS Tricks
CSS Tricksは、プログラミングのテクニックを発信するメディアです。
CSS Tricksのホームページでは、画像などの項目をスライドさせる「カルーセル」を採用しています。
カルーセルは、スマートフォンから閲覧すると、スワイプするだけでコンテンツを切り替えられるので、利便性が向上します。
13.An Event Apart
An Event Apartは、プログラマー向けのセミナーを開催している企業です。
An Event Apartのレスポンシブデザインでは、デバイスが変わってもレイアウトを維持するように設計されています。
デバイスが変わっても、レイアウトを変更したくない場合は参考にしてみましょう。
14.New York City Ballet
New York City Balletのホームページのファーストビューでは、すべてのデバイスに対して動画を採用しています。
メインコンテンツの動画を閲覧して、直下の公演予定を確認してもらうための動線を意識したレスポンシブデザインといえるでしょう。
15.Paper Tiger
出典：Paper Tiger
Paper Tigerは、アメリカ・ニュージャージー州にあるデザイン会社です。
Paper Tigerのホームページでは、すべてのデバイスに対応した動的なアニメーションを採用しています。
コンテンツの行間隔を最適にするレスポンシブデザインにより、デバイスに関係なくアニメーションを楽しめる設計になっています。
16. WIRED
出典：WIRED
WIREDは、カルチャーやアイデアなどを発信するオウンドメディアです。
レスポンシブデザインでは、コンテンツに優先順位を付け、ユーザーが必要な記事にすばやくアクセスできるようになっています。
コンテンツ量が多いホームページを運用している方は、参考にしましょう。
17. ビクトリア＆アルバート博物館
ロンドンにあるビクトリア＆アルバート博物館（Victoria and Albert Museum）のホームページでは、スマートフォン向けのグローバルナビゲーションにハンバーガーメニューを採用しています。
スマートフォンユーザーの中には、ハンバーガーメニューを認識せずに直帰する方もいるため「MENU」というテキストを追加しているのが特徴です。
レスポンシブデザインを実装する上で、直帰率が課題になっている方は、参考にしてみましょう。
18.Popular Science
Popular Scienceは、サイエンス情報を発信するオウンドメディアです。
レスポンシブデザインにより、優れたユーザーエクスペリエンスを提供しています。
Popular Scienceでは、記事コンテンツが中心となるため、レスポンシブ画像とすっきりとしたタイポグラフィにより、どのデバイスからも閲覧しやすくなっています。
19. スイス国際航空
出典：スイス航空
スイス国際航空（通称SWISS）のホームページは、ユーザーの利便性を考慮したレスポンシブデザインが特徴です。
ホームページをパソコンとスマートフォンで見ると、重要なコンテンツを失うことなく、画面サイズと解像度に合わせて適切にレイアウトが最適化されています。
20.Spigot Design
Spigot Designは、アメリカのユタ州パークシティにあるWebデザインとマーケティング事業を展開する企業です。
ホームページのファーストビューには「Webデザインおよびデジタルマーケティングの専門家」という重要なメッセージが記載されています。
ファーストビューの高さを変えないレスポンシブデザインにより、どのデバイスから閲覧しても、メッセージが伝わりやすくなっています。
21.MGSM
出典：MGSM
MGSMは、イタリアのミラノ発のファッションブランドです。
MGSMのホームページにある「商品ページ」は、スマートフォンから閲覧しても商品画像が見やすいように設計されています。
ユーザーがどのコンテンツを一番求めているかを配慮したレスポンシブデザインといえます。
22.Design Made in Germany
出典：Dmig 5
Design Made in Germanyは、ドイツにあるWebデザインの会社です。
ホームページ内では、パララックス（遠近差を出したりするデザイン）が採用されています。
どのデバイスから閲覧しても、パララックス効果があるように設計されているのが特徴です。
デザインに特化したレスポンシブデザインを検討する方は、参考にしてみましょう。
23.More Hazards More Heroes
More Hazards More Heroesは、アメリカのテネシー州ナッシュビル出身のアーティストによるホームページです。
スマートフォンで表示されるコンテンツに関しては、優先順位を付けています。
たとえば、スマートフォン向けのホームページでは「アルバムダウンロード」「経歴」 など重要なコンテンツのみを表示しています。
コンテンツの非表示を考慮したレスポンシブデザインを実装したい方は、参考にしましょう。
24.Smashing Magazine
Smashing Magazineは、Webデザインの情報を発信するメディアです。
コンテンツ量は多いですが、適切なスペース確保とタイポグラフィにより、どのデバイスから閲覧してもナビゲートしやすいホームページになっています。
25.Flow Festival
Flow Festivalは、フィンランドで開催される音楽祭のホームページです。
音楽祭で一番重要な出演アーティスト紹介がメインコンテンツになっており、パソコン向けでは、左右交互のレイアウトが採用されています。
スマートフォン向けでは、ユーザーが混乱しないように一列ずつ、出演アーティストを掲載しているのが特徴です。
26.Magic Leap 1
Magic Leap 1は、物理世界とデジタル世界を1つに融合するウェアラブルヘッドセットです。
ホームページのファーストビューは、フルスクリーンが特徴的なデザインとなっています。
レスポンシブデザインにより、フルスクリーンがスマートフォン画面にピッタリ収まるようになっているのが特徴です。
27.Rally Interactive
Rally Interactiveのホームページは、今回紹介する参考サイトの中で、最も統一性に優れたレスポンシブデザインです。
Rally Interactiveでは、パソコンとスマートフォンで、全く同じレイアウトが表示されます。
違いとしては、パソコンでは2行で表示されるテキストが、スマートフォンだと3行になるところです。
28. VMLY&R
出典：VMLY&R
VMLY&Rは、マーケティング事業を展開する世界100か所以上にオフィスのある企業です。
VMLY&Rのホームページでは、解像度が小さくなると、3列のレイアウトから1列になるレスポンシブデザインを採用しています。
そのため、スマートフォンから閲覧してもコンテンツがうまく縮小されています。
29.Forefathers Group
Forefathers Groupは、ブランディングやロゴ制作などを行うデザイン会社です。
パソコンでホームページをみると、ファーストビューは人形を活用したユニークな動画が採用されています。
一方、スマートフォンから閲覧すると、動画が企業ロゴの静止画に切り替わります。
スマートフォンでの速度表示を考慮した、レスポンシブデザインといえるでしょう。
30.1987 Masters
出典：1987 Masters
1987 Mastersは、ロサンゼルスを拠点とするイベント制作会社です。
パソコン向けのホームページでは、マウスに合わせて特徴的なカーソルが動きますが、タブレットやスマートフォンでは非表示になります。
また、画像とテキストが1列にシフトされるため、スマートフォンユーザーの利便性を考慮したレスポンシブデザインといえます。
レスポンシブデザインに必要な考え方
最後に、今回紹介したレスポンシブデザインの参考サイトをどのように活かせばよいかの考え方を紹介します。
少なくとも3つのバージョンを設計する
レスポンシブデザインでは、少なくとも3つのバージョンを設計するようにしてください。
最低限必要なバージョンは下記3つです。
| サイズ | 詳細 |
|---|---|
| 小 | 600px未満（スマートフォン用） |
| 中 | 600px～900px（タブレット用） |
| 大 | 900px以上（パソコン用） |
レスポンシブデザインでは、ユーザーのデバイスに基づいて、コンテンツを最適に表示しなくてはいけません。
小さい画面サイズに収まるように縮小すると、コンテンツは読みにくくなりますが、参考サイトにもあったように、1列に切り替えると、はるかに読みやすくなります。
画像がどのように拡大縮小されるかを考える
レスポンシブデザインでは、画像がどのように拡大縮小されるかを考える必要があります。
「パソコン」「タブレット」「スマートフォン」ではどのように見えるかを、開発の視点から理解しなくてはいけません。
画像は画面サイズ幅にパーセンテージ値を指定して調整できるので、Google Chromeのデベロッパーツールなどを活用しながら、レスポンシブデザインを実施しましょう。
グローバルナビゲーションの重要性を理解する
レスポンシブデザインでは、グローバルナビゲーションの重要性を理解する必要があります。
グローバルナビゲーションは、ホームページ全体のWebページに表示されるリンクを指します。
基本的にスマートフォン向けのグローバルナビゲーションは「ハンバーガーメニュー」が採用されることが多いです。
ただし、このハンバーガーメニューを上部に設置するか、下部に設置するかでもユーザーの利便性が変わってきます。
実際にスマートフォンからホームページを閲覧し、どんなグローバルナビゲーションが最適か試行錯誤してみましょう。
まとめ
レスポンシブデザインの参考になるサイト30選を紹介しました。
レスポンシブデザインに必要な考え方は下記3つです。
- 少なくとも3つのバージョンを設計する
- 画像がどのように拡大縮小されるかを考える
- グローバルナビゲーションの重要性を理解する
今回のコラム記事で紹介した参考サイトをもとに、最適なレスポンシブデザインを設計してみましょう。
また、当サイト「ビズサイ」ではホームページ制作サービス（サブスクリプション）を提供しています。
ビズサイでは、ホームページの目的に合わせて3種類のプランを用意しており、お申込みから公開まで最短5営業日でホームページ制作ができます。
ビズサイで制作する全てのホームページは、レスポンシブデザイン対応です。
レスポンシブデザインでお悩みの方は、ビズサイにお気軽にご相談くださいませ（詳しいプラン内容はこちら）。
まずは無料でご相談ください。
お問い合わせ・ご相談や、公開後の修正依頼などに関しては、いずれかの方法にてお問い合わせください。
※年末年始・土日祝は定休日となります
※受付時間 9：00～17：30
