2026年2月27日
生成AI
AIと共鳴する「バイブコーディング」の実践
AIと共鳴する「バイブコーディング」の実践
印刷現場の難題を「AI」と解く
注目を集める「バイブコーディング（AIとの共鳴開発）」。
それは単にAIにコードを書かせることではありません。人間の意図とAIの高度な推論能力が「共鳴」し、従来の開発フローでは数ヶ月を要したシステム構築を数日に短縮する、全く新しい制作パラダイムです。
今回は、印刷業界において最も頭を悩ませる「ギャンギング（面付け）」の自動化ツール開発を例に、ChatGPTとClaude Codeが示した圧倒的な実力差、そしてAI自体が「ディレクター」へと進化している開発最前線を体験してみました。
職人の「暗黙知」をデジタル化する：生産者ラベル50名のパズル
印刷現場において「面付け」は、コストと生産性を左右する最重要工程です。特に今回挑んだ「生産者紹介ラベル」の案件は、数学的な最適化問題としても難易度が高いものでした。
意外と時間を裂く多品種少量の面付け計算
- 多品種の同時処理: 約50名の生産者データ（氏名、顔写真、産地情報）。
- 極端な部数のバラツキ: 1,000枚から50,000枚まで、必要枚数が生産者ごとに全く異なる。
- 複雑な制約条件: 印刷機の最大通し数、用紙コスト、予備紙の確保、そして「版」の数をいかに抑えるか。
これまでは、経験豊富なベテラン職人が電卓を片手に、「Aさんは3面付け、Bさんは1面、余ったスペースにCさんを……」と、膨大なパターンの組み合わせをシミュレーションしていました。この数時間を要する「職人の暗黙知」を、WEB上で誰もが瞬時に実行できるシステムにする。それが今回のミッションでした。
制作プロセスの比較：ChatGPT vs Claude Code
この複雑なロジックを実装するため、私たちは生成AIの二大巨頭である「ChatGPT」と「Claude Code」を併走させました。そこで目撃したのは、単なる性能差を超えた「開発フローの断絶」でした。
ChatGPT：試行錯誤と「DL地獄」の40回
ChatGPT（Pro版）での開発は、従来の「対話型AI」の枠を出るものではありませんでした。
- 指示: アルゴリズムを提示し、JavaScriptコードを生成させる。
- 実行: 生成されたコードをコピーし、ローカル環境に保存。
- 検証: ブラウザで開き、50名分のダミーデータを流し込んで挙動を確認。
- 報告: 「特定の部数の時に計算が合わない」とエラーを報告。
- 再生成: AIが修正案を出す。→ 1に戻る
このループを繰り返すこと、実に40回（Version 20辺りでようやくカタチに）。ChatGPTは指示された修正には応えますが、システム全体の整合性までは監視していません。そのため、一箇所を直すと別の場所にバグが出る「モグラ叩き」状態が発生し、人間側がデバッグ作業の主体とならざるを得ませんでした。
Claude Code：自己完結する「プロの背中」
対してClaude Codeは、開発の次元そのものが異なりました。
最大の特徴は、サーバー内構築と統合されたライブプレビュー機能です。人間が指示を出すと、Claude Codeは単にコードを書くだけでなく、その場で仮想環境を立ち上げ、挙動を自らテストします。
特筆すべきは、人間が指摘する前にAIがプレビューで計算ロジックの不整合を確認しました。部数調整ロジックにエラーが出る可能性が高いので、先回りして修正を適用します」と自己解決する能力です。また、指示の出し方も「三択の選択肢＋詳細コメント」という洗練されたUIにより、人間側の思考リソースを最小限に抑えます。結果として、ChatGPTの4分の1にあたるわずか10回程度のラリーで、実用レベルのシステムへと着地しました。
ChatGPT製ギャンギングシステム
画面一杯をつかったUIで、もちろんレスポンシブ対応。テーマカラーは指定していないため、ブラックな印象で構築してくれた。
サービスのロゴマークは、生成されたHTMLを人間が編集して配置している。
CSVを投げ込む法式と、手書き入力できるUIを装備している。
多機能だし出来は悪くない。ただし、計算ロジックを構築するのに時間を要したことと、連続計算をさせると機能停止に陥る問題が発生。
デバッグに時間を要しそうな気配を感じ、ここまでで完成とした。
Claude Code製ギャンギングシステム
WEBを意識したサイトワイドを1100pxで全体をデザイン。これは、指定したのではなくAIが提案してくれたサイズ。WEBサイトも良い感じにコーディングしてくれるClaude Codeならでは。figmaとMPC連携することで、デザインはfigma、コーディングはClaude Code、という環境を構築出来るほど進んでいる。CSVの入力UIはエラーが出にくいよう極力シンプルに、という提案をのんでメインをCSV投げ込みにして、投げ込まれたCSVの確認画面をテキスト表示とし、そのテキストを編集出来るようにテキストボックのプライマリーテキストとして表示させている。
初版ではUIのフォントサイズが9pxや10pxなど、老眼には辛いサイズ。そのため、CSSを外部にして、デザインの微調整（コード改定）は人間が行った。
技術的深掘り：JavaScriptによる最適化アルゴリズムの実装
今回のシステムでは、バックエンドを持たない軽量な「クライアントサイドJavaScript」のみで、高度な面付け計算を実現することにこだわりました。
採用した計算ロジック
50名の異なる部数を効率よく配置するため、AIと共に以下のアルゴリズムを構築しました。
- 部数ベースのプライオリティ・キュー: 枚数の多い生産者を優先的に「面付け数」に割り当てる。
- 動的通し数計算: 全体の「通し数」を固定せず、面付けの組み合わせを変えながら、最も予備紙（ロス）が少なくなる数値をリアルタイムで総当たり計算する。
- 動的DOM生成: 計算結果に基づき、ブラウザ上で瞬時に面付け指示書（プレビュー）をSVG/Canvasで描画。
この複雑な条件分岐とループ処理において、Claude Codeが生成したコードは極めてDRY（Don’t Repeat Yourself）であり、エラーハンドリングも完璧でした。
運用上の「ワンファイル」問題
一方で、AI開発特有の課題も浮き彫りになりました。Claude CodeはHTML、CSS、JSを1つのファイルにまとめる「ワンファイル構成」でのプレビューに最適化されています。しかし、商用サーバーへのデプロイやその後の人間によるメンテナンスを考え、ファイルを分割（外部ファイル化）したところ、AI側でスタイルの適用を追えなくなるなどの現象が発生しました。
「AIにとって最適な構造」と「人間にとって最適な構造」をどう橋渡しするか。そこを理解するスキルも必要になります。
もっとも、これはビギー故の知識不足によるものかもしれません。
いずれにせよ様々な「知識」が、これからのバイブコーディングにおいても当然のように重要なテーマとなります。
「AIディレクター」が指揮する新しい制作体制
今回の検証で最も大きなパラダイムシフトは、AIが「道具」から「ディレクター」へと進化し始めているという点です。
これまでは、人間が各AIの特性を理解し、采配を振るうのが一般的でした。
- Gemini: 専門ドキュメントや論理的な長文作成。
- Nano Banana: 高精度な画像生成とビジュアルデザイン。
- ChatGPT: コンセプトの壁打ちとアイデア出し。
しかし、Claude Codeが備える**MPC（Model Protocol Components）**という仕組みは、AIが自分自身の能力を超えて、他のAIや外部ツールとシームレスに繋がることを可能にします。
つまり、人間が「ディレクター」として動くのではなく、Claude Codeが「リードエンジニア兼ディレクター」となり、
- 「ロジック構築は自分（Claude）で行う」
- 「操作マニュアルや解説文の草案はGeminiに依頼する」
- 「システムのUIアイコンはNano Bananaに生成させる」
といった具合に、AIがAIを使い分け、成果物を統合していく未来が既に来ています。
「バイブコーディング」の未来
現在、社内ツールとして公開して、担当営業にテスト利用してもらっています。
職人の頭の中にあった「計算式」を、AIの力で誰もが使える「共通の武器」へ。非情に興味深いですね。
バイブコーディングによるシステム構築が、現場の効率化を実現し、そして本質的な業務に専念する時間を与える環境へと改善してくれる。
可能性を感じる実験でした。
