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

◾️目次◾️

1.概要

2.制作したデザインカンプ

3.要件

4.情報設計

5.ビジュアルデザイン

6.頑張ったポイント／学んだこと

1.概要

制作時間：約70時間（情報設計8時間、デザイン制作21時間、コーディング41時間）

制作範囲：情報設計、ワイヤーフレーム、デザインカンプ、コーディング、サーバーアップ

2.制作したデザインカンプ

3.要件

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

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

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

トンマナ
・事業内容に合うトンマナを提案

4.情報設計

提示された要件をもとにユーザーストーリーを考えました。

LP制作の目的は「カルチャーフィットしている方に応募してもらう」ということであるため、TSUTSUMU株式会社のビジョンや基本情報を知ってもらうことが重要と思い、私たちについてや事業についてを冒頭に配置するようにしました。

以降はメンバー紹介で働くイメージを持ってもらったり、育児しながら働きやすく、どのような職種で活躍できるかをイメージしやすくするため、メンバー紹介や働く環境などを配置しました。

5.ビジュアルデザイン

先方からの要件をもとに私がイメージしたキーワードは下記になります。

＃やさしい　＃あたたかい　＃ぬくもり　＃ハートフル　＃笑顔

やさしさと愛のグラデーションをコンセプトにしました。

たくさんの愛や優しさが積み重なって、”愛情を受けた”と感じると思っています。

自分の子供だけではなく、会社を通していろんな子供へ愛や優しさを伝えられる会社であるということを表すために柔らかく、心温まるような暖色を使用しました。

愛ややさしさは目に見えないけど、きっと形にしたときには柔らかいものだと思ったためなるべく曲線を使って表現しました。

6.頑張ったポイント／学んだこと

頑張ったポイント

背景にグラデーションやぼかしのあしらいを入れて、心がぽっと温まるような愛情・優しさを表現しました。

キービジュアルの写真の形や、「私たちについて」の赤ちゃんの写真の形はこだわりを持って、柔らかさを表現できるようにしました。

また、実装ではslickを使用し、働く人の紹介を作成したことでイメージ通りに実装ができました。

わからない点が多く、うまくできているかわからない部分もありましたが講師の方に質問をしたり、ネットで検索をして作業していく中で自分の知識となりました。

制作を通して学んだこと

デザインカンプの時点でコーディング想定して作成をする必要があることを学びました。

余白、タイトルのサイズなど細かくデザインカンプの時点で設計をしておくとコーディングがかなりやりやすくなると勉強になりました。