※Figmaで制作したLPのデザインプロトタイプをご覧いただけます。PC版・スマートフォン版をそれぞれ用意しています。
※一部のナビゲーションやボタンは、デザイン確認用のためリンクを設定していません。
制作目的
架空のスキンケアブランド「Soin by MIYABI」の世界観と、夏の新商品の魅力を伝えるランディングページを制作しました。
美容サロンから生まれたブランドとしての信頼感を大切にしながら、商品への興味や期間限定ポップアップストアへの来店につながる構成を目指しました。美容サロンSNS広告バナーから、ポップアップ来店・オンラインショップへ誘導する想定のランディングページとしています。バナーとLPのファーストビューでコピー・モデル・商品・期間を揃え、クリック後に別のページに来たと感じさせないようにしています。
効果測定については、広告バナーのクリック率、LPのクーポン受け取り率、クーポンの店頭提示率（来店率）で効果を測る想定としています。
工夫したポイント
- 情報設計： 30〜40代の働く女性を対象に、広告から来た初めての方を想定し、悩み → 選ばれる理由 → 商品 → サロン品質 → ポップアップ・来店特典の順に構成。主CTA『来店特典クーポンを受け取る』を重要となる箇所に複数配置し、締めはブランドの余韻で終える構成にしました。
- ビジュアル： アイボリーとゴールドを基調に、夏の光や水の透明感を取り入れ、上品で清潔感のある世界観を表現しました。
- レイアウト： 6日（実作業約12時間）でPC版・スマートフォン版の2サイズをそれぞれ制作し、画面サイズに応じて写真や文字の配置、情報の見せ方を調整しました。またPCは1440px・スマホは390pxで設計し、実装時のHTML/CSSによる構造化を意識し、見出しや本文をテキスト要素として設計しました。
- ブランド展開： 先に制作した広告バナーやロゴとデザインの方向性を揃え、統一感を持たせました。
- 広告表現： 化粧品の広告表現のルール（薬機法）に沿うよう、効能の言い方に配慮しました。
- CTA設計： 新規のお客様が気軽に行動できるよう、予約不要の来店を前提に、主CTAを来店特典クーポンの受け取りにしました。主CTAはファーストビュー・ヘッダー・来店特典の複数箇所に設置し、スマホでは実装時に画面下へ主CTAを固定表示する想定としています。
制作情報
| 制作種別 | クライアント想定案件（架空案件）／LPデザイン |
| 担当範囲 | 企画 / 情報設計 / 構成 / レイアウト / デザイン / プロトタイプ制作 |
| 進行期間 | 6日 |
| 実作業時間 | 約12時間 |
| 使用ツール | Figma / Photoshop |
| AI活用 | ブランドイメージや商品ビジュアルの素材制作に生成AIを活用。 AIの出力から、商品の表記・ボトルの形・文字をPhotoshopを使用し手作業で修正。 |
| 自身の制作 | 構成・情報整理・レイアウト・文字組み・最終調整は自身で担当。 |
| 制作サイズ | PC版 1440px幅 スマートフォン版 390px幅 |
