デザインを"見る"勉強（11）
お久しぶりです、1年ぶりになってしまいました、、
デザイン分析第11回目です。
会社のコンピテーションで、デザイン分析を月に1回更新していくって言ってしまったので実行していきたいと思います笑
1 最初の印象→どこからその印象を受けたのか
2 いいなと思ったポイント→レイアウト、余白、配色、文字組み(フォントサイズ、行間、文字間)、あしらい
3 レイアウト・余白を分析する→機能面(配置や視線誘導)
4 フォントの分析→サイズ、行間、文字間
5 色味の分析→フォント、全体
6 あしらい→印象を左右したり、視線誘導を行う、ブランドの刷り込み
7 アニメーション→動きの向き、スピード
本日も上記に沿って分析していきたいと思います。
今回はこちらのサイトです。
53west53 様
今後家族の都合で海外に行く可能性があることや、自分が海外のサイトが好きなので、今回は海外サイトの分析をしていきたいと思います。
１
・景色推しのホテル？不動産？（途中読み進めるまで、美術館系なのかホテルなのか、不動産なのか何のサイトか分からなかった）
・シンプルでラグジュアリー
・暖色系のカラーや夕日・夕焼けの写真が多いので、暖かい印象
・フォントがモダンでスタイリッシュなイメージ
２
・フォントのサイズや種類が統一されている
・フォントカラーもすべて統一されていること、そのカラーもすべての写真とマッチしていること
３
・FVの高さが、PCで見てもSPで見てもデバイスの高さになっている
・余白も全部rem指定されている
・本文が表示されそうな位置からナビーゲーション変化（PCも同じ）
→PC：カテゴリー4つずつが端に寄っている（等間隔に広がっていない）、ロゴが中央、bgはFVの映像でフォントは白#fff、問い合わせのみ下線あり
変化後：bgが白に（上から出てきた）、ロゴが左に動いてメインカラーの茶色、右端にメニューのみ
→SP：ロゴが中央はPCと同じ、SPは左端にメニュー、右端に問い合わせ（下線あり）
変化後：テキストの配置は変化前と同じだが、bgが白に（同じく上から出てきた）、フォントはメインカラーに
・PCはハンバーガーの中身は全体の半分まで出てくる、SPは全体100%出てくる
→SPはメニューが左にあるのに、中身が出てくるのはPCと同じで右から
・全体的なレイアウトは、テキストは全て左、画像の配置も規則性がある
→レイアウトごとにわざわざ余白はとっていないが、画像幅100%を利用して区切っているのかも？
・テキスト左寄せや、画像と画像の間（特に縦）に余白が空いているからカテゴリーごとに余白をとらなくてもいいのかも？（正直わかりづらいとは思うけど笑）
・フッターのインパクト！笑
→ロゴが画面幅いっぱいになっている
４
・タイトル・見出し：diagrid、11.2rem
・本文：bradford-web、2rem
・ボタン：hardt、1.8rem
5
・ベース：白 #fff、
・メイン：茶色 #8a6c60
・アクセントカラー：青空やプールのブルー、インテリアや外観で使用されているベージュ
・全体的にグレー・白寄りのベージュを使用
→高級感、優しい感じ、今っぽい、大人っぽい、シンプル
・htmlにstyleで色やopacityを当てている箇所もあった
6
・あしらいなし
7
・まずページを開いて読み込んでいる間に、ロゴ？が中央にきて
→そのロゴが画面上部中央に吸い込まれて、ヘッダーの一部になった！
・タイトルテキストも下から出てくる感じ
・FVがドローン映像になっているなーと思っていたら
→スクロールしたらヘッダーのデザインが変わった…！（PCではロゴが左に！３参照）
・ボタン、hoverしたら下線と一緒に矢印も次のが出てきた（日本語難しい）
・topに戻るボタンがフッター一番下中央（日本語サイトだとよくコピーライトが書いてある場所）にテキストで載っている
→クリックした直後はゆっくり→その後は速い速度で上昇
・カルーセルだけど、矢印などがない
→一定の速度で変化orテキストをクリックして表示
左下のテキストをクリックすると該当の画像が表示される
・カルーセルで右にしかない矢印＆画像全表示じゃない
→しかも下に線が引かれていて、全体でどのくらいあるかがわかるようになっている
その次の画像も見切れている
海外サイトだからなのか、全体的にjsかなり多めに使用していました！
フロンドエンドの観点からコードを見ると、aria属性を使用したアクセシビリティやdata-cky-tagのgtm（普通にiframeでも入っているけど）やdata-hidも組み込まれseo対策しているなーと感じました！
5月分が間に合わず日付越して2日ずれてしまった〜笑
ではまた次回！
この記事が気に入ったらサポートをしてみませんか？