【課題】Webサイトトレース

①対応範囲：LPトレース、スタイルガイド、PCとSPのレイアウトについて
②使用ツール ：Photoshop
③制作時間：１週間
④実施年月：2025年7月 

スタイルガイド

PCとSPのレイアウトについて

工夫したところ

・画像の配置について、検証ツールで確認し、お手本と同じサイズで配置。

・フォントサイズ、トラッキング、ウェイトについても検証ツールで調べ、トレースした。

・ドロップシャドウも位置やぼかしの範囲、カラーを確認し、どれくらいの影をつけると自然なのか確認しながらトレースを行った。

学んだこと

・ctaボタン、message sectionなど、デザイン性の高いように見える箇所でも画像としていれるのではなく、コーディングすることで再現している。

・カードコンテンツにすることで、情報量の多いWebサイトでもスムーズに情報が頭に入ってくる。

・スマホ表示のレスポンシブ対応では、単に縦積みにするだけでなく、左揃えにする、ハンバーガーメニューにするなど、多数の工夫がなされている。