【webデザイン制作の参考に】大手企業・銀行などのレスポンシブデザインを調査してみた!

アイコン+カード型のレイアウト

さまざまな企業のサイトで見られたのは、アイコン+カード型レイアウトのセットでした。

特に複数の事業案内や商品一覧で、2〜3カラムで配置されていました。

また、こんな工夫も見られました。

  1. 色分けをすることで、より視認性アップ
  2. なるべくTOPページの上段に配置することで、ユーザーのストレス軽減につなげる
大人の七難 ピースでいこう プリオール(PRIOR)|資生堂
プリオールは、自分らしく今を楽しみ、輝き続ける女性のために、大人ならではの悩みを研究し生まれた化粧品ブランドです。スキンケアからメイクアップ、ヘアケアまで、ラクに美しく、見た目も気持ちも幸せあふれるピースな毎日を応援します。


行き先に応じてボタンの矢印を変える

こちらは、TOYOTAのレスポンシブデザインです。

TOYOTAでは、「→」の場合は別ページへ飛ぶリンク、「」の場合はその詳細をアコーディオン式に表示するという区別化を図っています。

矢印の種類や向きを変えただけですが、これだけで視認性が断然あがりますね。



スライダーの導入

スライダーといえば、ファーストビューに配置されているイメージが多いですが

多くのサイトでその他のコンテンツに導入されていました。

スライダーの良さは、一つひとつ縦に並べるとボリュームがあるコンテンツも、

すっきりと納めることができますよね。

また、コンテンツの重要度にもメリハリをつけることができるます。



まとめ

今回は大手企業のレスポンシブデザインを調査してみました!

どのサイトも、「分かりやすさ」「見やすさ」に注力していて、改めてレスポンシブデザインのあり方を考えさせられました…

また、いかに視認性をあげるか、ユーザービリティを向上させるかもさまざまな工夫が施されており、大変勉強になりました!

コメント

タイトルとURLをコピーしました