本サイトは、スクール課題(模擬案件)として制作した、株式会社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実機での表示チェックを繰り返し実施

