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

OVERVIEW

SHElikes MULTI CREATOR COURSEにて、ワイヤーフレームからLP制作・実装の課題に取り組みました。クライアントからの要件書を元に、ベビー用品事業等を行う企業の採用サイトを制作しました。(制作時間:120時間)

YEAR 2021

◆クライアント情報

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

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

◆要件

            目的:カルチャーフィットする方にLPを通してエントリーしてもらうこと

ターゲット:転職希望の方、世界観に強く共感してくれる人、

      未経験より経験を重視したいがそれよりもカルチャーフィットする人

 トンマナ:明確に決まっていないので事業内容に合うトンマナを自由に提案してほしい

◆ユーザーストーリー

ターゲットと目的達成のための情報設計

カルチャーフィットする方にエントリーしてもらうことを目的としているので、各コンテンツの順番を決める際にそれぞれの効果事前に書き出し、優先順位を整理しました。また、ペルソナを設定することでリアルなユーザー視点に立ってユーザーストーリーを考えました。


◆工夫したこと

「世界をやさしさでつつむ」のコンセプトから、赤ちゃんの柔らかさや体温のあたたかさが伝わるようなトンマナを意識しました。ボタンなど全体的に丸みのあるデザインにし、優しさを感じるフォントやイラストを選びました。

◆制作したLP

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

◆制作して学んだこと

1.デザイン

クライアントの要件書を元に情報設計からデザイン制作・実装・サーバーアップまで、一通りの流れを学びました。

情報設計とトンマナを決めるにあたって、制作する目的とターゲットをしっかり理解することが最終的に目的の達成に繋がるのだと思いました。

2.コーディング

コーディングは初めてだったので苦戦しましたが、SHElikesのWebデザインコースの動画を繰り返し試聴し、分からないことは都度Webや書籍で調べたり講師の方々に教えてもらうなどして進めました。

コーディングに入ると作業を進めていくうちに、クラス名など複雑になっていくので、予めマークアップ設計図の作成やクラス名を大体決めておくことの重要性を感じました。また、コーディングの知識があるとデザインを考えるときに実装のしやすさなどがわかるようになること、どの要素を括って余白をつけるかなどの考え方を学びました。