デザイン上達のため行うwebトレース_03

デザイン上達のため行うwebトレースのログです。気づき・疑問もメモ

参考サイト

千葉銀行様　リクルートサイト　https://www.chibabank.co.jp/job/index.html

トレース結果

要素に関するメモ

デザインソース：手書きの文字、コーポレートカラー
書体：noto sans jp.　noto serif jp.　ROBOTO　手書きの日本語（50%程度の不透明度、noto serif jpに重ねてレイアウト）
カラー：#ed1d25（コーポレートカラー）と同系色、#161616（文字カラー）#f5f5f5（リンクボタン背景/背景）
アイコン・ボタン：ボタンは角丸無し　矢印アイコンは縦長
写真：オリジナルの人物写真、イメージ写真、銀行外観写真
グローバルメニュー：メガドロップメニュー、フッターも同レイアウトの配色替え
以下に要素まとめた

考察

静と動のバランス
銀行の信頼・安定の静の要素と、リクルートサイトのエネルギーと挑戦を喚起させる動の要素のバランスのとれたデザイン
・見出しの明朝体(静)に手書きの文字(動)を重ねる。
・コーポレートカラーの鮮やかな赤(動)を使用、配色のトーンジャンプは、ごくわずかな明暗差の範囲とモノクロ(静)
・スクロールエフェクトが上下に加えて左右からもある(動)。オブジェクトは横長の長方形のみにして安定感をだす。(静)

読みやすさの配慮
白文字と赤の背景は読みやすい配色とはいえないが、文字間隔を空けて読みやすさを改善している。

※考察追記予定