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

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

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

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

Rob GrabowskiのモバイルWebサイト

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

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

Rob GrabowskiのデスクトップWebサイト

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

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

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

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

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

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

BeRepairのWebサイト

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

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

『BeRestaurant』のデスクトップWebサイト

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

BeRestaurantのモバイルWebサイト

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

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

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

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

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

BeITServiceのデスクトップWebサイト

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

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

BeITServiceのモバイルWebサイト

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

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

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

Culturally ConnectedのデスクトップWebサイト

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

Culturally ConnectedのモバイルWebサイト

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

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

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

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

BeTutorのデスクトップWebサイト

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

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

BeTutorのモバイルWebサイト

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

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

1987 MastersのデスクトップWebサイト

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

1987 MastersのモバイルWebサイト

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

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

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

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

BeCosmeticsのデスクトップWebサイト

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

BeCosmeticsのモバイルWebサイト

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

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

BeDanceSchoolのデスクトップWebサイト

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

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

BeDanceSchoolのモバイルWebサイト

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

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

BasecoatのモバイルWebサイト

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

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

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

The Scott ResortのモバイルWebサイト

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

The Scott ResortのデスクトップWebサイト

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

The Scott ResortのモバイルWebサイト

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

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

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

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

BeClubのデスクトップWebサイト

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

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

BeClubのモバイルWebサイト

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

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

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

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

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

(執筆:Editorial 翻訳:Sato Mizuki 編集:Kimura Yumi)

いまの働き方に悩んでいるあなたへ。

「フリーランスとして働いているけど、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」

新しい働き方が加速するいまこそ、キャリアの選択肢を広げるフリーランス・複業・副業向けお仕事マッチングサービス『Workshipをのぞいてみませんか?

  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち50%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまなお仕事が掲載
  • 万一のトラブル時にも無料で賠償責任保険つき
  • マッチング〜面談まで全てWorkship内で完結
  • お仕事成約でお祝い金1万円プレゼント!

登録から案件獲得まで、いっさいお金はかかりません。詳細は以下ページをご覧ください!

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ