【架空案件】LPデザイン

① 制作要件

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

② ストーリー設計

作成した要件書と、いただいたペルソナを元に、ユーザーストーリーを設計し、ワイヤーフレームを再考しました。

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

1. ファーストビューで関心喚起、ユーザーに取ってほしいアクションを提示

コンバージョンボタンを2つに分けました。
まず、「利用申込・見学予約」には2つの異なる行動が含まれていると考えました。SNS広告からの流入とインタビューで伺ったので、ユーザーの心理的ハードルを避けるために、コンバージョンにつながりやすい「無料見学」ボタンを右側に配置しました。見学せずにすぐに申し込む方や、見学後に利用を決めたい方を対象に「利用開始」ボタンを左側に配置しました。

2. ユーザーの抱える課題、その課題に対する解決策を提示

ファーストビューの文字情報を減らして、「悩み」セッションを追加しました。
LP全体で余白と上質な空間を表現したいため、ファーストビューからその雰囲気を作るべく、情報量を減らしました。どんなサービス、どこにある、一番の魅力、ユーザーに求める行動のみをファーストビューに配置し、その他のコンセプトはセカンドビュー以降に移動させました。ユーザーにもっと共感してもらうために、コンセプト説明の前に「こんな悩みありませんか」をちょっとだけ追加しました。

3. 解決策の信頼性を高める根拠

SPACEセッションではフロアマップとイベント情報を追加しました。
競合を分析したところ、フロアマップを記載しているLPが多いことに気づきました。インタビュー動画からサービスの強みが「空間としての価値」であることを伺ったため、LPでも同様に空間の魅力を伝えたいと考えました。そのため、フロアマップを追加し、空間全体のイメージが伝わるようにしました。
コミュニケーションの場がサービスの特徴でもあるため、イベント情報を追加しました。この部分ではユーザーの心理が動きやすいのではないかと思って、営業感を与えないよう、すぐにクリックできる程度の枠線ボタン（ベタ塗りではない）を配置しました。

4. ユーザーの疑問や不安を先回りして解消する

利用方法の前に利用プランセクションを移動しました。
ユーザー目線で考えると、施設の様子がわかった後に、利用を始める前に知りたい情報は料金と考えています。プランは3つあるので、それぞれの使用シーンを提示し、ユーザーが迷わないように「まずはこちら」、最適なプランが見つかればすぐに申し込めるように右側にボタンを配置しました。また、全体的に情報量が多いため、余白感を保つためにタブタイプに変更し、各プランがスクロールせずに1画面に収まるよう、情報整理の工夫をしました。

5. 具体的な行動を促すCTA

CTAセッションの位置を変更しました。
ファーストビューから元のCTAまで距離が長く感じたため、ユーザーがクリックしたくなるまでに知りたい情報（コンセプト、施設・設備、料金プラン）をすべて伝えた段階で、CTAを前倒しで配置し、離脱要因を意識しました。

6. より詳細な説明

利用方法では文字数を減らし、アピールしたい内容を絞り込みました。
元のWFではやや会員向けの説明だった気がしますので、改めて初めてサービスの内容をみて、まだ検討中のユーザー向けに情報整理しました。そして手続きはシンプルだよ、使いたい時にすぐ使えるよということをアピールポイントにしました。

アクセスセクションに建物玄関の写真を追加しました。
サービスの安心感を与えたいので、施設の中身のみならず外観の写真も入れました。そしてアクセス情報の隣に入り口の写真を配置すると、ちょうど実際の道を探しやすくなりますし、競合でも同じようなレイアウトがよく見られます。

7. ラストプッシュメッセージ

FAQとフッターの間にメッセージを追加しました。
今回WFを再考する際に、ユーザーにより伝わるためテキストのブラッシュアップも行いました。そのため、最初のコンセプトと合わせた、ストーリーの締めくくりとなるメッセージを配置し、コンバージョン獲得を目的としました。

8. フッターとCTA再提示

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

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

インタラクションなど、スマホUIを考慮して、どんなアニメションを加えるかを考察しました。png画像だけでは表現しにくいので、横に説明を入れました。

③ 制作したLPデザイン

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

【ムードボート】

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

配色に関しては、白と黒を使用し、洗練された「上質な」印象を与えます。無機質なイメージを避けるために、加えて「安心感」を表現するために温もりのあるアースカラーを使用しています。アクセントカラーもベースカラーとトーンの異なる同系色を選び、まとまりのある印象と落ち着いた雰囲気を作り出します。

企業ロゴに合わせた欧文フォントと角ゴシック体を使用し、洗練されている上質な空間がより伝わるように直線要素を意識して取り入れました。

④ 制作を通して学んだこと

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

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