【架空】LP制作（要件定義からコーディングまで）

目次

①制作物

②課題内容

③工夫したこと

④制作を通じて学んだこと

①制作物（使用ツール：Photoshop・VS Code）

▼制作したサイト

▼デザインカンプ

②課題内容

【クライアント情報】

クライアント名：TSUTSUMU 株式会社

• ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定をしている。

【ターゲット】

• 転職希望の方

• 報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方

• 各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャー

  フィットしている人がターゲット

【目的】

• LPを通してエントリーをしてもらうこと

(採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば

誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい)

③工夫したこと

・要件書をもとに、ペルソナとユーザーストーリーを作成

・ムードボード作成とトンマナ設定

ベビー用品をメインにママや家族にむけてのサービスを展開している会社ということで、幸せ・やさしさをキーワードとしてイエロー系をメインカラーに設定しました。

採用サイトなので、キャッチコピーや見出しに明朝体を使用することでビジネスライクな部分を表現しています。

・MV（メインビジュアル）

スライドショーを組み込んでビジュアルが変わるようにしました。赤ちゃんやお母さん向けだけではなく、家族に向けた事業があることをユーザーに示唆します。

・スクロールを促すアニメーションの設置

参考になりそうなサイトを周ったところ、アニメーションが多く利用されていることが分かりましたので、トレンドに合わせ設置しました。

・セクションの切り替え

セクション間の切り替えにゆるやかな波形を入れることで、固い印象になりすぎないようにしています。

・ペルソナ設定したターゲットにむけての訴求文言を追加

よりターゲットへの訴求を高める為の文言を作成し追加しました。

・CTA

印象的な写真を使用し、クライアントから必要要素として提示された文言をアレンジして配置しました。

④制作を通じて学んだこと

• 近年の採用サイトを調べる中で、アニメーションが多く利用されているサイトが多いことが分かりました。働く人にフォーカスしているのも特徴だと感じました。
• デザインカンプの段階ではよくても、コーディングとなると手間のかかる部分が出てくるので、優先順位をつけて取捨選択していくのが大事だと思いました。