【LPトレース】SHE WORKS（制作課題）

◼️制作期間：約7日間

◼️使用ソフト：Photoshop

目次

1.見本とトレースしたLP
2.スタイルガイド
3. PCとスマホでレイアウトが異なる部分を分析
4. 工夫したこと
5. 制作を通して学んだこと

1.見本とトレースしたＬＰ

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

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

2. スタイルガイド

Chromeのディベロッパーツールを用いて、配色・タイポグラフィ・余白の分析を行いました。

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

LPのターゲットと目的、PCとスマホのレイアウトで異なる部分の分析を行いました。

4.工夫したこと

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

・ただ要素をトレースするだけでなく、ディベロッパーツールを用いて余白やフォント、カラーなどを細部まで細かく確認し、調整を繰り返すことで、見本とほぼ同様のLPトレースを行いました。

・LPのトンマナに合わせてレイアウトやカラーを調整し、統一感のある見やすい資料を作成しました。

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

・今まで何気なく見ていたサイトが、見る人のことを考えてすごく細かく作られているんだということを知りました。見出しと本文の、文字サイズと濃淡をつけることで視認性が良くなることであったり、和文フォントと英文フォントで使用するフォントを使い分けていること、要素や余白には規則性があることなど、工夫している点が多く見られました。

・PCとSPでレイアウトの違いを分析することで、それぞれのユーザーへの読みやすさやUIの工夫をしている箇所をたくさん発見し、同じサイトでもデザインを変える重要性を感じました。