レスポンシブWebデザインで作られたサイト15選
近年、スマートフォンの普及が増えると同時に端末の種類も増えつつある中で、あらゆる端末に適応するウェブデザインについて考え直され始めています。その中で、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
![[Kinesis Video Streams] Jetson Nano上で各種ソースからの動画のアップロード 〜 kvssinkを利用する場合のGStreamerの使用方法](https://devio2023-media.developers.io/wp-content/uploads/2019/04/amazon-kinesis-video-streams.png)
