「BrightAI」AIスタートアップ企業

【制作背景と狙い】

本サイトは、AIチャット・データ分析・API連携を扱うSaaS企業「BrightAI Inc.」のコーポレートサイトです。
「AIで業務効率を2倍に」という分かりやすい利点を前面に出し、制作会社やディレクターの検討初期でも使える内容にしました。
PoC（お試し導入）から本番運用までの流れを見やすく整理し、信頼できる情報と他案との比較のしやすさを重視しています。

ターゲットは、

• 提案資料や見積もりを作るときに、参考になる情報がほしい制作会社やディレクター
• 社内で稟議を通すための根拠や、導入の進め方を知りたい事業会社の担当
• システム連携やセキュリティ、将来の拡張性について概要を把握したい技術選定に関わるメンバー

【解決したい課題とデザインの工夫】

① 「はじめて見た人」にもすぐ価値が伝わるトップ設計

▶︎課題

AIの説明が抽象的だと「結局なにができるの？」と感じてすぐ離脱してしまう

▶︎工夫

• 見出しで 「業務効率を2倍に」 と数字でハッキリ伝える
• 3つの特長（最短2週間・ノーコード・API連携） をアイコン＋短い文章でわかりやすく紹介
• メインボタンは 「（無料）資料を受け取る」 と具体的に次の行動を示す

② 「比べやすい」情報の作り方

▶︎課題

依頼先が多すぎて「どこに頼めばいいか分からない」状態になりやすい

▶︎工夫

• 比較表（自社/制作会社/クラウドソーシング）で一目で違いを理解できる
• 「こんな企業におすすめ」というリストを出して判断をサポート
• 5つの選ばれる理由を具体的に書き、導入しやすさを後押し

③ 「社内提案」にそのまま使える資料性

▶︎課題

社内で稟議を通すための根拠や手順が足りず、決裁が進みにくい

▶︎工夫

• KPI（例：対応時間40%削減、レポート速度2倍） をカードで視覚的に提示
• 導入フロー（問い合わせ→提案→PoC→本番）を時系列で明示
• 海外・多言語対応など将来の拡張にも触れて、長期導入をイメージしやすく

④ 「スマホでも快適」に見られる工夫

▶︎課題

スマホで見づらいとすぐ離脱されてしまう

▶︎工夫

• 画面幅・行間・余白を端末サイズに合わせて調整
• ハンバーガーメニュー＋背景マスクで迷わずナビゲーションできる設計
• 入力フォームはスマホに最適化（電話番号の分割入力、必須チェック、入力例の表示）
• FAQはアコーディオン形式で必要なときだけ開けるようにして、画面をスッキリ

【ページ構成（主なセクション）】

• ヒーロー（ベネフィット＋特長＋信頼チップ＋主CTA）
• 課題提示→解決の提案（3つの悩み→ワンストップで解決）
• 選ばれる5つの理由（スピード/多機能/根拠/連携/価格）
• サービス3本柱（チャット/分析/連携）をカードで要点表示
• 比較表＋おすすめ企業像
• 導入事例・KPIカード（数値で効果イメージ）
• 海外・多言語対応（将来拡張性）
• 導入フロー（問い合わせ→本番）
• 会社情報 / 採用情報（企業らしさの補完）
• 資料請求・相談フォーム（同意チェック・送信ボタン）
• FAQ（アコーディオン）

【技術面のポイント】

▶︎HTML構造

• <header> <main> <section> <nav> <footer> 等のセマンティックタグで情報設計

▶︎アクセシビリティ

• スキップリンクで本文へジャンプ
• aria-label/aria-controls/aria-expanded をナビ/FAQに付与
• ボタンのヒット領域とフォーカス考慮

▶︎CSS

• BEM命名で保守性向上
• RESSでブラウザ差異を抑制

▶︎アニメーション実装（jQuery）

• ハンバーガーメニュー＋マスクの開閉制御
• スクロールのフェードイン（軽量演出）
• FAQアコーディオン

▶︎フォーム

• required/type="email" "tel"/inputmode/pattern で入力補助とバリデーション

▶︎パフォーマンス

• 画像の適切なサイズ/cover、必要最小限のJS

【ひとこと】

「小さく速くつくり、早く価値検証」をテーマに、提案にそのまま使えるUIと導入後をイメージできる情報設計にこだわりました。
「既存SaaSとの連携を前提に段階導入したい」というケースを想定し、比較・根拠・導入プロセスをワンページで完結できるよう設計しています。