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

OVERVIEW

SHElikes PRO デザイナーコース にて LPページトレースを行いました |スタイルガイド作成、LPトレース、PCとスマホ画面の分析 [制作時間:15H / 使用ツール:Photoshop]

YEAR 2025

1.制作物

◾️LPトレース

SHE株式会社「SHE WORKS for BIZ」のLPをトレースしました。


▼見本とトレース


▼PC画面とスマホ画面の分析



▼スタイルガイド



2.制作を通して学んだ点

1)配色は商品であるカードのカラーをアクセントとして起用

2)余白、フォントサイズは規則性をもって構成されている

3)取り入れるイラストや画像についても全体の統一感を崩さない配色をしている

4)テキスト量は多いがアンダーラインやカラーを使って読みやすい工夫をしている

5)スマホではタップしやすいよう、ボタンの大きさや余白が調整されている

6)画像の説明文は他の情報と比べると、その重要性から小さいフォントでまとめられている