Designerにて、WEBページトレースの課題に取り組みました。デザインガイドラインの作成と、PCとSPでデザインが異なる点やレイアウトの分析を行い、結果をまとめました。20231トレースしたLP株式会社エイチームのコーポレートサイトのLPトレースをしました。◾️ターゲット老若男女問わずAteamに関心があり、企業の全体的な情報を知りたい人。就職希望者から株主、取引先まで広く対象としていると思われる。企業に関する情報を全て集めたサイトを作ってブランディングするとともに、ターゲットから企業への理解を深めてもらう。全ての情報を集約したHPを作ることで、ターゲットが情報を探す労力を減らす。◾️トレース使用されているフォントを調べる際、検証ツールでは分からないものも、Photoshopの”マッチフォント”を使うなどしてなるべく同じものを探した。元のWEBサイトで使用されている画像も全てダウンロードし、完全再現できるようにした。◾️PCとSPのデザインで異なる点の比較PCとSPでの比較箇所が分かりやすいように、四角で囲って線で繋いだ。その際、線が元画像に埋もれないように、鮮やかな色を選択した。線を全て違う色にすると見づらくなるので5種類に絞り、同じ色が隣り合わない配置にした。SP版のページトップボタンの分析について、より分かりやすくなるようにモックアップを掲載した。◾️WEBサイトを構成する各要素の基本サイズ見出し、本文、フッターなど、場所毎の適切なフォントサイズや余白サイズ、各セクションはどのくらいの大きさだと画面に丁度良く収まるのかなど、WEBサイトの構成要素の適切なサイズ感が掴めた。◾️配色コーポレートサイトでは、ブランドのイメージをより強固にするために、できるだけブランドカラーに絞った配色を守ると効果的だということを改めて学んだ。配色がシンプルで落ち着いていても、挿入する画像の色味やサイズ、場所によって全体の印象は大きく変わるので、最終的には色以外の要素との調和も加味した選択が大切だと学んだ。◾️余白WEBサイトの余白は8の倍数が多いと聞いていたが、今回トレースしたサイトはそうではなかった。8の倍数には様々メリットもあるが必ずしもそれにこだわる必要はなく、それよりも規則を作って守り、統一感を出す事がより重要だということを学んだ。Downloaderなどの拡張機の使い方を学んだ。FollowWebデザイナーWebデザイナーです。「クライアントの課題を解決できるデザイン」を大切に、要件定義、ペルソナ設定、ユーザーストリー・情報設計など、デザインの基盤部分を丁寧に行う事を心がけて制作しています。