日々のWebサイト構築において、「要件定義からデザイン実装までに時間がかかりすぎる」と感じることはありませんか？ 私たちも、クライアントワークの中で同じような課題と常に向き合ってきました。今回は、ウェブサイト制作における“超上流工程から運用まで”を根本から変革するために私たちが現在プロトタイピングしているプラットフォーム「J.B.STREAM」の開発ストーリーと、当社独自のカルチャーについてご紹介します。
ドッグフーディングならぬ「キャットフーディング」通信 Vol.1
本題に入る前に、少しだけ私たちの社内カルチャーについてお話しさせてください。
IT業界では、自社製品を社内でテスト利用することを「ドッグフーディング」と呼びますが、当社のシンボルは「J.B.Cat（ネコ）」です。そこで私たちは、社内向けのプロトタイプ環境を自社ドメイン認証で限定公開し、それを「キャットフーディング」と呼んで日々新しい技術を試しています。
現在、今回紹介する「J.B.STREAM」のほかにも、何でも答えるエージェントの「J.B.AGENT」やウェブサイト監査ツールの「J.B.AUDIT」、人事考課用に作ってみた「J.B.ELEVATE」など、さまざまなプロジェクトが動いています。「いま、なんか面白いもの作ってるよ！」というワクワク感を社内で共有し、失敗を恐れずにAIや最新技術を試せるのが、このキャットフーディングの醍醐味です。
今回はその第1弾として、J.B.STREAMの裏側を公開します。
しれっと、キャットフード（リンク）を配置しています。
構想の原点：プロダクトオーナーの頭の中を、クリエイターに直接さらけ出す
J.B.STREAMの着想は、クライアントワークにおける非常に本質的な課題から生まれました。
プロジェクトを進める際、プロダクトオーナー（PO）には素晴らしい構想や事業計画があります。しかし、それを実際のウェブサイトという形にするには、ディレクターやIA（情報設計士）が要件を噛み砕き、情報を整理し、ワイヤーフレームを引くというプロセスが不可欠でした。
つまり、最終的なアウトプットの質や制作までのリードタイムが、担当するIAの力量に大きく左右されてしまっていたのです。
「POの要件（RFPや事業計画書）をそのままシステムに放り込むだけで、最適な構成が自動的に生成されるツールがあったら？」
これが最初のアイデアでした。私たちが目指したのは、単なる構成案の自動生成ではありません。競合分析や市場動向、アクセス解析、そして今後のWeb集客で必須となるGEO（AI検索最適化）やAIO対応といったファクトを網羅的かつフラットに取り入れた強固な情報設計をAIが瞬時に行い、POの頭の中にあるビジョンを、UIの骨組みとして一気にさらけ出すことです。
ここで重要なのは、「AIがデザインを完成させる」のではなく、「デザイナーがクリエイティブに昇華させるための最高の土台を作る」ということです。IAの属人性を排除し、ゼロからの作図にかかるリードタイムを極限まで短縮することで、デザイナーは本来の価値である「人の心を動かすビジュアルとUXの追求」に100%集中できる。そんなツールが欲しかったのです。
J.B.STREAM UI生成ダッシュボードイメージ
「構築」から「運用」までを1本の“Stream”にするデュアル・アウトプット戦略
この構想を進める中で、私たちは「構築フェーズ」だけでなく、「運用フェーズ」もシームレスに繋ぐ必要性に気がつきました。超上流工程からクリエイティブのアウトプット、そして公開後のコンテンツ維持・アップデートまでが分断されていては意味がありません。
そこでJ.B.STREAMでは、構築と運用を1本の連続した流れ（Stream）に統合し、AIによる「デュアル・アウトプット」を実現するアーキテクチャを設計しました。
- Figmaへの出力（クリエイティブへの昇華）: RFPや、GA4等のデータから得た改善案をもとに、AIがUI構造を生成し、FigmaへAuto Layout対応のネイティブデータとして直接出力します。AIがファクトベースの論理的な骨格を組み上げ、デザイナーのプロフェッショナルな手によって、それをクリエイティブへと昇華させる。 この流れるような連携こそがJ.B.STREAMの真髄です。
- CMSへの出力（即時反映）: テキスト修正やGEO・AIO対策としてのコンテンツ追加などは、CMS（.CONTENT等）へ下書きとして直接登録できます。さらに、独自開発のプラグインを導入することでWordPress環境への連携も実現しており、エンジニアを介さずに高速な施策検証（A/Bテスト等）が可能になります。
J.B.STREAM 監視ダッシュボードイメージ
GCPフルマネージド基盤とAI駆動開発のリアル
この壮大な構想を実現するため、プロトタイプ段階から将来の商用SaaS化を見据えた技術選定を行っています。
- サーバーレスアーキテクチャ: 初期コストを極小化するため、GCPのEventarcとCloud Runを採用したイベント駆動で構築しています。
- AIのブレを抑える工夫: 複雑な情報設計を行うAIの核には、コストとレスポンス速度の最適なバランスを考慮し、Vertex AI RAG EngineとGeminiモデルを採用。LLM特有の出力のブレを防ぐため、JSON Modeを駆使し、バックエンド（Python / FastAPI）ではPydanticによる厳格なスキーマ検証を行って、Figmaへ渡すデータを安定させています。
- Figma特有の壁: Figmaプラグイン側はReact + Vite + TypeScriptで開発。Figmaの仕様上、単一ファイルにビルドする必要があるため vite-plugin-singlefile を活用するなど、技術的なハックも取り入れています。
ハイライトは、Cursor 2.0 (Composer) を主軸にしたAI駆動開発です。.cursorrules でアーキテクチャ規約を強制することで、定型コードの実装を自動化し、私たちは「どうすればPOの意図をより正確にFigmaへ反映できるか」という本質的なロジックに集中できました。
さらなる進化へ：J.B.STREAMの今後の拡張予定
現在J.B.STREAMは、実用に耐えるUI構造データ出力といったPoCフェーズを乗り越え、さらなる高度化に向けた開発ロードマップを敷いています。今後は以下のような機能拡張を予定しています。
- AIの意図の可視化: ワイヤーフレームの生成と同時に、（再）整理された要件定義書やSWOT分析などのドキュメントも生成し、「なぜこの構成になったのか」というAIの思考プロセスをデザイナーへ共有。
- マルチLLM対応: Geminiに加えて、Claudeなど他のLLMを選択できるオプションの追加。
- プロンプトのカスタマイズ: ユーザー自身がプロンプトをチューニングし、出力傾向をコントロール。
- ルール・ポリシーの事前学習: プロジェクトごとのベースとなるレギュレーションや、既存のデザインシステムなどのルールを事前設定。
- ワイヤーフレームの継続的な精度向上: 出力されるUI構造データのさらなるリッチ化と最適化。
次世代のWeb運用を一緒に作りませんか？
これらを実現するためには、GCPバックエンドの本格的なパイプライン構築や、商用SaaS化に向けたマルチテナントデータのRLS（行レベルセキュリティ）保護など、チャレンジングな技術課題が数多く待っています。
「キャットフーディング」の環境で、IAの属人性をなくし、デザイナーとエンジニアの境界線を溶かし、止まらないグロースハックループを一緒に実装してみませんか？
モダンな開発環境で、AIを活用したプロダクト作りに興味がある方、ぜひ一度カジュアルにお話ししましょう！
■ エンジニア・デザイナーの方へ
私たちのものづくりへの執着や、カルチャーに少しでもピンと来たら、まずは気軽にお話ししましょう。スマートな面接ではなく、お互いのこだわりを語り合う時間にしたいと思っています。
カジュアル面談の応募はこちら
■ 制作・開発のご相談をご検討の方へ
「AIを使って何かしたいが、現場の泥臭い課題が解決できない」「型にはまったコーポレートサイトやシステムに限界を感じている」など、御社の『消えない付箋』をぜひ私たちに教えてください。
お問い合わせ・ご相談はこちら