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

使用ツール：photoshop・HTML・CSS

制作時間　：約3週間

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

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

　　　　　　取り組める力をつける

＞クライアント情報

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

＞要件

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

ペルソナ　：下記参照

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

＞制作物

＞POINT

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

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

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

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

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

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

コンテンツごとの区切りがわかりやすいよう、交互に色をかえコンテンツ名称を別で英語表記縦書きをそれぞれ左右交互に入れ込んだ。

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

スマホの場合は幅が狭まるため、ヘッダーメニューをハンバーガーメニューへ変更した点や、社員紹介ではスライダー機能を用いたり見やすい構成へと変更を加えて表示させた。

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

今回設定したターゲットとして小さなお子さんを持つママで、”自分のような家族を持つ方々に役にたつ、喜びをもたらせる仕事をしてみたい”というビジョンを持ち始めた方を想定して以下の３色を軸に配色を設定。企業が展開している事業や掲げているビジョンの世界観である柔らかさや世界観が視覚的に認識しやすいよう表現。

　　　　　　＃a78b63　　　　　　　＃e2c6bb　　　　　　　＃efe8d9　　

また、扱う写真の形なども単なる正方形や長方形を使うのではなく、これぞれ異なった楕円形を使うことでもその意図を表現。

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

サイト制作において、デザインの段階でコーディングを踏まえた枠組みを設定することやサイト構成を考えるという観点を持つことの必要性を学んだ。