【実践課題】LPトレース

◆トレースしたLP

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

◆スタイルガイド

◆PCとSPのレイアウトの違い分析

◆ユーザーストーリー

1. 「即戦力人材マッチングサービス」という言葉で興味をもたせる。

2. 「こんな課題はありませんか？」と企業採用担当者のお悩みあるあるで共感を持たせる。

3. SHE WORKSで抱える人材は専門スキルを習得していること、サポートも充実していることをアピール。

4. 具体的な企業採用事例や人材例、会員の制作物事例を紹介することで、実際にマッチできる人材のイメージをより具体化させることで、もうひと押しする。

5. 「この人材サービスなら、探している人材が見つかるかもしれない！」と考え、お問い合わせフォームからのお問い合わせに誘導。

◆工夫したこと

トレース部分は検証ツールを使ってフォントや余白のサイズ、配色を1つ1つ丁寧に確認しながらトレースしたことでクオリティの高いトレースに仕上げることができました。

また、スタイルガイドや分析まとめはトレースしたサイトの雰囲気に合わせて作成しました。特に分析まとめのレイアウト比較は、情報がごちゃごちゃしてしまわないよう、使う色にはルールを決めました。

そもそものレイアウトが大きく違う部分は赤、文章やイラストがSP版では縦積みに変更されている箇所は青、PCでは左揃えだったものがSP版では中央揃えに変更されている箇所は黄色で色分けをし、それぞれどんな違いがあるのかも文章で簡潔にわかりやすくまとめました。

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

検証ツールを使うことで、そのサイトでどのようなフォントが使われているのか？どのような余白が設定されているのか？など、様々なことが読み取れることがわかりました。

また、PCとSPのレイアウトを分析して見比べることで、どういったレイアウトに組み換えると見やすい設計になるのかを理解することができました。

見出しや本文のフォントサイズはどのくらいが適切なのか？といった感覚を掴むこともできました。

◆講師からのコメント

• トレースについて
  まずはトレースお疲れ様でした！見本と寸分たがわず、パーフェクトなトレースで指摘するところがありませんでした。
  細部までよく観察され、精度高く再現されている素晴らしいアウトプットですね！
  ターゲットやユーザーストーリーの分析もトレースを通じて考察し、丁寧にまとめられているのもGoodです。
• スタイルガイド・レイアウト分析資料について
  どの項目もわかりやすくまとめられており、オリジナリティあるあしらいも含めて資料全体にデザイン性を持たせてクオリティの高いデザインに仕上げていますね。
  デザインの各要素について意図を考察し、全体の印象等につなげられているのもGoodです。
  こちらもトレースと同様、細部までしっかり調整されている点も素晴らしいです。こちらもパーフェクトなアウトプットでした！