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

【制作期間】5週間（デザイン制作：２週間　コーディング：３週間）
【使用ツール】Photoshop/Visual Studio Code

【今回の課題の目的】

・Webデザインにおいて必要な手順を一通り学ぶ

・要件書の意図を理解し、目的に沿った情報の優先度付けや適切なレイアウトを考えながらワイヤーフレームを作成する方法を学ぶ

・実装を考慮してデザインカンプを作成することを学ぶ

・自分で0からコーディングする際の手順を学ぶ

○クライアント情報

クライアント名:TSUTSUMU 株式会社

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

○要件

＊ターゲット

・転職希望の方

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

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

フィットしている人がターゲット

＊目的

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

(採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば

誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい)

○情報設計

クライアントが持つ世界観やイメージを伝えつつ、見た人に伝えたいことを的確に伝えていくために、情報設計にこだわり制作しました。ペルソナを立て、1つ1つの要素の配置やあしらいに意味を持たせながらデザインに落とし込みました。

＊制作物

                                                               実際のサイトはこちら

○今回の課題を通して学んだこと

・実装を見通した上でのデザイン作成
今回の課題はデザインを制作するだけでなく、そのデザインを実装していく課題であったので、デザインを考える過程で実装のことも常に考えながらデザイン制作に取り組みました。事前に実装のことも視野に入れてデザインを行う事が後に行うhtmlやcssでの作業の効率化に繋がってくると実感しました。
・クライアントの依頼内容の整理とペルソナ設定の重要性
まずは、クライアントが何を求めているかきちんと理解、整理することが重要だと感じました。整理する中で、デザイン全体の方向性を決めていくことが作品の重要な軸となり、クライアントが求めるものに繋がると思いました。また、ペルソナを設定することで、ユーザー視点で具体的に考えることができ、ユーザーに対してのアプローチを考えやすくなると思いました。ユーザーストーリーを考える中でも、ペルソナを設定することにより、ターゲット像が明確になり納得した情報設計を行うことができました。
・ＬＰデザイン制作から実装までの手順
今回の課題で、クライアント情報の整理（ユーザーストーリ・ーペルソナ設定）からデザインカンプ作成、実装、サーバーアップまでの一連の手順について理解することができました。また、各工程でのポイントや注意事項などについても学ぶことができました。

○頑張ったポイント

・シンプルで統一感あるデザイン
採用サイトなので、出来るだけ情報やあしらいをシンプルにするのと、余白を多めにとり、ゆとりのある見やすいデザインを意識しました。また、キービジュアルが波線を使用したり、ほんわかしているイメージで作成したので、その後の写真や背景についてもキービジュアルに合わせたデザインに統一しました。その中でも、採用サイトなので、見出しやメンバー紹介の部分などはきれいな透明感のあるデザインを心がけ、伝えたい情報の内容に合うデザインを意識して作成しました。

○今回の課題の感想 

・初めてのコーディングで苦戦することが多かったのですが、わからない事について、1つ1つ調べて対応することで課題を行う前よりも確実に知識や理解が深まったと感じました。デザインから実装、サーバーアップまで一連の作業を行うことで、それぞれの工程でのルールやポイント、注意する点含め、自分の中での課題を知ることができ、学ぶことが多くありました。