【自主制作】LP制作(要件定義～サーバーアップ)

【制作したLP】

【制作要件】

・テーマは自由
・1ページ構成のサイトを作る
・ここまで学習した内容をもとに作成する
・セクション数は5つ以下におさめる
・PC / スマホに対応する　※タブレットは不要

【要件定義】

・クライアント情報
　クライアント名：hanato
　店舗スタッフと一緒に花を選ぶお花屋さん。店舗にてスタッフがお客様にヒアリングを
　行い、その内容をもとにスタッフがお客様と一緒に花を選ぶサービスを行っている。
・目的
　LPを通してお花屋さんである「hanato」に来店してもらう
・ターゲット
　誰かに花を贈るためにお花屋さんを探している人
・ペルソナ

【ワイヤーフレーム】

 【デザインカンプ】

【制作時間】

・制作期間：3ヶ月半
・制作時間：合計69時間
　(要件定義1時間/WF作成8時間/デザインカンプ作成29時間/コーディング31時間)　
・使用ツール：Photoshop、VisualStudioCode

【工夫した点】

■配色

LP全体として、洗練されていながらも温かみのある雰囲気を出したかったため、白を基調として背景に薄い黄色、問い合わせボタンにはコーラルオレンジと暖色を使用しました。

■フォント

洗練された印象を与えるために、全体的に游明朝体を使用しました。全て游明朝体にしてしまうと上品に纏まりすぎているように感じたため、メニューとセクション毎のタイトルはcabinを使用しました。

■ブランディング

LP制作に入る前に、まずはSHElikesのブランディングコースを受講しました。クライアントになる花屋の事業内容やペルソナを設定し、製作途中で軸がブレないようにしました。

■ネーミング

クライントになる花屋のブランディングを行い、花屋の「hanato」のネーミングにこだわりました。

・hanatoの由来
　①花と→"花と"一緒に想いを伝えられるように
　②大切な人に花を贈るため、hana to→toの先には大切な人が入る

■写真

写真素材はすべて加工し、トーンを揃えました。また、LP全体の配色に併せてメインビジュアルにも黄色とオレンジの花の写真を選びました。

■リンク
PCサイズでは、ヘッダーのリンクはホバー時に下線が引かれるようにし、フッターのリンクはホバー時に色が変わるようにしました。

【制作を通して学んだこと】

制作に入る前にクライアントの事業内容や世界観がきちんと分かっていると、ワイヤーフレームやデザインカンプの作成時に、配色や写真選び等を迷わず行えることが分かりました。
デザインに入る前に、きちんと情報設計を行い、軸がブレないようにすることが大切だと学びました。