【課題】LPトレース

◼️制作期間：約7日間

◼️使用ソフト：Photoshop

目次

① 見本とトレースしたLP
② スタイルガイド
③ PCとスマホでレイアウトが異なる部分を分析
④ 工夫したこと
⑤ 制作を通して学んだこと

① 見本とトレースしたＬＰ

 SHElikesでスキルを身に付けたリスキリング人材と、即戦力を求める企業のマッチングおよび人材の活躍を支援するサービス「SHE WORKS」のLPをトレースしました。

※引用元サイト：https://sheworks.shelikes.jp/

➁ スタイルガイド

③ PCとスマホでレイアウトが異なる部分を分析

④工夫したこと

背景や要素にグラデーションやドロップシャドウ、不透明度の部分が使われていたのと、クリッピングマスクを使って画像を角丸にしている部分が多かったので、cssで何度も確認しながら作成しました。

⑤制作を通して学んだこと

今まで何気なく見ていたサイトが、読み手のことを考えてこんなにも細かく作られているんだということを知ることができました。

・要素や余白に、規則性（４、８の倍数）がある

・見出しと本文の、文字サイズと濃淡をつけることで視認性が良くなる

・和文フォントと英文フォントで使用するフォントを使い分けている

・背景色やデザインのスタイルを、セクションごとに変えている