【課題】LP制作／PC・SPデザイン〜実装

|　目次

1.　課題概要
2.　課題内容
3.　制作物
4.　工夫した点
5.　課題を通して学んだこと

|　課題概要

・ワイヤーフレーム・デザインカンプ完成、コーディング・サーバーアップを一通りできるようになる
・要件書をみて自分でワイヤーフレームを作成する
・実装を考慮したデザインカンプを制作する
・自分が制作したデザインカンプのコーディングができるようになる

|　課題内容

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

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

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

●トンマナ
・明確なブランドトンマナがまだ決まっていないので、事業内容にあうトンマナを自由に提案していただきたいです。

|　制作物

●実際に完成したサイトはこちらです。
（※制作したサイトへ遷移します。）

●完成したデザインカンプ（PC/SP）

|　工夫した点

●情報設計

クライアントの最大のニーズは「TSUTSUMUが作っていきたい世界に共感し、カルチャーフィットする方に応募してもらう」でした。そこで、下記のようにターゲットペルソナ・ユーザーストーリーを設定し情報を整理しました。また、どこのタイミングであっても応募できるよう、「応募する」ボタンを追従させました。

●企業の世界観が伝わるようなビジュアルデザイン
ブランドトンマナがまだ決まっていないということだったので企業コンセプト・テーマから「あたたかさ」「優しさ」をポイントに下記のようにトンマナを設定し、カルチャーフィットしている方へ訴求できるようなビジュアルデザインを作成しました。絵本のような雰囲気が出るよう、あしらいのイラストは自作しました。

●世界観を意識したコーディング
初めてのコーディングでしたが、TSUTSUMUの「やさしさ」「あたたかさ」を表現できるよう、セクションごとに下からふわっと文字や画像がでてくる動きや、ヘッダーをマウスオーバーすると文字下に円形がほわんと出てくる動きなど、アニメーションにも挑戦しました。