【架空案件】LPデザイン

目次

① 制作要件
② ユーザー視点に基づくストーリー設計（ワイヤーフレーム再設計）
③ 制作したLPデザイン
④ 制作から得た学びと応用

① 制作要件

ヒアリング動画をもとに、以下の要件書を作成しました。

② ユーザー視点に基づくストーリー設計（ワイヤーフレーム再設計）

作成した要件書とクライアントが提示してくださったペルソナに基づき、ユーザーストーリーを設計し、ワイヤーフレームの再設計を行いました。

【設計したユーザーストーリーの論理】

1. コンバージョン最大化のためのファーストビュー設計

• 課題
  「利用申込・見学予約」の2つの行動が混在し、ユーザーに迷いが生じる。

• 解決策
  コンバージョンボタンを2つに分割しました。SNS広告からの流入が多いというヒアリング内容から、ユーザーの心理的ハードルを下げるため、コンバージョンにつながりやすい「無料見学」ボタンを右側に配置。見学不要層や利用確定層向けに「利用開始」ボタンを左側に配置し、離脱率の低下を狙いました。

2. 共感を促す課題提起と解決策の提示

• 課題
  ファーストビューの情報量が多いと、上質な空間のコンセプトが伝わりにくい。

• 解決策
  LP全体で目指す「上質な空間」を表現すべく、ファーストビューでは情報量を最小限に抑え、コアメッセージと行動喚起のみに絞りました。
  また、ユーザーの共感を深めるため、コンセプト説明の前に「こんな悩みありませんか」セクションを追加し、サービスの必要性を強調しました。

3. 空間の価値と信頼性を高める根拠

• 課題
  サービスの強みが「空間としての価値」であるにもかかわらず、元のLP内容構成でその魅力が十分に伝わっていない。

• 解決策
  競合分析でフロアマップの有効性を確認した上で、空間全体のイメージが伝わるようフロアマップを追加しました。
  さらに、コミュニケーションの場という特徴を伝えるためイベント情報を追加。
  ユーザーの行動を促す重要箇所であるため、営業感を避け、心理的ハードルを下げる目的で、ベタ塗りではない枠線ボタンを採用しました。

4. ユーザー行動に合わせた情報提示（料金プランの最適化）

• 課題
  ユーザーは施設の様子を知った後、利用開始前にまず料金を知りたいと考えるが、プラン情報が後ろに配置されていた。

• 解決策
  ユーザー目線に基づき、利用方法の前に利用プランセクションを移動しました。
  情報量が多いため、余白感を保ちつつ一画面に収まるようタブタイプに変更し、プランごとに利用シーンを提示してユーザーが迷わない工夫を施しました。

5. 離脱を防ぐためのCTA位置調整

• 課題
  ファーストビューから元のCTAまでの距離が長く、離脱要因になる可能性がある。

• 解決策
  ユーザーがクリックしたくなるまでに必要な情報（コンセプト、施設・設備、料金プラン）をすべて伝えた段階で、CTAを前倒しで配置しました。

6. 詳細説明と安心感の醸成

• 課題
  利用方法の説明が、初めてサービスを知るユーザーにはわかりにくい。

• 解決策
  検討中のユーザー向けに情報を整理し、手続きのシンプルさ、「使いたい時にすぐ使える」というアピールポイントを強調するため文字数を削減しました。
  また、サービスの安心感を伝えるため、アクセス情報の隣に建物玄関の写真を追加し、競合の有効事例も参考に、施設の中身だけでなく外観も伝える工夫を施しました。

7. 最終的なコンバージョン獲得を目的としたプッシュ

• 課題
  ストーリーの最後に統一感のあるクロージングメッセージがない。

• 解決策
  FAQとフッターの間にメッセージを追加し、最初のコンセプトと合わせたストーリーの締めくくりとなるメッセージを配置することで、最終的なコンバージョン獲得を目的。

8. フッターでのCTA再提示による機会損失の回避

• 課題
  LPを最後まで読み終えたユーザーはサービスへの関心が最も高い層であるにもかかわらず、行動を促すCTAがないため、離脱による機会損失が生じてしまう。

• 解決策
  フッター内にCTAを再提示しました。これにより、ユーザーが最も納得し、行動意欲が高まった瞬間を逃さず、スムーズなコンバージョンへと誘導します。

【SP版ワイヤーフレーム】

レスポンシブ対応を意識し、SP版ワイヤーフレームを作成しました。

インタラクションなど、スマホUIを考慮し、アニメーションの方向性を考察しました。png画像では伝わりにくい動きについては、横に説明を加えています。

③ 制作したLPデザイン

• 使用ツール：Figma
• デザイン制作時間：約20時間
• 案件制作期間：2週間

【ムードボード】

LPのコンセプトやキーワードを選定し、世界観をビジュアルに表現することで、トーン＆マナーを整理しました。

• 配色
  白と黒を基調とし、洗練された「上質な」印象を与えています。
  無機質なイメージを避け、さらに「安心感」を表現するために温もりのあるアースカラーを加えています。
  アクセントカラーはベースカラーとトーンの異なる同系色を選び、まとまりと落ち着いた雰囲気を作り出しました。
  
  
• タイポグラフィ
  企業ロゴの世界観に合わせ、信頼感とモダンな印象を与える欧文フォントと角ゴシック体を採用しました。
  
  
• 装飾
  ボタンや装飾には直線要素を意識して取り入れ、色の面積を控えめにし、細い線を使うことで、洗練された上質な空間のイメージを強調しています。

④ 制作から得た学びと応用

今回のLPデザイン架空制作では、クライアントの意図を深く理解し、サービス・商品を徹底的に分析することから始めました。その上で、ユーザー目線に立った情報設計を行い、ファーストビューでのキャッチコピーの視認性を高めるための工夫を実践しました。

また、トンマナの重要性を深く学び、具体的なデザインに落とし込む方法を習得しました。全体的な統一感を出すために写真のトーン調整や余白の取り方を意識し、デザインの質を高めることに注力しました。

さらに、生成AI（Adobe Firefly）の活用により、画像を生成したり、ファーストビューに液体グラスのエフェクト効果を使用するなど、トレンドを取り入れることで表現の幅を広げ、制作に活かしました。