日本初のVercelエキスパートパートナー「chot Inc.」が明かす、Orizmを活用した自社サイトリニューアルの裏話（後編）

次世代Webサイト構築プラットフォーム「Orizm」を提供するちょっと株式会社は、7月6日に自社のコーポレートサイトを全面リニューアルしました。前編に引き続き、後編ではAIやOrizmを活用したサイトリニューアルの裏側を、ちょっと社CEOの小島芳樹、フロントエンドエンジニアの石川雅述、デザイナーの山本悠が語ります。

小島芳樹
chot Inc. CEO
プロトタイプ制作や企画立案、コンテンツ制作などを担当

石川雅述
chot Inc. フロントエンドエンジニア
フロントエンドおよびCMSの開発、RAG構築やAIアシスタントの実装など、開発全般を担当

山本悠
chot Inc. デザイナー
全体のデザイン、イラスト制作を担当

サイトリニューアル開発でどのようにAIを活用したのか

石川：ちょっと社では、エンジニア全員にコードを書くためのAIエージェント「Claude Code」というツールが配布されており、基本的にはそれを使って開発をしていました。今回のリニューアルでも、Claude Codeに指示を出してコードを書いてもらい、それを人間がチェックし、さらに指示を出して修正していくというサイクルを繰り返して開発を進めていました。

前編でも触れたとおり最初から実装ではなく、技術検証をまず行ったという話がありましたが、特にその技術検証でAIがとても活用できたと感じています。

AIは人よりもかなり速くコードを書いてくれるので、その分いろいろなことを試しやすいというメリットがあります。試してみてダメだったら別の方法を試すといった検証が、AIを使うことで高速に回せるのは、大きな利点だと感じています。

AIを活用して、Figmaのデザインからコーディング

石川：検証後の開発では、デザインツールのFigmaでデザイナーが作ったものをAIに読み込ませて、それを元にサイトを作りました。

Figma MCPは今回初めて使ったのですが、時間短縮になるだけでなく、目視では見落としがちな数値のずれも、AIの方が高い精度で検出してくれるので助かりました。具体的には、Figma MCPの機能で計測した数値をもとに正確にデザインを再現できることや、Figmaで指定したデザイントークン（フォントや色など）をもとに、自動でコードへ変換してくれる点です。今後も使っていきたいと思っています。

Orizmを導入して良かった点

石川：以前利用していたmicroCMSとOrizmを比べたときに感じるメリットは、管理画面の柔軟性です。

今回Orizmを使用してサイト全体のほとんどのページを更新できる仕組みにしています。microCMSのときは、更新できないページも多くありました。それがほぼ全ページ、共通ヘッダーや共通フッターも含めて更新できるようになったのは、運用担当としても便利になったと感じています。

また、Orizmであれば管理画面自体を実装できるため、編集者にとって使いやすい画面を意識して作りました。

AIアシスタントに使ったAI技術とは

石川：まず裏側で動いてるAIモデルには、Chat GPTやClaudeのようなモデルがありますが、これらはVercelのAIゲートウェイ（AI Gateway）というサービスを経由して使用しています。

AIゲートウェイを使うと、世の中に存在するさまざまなAIモデルをまとめて管理でき、簡単に切り替えて使えるというメリットがあります。

その裏側では、Vercelが開発しているオープンソースの開発ツールキット「Vercel  AI SDK」を使っています。これがAIアシスタントを作るライブラリ的な役割を担っており、必要な機能が一通り揃っているため、基盤として活用しています。

小島：ちょっと社はもともとVercelとパートナーシップを結んでおり、代理店という立場でもあるため、比較的新しい技術をいち早く取り入れられる環境にあります。受託開発のお客様からも「VercelやNext.jsのこの技術を使ってほしい」とご依頼をいただくことが多く、知見も蓄積されていました。

今回はそうした知見を生かし、AIアシスタントを開発するにあたって、VercelのAI GatewayやAI SDKといった新しい技術をフル活用しました。さらに、AIが会話の文脈を記憶できるよう、RAGというデータベースの仕組みも取り入れています。

石川：RAGを実現するために、Neon（ネオン）というデータベースサービスを使っています。

Orizmやサイト内のデータをAIに参照させたいと考えていましたが、そのデータの形式のままAIに渡すことはできませんでした。そのため、Orizmやサイトのデータを、AIにとって扱いやすい形式に変換したうえで、あらかじめNeonに保存しています。

AIがサイトのデータをもとに質問に答える時には、Neonからデータを取得して回答を生成する仕組みになっています。

小島：今回は、Orizmを使ったサイト構築サービスのための実験的なプロジェクトでもあったため、AIゲートウェイやAI SDK、Neonなど、いくつかの製品を導入しました。このノウハウをもとに、現在は製品化を進めているところです。

お客様に同様の機能を提供する際には、現在開発中の「Orizm RAG」によってエンジニアの方が迷うことなくAIアシスタントを実装できる仕組みができている予定です。

今後もコーポレートサイトでは新たな取り組みに挑戦し続け、そのなかでお客様にも展開できそうなものは製品化していきたいと考えています。

今回のサイトリニューアル開発の裏側で大変だったことは？

小島：当初の企画では、トップページのデザインはChat GPTのようなファーストビューにテキスト入力欄だけがあるようなイメージを考えていました。ただSEO的な問題もあり、構成を変える必要がありました。

キャラクターについては、VTuberのようなキャラクターを動かす案も検討しましたが、3Dモデルは技術的な難易度や制作コストが高く、この短期間で実現するのは難しいと判断しました。そこで、デザイナーが手描きしたロボットの絵をもとに、AIで3Dモデルを起こしてもらう方法をとりました。

山本：鉛筆で書いたスケッチから、サイトに配置している3Dのアニメーション素材を直接出力させました。

小島：キャラクターの評判は非常によく、昨日も初めてAIアシスタント経由で商談したお客様がいましたが、「あのロボットなら優しく答えてくれそうだから、ついついなんか使っちゃいそうですよね」と言っていただきました。

AIアシスタントの実装は難しかった？

石川：全体的な話で言うと、AIアシスタントの実装がすごく難しかったと思っています。これまでの開発は、良くも悪くも書いたコード通りに動くという性質がありました。しかし、AIアシスタントの開発は、日本語の指示（プロンプト）でAIの挙動を決めていく作業になるので、コードのように厳密に制御することができず、どのように動くか分からない中で、どう実現していくか悩んでいました。

まだ試行錯誤中なところもありますが、まず期待する挙動をドキュメントに日本語で書き出し、実際にAIチャットを動かして、その通りに答えているかを一つずつ目で確認する、という作業をおこなっています。

ただ、これを人の手ですべて確認していくとかなり時間がかかってしまいます。今は、「期待通りに動いているかどうかのチェック」自体をAIにやらせる方法を試しているところです。今後はAIアシスタントの精度をどう上げ、難しいことができるようにするかチャレンジしたいと思います。

小島：ページが増えていくと、AIが出す回答も変わっていくでしょう。日々チャットログを全部見ていて、あまり親切ではない回答や少しずれた回答を見つけたら、その都度チューニングしています。

こうしたチューニングを重ねることで、AIの回答の質を上げ、コンバージョン率の向上にもつなげていきたいと思っています。

リリース後もサイトチューニングは続けていく

小島：これからは、SEOやアクセス解析のデータを継続的に分析しながら、実際にお客様に求められているものや、まだ実現できていないことを改善していきたいと考えています。

リリース前は、どんな反応があるのかまったく分かりませんでしたが、公開してみると実際の反応が見えてきます。検索エンジンへの反映状況や、AIアシスタントがどんな回答をしているかという生のデータが日々届いています。

現在は毎週データ分析をおこない、レポート作成や新規コンテンツの追加、AIのチューニングを、チームを組んで進めています。また、スケジュールの都合で公開できていない機能もいくつかあるため、順次公開の準備を進めているところです。

今回のサイトリニューアルを振り返って

山本：お客様に「Orizmには大きなメリットがあります」とお伝えしている立場として、それを実際に自分たちが使えていることに充実感を感じています。お客様には、自分たちが実際に使い続けたいと思えるもの、自由が感じられるものを提供したいのです。

従来のようにサイト内を回遊するのではなく、AIエージェントと対話することで必要な情報を取得できるというWebサイトのあり方も、これからお客様に提供していきたいと考えているものです。

石川：エンジニア目線で言うと、今回のリニューアルの目玉であり、技術的に最も注力したのがAIアシスタントの開発でした。

先ほどお話ししたとおり、今回はかなり苦労した部分です。ただ、Vercelなどが提供するサービスをはじめ、AIアシスタント開発を支える基盤が最近整ってきているので、今後は今回のように何もかもを自分たちで作らなければいけない場面は減っていくと思います。

さまざまな技術を活用することで、AIアシスタントの開発がしやすくなっていると感じますし、今後はこうしたシステムがより増えていくのだろうと、開発を通して強く感じました。

小島：お客様の反応が、これまで手がけてきたサイトとはまったく違うというのが私の印象です。問い合わせや商談に至ったお客様が、興奮しながら触ってくださっていて、「こんなことを試してみたらこんな回答があって」と嬉しそうに話してくださる方も多いんです。単なるWebサイトとして見られていないと感じます。

これまでのWebサイトの常識が変わりつつあり、AI中心の世の中になっていくのだと実感しました。

商談の雰囲気も変わってきていて、「これは面白そうだ」と提案に乗ってくださったり、「導入するにはどうしたらいいんですか」と一緒に考えながら商談してくださったり、これまでとはまったく違う反応をいただいています。

これまでは、高度な技術は興味のない方にはなかなか伝わらない部分もありましたが、そうした壁がAIによって少し取り払われた感覚があります。

AIの時代にフロントエンドエンジニアが学ぶべき技術とは

石川：今回のリニューアルもそうでしたが、自分でコードを書くことはほとんどなく、AIがコードを書いてくれます。プログラミングを学ばなくてもAIがコーディングできる時代になっていくとは思いつつ、その時代がいつ来るかは正直分からないので、AIに全部任せるのではなく技術を学んでいくことは大切だと感じています。

その学びにAIを活用することが、今は良さそうだと個人的に思っています。AIは高速にものを作ってくれる側面もありますが、世の中のさまざまな情報を調べてくれる活用方法もあります。

例えば、コーポレートサイトのAIアシスタント機能は、ゼロから作ったというよりは、Vercelがオープンソースとして公開しているサンプルコードをベースにしています。そのベースとなるコードをAIに作ってもらいながら、どのように動いているかをAIに聞いて理解し、自分の学びに反映させていく方法もあると考えています。

山本：職業としての仕事だけでなく、そうではない活動から生まれるものにも、人の心を動かす力があり、実際に社会を支えています。AIがその可能性を広げていくことを期待しています。

だからこそ、職業としての訓練よりも、人間としての学びや遊びを一人ひとりが深めていくことが、重要になっていくはずだと思います。

その一方で、何でも作れて、使い捨てることのできる時代であるとも感じます。作ることが何を奪い、犠牲にするのかを意識することは、技術者やデザイナーの倫理であると感じています。

このコーポレートサイトでは、みんなに文章を「読ませよう」とはしていません。AIに聞けば答えが返ってくるという体験があれば、検索する必要も、目次から情報を探す必要もなくなるからです。

読むという時間を、人から奪わない。そのための体験をデザインしているつもりです。人からものを奪わない、そうした正常化のために、デザインは使えるのではないかと思っています。

小島：私は、PCのWebサイトからスマートフォンのWebサイトへと大きく変わる、いわゆるモバイルシフトの時期を目の当たりにしてきました。今、それと同じような変化がAIによって起ころうとしているのだと感じています。

世間ではAIO（AIによる最適化）という言葉とともに、文章やデザインをいかに効率的かつ美しく作るかという点に注目が集まりがちですが、それ以上に、これからのAI自体がWebサイトのあり方をどう変えていくのかを見てみたいと思っています。

PCからスマートフォンへの移行期には、画面の横幅が縮まったことでレスポンシブデザインが普及し、今ではそれが当たり前になりました。同じように、これからはAIが当たり前に存在することを前提に、どう情報を発信していくかを考えていく必要があります。今回のプロジェクトでは、その姿に少しでも近づけたのではないかと考えています。

かつても、みんなが試行錯誤しながらWebサイトを作っていた時期がありました。今まさに、自社サイトで最先端のAI活用のスタートを切ることができたので、この取り組みをもっと広め、自分たちでもさらに磨き上げていきたいと思っています。