Speak+ オンライン英会話スクール LPデザイン

プロジェクト概要

デザインコンセプト

グリーンを基調に、安心感・信頼感・親しみやすさを表現しました。カードデザインや余白を活かして情報を整理し、初めてLPを見る方でも読み進めやすいレイアウトを意識しています。無料体験への申し込みをゴールとし、共感から行動へとつながる構成を意識しました。

ファーストビュー

• 初心者でも安心を最初に配置
• CTAをファーストビュー内に設置
• 写真を明るく加工して親しみやすく

お悩み

• カード型で情報をまとめ、読みやすくしました。
• アイコンによって内容を瞬時に理解できるデザインにしています。
• 余白を広めに取り圧迫感をなくしました。

特徴

• イラストを使い初心者にも親しみやすい印象を出しています。
• 3つに絞り情報を整理し、一目で特徴が理解できる構成にしました。
• カード型ではなく余白を広く取ることで、お悩みセクションとの差別化を図りました。

レッスン開始までの流れ（STEP）

• 「申し込み後はどう進むの？」という不安を解消するため、レッスン開始までの流れを4ステップで分かりやすく整理。
• ステップごとにイラストを配置し、視覚的にも理解しやすいデザインを意識しています。
• スマートフォン版ではカードを縦一列に並べ、スクロールしながら自然に読み進められるよう設計しました。

受講生の声（Voice）

• 吹き出しデザインを採用することで、実際の会話のような親近感を演出しました。
• 年代や職業、評価を表示することで、利用者像がイメージしやすくなり、信頼感につながるよう工夫しています。
• 左右交互のレイアウトにすることで、単調になりがちな口コミ一覧にリズムを持たせました。

CTA（無料体験）

• LP全体を読み終えたタイミングで無料体験へ誘導し、自然な導線になるよう設計しました。
• 「完全無料」「約30分」「オンライン参加OK」といった安心材料をボタン付近に配置し、申し込みへの心理的ハードルを下げています。
• CTAボタンにはブランドカラーのオレンジを使用し、視線を集めながらも全体の雰囲気を崩さない配色を意識しました。

フォーム

• 必要な入力項目をシンプルに整理し、初めて利用する方でも迷わず入力できるフォームを目指しました。
• 必須・任意項目を明確に表示し、入力時のストレスを軽減しています。
• PC版・スマートフォン版ともにレスポンシブを意識し、どのデバイスでも操作しやすいレイアウトに設計しました。

レスポンシブデザイン

PC・スマートフォンの両方で最適なユーザー体験を提供できるようレスポンシブデザインで制作しました。

• 縦スクロールでも情報が自然に入ってくる構成
• 読みやすさを最優先に、余白や文字を最適化
• ボタンを大きく、タップしやすい配置に

PC版の世界観を維持しながら、スマートフォンで読みやすく、縦スクロールでもストレスなく読み進められるデザインを心掛けました。

フォームデザイン

予約フォームのデザインにも取り組みました。

ワイヤーフレーム

PC版ではワイヤーフレームの制作を行いました。制作スピードを上げるため、後半（受講生の声以降）はフレームなしで制作しています。

制作を通して学んだこと

初心者向けサービスでは、情報量を増やすのではなく、「安心感」を段階的に伝えることが重要だと考えました。PC版・スマートフォン版ともに、情報の優先順位や余白、レスポンシブでの見せ方を意識し、一貫したユーザー体験を目指しました。