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

❑目次❑

1.概要

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

3.要件

4.情報設計

5.ビジュアルデザイン

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

1.概要

制作時間：約67時間（情報設計8時間、デザイン制作19時間、コーディング40時間）

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

使用ツール等：Photoshop、HTML、CSS、jQuery

実装したサイトはこちらです

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

3.要件

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

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

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

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

4.情報設計

提示された要件を元に、ペルソナとユーザーストーリーを考えました。

TSUTSUMUのターゲットは「TSUTSUMUの世界観に共感してくださる方」「カルチャーフィットしている方」とされていました。また、TSUTSUMU株式会社から提示された文章の中に「ママの育児をサポートしたい」「家族みんなが幸せになる」と記載されていたことを踏まえ、ペルソナは家族と過ごす時間を大切にしている人物であり、育児しながら働きやすい環境を求めている女性を設定しました。

今回のLP制作の目的は「カルチャーフィットしている方に応募してもらう」ことであるため、TSUTSUMU株式会社の想いが伝わることが重要だと判断し、「私たちについて」や事業内容については冒頭に配置しました。

その後は、メンバー紹介で働くイメージを持ってもらったり、育児しながら働きやすく、今までの経験も活かせるということを訴求するため、メンバー紹介や働く環境などを配置しました。

5.ビジュアルデザイン

ムードボード
まず、コンセプトを固めるためにムードボードを作成しました。

#温もり　#やわらかさ　#安らぎ　#幸福感
カルチャーフィットしている人がターゲットであるため、TSUTSUMUの想いを表現できるコンセプトにしようと考えました。セクション「私たちについて」に記載されている「あかちゃんがやさしさにつつまれて安心できるような暮らし」から連想して、これらのキーワードを考えました。

上記のキーワードを踏まえ、やわらかい布や、温かくてホッとした気持ちになりそうなお茶などをイメージしました。

配色

安らぎから連想した黄緑をベースカラーとし、温かみのあるオレンジをアクセントカラーにしました。

あしらい

背景には、「やわらかい布」を表現するため、布っぽいテクスチャを用いました。

温もりを感じられることを狙い、手書きしたドットを使用しました。

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

頑張ったポイント
コーディング実装を頑張りました。
自分でコーディングまで行うのは初めてでしたが、デザインカンプ通りの見た目になるように、SHElikesで学んだことを見返したり、ネットで検索して調べたり、それでも解決できない場合は講師の方に質問して対応しました。特に、背景は柄と文字が被らないよう細かく位置を調整して、違和感のない配置になるようにしました。

制作を通して学んだこと
実装を考慮したデザインについて学びました。
同じパーツ（例：各セクションの見出し）の文字の大きさは統一する、要素のサイズを整数にするなど、実装時を意識した制作のポイントを学びました。