LP制作（PC/SPデザイン・コーディング）【架空案件】

---Index--------------------------------------------------------------------------

1. デザインイメージ

2. 課題要件

3. 工夫したポイント

4. 制作を通じて学んだこと

5. 制作物

1. デザインイメージ

実際の制作サイトはこちら

2. 課題要件

【クライアント】TSUTSUMU株式会社

ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業やフォトブック事業などを展開している。

【ターゲット】

・転職希望の方

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

・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている方

【制作目的】

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

・カルチャーフィットする方に応募してもらうこと

【トンマナ】

・指定なし（事業内容に合うトンマナを自由に提案してOK）

【制作サイズ】

・PC（W1440px）

・SP（W375px）

3. 工夫したポイント

・事業の方向性を意識したトンマナ設定

制作前にクライアントの状況や求める人材像についてキーワードで並べて整理し、トンマナを設定しました。

・事業拡大のフェーズ

→ 事業の勢いを感じさせるようなビタミンカラー　＞　落ち着きのあるトーン

・男女問わずカルチャーフィットする人材を探している

→ユニセックスで親しめるカラー ＞ 赤ちゃんをイメージしたやさしいカラー

・事業のイメージを表す、シンボルの設定

TSUTSUMUのシンボルを設定し、各セクションの見出し及びファビコンに設置しました。木馬を選んだ理由は、主に「ベビー用品が主軸」「ファビコンサイズになっても認識ができる」「馬＝前進していくイメージ」です。

・＜募集職種＞アコーディオンによる切り替え

通常時には「開くボタン」、職種を閲覧している時には「閉じるボタン」が表示されるようUI設計を行いました。また、同時に複数の職種情報が開くことのないよう、ひとつの職種だけが表示されるように設計・実装しました。

＜通常時＞

＜開封時＞

・遊び心を取り入れたデザイン

「働く環境」のセクションでは、jQueryを使用し、明るく楽しげな雰囲気の職場イメージが伝わるようなアニメーションを実装しました。

＜hover / tap 前＞

３つのポイントをボール状のデザインで制作しました。アイコンを用い、楽しげな雰囲気を演出しています。

＜hover / tap 後＞

hover（SPの場合はtap）すると、ポイントの詳細が現れるような仕掛けにしています。

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

デザインカンプの段階で、実装を意識したデザインを心がけておく必要性を感じました。特にjQueryでアニメーションや動きをつける部分で、コードの書き方に苦戦したのですが、ほんの少しでも動きが加わるだけでもサイトの印象が大きく変わるのを実感しました。今後は、クライアントの目指したい方向性をしっかりとヒアリングし、未来につながるデザインを提案していけたらと思います。

5. 制作物

実際の制作サイトはこちら