「Claudeを使ったWebサイトの作り方」という記事は、最近ちょいちょい見かけるようになりました。ですが、よく見ると自社サイトや試作が題材のものがほとんどで、本当の意味での“クライアント案件”の実例は、驚くほど見当たりません。AIでつくりました！というのが言えることが少ないのが実際のところでしょう。
そこで今回は、アルファスが実際のクライアント案件でClaudeを使い倒した例を、包み隠さずご紹介します。題材は、長野オートメーション株式会社様の「NATのものづくり」というコンテンツです。
はじめに、本コラムでの事例紹介を快くご許可いただいた長野オートメーション様に、心より御礼申し上げます。ありがとうございます。
「イラストで工場見学ができる」コンテンツ
まずは、ぜひ実物をご覧ください。
長野オートメーション「NATのものづくり」
Googleマップのような操作感で、アイソメ（等角）のイラストで会社全体を俯瞰できます。拡大・縮小すると建物の中まで見え、ドット絵の人物が動き回り、装置や、そこで使われている技術、現場の写真や採用インタビューまでが連動する。イラストの中を歩いて“工場見学”ができるコンテンツです。
この部分を作り込んでいたのは、今年の3月ごろ。当時のClaudeの最新モデル「Claude Opus 4.6」を主に使い、いくつかの案件と並行しながら進めていましsた。正直に言うとClaudeを使ってから約2ヶ月近くかかりました。AIだからといって、２～３日でできるなんてことはありません。その前段の試行錯誤まで含めると、実際はもっとかかっています。
なお、Claudeでフル実装する前には、別のライブラリで作った“前バージョン”も存在します。ただ、そちらは使っている技術がまったくの別物なので、今回はClaudeで作った範囲だけに絞ってお話しします。
提案自体は「AIとは関係ない」ところから
意外に思われるかもしれませんが、「会社全体をイラスト化する」という構想自体は、提案の段階からあったもので、AIとは関係ありません。
提案時点では、実務でAIすら使っていない状況でした。
長野オートメーション様ではFA装置を製作されているので、写真を載せることがゼロに等しいので、リニューアル前からイラストを使ってFA装置を表現していました。
今回も同じようにイラストを載せるだけではおもしくない。そこで、アルファスの技術力を度外視してでも、おもしろい提案をぶつけることにしました。なかなかチャレンジングでしたが、結果として受注に至りました。
ちなみにボツになった図面（構想図）も見ることができます。これは先方との打ち合わせで生まれたアイデアです。装置の写真は載せれないけど、図面は載せれるから、技術力を見てもらえるんじゃないかという話から生まれました。
イラスト化の地道な作業
受注してからは、ひたすら地道な作業が続きます。実際に長野までスマートフォンを握りしめて撮影に行き、すべての建物の中を少しずつ撮らせていただきました。
それを、Googleマップの俯瞰図を参考に寸法をなんとなく測りながら、各工場をイラストに起こしていきます。
最初の試作は「ダメ出し」から始まった
ある程度“動くもの”ができたので、先方に見ていただきました。
……が、反応は芳しくありません。動きがとてももっさりしている。クリックすると構造図は出るけれど、“おもしろみ”がない。「Googleマップはなんとなくずっと見ていられるのに、これにはそれがない」と。
そこで作り直しです。まず、「Googleマップは、なぜ見続けられるのか」を言語化しました。
たどり着いた答えは、“散策し続けられること自体が楽しい”＝「何か発見がある」ということ。ここが抜けていたのです。
そこからUIを一新しました。装置をクリックすると、使っている技術が出たり、その場所の写真や採用インタビューと連動する。そんな“発見”のあるコンテンツを作り込み、GoogleマップライクなUIをデザインし直しました。
実装コストの壁とClaude
新規に作成したイラスト素材と、当時のホームページ（旧サイト）の装置イラストや写真を流用する。そこまでは設計できました。
しかし、実装コストと納期がまったく読めない。どう考えても、相当な規模になりそうです。
ここで、Claudeを使うことを思いつきました。
Claudeでぶつかった壁と、その突破
Googleマップのような仕組みは、すでに世の中にライブラリがあります。それをベースに、ゼロから作り直しました。
ひとつの工場をGoogleマップ風に表示するところまでは、すぐにできました。大変だったのは、そこからです。
① 画像が重い問題
以前のバージョンが重かった原因は、1枚の高解像度画像を使っていたことでした。
そこで、AIを使って画像を分割し、ズームの倍率ごとに画像のバリエーションを用意しました。まさにGoogleマップと同じ考え方（タイル表示）です。これにより、読み込みが格段に速くなりました。
AIがなかったら、画像分割だけで数日かかっていたと思います。
② 装置の配置がままならない
当時は、まだAIの画像認識が今ほど高くありませんでした。座標を指定しては試し、の繰り返しで、装置をマップ上の正しい位置に置くだけでも一苦労です。
装置を置いていないマップと、置いたマップを用意し、2つを照らし合わせて配置する。それでも、結構な頻度で失敗します。
ちなみに、マップと装置を別々に管理しているのは、装置の場所変更や入れ替えが起きるためです。
最終的には、マップに対して装置を配置するための専用ツールをClaudeで作成しました。装置だけでなく、人やアイコンもこのツールで配置します。人は複数パターンを用意し、歩くルート・向き・停止時間まで設定できるように。これらをすべてJSONで書き出し、説明文などはWordPressのカスタムフィールドを参照する設定にしました。おかげで、文言の編集がとてもスムーズになりました。
③ ズームと、1階・2階の切り替え
ズームの動きは、Claudeとやり取りしながら細かく調整しました（たまに、変なタイミングで倍率が変わったりします）。
そして最も時間がかかったのが、1階と2階の切り替えです。ズレる、すぐにバグる……。ここは公開直前のレビューでも動きがおかしかったりと最後まで苦労しました。
今のモデルだと、スムーズにできるのかもしません。
UIは「デザインを渡して、実装してもらう」
UIについては、デザインしたスクリーンショットをアップすると、かなり近い形でコーディングしてくれます。ただし細部は、こちらから細かく指示しないと合いません（とくに色は結構変わります）。
そして、ひとつ実感したこと。デザインまでフルでAIに作らせると、どうしても“AIらしい癖”が出ます。だからこそ、FigmaやXDで作ったデザインを反映させるほうが、オリジナリティが出て良い、というのが今のところの結論です。
頭の中のイメージが、そのまま形に
こうして、当初から頭の中でイメージできていたものを、ほぼそのまま実現できました。
工場の間取りは、本当にそのままです。ぜひマップで“工場見学”を体験してみてください。
……ちなみに、第6工場と第7工場はフィクションです（笑）。探してみてください。
「ちょっと違うアイデア」を、形にしませんか
Claudeを使えば、こうした“他とはちょっと違う”コンテンツも、現実的に形にできます。もちろん、ここまで読んでいただいて分かるとおり、楽に一発でできたわけではありません。構想・撮影・イラスト・UI設計・地道な実装と調整。その積み重ねの上で、AIが大きな推進力になった、というのが実際のところです。
アルファスでは製造業に特化して、こうしたWebの新しい見せ方の企画から実装までをお手伝いしています。「自社の技術や現場を、ありきたりじゃない形で見せたい」という企業様は、ぜひ一度ご相談ください。詳しくは製造業の会社がつくるホームページ制作をご覧ください。
あらためて、事例の掲載をご快諾いただいた長野オートメーション様に心より感謝申し上げます。
よく読まれている記事
直近7日間でよく読まれた記事です。