コーポレートサイトのLPトレース

①トレースしたLP

株式会社エイチームのコーポレートサイトのLPトレースをしました。

②デザインガイドライン

③PCとSPのデザインで異なる点の比較

④その他の分析

◾️ターゲット

老若男女問わずAteamに関心があり、企業の全体的な情報を知りたい人。

就職希望者から株主、取引先まで広く対象としていると思われる。

◾️目的

企業に関する情報を全て集めたサイトを作ってブランディングするとともに、ターゲットから企業への理解を深めてもらう。

全ての情報を集約したHPを作ることで、ターゲットが情報を探す労力を減らす。

⑤工夫した事

◾️トレース

使用されているフォントを調べる際、検証ツールでは分からないものも、Photoshopの”マッチフォント”を使うなどしてなるべく同じものを探した。

元のWEBサイトで使用されている画像も全てダウンロードし、完全再現できるようにした。

◾️PCとSPのデザインで異なる点の比較

PCとSPでの比較箇所が分かりやすいように、四角で囲って線で繋いだ。その際、線が元画像に埋もれないように、鮮やかな色を選択した。また、線を全て違う色にすると見づらくなるので5種類に絞り、同じ色が隣り合わない配置にした。

SP版のページトップボタンの分析について、より分かりやすくなるようにモックアップを掲載した。

⑥課題を通して学んだ事

◾️WEBサイトを構成する各要素の基本サイズ

見出し、本文、フッターなど、場所毎の適切なフォントサイズや余白サイズ、各セクションはどのくらいの大きさだと画面に丁度良く収まるのかなど、WEBサイトの構成要素の適切なサイズ感が掴めた。

◾️配色

コーポレートサイトでは、ブランドのイメージをより強固にするために、できるだけブランドカラーに絞った配色を守ると効果的だということを改めて学んだ。

また、配色がシンプルで落ち着いていても、挿入する画像の色味やサイズ、場所によって全体の印象は大きく変わるので、最終的には色以外の要素との調和も加味した選択が大切だと学んだ。

◾️余白

WEBサイトの余白は8の倍数が多いと聞いていたが、今回トレースしたサイトはそうではなかった。8の倍数には様々メリットもあるが必ずしもそれにこだわる必要はなく、それよりも規則を作って守り、統一感を出す事がより重要だということを学んだ。

◾️その他

トレースをする過程で、デベロッパーツールーやAwesome Screenshot、Image Downloaderなどの拡張機の使い方を学んだ。