LP制作(PC/SPデザイン・実装)

----------------------------------------------------------------------------------

使用ツール：Photoshop,Visual Studio Code

制作時間　：約5週間

制作内容　：ワイヤーフレーム構築・デザインカンプ作成・実装

目的　　　：ターゲット・目的に応じたLPデザインの配置構成を自ら考え、実装まで

　　　　　　取り組める力をつける

----------------------------------------------------------------------------------

＞クライアント情報

ベビー用品を中心とし、ママの育児をサポートするコミュニティ事業やフォトブック事業を展開。今後、ママ、パパ、家族向けのサービスの展開予定。

＞要件

ターゲット：転職希望の方、TSUTSUMUの世界観に共感する人、カルチャーフィットする人

ペルソナ　：下記参照

目的：会社が持つ世界観に共感する、多くの転職希望者から応募してもらう(応募促進)

＞制作物

＞POINT

1 .目的に応じた情報設計 

今回の目的は「会社の世界観に共感してもらえる人」に応募をしてほしいという点。

その与件にあうターゲットへ響くよう情報の配置を考えて構築。

会社内容(理念・事業内容)→働く環境(社員・制度)→採用情報(募集職種・応募フロー)

※会社の理念や社員という流れで会社の魅力や共感をしてくれた方に採用情報へ認識フローが行くように導線を設計。

2 .  コンテンツがわかりやすい配置構成

コンテンツごとの区切りがわかりやすいよう、交互に色を変えたり余白を大きく用いるなどした。

3. コーディング時のレスポンシブ対応

スマホの場合は幅が狭まるため、ヘッダーメニューをハンバーガーメニューへ変更した点や、具体的な募集要項では見やすい構成へと変更を加えて表示させた。

４.ターゲットに応じた配色や図形

今回設定したターゲットとして小さなお子さんを持つママで、仕事も育児も両方頑張りたいと思う意欲のある女性を設定したことから安心感のある白に活気をイメージしてオレンジの配色を設定。企業が展開している事業や掲げているビジョンの世界観である柔らかさや世界観が視覚的に認識しやすいよう表現。

また、扱う写真の形なども丸で柔らかさを表現した。

＞課題を通して学んだこと

今回は要件定義からデザインカンプの作成、コーディング、サーバーアップまで実装しました。LP作成の際のデザイン作成時にはユーザーの利用をイメージして、バナー作成時よりも細かい部分まで定義することが必要だと感じました。採用サイトなので、企業の「こういった人に来て欲しい」という要望から、そういった条件のターゲットに刺さるようなデザインが大事であること、コーディング作業をスムーズに進めるためには余白やフォントを統一し、規則性を作ることが大事だと学びました。