スマホ対応!レスポンシブデザインの参考になるサイト10選

Webサイト作成に欠かせないスマホ対応ですが、レスポンシブWebデザインに対応したサイトをまとめているので、ぜひ参考にしてみてください。これからWebデザインを学ぼうと思っている人もサイト作成において見る目がつくはずです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

今や当たり前になっているスマホ対応のためにレスポンシブデザインを理解する必要があるでしょう。

レスポンシブデザインに対応したサイトをまとめているので、ぜひ参考にしてみてください。これからWebデザインを学ぼうと思っている人もサイト作成において見る目がつくはずです。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

NIKE A+S

%e3%83%ac%e3%82%b9%e3%83%9b%e3%82%9a%e3%83%b3%e3%82%b7%e3%83%95%e3%82%9901_01

皆さんもご存知NIKEのスニーカー紹介サイトです。

NIKEはブランドイメージもスタイリッシュで、それに似合うスタイリッシュなページになっています。

スマホで見ると、スライドショーでの表示だった靴の画像がブロックで表示されるようになります。こうしたレスポンシブの使い方もありだなと思わせてくれるデザインです。

NIKE A+S

 

アララ株式会社

%e3%83%ac%e3%82%b9%e3%83%9b%e3%82%9a%e3%83%b3%e3%82%b7%e3%83%95%e3%82%9901_02

IT企業のアララ株式会社のホームページです。

今流行りの動画背景を実装しており、ウインドサイズが縮まっても、ロゴの大きさを調節することで、バランスを保っています。

アララ株式会社

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

Body Wild

%e3%83%ac%e3%82%b9%e3%83%9b%e3%82%9a%e3%83%b3%e3%82%b7%e3%83%95%e3%82%9901_03

下着メーカーのホームページです。

こうした商品紹介サイトはスマホで見たときの見やすさが求められ、デザインの難易度が高いです。

商品の紹介サイトのデザインに迷った際は是非おすすめしたいページです。

Body Wild

 

The Steeple

%e3%83%ac%e3%82%b9%e3%83%9b%e3%82%9a%e3%83%b3%e3%82%b7%e3%83%95%e3%82%9901_04

非常にすっきりした印象を受ける、デザイナーのプロジェクトページです。

画面の背景幅によって、タイトルの位置を変更しています。

見やすさを考えたデザインが施されていることがわかります。

The Steeple

 

Hot Biscuits

%e3%83%ac%e3%82%b9%e3%83%9b%e3%82%9a%e3%83%b3%e3%82%b7%e3%83%95%e3%82%9901_05

子供向け用具メーカーのメーカーページです。

このページのようにスマートフォンで見た際、ヘッダーをプルダウンメニューに変更する手法はよく使用されます。ぜひ参考にしましょう。

Hot Biscuits

 

セメダイン スーパーX

%e3%83%ac%e3%82%b9%e3%83%9b%e3%82%9a%e3%83%b3%e3%82%b7%e3%83%95%e3%82%9901_06

一見派手目なデザインでレスポンシブにすると見にくそうな印象を受けますが、このページはそんなことありません。

CMに誘導できるよう、CMに注目できるよう、派手なデザインの中でも、視点をしっかり考えて作成されています。

セメダイン スーパーX

 

NEAT PRODUCT STORE

シンプルなECサイトです。

表示する商品数を絞り、スマホでも見やすいECサイトを作り上げています。ECサイトを作りたいと思っている方はぜひ参考にしてみてください。

NEAT PRODUCT STORE

 

山陽

%e3%83%ac%e3%82%b9%e3%83%9b%e3%82%9a%e3%83%b3%e3%82%b7%e3%83%95%e3%82%9901_08

レスポンシブデザインは端末画面と合わせて背景も縮めてあまり表示を変えないようにするのが一般的です。

しかしこのサイトは背景をさらに縮め、表示にアクセントをつけています。PCの場合は、黄色のレザーが目立ち、スマホの場合は、山陽のロゴが目立つような作りになっています。

単純にサイズを合わせるだけでなく、表示するものを変えてみても良いでしょう。

山陽

 

Digmee

%e3%83%ac%e3%82%b9%e3%83%9b%e3%82%9a%e3%83%b3%e3%82%b7%e3%83%95%e3%82%9901_09

PC表示時はスクロールでアクセントをつけていますが、スマートフォンの時は、スクロールのアクセントをなくし、TOPICを見やすくするデザインになっています。

スマートフォンで見るときは、一画面で与えられる情報量が少ないので、このページのように与えたい情報をダイレクトに与える工夫が必要です。

Digmee

 

phonogram

%e3%83%ac%e3%82%b9%e3%83%9b%e3%82%9a%e3%83%b3%e3%82%b7%e3%83%95%e3%82%9901_10

Web制作会社、phonogramの自社ページです。

スマートフォンで見たとき、遷移ボタンを多めに配置し、見やすいページを作成しています。

phonogram

 

以上、レスポンシブデザインのWebサイトを紹介しました。

PCで見ても、スマホでも見ても非常に見やすく出来栄えも良いでしょう。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。