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

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

参考サイト

株式会社セキュアサイクル　https://secure-cycle.co.jp/

トレース結果

要素に関するメモ

デザインソース：コーポレートブランドロゴとカラーリング
書体：UD新ゴNT DB　DINNext　游ゴシック
カラー：メインカラーは企業ロゴの緑(#00A68D)と青(#0070BA) 文字カラーは黒(#333333)(#555555)　
メインイメージ：メッシュのグラフィックとロゴマークを使ったアニメーションの組み合わせ、
ボタン：box無しで文字とアンダーラインと矢印のセット。アンダーラインは緑から青のグラデーション。
アイコン：緑から青のグラデーション。シンプルな形状。小さめの角丸と角ばった手とピクトのアイコン　svgデータ
写真：会社ビルとオフィス風景の写真を背景として使用。色はモノトーン。
グローバルメニュー：シンプルなヘッダーメニューとハンバーガーメニューから出るメガドロップメニューを併用。
メニュー項目の前に数字を加えて、さらに配色で見やすさを向上。

考察メモ

2色使い
参考サイトをサーチしていてエメラルドグリーンとライトブルーの2色使いのサイトがしばしばあり、トレースしてみようを思った。
この2色、パワーバランスが同じ。どちらかが強調色ではない。アクセントにしたい箇所が複数ある場合、交互に使うことでデザインが単調にならずに済む。

左右2分割
1カラムだが左右中央から分割できるレイアウト。
スマートフォン版デザインにしたときに組みやすい。それだけだと単調になるので、背景に空きのずらしを入れている。

大きいコンバージョンボタン
ページ下のお問い合わせボタンがかなり大きめで横幅の96％。他のリンクボタンは背景白＋シャドウ・ボックスがないデザインで控えめ。それらと比べると、インパクト大

見せるガイドライン？
時々目にする縦ラインが薄っすらあるサイト。
ガイドラインが入ったままに見えて落ち着かないが、こういうデザインなのだろうか？