【課題】LP制作（PC/SPデザイン・実装）

＊ 課題の目的 ＊

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

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

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

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

----------------------------------------------------------------------------------

１．クライアント情報

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

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

２．要件

ターゲット：・転職希望の方

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

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

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

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

３．ペルソナ

26歳／女性／既婚（子供ひとり）現在人材派遣の営業として働いている。育児との両立が難しく、転職を考えている。育児と仕事を両立でき、その中でも社風を一番に重きを置いて転職先を探している。結婚をし、子供ができたことで、家族を幸せにするような事業に興味をもっている。

４．制作したサイト

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

５．工夫した点

１）シンプルで読みやすいサイト

今回は採用サイトということで、シンプルなデザインに仕上げました。必要な情報のみを載せて、より見やすさを重視するため余白も大きく取ることを意識しました。

２）トンマナ設定にあった配色

３）あしらいで表現するあたたかみのあるサイト

・緩やかなカーブでセクションの切り替え

・胎児の形をイメージした画像の切り抜き

６．制作を通して学んだ点

１）ペルソナ設定の重要さ

ワイヤーフレーム・デザインカンプ・コーディングとすべてを考えて作成しましたが、クライアント情報から作成するのはざっくりとしすぎてしまっているので、ペルソナを最初に設定して作成にあたりました。設定することでデザインが固まり、ぶれないので改めてペルソナ設定の重要さを感じました。

２）コーディングの書き方

初めてのコーディングでかなり苦戦しましたが、わからない部分はSHElikesのWebデザインコースの動画の復習・Webデザインの本、Webで検索を繰り返して制作しました。まだまだhtml・CSS・jQueryの理解が浅いこともあり、アニメーション部分は複雑で難しく100%完璧な状態で実装できていません。引き続きブラッシュアップをしていきます。  

今後も実践を通して、デザインと実装のスキルを向上させていきたいと考えています。