【課題】LPトレース

目次

1.トレースしたLP

2.スタイルガイド

3.デザイン比較

4.工夫したポイント

5.制作を通して学んだこと

1.トレースしたLP

SHE株式会社が運営するSHEWORKSのLPをトレースしました。
（実際のサイトはこちら）

2.スタイルガイド

Chromeの検証ツールを用いて、配色、フォント、余白の分析を行いました。

3.デザイン比較

PCとSPを比較し、レスポンシブデザインの分析を行いました。

4.工夫したポイント

1.画像で配置している文字レイアウトもフォントを調べて確認
・細かなレイアウトも知ることによりデザインの意図をより理解できるのではないかと考え、画像で配置されている素材もできる限りトレースをしました。
・文章の中で英文のみフォントを変更している箇所があり、CSSでは実装が難しいものを画像にして配置していることを学びました。

2.デザインの意図を読み取ったスタイルガイド
・COLORS/TYPOGRPHY/SPACINGに分けて作成しました。検証ツールでレイアウトを読み取り、デザインの意図を考えました。

3.PCとSPの違いを分析
・PCでは横並びだがSPになると何故縦並びになるのか情報の優先度やユーザーに伝えたい内容などを汲み取って分析をしました。

5.制作を通して学んだこと

1.色のまとまり
・使用するカラーが多い印象がありましたがまとまりを感じました。主にベースカラーやグレースケールを使用し、赤や黄など鮮やかな色はアクセントとして使用することで統一感のあるデザインがされていると感じました。
・色味のあるのもにはグラデーションをつけることで抜け感があるデザインになっていると思いました。

2.情報の優先度
・PCとSPでは横幅が異なるため、情報の優先度をつけてカルーセルや縦並びにしていることがわかりました。ユーザーがスクロールする回数を減らしつつ最後まで辿りつくことができるようにしていました。