LLMO対策サービス （yunasales様）
wakana専門知識がなくても理解できるデザイン設計
「専門用語をデザインで分かりやすく翻訳」
LLMOはまだ認知度の低いサービスですが、こちらのLPでは、いきなり専門知識を説明するのではなく、
「予約満席」という結果を見せる → LLMOとは何かを図解やイラストで説明する → 実際にできることを事例で見せるという
流れに合わせてデザインしています。
また、イラスト・写真・図版をバランスよく使い分け、長文を読まなくても内容が理解できるようにしました。
情報を「読む」のではなく「視覚的に理解できるよう整理」しています。
- ネイビー：信頼・専門性
- オレンジ：重要な結論・ベネフィット
- グリーン：CTA
- ホワイト：情報を整理する余白
この役割を最後までブレずに取り入れることで、情報量が多くても迷わず読み進められる設計です。
このように色を"装飾"ではなく"情報整理のツール"として使うことも意識しております。
FV設計
専門性の高い「LLMO」というサービスを扱うため、専門用語よりも「得られる成果」を先に伝え、
ユーザーが興味を持ちやすいFVを設計しました。
情報量は多いものの、文字の強弱や配色を工夫することで、一番伝えたい内容が瞬時に伝わるレイアウトを意識しています。
- 「開業2ヶ月でも予約満席を生む」を最も大きく配置し、サービスではなく"結果"を先に見せることでスクロールを止める設計になっています。
- 「LLMO」という聞き慣れない言葉はタイトルの一部ではなく補足情報として扱うことで、専門用語による離脱を防いでいます。
- 背景のブルーグラデーションはITやAIを連想させる色でありながら、彩度を抑えることで女性向けサービスにも馴染むトーンに調整されています。
- CTAだけをグリーンにすることで、オレンジ・ネイビー中心のFVでも自然と視線が集まる配色になっています。
専門性を伝える配色設計
AI・SEOという無機質なテーマを、親しみやすく理解しやすい印象に変えるため、ネイビーを基調にオレンジをアクセントとして使用しました。
- ネイビーで専門性・信頼感を演出しながら、オレンジを見出しに使用することで堅くなりすぎない印象を作っています。
- オレンジは「重要な結論」に限定して使用されているため、自然と視線が集まります。
- グリーンCTAがページ内で唯一の役割色になっており、「読む」と「行動する」が色だけで区別できています。
難しい内容を理解しやすくする情報設計
LLMOという新しい概念を、専門知識がない人でも理解できるよう、図版・イラスト・写真を組み合わせて情報を整理しました。
「LLMOって何？」→イラスト→スマホ画面→図解→事例という順番になっています。
つまり読むではなく見るだけでも内容が理解できます。デザインで理解を助けています。
イラストを活用した親しみやすさ
AIやSEOは難しい印象を持たれやすいため、イラストを取り入れることで心理的なハードルを下げ、最後まで読みやすい雰囲気を作りました。
- キャラクターイラストを繰り返し登場させることで、ページ全体にストーリー性が生まれています。
- イラストが説明役のような存在になっており、ユーザーと一緒に学んでいく印象を与えています。
- 写真だけで構成するよりも、専門性と親しみやすさのバランスが取れています。
視線誘導を意識した文字組み
情報量が多いLPでも、ユーザーが重要なポイントだけを拾い読みできるよう、文字サイズ・色・余白にメリハリをつけました。
- 強調したい言葉だけをオレンジや太字にすることで、スクロールしながらでも内容を把握できます。
- 一文を短く区切り、改行位置を調整することで、スマートフォンでも可読性を高めています。
- ジャンプ率が大きすぎず、小さすぎないため、全体的に落ち着いた読みやすい印象になっています。
写真と図版の使い分け
抽象的な説明だけでは理解しづらい内容を、実際の画面や写真を組み合わせることで、サービス内容を具体的にイメージできるよう設計しました。
- AI画面やスマートフォンのモックアップを使用することで、「実際に使うイメージ」が湧きやすくなっています。
- 実写写真とイラストをバランスよく組み合わせることで、ページ全体が単調になっていません。
- 「実績」「サービス」「利用イメージ」が写真によって自然に区別されています。
