【模擬案件】AI活用業務効率化セミナー 集客LP(Studio制作)

本サイトは、スクール課題(模擬案件)として制作した、株式会社AIビジネスラボ様のオンラインセミナー集客用ランディングページ(LP)です。起業直後のため「低コスト・短納期・高品質」という厳しい要件に対し、ノーコードツール「Studio」を選定して構築いたしました。

全体概要

担当範囲

企画・構成案作成 / デザイン / Studio実装 / レスポンシブ対応

使用ツール

Studio

制作期間

2週間

課題と解決策

課題 Before
  • 短納期(2週間以内)で公開したい
  • ビジネスとしての信頼感が欲しい
  • 専門家としての提案が欲しい
解決策 After
  • サーバー契約やコーディング時間を大幅に短縮できるStudioを採用し、デザインから公開までを2週間で完遂
  • 青・白・グレーを基調とした落ち着いた配色と、明朝体・ゴシック体の使い分けにより、誠実さとモダンな印象を両立。
  • 必須項目に加え、SNSリンクの導線やQ&Aセクションを配置。スマホからの閲覧を想定したレスポンシブ対応を徹底。

デザインのこだわり

コンセプト

「AIがもたらす、スマートな未来」

配色

知性を感じさせるブルー系をメインに、清潔感のある白と洗練されたグレーで構成

フォント

可読性の高いゴシックを採用

UXで意識したこと

依頼者の「専門家としての提案」を求める声に応じ、セミナーのベネフィットが直感的に伝わる要素や、SNSリンクなどの導線を追加で配置しました 。

レスポンシブ対応


外出先からの閲覧も想定し、指で押しやすいボタンサイズや、レイアウト崩れがないよう細部まで調整しました。

アニメーション

スクロールに合わせて情報が自然に目に入る演出を実装 。
「受講者の声」セクションでは、限られたスペースの中で多くの情報を整理するため、カルーセルを導入した。Studioの標準機能に加え、よりスムーズな挙動を実現するために自らリサーチを重ね、最適なアニメーション速度や操作感にこだわって実装した。

読みやすさへの配慮

よくある質問(FAQ)は、ページが長くなりすぎないようアコーディオン形式を採用。ユーザーが知りたい情報に最短で辿り着けるよう、挙動の細部までリサーチし、直感的に操作できるインターフェースを構築した。

制作プロセス

STEP
要件分析

ターゲット層(20~40代)が好むスタイリッシュなサイトをリサーチ

STEP
構成・デザイン

Studio上で直接デザインを構築し、リアルタイムでプレビューを確認しながらブラッシュアップ

STEP
実装・検証

フォームの動作確認、iPhone/Android実機での表示チェックを繰り返し実施

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!