【概要】
SNS運用スクール「エスラボ」の架空ランディングページのデザインを担当しました。
構成やライティングは支給素材を元に制作し、全体のビジュアルデザイン・UI設計を担当しました。
ユーザーが安心感を持って読み進められるように配色やレイアウトを工夫しました。
【デザインのポイント】
① ヒーローイメージ
・課題
SNS運用を学びたいユーザーは「難しそう」「自分にできるかな」と不安を抱え、最初の印象で離脱する可能性がありました。
・目的
学習未経験者でも安心して取り組めるよう、講師の親しみやすさを伝え、「自分にもできそう」と感じてもらう。
・工夫した点
講師の明るい笑顔の写真を使用し、安心感と親しみやすさを演出。第一印象で心理的ハードルを下げ、学習に前向きになれるよう工夫しました。
② ピンク×パープルの配色
・課題
20〜30代女性をターゲットに、「親しみやすさ」と「華やかさ」を伝えつつ、ビジネス感のある信頼性も必要でした。
・目的
女性ユーザーが楽しそうに学べる印象を受け、自然に情報に目を向けてもらうことでスクールへの興味を高める。
・工夫した点
基調色にピンクとパープルを採用し、柔らかさとSNSらしいポップさを演出。CTA部分には濃いピンクを使い、自然に視線が向かうよう設計しました。
③ フォント選定
・課題
情報量が多いと文字が読みづらく、離脱につながる恐れがありました。
・目的
ユーザーがストレスなく読み進められるようにし、スクール内容への理解と興味をスムーズに促す。
・工夫した点
見出しは丸みのある太字でフレンドリーに、本文は可読性重視のゴシック体で統一。読みやすさを優先しつつ、親しみやすい印象を持たせました。
④ 情報整理と視線誘導
・課題
スクールの特徴や実績、受講者の声など多くの情報を整理せずに並べると、読みづらさや途中離脱のリスクがありました。
・目的
ユーザーが迷わず段階的に理解でき、スクールの価値を自然に認識してもらう。
・工夫した点
「悩み → 解決 → 実績 → 受講者の声」の順で情報を配置。背景色の切り替えでセクションを明確に区切り、視線の流れをコントロールしました。
⑤ スマートフォン閲覧を前提とした設計
・課題
スマホでの閲覧が中心のため、文字やボタンが小さいと離脱する可能性がありました。
・目的
スマホユーザーが快適に操作でき、最後までスクール情報を見てもらうことで、興味や理解を深める。
・工夫した点
縦スクロールを前提に、1セクションごとに情報を完結。CTAや重要箇所はタップしやすいサイズと余白を確保し、移動中でも快適に閲覧できるUIを意識しました。
⑥ 直感的に理解できる情報設計
・課題
サービスの強みやメリットが文章だけでは伝わりにくく、離脱のリスクがありました。
・目的
視覚的にサービス内容を把握でき、直感的に価値を理解してスクロールを続けてもらう。
・工夫した点
「受講生の声」や「サービス特徴」にアイコンやイラストを取り入れ、直感的に理解できるよう工夫。視覚的整理で瞬時に把握でき、スクロール中も飽きさせないデザインにしています。
【ターゲット】
SNSを伸ばしたいけどやり方がわからない、または副業や集客を考えている20〜30代
【使用ツール】
Adobe Photoshop