AITOLIE 公式サイト

プロジェクト概要

AITOLIE公式サイトは、「AI × 人の仕上げで、速く・美しく。」をコンセプトに制作した自社コーポレートサイトです。
サイト自体がサービスのショーケースとして機能するよう、AIチャットボットによる24時間自動見積り機能を実装しています。

主な機能・特徴

• AIチャットボット - OpenAI GPT-4oを活用した対話型見積り。ユーザーの要望をヒアリングし、最適なプランを提案します。
• 見積書・契約書PDF自動発行 - チャットで確定した内容から、即座にPDFを生成。クライアント情報を入力するだけで完了。
• 管理画面 - 全セッションのログ確認、見積発行状況の確認が可能な管理ダッシュボード。
• ダークモードUI - 目に優しく高級感のあるダークテーマ。ゴールドのアクセントカラーでブランド感を演出。
• フルレスポンシブ - PC/タブレット/スマートフォンすべてに最適化されたレイアウト。
• 高速ローディング - 不要なフレームワークを排除し、バニラJS + CSSで軽量に設計。

デザインのポイント

サイト全体のカラースキームは、信頼感と高級感を両立するブラック × ゴールドを採用。
ヒーローセクションでは動的な要素を控えめにし、メッセージ性を重視しました。

チャットボットのUIは、親しみやすさを出すためにチンチラのキャラクターをアイコンに採用。
「AIだけど温かみがある」という印象を目指しました。

技術的なチャレンジ

最大のチャレンジはAIの回答を見積書フォーマットに変換する処理でした。
会話の流れから項目・数量・単価を抽出し、JSON形式に構造化。それをPuppeteerでHTML→PDF変換しています。

また、セッション管理とメッセージログの設計では、JSTタイムゾーン対応やIPベースのセッション紐付けなど、実運用を見据えた細かい調整を行いました。

成果・効果

サイト公開後、問い合わせ対応の工数が大幅に削減されました。
24時間いつでもAIが初期ヒアリングを行い、概算見積りまで自動で完結するため、人間が対応するのは「本契約に進みたい」というホットリードのみ。

このAIチャットボット機能は、パッケージとして販売も行っています。