オリジナルLPの制作-1

【デザインについて】

●制作の流れ…ペルソナ・トンマナの設定をして、訴求ポイントを整理しました。LPバナー→ワイヤーフレーム→デザインカンプ→LPの順に制作しました。デザインカンプを基にファーストビューを先行して制作し、全体的なイメージを確認しながら制作しました。studioで制作しました。

●カラー…明るいイメージの白（#fcfbfe）をベースカラーにしました。メインカラーは落ち着いた女性のイメージのダークブラウン（#3e1c17）、アクセントカラーは可愛らしいイメージのピンク（#F1AAAE）にしました。また、爽やかなイメージを出すためにブルー（#94c4d3,#e6f8ff）とブルー系のグラデーション（#c8dfe9,#fcfbfe,#c8dfe9）を追加しました。

●タイポグラフィ…親しみのあるイメージのYomogiフォントと馴染みがあり読みやすいNoto sans JP、目立ちやすく映えるイメージのTrain Oneを使用しました。

●情報設計…SNSをよく使う若い世代向けのLPなので、スマホ版にしました。レスポンシブ対応はしていません。
一番に伝えたい訴求テキスト（新店舗OPENと記念キャンペーン）をFVの一番上に持ってきました。
あえてヘッダーを作らず、FVと合体させた形にしました。

FV：新商品画像とキャンペーン内容、CTAボタン、Cafe Namioto.について
2ndビュー：新商品について
3rdビュー：キャンペーンの詳細とCTAボタン
4thビュー：店舗情報とCTAボタン
フッター：ロゴ画像と著作権のテキスト　を配置しました。

2ndビューは新商品のこだわりポイントをしっかりと伝えるために、CTAボタンは設置していません。その代わり、他のビューに設置し、キャンペーンへの誘導を行っています。また、キャッチコピーをタグとして使用してターゲットに自然と覚えてもらえるようにしました。

【工夫したポイント】

実際にWebページとして制作したので、ボタンにURL（実在はしないのでアクセスは不可）を連携させたり、ファビコンや地図（モデルの街）の設置をしてリアリティを出しました。ギザギザのオブジェクト以外のオブジェクトは、ビジュアル面とページの負荷を考慮して新規に作成しました。ボタンの矢印やリストの数字は統一感と見やすさを意識してアイコンを使用しました。