LP制作 - デザイン / コーディング（課題）

制作時間：約80時間（デザイン2週間、コーディング3週間）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　制作範囲：情報設計・ワイヤーフレーム・デザインカンプ・コーディング（レスポンシブ）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　使用ツール：Photoshop、VS Code ( HTML / CSS / JavaScript )

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

| 制作内容

• TSUTSUMU株式会社-採用サイト

| 制作物

▼実際のサイト

　TSUTSUMU採用サイト

| 作成プロセス

• 情報設計
• ペルソナ設計
• ユーザーストーリー
• ムードボード
• ワイヤーフレーム

＿＿＿＿＿＿＿＿

▼ 情報設計においては、スクールにて学習したマーケティングの考え方で検討してみました。

＿＿＿＿＿＿＿＿

▼ 抽出されたカルチャーフィットしそうな人材の内面要素を基準にペルソナを設計。　　　　　　採用サイトのため、男女のペルソナを作成しました。

＿＿＿＿＿＿＿＿

▼ 再設計したペルソナを基に、冒頭で建てた仮説の再検討を行い、それに紐づくセクションの設計を行いました。

＿＿＿＿＿＿＿＿

▼ 再検討したセクションを基に、ユーザーストーリーを設計。

＿＿＿＿＿＿＿＿

▼ 性別を区切らない中性的なイメージと事業内容とマッチするトンマナとなるよう意識して設定。

＿＿＿＿＿＿＿＿

▼ ワイヤーフレーム

| 工夫したところ

• スクールの動画で学んだマーケティングの考え方にチャレンジし情報設計をおこないました。
• やわらかい雰囲気の中にも企業の採用サイトとしてしっかりビジネスを提供していることやビジョンに共感して頑張っている社員がいるなどのカルチャーを伝えられるようなデザインを心掛けました。
• フォントを使い分けて伝えたい印象を表現しました。

→ やわらかい世界観を伝えたい“メインビジュアルのコピー”と“私たちについて”はKiwi Maru」を使用。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　→ その他情報は、採用に関する真面目な情報をしっかり伝えられるよう「Noto　Sans JP」を使用

• セクション内容が多いことによりヘッダーのメニュー項目も多く可読性が悪くなるため、PC版でもハンバーガーメニューを設定。見たい情報をスムーズに参照できるようにしました。
• コア事業はベビー用品ですが、今後の目指したい世界観（家族の幸せ）をイメージした家族の写真を選定しました。
• フォトブック事業の紹介については、事業内容に沿う素材を探せなかったため、自分でイメージ素材を作成しました。
• 働く人の想いを載せることにより、価値観を提供するとともに、社員紹介画像では在宅で働いている様子も載せることにより、働き方の自由度もさりげなくわかるようにしました。

| 制作を通しての学び

• 作成期間とコーディングの難度を加味した上でデザインを行う必要があること
• コーディングでは、今後の保守も考慮に入れて実装することが重要であること
• 曲線を伴うバックグラウンド背景の挿入には、曲線部分を分けて挿入するとキレイに実装できること
• 1セクションは可能な限りスクールなしで参照できるようにすること
• コーディングの工数や記載をシンプルにするために疑似要素も検討すること