【課題】LPデザイン・コーディング（PC/SP）

| クライアント情報

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

| 要件 

目的 ▶ LPを通して、カルチャーフィットしている人にエントリーをしてもらうこと

ターゲット ▶︎ 転職希望の方、世界観に共感している人、カルチャーフィットしている人

トンマナ ▶︎ 明確に定まっていないため、自由に提案してほしい

| 製作したLP

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

| 工夫したところ

01  実装を意識したデザイン

コーディングで悩むことがないように、実装を意識しながらデザインカンプを作成しました。

■ヘッダーや各セクションのボタンはマウスホバーした時どんなデザインになるか、事前にcolorやopacityを決めてから実装することで、スムーズにコーディングを進めることができました。

■アコーディオンメニューの開閉デザインもデザインカンプ作成時に考えました。

02  色選択と写真で世界観を統一する工夫

今回は初めてのコーディングだったため、あしらいは入れず写真とカラーのみで世界観を表現しました。写真はメインカラーのベージュ寄りになるようレタッチしてから使用しています。

■使用カラー

ベースカラー：余白で世界観を作りたかったので、ホワイトを使用

メインカラー：肌に包み込まれるイメージを表現するため、ベージュを使用

アクセントカラー：温かみを感じられるピンク系オレンジを使用

| 制作を通して学んだこと

デザイン・コーディング・レスポンシブを一貫して行う経験が今回初めてだったのですが、改めて情報設計が大事だと気づきました。特にレスポンシブではどう言ったデザインにするかをしっかり事前に決めておくことで、スムーズなコーディングができました。初めてのコーディングでシンプルなデザインにしたため、余白やフォントサイズの調整がいかに大事か、基本に立ち返ることができました。