レスポンシブWebデザインで作られたサイト15選

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

近年、スマートフォンの普及が増えると同時に端末の種類も増えつつある中で、あらゆる端末に適応するウェブデザインについて考え直され始めています。その中で、2010年5月、米国のイーサン・マルコッテ氏によって提唱された「レスポンシブWebデザイン」という制作手法が海外から注目され始めてきています。「レスポンシブWebデザイン」とは、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます(※1)。これは、ユーザーにはもちろん、制作者に対してもメリットのある制作手法であるので、今後はより必要性が高まるのではないかと思われます。なお、これからはウェブサイトを作っていく必要がある理由がこちらでよりわかりやすく説明されています。

そこで今回は、この手法の重要性を知る具体的な「レスポンシブWebデザイン」を採用しているサイトをご紹介します。(※端末用サイズの確認は、PCからでもブラウザサイズの伸縮で確認できます。)

 

Starbucks Coffee Company

人気が衰えることのないStarbucks Coffee。サイトのデザインは複雑になり過ぎずないシンプルさにコーポレートの誇りが感じられます。

Starbucks Coffee Company

 

Bread & Pepper

アップルライクなシンプルデザインです。シンプルさを徹底し、見やすさを追求しているところがとても魅力的です。

Bread & Pepper

 

Path

iPhone & Androidアプリ「Path」の紹介サイトです。シンプルさと清潔感が目を引き付けます。

 Path

 

Clean Air Commute Challenge

全体的に爽やか&キュートな雰囲気と清潔感の漂うレイアウトが際立っているうえに、レスポンシブデザインがより魅力をを引き立たせてています。ブルー背景にポイントのイエローが、端末の種類によって色々な印象の変化をもたらせるところも魅力の一つです。

 Clean Air Commute Challenge

 

NHKスタジオパーク

要素がきれいに整頓され、とても親しみやすいサイトです。サイトイメージを全く崩さない柔軟な配置替えが見事です。

 NHKスタジオパーク

 

TOKYO KI ケイアイスター不動産

近代的なすっきりかつダイナミックなグリッドデザインが魅力的なサイトです。見ているユーザーを疲れさせません。

 TOKYO KI ケイアイスター不動産

 

Microsoft

こちらはPreviewページのみですが、Windows8デザインを踏襲したすっきりと清潔感のあるレイアウトが丁寧に配置されています。

 Microsoft

 

Deren Keskin

タイポグラフィーをダイナミックに採用していて見ていて気持ち良いサイトです。この「ダイナミック」さが、画面サイズ変化時にもしっかり反映されています。

 Deren Keskin

 

Barack Obama

アメリカのオバマ大統領の公式サイトです。画面サイズ変更時にはメニュー選択時の表示形式が変化するという柔軟な発想が魅力的です。

 Barack Obama

 

Spigot Design

ステッチ素材がかわいいサイトです。端末対応時のボタンの配置位置にも注目すると面白いです。

 Spigot Design

 

大分健生病院

レイアウトは見やすくインタラクションはユーザーに優しいサイトです。サイズ変更時もやはりユーザー想いなレイアウトの再配置がされています。トップ画像のトリミング具合もぜひ注目して見てみてください。

 大分健生病院

 

株式会社クライマークス

まず、PCで見てもiPadを使用しているような操作感が味わえるところがユニークです。その上シンプルなレスポンシブWebデザインが存在感を高めています。

株式会社クライマークス

 

Leica Explorer

ライカカメラの特設サイトです。黒を基調とした高級感あふれる世界観と製品のロゴカラーをポイント色とし、サイトのメリハリを強めています。無駄を省き最低限度な情報の表示方法がとても参考になります。

Leica Explorer

 

The Boston Globe

サイズ変更時のコラム配列の変化に注目して見てみると、このサイトの素晴らしさが分かります。

 The Boston Globe

 

Sparkbox

アイコンの表示で一目でこのサイトはレスポンシブルWebデザインだと分かります。こういった表示は、何も知らず訪れたユーザーにとっては重要な役割を果たしています。

Sparkbox

 

(※1)引用元:「レスポンシブWebデザイン」説明の参考元 ゼロから始めるレスポンシブWebデザイン入門 ― 第1回 レスポンシブWebデザインとは