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

目次

1.制作したLP

2.課題概要

3.情報の整理・設計

4.工夫したPOINT

5.制作を通して学んだこと

1.制作したLP

2.課題概要

ターゲット
・転職希望の方
・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方
・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人がターゲット

目的
・LPを通してエントリーをしてもらうこと
（採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい）

トンマナ
・明確なブランドトンマナがまだ決まっていないので、事業内容にあうトンマナを自由に提案してほしい
・トンマナに合わせてロゴの色味の変更可

制作サイズ
・PC（横幅1440px）
・SP（横幅375px）

3.情報の整理・設計

◾️ペルソナ　
　要件のターゲットを元にペルソナを設定しました。

◾️イメージの言語化

・ペルソナを元にユーザーにマッチするイメージを具体化しました。『母親』と『TUTUMU』二つの点から共通するワードをピックアップをし、キーワードを洗い出ししました。
・メインカラーはオレンジのカーベラをイメージさせました。
　オレンジ：暖かさ、温もり、活力、親しみ
　ガーベラ：希望、常に全身、辛抱強さ、冒険心
　オレンジのカラーには新しいことに希望を持って挑戦してほしいTUTUMUのようにあたたかな繋がりを持って自分のワークライフバランスを充実してほしいという願いを込めています。

◾️ユーザーストーリーとワイヤーフレームの見直し

いただいたワイヤーフレームを元に再設計をしました。
・要件に「カルチャーフィットしている人がターゲット」とあったため、
　①TUTUMUについての概要を提示→興味や共感を得る
　②事業や働く環境を提示→自分が働いているイメージを想像する
という流れを作りました。

4.工夫したPOINT
◾️全体
1.繋がりを表現した楕円
・楕円は綺麗な直線ではなく少し歪になっています。これには、MESSAGEにある「あかちゃんだけでなくママやパパ、おじいちゃんおばあちゃんまで家族みんなが───」というところからイメージし、みんなが手を繋いだシルエットを表現しました。

2.スクロールすると柔らかく出てくるアニメーションの実装
「やさしさ」「あたたかさ」というイメージを表現するため、スクロールするとふわっとセクションがでくるjQueryを実装しました。

5.制作を通して学んだこと

1.実装を意識したデザインの構成
・初期から実装を意識してデザインをしていましたが、実際に実装へと移った際に複雑な記述になってしまった箇所があり、ユーザーに伝えたいメッセージと実装の工数を想定しながらデザインしていくことの重要性を学びました。
・今回の課題でHTML・CSS・jQueryの知識を得ることができたため、ディレクターやデザイナー、コーダーの作業も考慮した上での制作を行うことが重要であると理解することができました。

2.情報の深掘り
クライアントからの要件を読み解いて、目的・ゴールを設定しペルソナやユーザーストーリーを設計することでブレのない軸を作ることができると感じました。他デザインも同様のことが言えると思いますが、まずは情報設計をしっかり組み立てることが重要であると考えます。