レスポンシブデザインの参考になるサイト30選【参考サイトを生かす考え方も紹介】

      

レスポンシブデザインは、様々なデバイスのレイアウトに対応できる手法です。

ただし、レスポンシブデザインはコンバージョン率にも直接影響するため、下記のような課題が生じるかと思います。

『自社に向いているレスポンシブデザインを見つけたい』
『お手本となるレスポンシブデザインの参考サイトが知りたい』
『参考サイトをどのように生かせばよいか知りたい』

本コラム記事では、個人または企業のホームページにあったレスポンシブデザインを探している方へ向けて「レスポンシブデザインの参考になるサイト」「参考サイトを生かす考え方」を紹介しています。

※今回のコラム記事で掲載している情報は記事公開日(2021年12月29日)時点になります

レスポンシブデザインの参考になるサイト30選

レスポンシブデザインの参考になるサイト30選を紹介します。

下記サイトから、自社に向いているレスポンシブデザインをみつけましょう。

1.Sparkbox

Sparkbox

出典:Sparkbox

Sparkboxは、アメリカにあるソフトウェア企業のホームページです。

コンテンツをほとんど変更しない、シンプルなレスポンシブデザインといえます。

Sparkboxのようなレスポンシブデザインは、見栄えもよく、簡単に実装できるので参考にしてみましょう。

2.豊中名曲 TOYONAKA MEIKYOKU

豊中名曲 TOYONAKA MEIKYOKU

出典:豊中名曲 TOYONAKA MEIKYOKU

豊中名曲は、大阪の豊中市に拠点を置く、日本センチュリー交響楽団のホームページです。

ホームページのレスポンシブデザインでは、サイドバーのナビゲーションをハンバーガーメニューに変更し、一部をヘッダー部分に採用しています。

メインコンテンツとなる画像の高さをキープすることで、スマートフォンから閲覧しても、インパクトを残しているのが特徴です。

3.森ノ宮駅前歯科

森ノ宮駅前歯科

出典:森ノ宮駅前歯科

森ノ宮駅前歯科は、大阪の森ノ宮駅前にある歯科のホームページです。

グローバルナビゲーションは、パソコンやスマートフォンともにハンバーガーメニューを採用しています。

パソコンで表示されている診療時間は、スマートフォンのファーストビューの直下に配置されているので、ユーザーニーズを考慮したレスポンシブデザインといえます。

4.PLUS-X|STREAM

PLUS-X|STREAM

出典:PLUS-X|STREAM

PLUS-X|STREAMは、オンラインによる対談・講演などのライブ配信サービスを提供する企業です。

グリッドレイアウトを採用した、スタイリッシュなデザインが特徴です。

スマートフォンで表示されるコンテンツを、うまく配置できているレスポンシブデザインといえます。

5.Fisherman japan

Fisherman japan

出典:Fisherman japan

Fisherman japan(フィッシャーマン・ジャパン)は、漁師の育成や漁業の魅力を発信しているホームページです。

ファーストビューにフルスクリーンを採用しているため、インパクトのあるデザインとなっています。

スマートフォンから閲覧しても、インパクトが軽減されていないので、フルスクリーンを採用している方には、参考になるレスポンシブデザインといえるでしょう。

6.KINASHI art gallery GION

KINASHI art gallery GION

出典:KINASHI art gallery GION

KINASHI art gallery GIONは、木梨憲武さんが運営する京都祇園にあるアートギャラリーのホームページです。

ホームページで表示されるサイドバーメニューを、ハンバーガーメニューにするシンプルなレスポンシブデザインとなっています。

画像コンテンツが中心になる方は、参考にしてみましょう。

7.Dropbox

Dropbox

出典:Dropbox

Dropbox(ドロップボックス)は、オンラインストレージサービスを提供する企業です。

流動的なグリッドと柔軟なビジュアルを使用して、クオリティの高いレスポンシブデザインを設計しています。

たとえば、パソコンからスマートフォンに移動すると、テキストの色が背景色に合わせて変化します。

各デバイスに合わせた最高のエクスペリエンスを提供しているレスポンシブデザインといえるでしょう。

8.GitHub

GitHub

出典:GitHub

GitHub(ギットハブ)は、ソフトウェア開発のプラットフォームです。

パソコン用のホームページでは、コンテンツを見つけやすくする内部検索機能が設けられています。

一方、スマートフォン向けのホームページでは、内部検索機能が排除されています。

これは、スペースが限られているスマートフォンの煩雑さを軽減するためと考えられます。

9.Shopify

Shopify

出典:Shopify

Shopify(ショッピファイ)は、ECサイトのプラットフォームを提供するサービスです。

スマートフォン用のグローバルナビゲーションは、ハンバーガーメニューを採用しており、よく見ると、メニューオプションが分割線で区切られています。

これは「認知ユーザー」と「検討ユーザー」2つのグループユーザーに対しての配慮が考えられます。

細かい部分まで考えられたレスポンシブデザインといえるでしょう。

10.Dribbble

Dribbble

出典:Dribbble

Dribbble(ドリブル)は、世界のトップデザイナーが作成したデザインを公開しているギャラリーサイトです。

Dribbbleのホームページでは、レスポンシブデザインの特徴である柔軟なグリッドを活用したレイアウトになっています。

スマートフォン向けのホームページでは、メインコンテンツであるクリエティブを1列に凝縮しています。

11.Slack

Slack

出典:Slack

Slack(スラック)は、チームコミュニケーションツールを提供する企業です。

Slackのホームページは、スマートフォン向けに最適化されたレスポンシブデザインといえます。

たとえば、スマートフォン用のコンバージョンボタンは画面中央にまとめるのではなく、列全体にまたがるように配置されています。

これは、ユーザーが誤って別のリンクをクリックしないための配慮だといえるでしょう。

12.CSS Tricks

CSS Tricks

出典:CSS Tricks

CSS Tricksは、プログラミングのテクニックを発信するメディアです。

CSS Tricksのホームページでは、画像などの項目をスライドさせる「カルーセル」を採用しています。

カルーセルは、スマートフォンから閲覧すると、スワイプするだけでコンテンツを切り替えられるので、利便性が向上します。

13.An Event Apart

An Event Apart

出典:An Event Apart

An Event Apartは、プログラマー向けのセミナーを開催している企業です。

An Event Apartのレスポンシブデザインでは、デバイスが変わってもレイアウトを維持するように設計されています。

デバイスが変わっても、レイアウトを変更したくない場合は参考にしてみましょう。

14.New York City Ballet

New York City Balle

出典:New York City Balle

New York City Balletのホームページのファーストビューでは、すべてのデバイスに対して動画を採用しています。

メインコンテンツの動画を閲覧して、直下の公演予定を確認してもらうための動線を意識したレスポンシブデザインといえるでしょう。

15.Paper Tiger

Paper Tiger

出典:Paper Tiger

Paper Tigerは、アメリカ・ニュージャージー州にあるデザイン会社です。

Paper Tigerのホームページでは、すべてのデバイスに対応した動的なアニメーションを採用しています。

コンテンツの行間隔を最適にするレスポンシブデザインにより、デバイスに関係なくアニメーションを楽しめる設計になっています。

16. WIRED

WIRED

出典:WIRED

WIREDは、カルチャーやアイデアなどを発信するオウンドメディアです。

レスポンシブデザインでは、コンテンツに優先順位を付け、ユーザーが必要な記事にすばやくアクセスできるようになっています。

コンテンツ量が多いホームページを運用している方は、参考にしましょう。

17. ビクトリア&アルバート博物館

ビクトリア&アルバート博物館

出典:ビクトリア&アルバート博物館

ロンドンにあるビクトリア&アルバート博物館(Victoria and Albert Museum)のホームページでは、スマートフォン向けのグローバルナビゲーションにハンバーガーメニューを採用しています。

スマートフォンユーザーの中には、ハンバーガーメニューを認識せずに直帰する方もいるため「MENU」というテキストを追加しているのが特徴です。

レスポンシブデザインを実装する上で、直帰率が課題になっている方は、参考にしてみましょう。

18.Popular Science

Popular Science

出典:Popular Science

Popular Scienceは、サイエンス情報を発信するオウンドメディアです。

レスポンシブデザインにより、優れたユーザーエクスペリエンスを提供しています。

Popular Scienceでは、記事コンテンツが中心となるため、レスポンシブ画像とすっきりとしたタイポグラフィにより、どのデバイスからも閲覧しやすくなっています。

19. スイス国際航空

スイス航空

出典:スイス航空

スイス国際航空(通称SWISS)のホームページは、ユーザーの利便性を考慮したレスポンシブデザインが特徴です。

ホームページをパソコンとスマートフォンで見ると、重要なコンテンツを失うことなく、画面サイズと解像度に合わせて適切にレイアウトが最適化されています。

20.Spigot Design

Spigot Design

出典:Spigot Design

Spigot Designは、アメリカのユタ州パークシティにあるWebデザインとマーケティング事業を展開する企業です。

ホームページのファーストビューには「Webデザインおよびデジタルマーケティングの専門家」という重要なメッセージが記載されています。

ファーストビューの高さを変えないレスポンシブデザインにより、どのデバイスから閲覧しても、メッセージが伝わりやすくなっています。

21.MGSM

MGSM

出典:MGSM

MGSMは、イタリアのミラノ発のファッションブランドです。

MGSMのホームページにある「商品ページ」は、スマートフォンから閲覧しても商品画像が見やすいように設計されています。

ユーザーがどのコンテンツを一番求めているかを配慮したレスポンシブデザインといえます。

22.Design Made in Germany

Dmig 5

出典:Dmig 5

Design Made in Germanyは、ドイツにあるWebデザインの会社です。

ホームページ内では、パララックス(遠近差を出したりするデザイン)が採用されています。

どのデバイスから閲覧しても、パララックス効果があるように設計されているのが特徴です。

デザインに特化したレスポンシブデザインを検討する方は、参考にしてみましょう。

23.More Hazards More Heroes

More Hazards More Heroes

出典:More Hazards More Heroes

More Hazards More Heroesは、アメリカのテネシー州ナッシュビル出身のアーティストによるホームページです。

スマートフォンで表示されるコンテンツに関しては、優先順位をつけています。

たとえば、スマートフォン向けのホームページでは「アルバムダウンロード」「経歴」 など重要なコンテンツのみを表示しています。

コンテンツの非表示を考慮したレスポンシブデザインを実装したい方は、参考にしましょう。

24.Smashing Magazine

Smashing Magazine

出典:Smashing Magazine

Smashing Magazineは、Webデザインの情報を発信するメディアです。

コンテンツ量は多いですが、適切なスペース確保とタイポグラフィにより、どのデバイスから閲覧してもナビゲートしやすいホームページになっています。

25.Flow Festival

Flow Festival

出典:Flow Festival

Flow Festivalは、フィンランドで開催される音楽祭のホームページです。

音楽祭で一番重要な出演アーティスト紹介がメインコンテンツになっており、パソコン向けでは、左右交互のレイアウトが採用されています。

スマートフォン向けでは、ユーザーが混乱しないように一列ずつ、出演アーティストを掲載しているのが特徴です。

26.Magic Leap 1

Magic Leap One

出典:Magic Leap One

Magic Leap 1は、物理世界とデジタル世界を1つに融合するウェアラブルヘッドセットです。

ホームページのファーストビューは、フルスクリーンが特徴的なデザインとなっています。

レスポンシブデザインにより、フルスクリーンがスマートフォン画面にピッタリ収まるようになっているのが特徴です。

27.Rally Interactive

Rally Interactive

出典:Rally Interactive

Rally Interactiveのホームページは、今回紹介する参考サイトの中で、最も統一性に優れたレスポンシブデザインです。

Rally Interactiveでは、パソコンとスマートフォンで、全く同じレイアウトが表示されます。

違いとしては、パソコンでは2行で表示されるテキストが、スマートフォンだと3行になるところです。

28. VMLY&R

VMLY&R

出典:VMLY&R

VMLY&Rは、マーケティング事業を展開する世界100か所以上にオフィスのある企業です。

VMLY&Rのホームページでは、解像度が小さくなると、3列のレイアウトから1列になるレスポンシブデザインを採用しています。

そのため、スマートフォンから閲覧してもコンテンツがうまく縮小されています。

29.Forefathers Group

Forefathers Group

出典:Forefathers Group

Forefathers Groupは、ブランディングやロゴ制作などを行うデザイン会社です。

パソコンでホームページをみると、ファーストビューは人形を活用したユニークな動画が採用されています。

一方、スマートフォンから閲覧すると、動画が企業ロゴの静止画に切り替わります。

スマートフォンでの速度表示を考慮した、レスポンシブデザインといえるでしょう。

30.1987 Masters

1987 Masters

出典:1987 Masters

1987 Mastersは、ロサンゼルスを拠点とするイベント制作会社です。

パソコン向けのホームページでは、マウスに合わせて特徴的なカーソルが動きますが、タブレットやスマートフォンでは非表示になります。

また、画像とテキストが1列にシフトされるため、スマートフォンユーザーの利便性を考慮したレスポンシブデザインといえます。

レスポンシブデザインに必要な考え方

最後に、今回紹介したレスポンシブデザインの参考サイトをどのように生かせばよいかの考え方を紹介します。

少なくとも3つのバージョンを設計する

レスポンシブデザインでは、少なくとも3つのバージョンを設計するようにしてください。

最低限必要なバージョンは下記3つです。

▼スマホの場合は横にスクロールしてご覧ください

サイズ 詳細
600px未満(スマートフォン用)
600px~900px(タブレット用)
900px以上(パソコン用)

レスポンシブデザインでは、ユーザーのデバイスに基づいて、コンテンツを最適に表示しなくてはいけません。

小さい画面サイズに収まるように縮小すると、コンテンツは読みにくくなりますが、参考サイトにもあったように、1列に切り替えると、はるかに読みやすくなります。

関連記事

レスポンシブデザインの作り方については、以下のコラム記事でくわしく解説しています。

レスポンシブデザインの正しい作り方【便利なテンプレートサイトも紹介】

画像がどのように拡大縮小されるかを考える

レスポンシブデザインでは、画像がどのように拡大縮小されるかを考える必要があります。

「パソコン」「タブレット」「スマートフォン」ではどのように見えるかを、開発の視点から理解しなくてはいけません。

画像は画面サイズ幅にパーセンテージ値を指定して調整できるので、Google Chromeのデベロッパーツールなどを活用しながら、レスポンシブデザインを実施しましょう。

関連記事

レスポンシブデザインにおける最適な画像サイズについては、以下のコラム記事でくわしく解説しています。

レスポンシブデザインで画像サイズを最適化する方法【初心者向け】

グローバルナビゲーションの重要性を理解する

レスポンシブデザインでは、グローバルナビゲーションの重要性を理解する必要があります。

グローバルナビゲーションは、ホームページ全体のWebページに表示されるリンクを指します。

基本的にスマートフォン向けのグローバルナビゲーションは「ハンバーガーメニュー」が採用されることが多いです。

ただし、このハンバーガーメニューを上部に設置するか、下部に設置するかでもユーザーの利便性が変わってきます。

実際にスマートフォンからホームページを閲覧し、どんなグローバルナビゲーションが最適か試行錯誤してみましょう。

まとめ

レスポンシブデザインの参考になるサイト30選を紹介しました。

レスポンシブデザインに必要な考え方は下記3つです。

  1. 少なくとも3つのバージョンを設計する
  2. 画像がどのように拡大縮小されるかを考える
  3. グローバルナビゲーションの重要性を理解する

今回のコラム記事で紹介した参考サイトをもとに、最適なレスポンシブデザインを設計してみましょう。

また、当サイト「ビズサイ」ではホームページ制作サービス(サブスクリプション)を提供しています。

ビズサイでは、ホームページの目的に合わせて3種類のプランを用意しており、お申込みから公開まで最短5営業日でホームページ制作ができます。

ビズサイで制作する全てのホームページは、レスポンシブデザイン対応です。
レスポンシブデザインでお悩みの方は、ビズサイにお気軽にご相談くださいませ(詳しいプラン内容はこちら)。

ホームページに関する記事
人気記事ランキング
インカムを付けている女性

まずは無料でご相談ください。

011-640-1122(受付時間9:00~17:30)