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

総務省が行った調査によると、日本におけるスマートフォンを保有する世帯の割合が、2017年にPCを上回りました。Webサイトはもはやデスクトップだけではなく、スマートフォンやタブレットなどの「モバイル端末」からアクセスされることも考慮しなければなりません。そのとき鍵となるのが、レスポンシブWebデザインです。

この記事では、レスポンシブWebデザインの参考になる12サイトご紹介します。今回は『BeTheme』に掲載されている500以上のWebデザインから、最新トレンドのものを厳選しました。

1. モバイル＆デスクトップ双方でミニマルに

デザイナー兼デベロッパーのロブ・グラボウスキー氏のWebサイトが、モバイル上でどのように表示されるのか見てみましょう。

ナビゲーションが写真の邪魔をせず、さらにロゴも小さくデザインされているため、訪問者はメインメッセージに集中できます。

グラボウスキー氏のWebサイトでは、デスクトップ上でも同じような体験をすることが可能です。

モバイルのような小型のデバイスに対応を意識した結果、デスクトップ上でも無駄を省いたミニマルなWebサイトになっています。

StatCounterのデータによると、Webサイトのトラフィックの約51％は、モバイルデバイス上で行われているとのこと。またGoogle検索エンジンも、モバイルフレンドリーなレスポンシブWebサイトを評価しています。しかし、だからといってデスクトップユーザーを無視してよい訳ではありません。モバイルには劣るものの、デスクトップユーザーも依然として多く存在しています。

モバイル／デスクトップユーザー双方のUXを損なわない 、グラボウスキー氏のようなレスポンシブWebデザインを意識しましょう。

2. モバイルでは重要な情報のみを表示

berepairのWebサイトは、訪問者が重要な情報に集中できるよう工夫されています。

モバイルのような小さな画面に、情報すべてを詰め込むのは難しいです。ユーザーが意思決定をしやすいように、余分なコンテンツは削りましょう。

3. 横向き or 縦向きを考慮

『BeRestaurant』のデスクトップ版も、情報を最小限に抑えたWebサイトの例です。

モバイル版では横幅を活用できないため、メッセージを中央に移動させる工夫をしています。

デスクトップ上とモバイル上で表示されるWebサイトのフォーマットについて考えてみましょう。デスクトップでは横向きのフォーマットですが、モバイル上では縦向きのフォーマットが主流です。

横長の画像を縦長の画像に変換したことがある人なら、向きを変えるときに何をするべきか知っているはず。一般的には、重要でないコンテンツを切り取ったり、重要な情報を中央に移動させたりしますよね。

情報の取捨選択や配置の変更は、レスポンシブWebデザインを考える上で大切です。

4. 端末によるデザインの変化を少なく

『BeITService』のデスクトップ版Webサイトは、次のようになっています。

HPのヒーローエリアは非常にすっきりとバランスが良く、明確なメッセージが伝わってきますね。

また、モバイル上での表示方法からも分かるように、レスポンシブ対応しています。

画像の全体が表示されているわけではありませんが、デスクトップ版からモバイル版への移行において、ほとんど同じ画面が再現されています。

5. デバイスによってデザインを変更

『Culturally Connected』のWebサイトも、レスポンシブ対応になっています。

デスクトップ版では、かなり凝った背景グラフィックを採用していますが、モバイル版では、そのデザインの一部のみを反映しています。

またモバイル版では、テキストは中央に配置されています。グラフィックの一部は下に移動しましたが、デスクトップ版と同様にテキストを妨害していません。

6. デバイスによって要素を変更

『BeTutor』のデスクトップ版Webサイトは、以下の要素で構成されています。

• メインタイトル
• 小さなテキスト
• CTAボタン
• 横に長いナビゲーション
• グラフィック

一方モバイル版では、以下のような工夫がなされています。

• メインタイトルは残したまま、小さなテキストを削除
• 窮屈にならないように、メインメッセージとCTOボタンはグラフィックの上に移動
• 横に長いナビゲーションから、ハンバーガーメニューへと変更

7. 縦のスペースを有効活用

以下の画像は、『1987 Masters』のデスクトップ版Webサイトになります。

モバイル版では、黒色のスペースを小さくし、メインメッセージの配置を替えて、新しいメッセージ（”WHO WE ARE”）を追加しています。

モバイル画面では縦のスペースをより有効に活用できるため、そのスペースに新しいメッセージを入れています。

コンテンツの量を減らしても満足のいくデザインにならない場合は、空きスペースの活用や異なる比率の採用を検討してみましょう。

8. デスクトップは横に広く、モバイルは縦に広く

『BeCosmetics』も、1987 Mastersと類似のアプローチを採用しています。まずは、デスクトップ版のWebサイトを見てみましょう。横の画面いっぱいに製品を表示しています。

続いてモバイル版です。縦のスペースを活用して、テキストコンテンツを追加していますね。デバイスの特徴に合わせて、コンテンツを増やしたり減らしたりするのは大切です。

9. 入らない要素は思い切ってカット

『BeDanceSchool』のデスクトップ版Webサイトを見てみましょう。

このWebサイトをモバイル上の縦長フォーマットに詰め込もうとしても、うまくいきません。

メインメッセージの周りにあるファンキーなグラフィックを排除することは、ひとつの手です。さらにページ下部の画像を一部削除するのも有効でしょう。

10. ひとつの画面で完結を

『Basecoat』は、適切なフォントスタイルとサイズが、HPをより魅力的にすることを表した好例です。

一番伝えたいメッセージと写真が、ひとつの画面に収まっています。ユーザーがスクロールせずともテキストを読み終えられるように、適切な位置でメインコンテンツを終わらせましょう。

11. 動画もレスポンシブに

『The Scott Resort 』では、初めて訪れる人に動画を見せています。

この動画は、自動でユーザーの画面幅に合うデザインとなっています。ワイドスクリーンを採用したデスクトップ版では、以下のような表示です。

モバイルで同じ動画を見た場合、このような見た目になります。

デバイスに合わせて動画の表示方法を変えるのも大切です。

12. ユーザーが再訪する仕組みを整える

多くのトラフィックがモバイル上で発生していますが、WebFXの調査によると、モバイルからのCVR（コンバージョン率）はデスクトップからのCVRよりも低くなっています。同調査では、デスクトップが購買目的で多く使われるのに対して、モバイルは情報検索目的で多く使われているとされます。つまりユーザーは、「検索」という目的が終わったら、モバイル経由でWebサイトを再訪する必要がなくなるのです。

以下の『BeClub』のWebサイトは、そんなCVRの問題に対処した好例です。

BeClubでは、デスクトップとモバイルで同じデザインが採用されていますが、モバイル版の方が優れたパフォーマンスを発揮しています。

その秘訣は、電子メールを活用すること。電子メール経由で再訪できる仕組みを整えているため、モバイルでもデスクトップに負けないCVRを保っています。

ユーザーが再訪できる仕組みを整えることも、レスポンシブなWebデザインを考える上で大切なポイントです。

レスポンシブWebデザインで気をつけたいポイント

本記事で紹介したレスポンシブWebデザイントレンドを踏まえると、デザインを構成する際には次のポイントに気をつけるべきでしょう。

• 余分なコンテンツを排除する
• 空きスペースを活用する
• 横画面／横画面を使い分ける
• ビジュアルコンテンツに焦点を当てる
• ファーストビューで完結させる
• リード獲得を意識する

レスポンシブなWebデザインを意識すれば、モバイル／デスクトップともに優れたUXを提供できます。今回ご紹介したWebサイトを参考に、多くのユーザーにとって使いやすいデザインを作ってみてください。

（執筆：Editorial　翻訳：Sato Mizuki　編集：Kimura Yumi）