レスポンシブwebデザインで参考にしたい事例10選


レスポンシブのweb制作で参考になる秀逸なレスポンシブwebデザインのサイトをまとめました。

単にレスポンシブに対応しただけでなく、随所にwebデザインのトレンドが取り込まれたり、ユーザビリティに配慮されたUIなど、特にクオリティの高い10サイトを紹介します。

メーカー・ECサイトの事例

サーモマグ

サーモマグ
http://thermomug.com/

シンプルなデザインながら、パララックス効果を使ってストーリー性をもたせ製品の魅力を表現しています。表の見せ方や動きのある背景など、細部にわたって決め細やかに作りこまれ、洗練されたイメージが伝わってきます。

パックスナチュロン

パックスナチュロン
http://www.paxnaturon.com/

白と緑を基調としたナチュラルな色使いと丸みを帯びたデザインで、やさしく安心感のある印象が残ります。
アニメーションを用いた演出も心地よく、天然由来の安心・安全な製品の魅力が伝わるデザインです。

Ringly

Ringly
https://ringly.com/

リング型のウェアラブルデバイスの製品サイト。
女性向けのファッショナブルなガジェットが、簡潔な情報と洗練されたデザインにまとめられ、アクセサリーのおしゃれなイメージと便利なガジェット機能が自然に伝わってきます。

コーポレートサイト・採用サイトの事例

みずほFG:新卒採用情報

みずほFG:新卒採用情報
http://www.mizuho-fg.co.jp/saiyou/index.html

整然としたグリッドデザインで、情報がシンプルでわかりやすくまとまっています。
スマホの画面では、メニューの中からプレエントリーとマイページのボタンが優先的に配置されるなど、各デバイスに向けた配慮も見てとれます。

Yahoo!JAPAN 採用情報

Yahoo!JAPAN 採用情報
http://hr.yahoo.co.jp/

トップでは背景動画を用いたりカーソルをあてると回転する人物写真などの演出があり、WHAT IS THIS NYMBERのページではピクトグラムを使ったフラットデザイン、社長メッセージではメリハリの利いた個性的なグリッドデザインなど、各ページに凝らした演出も目を引きます。

観光・旅行サイトの事例

福岡市公式シティガイド よかなび

福岡市公式シティガイド よかなびhttps://yokanavi.com/

ユーザが訪問した時間帯に応じてトップページ画像やオススメガイドが変化したり、スマートフォンを利用する旅行者に向けて現在地を起点とした検索機能を設けるなど、利用シーンを想定した情報提供で満足度を高める工夫が各所に見られます。

箱根湯本温泉 あうら橘

箱根湯本温泉 あうら橘http://www.aura-tachibana.com/

動画や写真をふんだんに使用しビジュアルを中心とすることで、リゾート旅館のイメージを直感的に表現しています。
白・黒のなかにコーポレートカラーの紫をアクセントで取り入れ、無駄を省いた和風な日本らしさも感じられるデザインになっています。

制作・開発サービスサイトの事例

アクセス解析の人工知能「AIアナリスト」

アクセス解析の人工知能「AIアナリスト」
https://wacul-ai.com/

アクセス解析の人工知能という一見難しく感じるサービスを、ポップなカラーと大胆なグリッド使いでわかりやすくすっきりとまとめています。
ユーザの知りたい情報が簡潔にまとまり、利用登録までの流れも非常にスムーズです。

Case 3D

Case 3D
http://www.case-3d.com/

斜めのラインがうまく取り入れられ、パララックス効果を利用した奥行きのある表現が楽しめます。広い余白にシンプルにまとめられたコンテンツ、コーポレートカラーのエメラルドグリーンの使い方など、優雅で清涼感のあるデザインにまとまっています。

デザイン事務所 SAGA INC.

デザイン事務所 SAGA INC.
http://www.sagainc.co.jp/

直線的で男性的な印象になりがちなグリッドを利用したタイルデザインをパステル調でまとめ、明るく軽やかな印象が残ります。
すっきりと余裕のある余白の使い方や、ブラウザのサイズを変えたときのタイルの動きも軽快で目にも楽しいサイトです。

SNSでもご購読できます。