【課題】LPトレース

<制作概要>

＊使用ツール
　Photoshop
＊制作時間
　スタイルガイド：10h
　トレース：10h
　スマホ版との比較＆分析：4h

目次

1. 制作物
2. スタイルガイド
3. スマホ版との比較＆分析
4. LPの目的/ターゲット/ユーザーストーリー
5. 制作を通して学んだこと

1. 制作物

2. スタイルガイド

3. スマホ版との比較＆分析

4. LPの目的/ターゲット/ユーザーストーリー

目的：
SHEでスキルを身に付けた人を紹介し、即戦力で現場で活躍し会社に貢献すること

ターゲット：
人材不足で新しくIT関連のスキルがある人を採用したいと考えている会社

ユーザーストーリー：
”即戦力人材サービス”で興味をもち、”会社の抱えている課題”が自分の会社に当てはまっていることがわかる。そこで、読み進めると、SHE WORKSの概要や強みがわかる。具体的にどんなスキルをもち、実際の制作物を把握することで、自分の会社でも活躍してもらえるというイメージが湧き、お問い合わせ/資料ダウンロードをクリックする。

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

• デザインガイドでまとめた色・フォント・余白は、LP内のデザインに統一性をもたせる上でとても重要だと思ったので、自分でLPを作成する際もしっかりと意識したいと思いました。
• このような見た目にするためにどのようなコードが組まれているのかを確認する方法として、ディベロッパーツールの使い方を学びました。
• 実際のLPを使って分析とトレースを行うことで、規則性がありながらも、見出しのサイズや余白などに最初は規則性を捉えにくく苦戦しました。完全に規則通りの値を使うのではなく、バランス等を考慮して最終的には1px単位で微調整されているということがわかり、実際にWebサイトの完成度をあげていくプロセスを理解することができました。