ボーイのサイト分析まとめ25
多くの情報量をUIで格納。スッキリとした見映えでデザイン性も両立
車が出来るまでの工程を解説する工場見学のサイト。オフ、オンラインの両方に対応している総合サイトとなっている。膨大な情報量を１ページで収めているのだが情報が多い事による雑多な印象は無く、逆にスッキリと洗練された印象すらも感じさせてるサイトになっている。各種UIを使用した情報整理により、デザイン性も担保されたサイトとなっている。
詳細情報は全てモーダルに格納、スマホ閲覧を考慮した情報設計。
サイト全体では項目の一覧性が徹底しており、詳細な情報は全てモーダルで表示される仕様になっている。ターゲットのメインデバイスであるスマホに考慮して、ページが長くなり過ぎないようにモダールで細かく情報整理がされている。
スライダー＋２段回のアコーディオンを用いたUIの合わせ技
「クルマができるまで」のコンテンツではスライダー、２段回のアコーディオンを組み合わせてゴチャついた印象にならないように整理。スマホではスライダーではなく縦一列表示。PCと同じ仕様にするとかえって見辛くなるためスマホに合わせてUIを最適化している
フォントの色やウエイトを押さえて、洗練された印象に
見出しのフォントには「新ゴ」を使用。装飾のない均質なデザインでシステマチックな雰囲気が特徴的なフォント。機械によるオートメーションや工場の無機質な雰囲気などに合わせた選定となっている。フォントカラーはミドルグレーに寄った配色でウエイトは細く設定されている。フォントの主張を抑えることで、文字が多いことによる野暮ったい印象を緩和している。
今週の気になったサイト
エッジの効いたデザインが印象的なサイト。スタイリッシュなイメージのない題材ではあるが、デザインの見せ方を工夫する事でチーム全体が高見えする印象に仕上げている。
幼稚園、保育園系のサイトはPOPで装飾的なテイストに振り切るサイトが多い中で、こちらはシンプルでミニマムなテイスト。余計な装飾な無い分、メッセージやビジュアルをストレートに見せる構成になっている。
サイトのレイアウト自体は堅牢な構成だが、バナーやビジュアルの作り込みが高く単調な印象になっていない。ビジュアルを作り込むことでサイトのクオリティを担保している良い例。
画面設計の参考にチェック。ビューポート単位（vw、vh）に近い仕様ではあるがコンテナの幅のみを指定してクエリを実行したい場合に有効そうではあると感じた。（これに応用できそうという部分までは思いついてないが…）
この記事が気に入ったらサポートをしてみませんか？