INDEX 05 — BNF COLUMNSAI活用ノウハウ

PDF不要。Webで完結する実践的なAI活用ノウハウ集です。
基礎からセキュリティ、業務への応用まで解説します。

01.AIだけで動画講義を量産する方法カメラ不要・マイク不要・編集不要で、自分の声クローンとAIアバターを使った高品質な動画講義を量産する最新ワークフローと、Claude Code等で一撃実行する自動化API連携を解説します。02.Gemini Notebook 4大新機能の全貌と実践活用法2026年8月4日、Gemini Notebook(旧NotebookLM)が全Proユーザーへ大型アップデートを完了。コード実行によるデータ分析、Excel/PDFの直接生成、Web検索の統合、URL一括ソース化という4つの新機能が加わり、Gemini 3.5 Flash搭載で基盤モデルも刷新されました。各機能の仕組みと、現場で即使えるプロンプト例を交えて徹底解説します。03.ビジネス資料が一気に伝わる!Gemini Notebook図解術(旧NotebookLM)社内資料や議事録、提案書を、そのまま会議で使える図解に変える方法を解説します。GoogleのAIノート「Gemini Notebook(旧NotebookLM)」のインフォグラフィック機能を使い、資料作成の時間を大きく削減しながら、伝わる資料づくりを実現するビジネス活用術です。04.AIプロンプト×Three.js入門:知識ゼロから3D Webゲームを作る自走プロンプト術Three.jsと生成AIを組み合わせ、Webブラウザ上で動作するインタラクティブな3Dゲームをプロンプト指示だけで構築するノウハウを徹底解説。実際にその場で遊べる日替わり3Dミニゴルフ『Daily 3D Craft Golf』の動的シード生成や物理演算プロンプトも大公開します。05.AI一発生成!人間にしか読めない「Ghost Font」の仕組みと作成術画像解析AIにはただの砂嵐ノイズに見え、人間の目だけに文字がくっきり浮かび上がる次世代タイポグラフィ「Ghost Font」。ゲシュタルト心理学の「共通運命の法則」を活用し、HTML/CanvasとAIプロンプトだけで好きな文字を一発生成する方法を解説します。06.AI一発生成!好きなテーマを指定して作る3D WebGLサイト構築術難解なコードを1行も書かずに、AIプロンプトだけで圧倒的な立体Webサイトを作成する方法を解説します。サイバー都市、幻想的な森、宇宙ステーションなど、希望の世界観をテーマとして指定するだけでスクロール連動の3D WebGLサイトが一発完成する実践ガイドです。

AIプロンプト×Three.js入門:知識ゼロから3D Webゲームを作る自走プロンプト術

Three.jsと生成AIを組み合わせ、Webブラウザ上で動作するインタラクティブな3Dゲームをプロンプト指示だけで構築するノウハウを徹底解説。実際にその場で遊べる日替わり3Dミニゴルフ『Daily 3D Craft Golf』の動的シード生成や物理演算プロンプトも大公開します。

Three.jsと生成AIが切り拓く3D Webの新時代

Webブラウザ上で滑らかな3Dグラフィックスを描画する標準ライブラリ「Three.js」。従来、3D空間の構築、ライティング、カメラアングル、物理シミュレーションをコードで記述するには、高度な数学的知識とWebグラフィックスの深い理解が必要でした。
しかし、(Claude 3.7 / / / Cursor 等)の登場によって、このハードルは一気に崩れ去りました。今や「どのような3D空間を作りたいか」を自然言語ので指示するだけで、AIがThree.jsの複雑なコードを即座に生成・デバッグ・チューニングしてくれます。
💬1. 自然言語指示AIに作成したい3D空間やオブジェクトのイメージを指示2. Three.jsコード自動生成Scene, Camera, Light, Meshの構成コードをAIが出力🎮3. 即座にWeb描画&対話調整Canvasに即時反映。ライティングや動作を追記指示で調整Three.js × AIプロンプト開発の基本サイクル
この記事では、AIを使ったThree.js開発の基礎から、実際のゲーム構築手順までを解説します。まずは、本記事のプロンプト指示のみで全コードが自動生成された3Dゲーム実機デモを体験してみてください。

【実際に遊べるデモ

Daily 3D Craft Golf】 毎日日付ごとにコースが自動変化する、アースカラーの3Dミニゴルフゲームです。ボールを後ろに引き込んで離すとショットできます。少ない打数(Par)でカップインを目指してください。
DAY #1PHYSICS ENGINE ENHANCED

putt.day Style Physics Golf

HOLE
1/3
PAR
PUTTS
0
⚡ リアル剛体物理エンジン搭載!スライディング・回転慣性・法線反発を追求!
物理シミュレーションワールド準備中...
⚙️ 物理法則: 線速度・角速度・純粋転がり慣性(v=ωr)・反発力(e=0.75)・重力ポテンシャル井戸シミュレーション
Daily 3D Craft Golf 3Dゲームデモ
PROMPT / ADVICE : 今日のコースに挑戦してみようスマホでもPCでも動作します。クリア後に「今日の記録を共有」ボタンを押すと、X(Twitter)等にスコアを投稿できます。

なぜThree.jsはAIと最も相性が良いのか

数あるWeb技術の中でも、Three.jsは生成AIのコード生成と特に相性が良いことで知られています。その理由は3つあります。

1. 宣言的な構造と高い再現性

Three.jsは「シーン(Scene)にメッシュ(Mesh)を追加し、カメラ(Camera)で覗き、レンダラー(Renderer)で描画する」という明確な4大要素のオブジェクト構造を持っています。この構造がAIの学習データと完璧に合致しているため、AIが破綻のないコードを出力しやすいのです。

2. 外部ライブラリ不要で単一Canvasに完結

CSSの複雑なレイアウト崩れと異なり、Three.jsの出力は基本的に1つのHTML5 Canvas要素内にカプセル化されます。そのため「表示が崩れた」「親要素の影響を受けた」というトラブルが少なく、プロンプト指示による修正が極めて的確に反映されます。

3. インタラクティブ要素の命令が直感的

「ボールを引っ張って放したら力(Vector3)を加える」「壁に当たったら反転させる」といった物理ロジックは、自然言語のプロンプトと1対1で対応しやすいため、AIに意図がストレートに伝わります。

AIプロンプトだけで3Dゲームを作る5ステップ

実際の『Daily 3D Craft Golf』開発で使われた、AIへの段階的プロンプトプロセスの全貌を公開します。一度にすべてを頼むのではなく、5つのステップに分けてAIと対話することが成功の秘訣です。
STEP 1ベースシーン構築Scene, Camera, Renderer, Light, 地面コースの配置STEP 23Dオブジェクト&マテリアルボール、カップ、木製壁、サンドバンカーの作成STEP 3スリングショット操作ドラッグ&ドロップのショット判定とガイド矢印STEP 4物理判定・バウンド壁跳ね返り・減速・カップイン判定と演出STEP 5日替わりシード生成YYYY-MM-DDベースの決定論的コースとスコア保存3Dゲーム構築の5ステッププロンプト

ステップ1:ベースシーンの構築プロンプト

最初に最小限の3D空間とカメラ、ライティングだけをAIに生成させます。
AI PROMPT / CONFIG
Three.jsを使って、以下の要件で3Dベースシーンを構築してください。
・背景色:モダンダーク(#1a2130)
・カメラ:斜め上からの見下ろしパースペクティブカメラ(PerspectiveCamera)
・照明:自然な太陽光(DirectionalLight)と影(PCFSoftShadowMap)
・地面:4a8548色のマットな緑のグリーン芝生コース(8×20サイズ)
・周囲に木製枠壁(ウォルナット色)を配置してください

ステップ2:3Dオブジェクトと質感(マテリアル)の配置

次に、ボールやカップ、障害物などのオブジェクトを粘土・木・パステル調のマテリアルで追加します。
AI PROMPT / CONFIG
ベースシーンに以下の3Dオブジェクトを追加してください。
1. ゴルフボール:オフホワイトの球体(SphereGeometry)、柔らかい影を落とす
2. カップ(ホール):黒い円柱、位置(X: 0, Z: -8)、赤い旗のついたフラッグポールを設置
3. 障害物:コース上に木製の壁障壁と、減速ゾーンとなるサンドバンカー(パステルイエロー)を配置

ステップ3:スリングショット操作の実装

マウスドラッグまたはタッチで引っ張って打ち出す操作系をプロンプトで追加します。
AI PROMPT / CONFIG
ボールのドラッグ操作を実装してください。
・ボールをマウス/タッチで後方に引っ張ると、ショット方向と強さを示すガイド矢印(ArrowHelper)を表示する
・放した瞬間に、引っ張った距離に応じたベクトル速度(Vector3)をボールに与える
・ボール移動中は回転アニメーションをつけ、徐々に摩擦(0.98)で減速させる

ステップ4:衝突判定と物理バウンドの追加

壁や障害物に当たったときの跳ね返りとカップイン判定を記述させます。
AI PROMPT / CONFIG
以下の物理計算を追加してください。
・ボールが外枠の壁や木製障壁に衝突した際、反転ベクトル(-0.7〜-0.8倍)でバウンドさせる
・バンカー上にボールがある間は、摩擦を強めて急速に減速させる
・ボールがカップの中心0.45ユニット以内に接近し速度が一定以下になったら、カップイン吸い込みアニメーションを実行し、クリア画面を表示する

ステップ5:日替わり共通コース(Daily Seed)の生成

全プレイヤーが毎日同じコースを楽しめる決定論的シード処理を追加します。
AI PROMPT / CONFIG
毎日全プレイヤーが同じコースを遊べるよう、日替わりシード生成を追加してください。
・当日の日付文字列(YYYY-MM-DD)から決定論的なPRNG乱数を生成する
・ホール位置と障害物の配置をシード乱数に基づいて動的に決定する
・打数(Strokes)のカウントと、ローカルストレージへのベストスコア保存機能を実装する

3D表現でよくあるトラブルとAI修正指示テクニック

AIにThree.jsコードを書かせていると発生する典型的な問題と、それを一発で解消するAI修正プロンプトの例を紹介します。

トラブル1:影(Shadow)が表示されない・切れる

原因:DirectionalLightの shadow.camera 範囲が狭すぎるか、オブジェクトの castShadow = true / receiveShadow = true が抜けている。
AIへの修正指示:
AI PROMPT / CONFIG
影が表示されていません。DirectionalLightのshadow.camera.left/right/top/bottomのエリアをコース全体(幅8, 奥行き20)をカバーするように広げ、すべてのMeshにcastShadowとreceiveShadowを明示的に付与してください。

トラブル2:画面のリサイズで3Dが歪む・伸びる

原因:Windowのリサイズ時にカメラのアスペクト比(aspect)とレンダラーのサイズが更新されていない。
AIへの修正指示:
AI PROMPT / CONFIG
ウィンドウリサイズ時に、camera.aspect = width / height; camera.updateProjectionMatrix(); と renderer.setSize(width, height); を実行するリサイズイベントリスナーを追加してください。
PROMPT / ADVICE : ガントレットループで視覚効果を磨こう「この3Dシーンのライティングと質感を批評し、より温かみのある北欧ナチュラル風に見えるように修正して」と3回ループ指示を出すと、ライティングのクオリティが劇的に跳ね上がります。

まとめ:3D Web開発はAI時代の新しい表現キャンバス

かつて高度な数学と専門エンジニアの専売特許だったThree.jsによる3D Web開発は、生成AIの登場によって誰でもアイデアを即座に形にできる表現キャンバスへと進化しました。
今回作成した『Daily 3D Craft Golf』のように、ゲーム性の高いインタラクティブコンテンツや3Dデータ可視化、モダンなWebプロダクト表現が、プロンプト対話だけで構築できます。
まずは手元のAIチャットに本記事の「ステップ1:ベースシーン構築プロンプト」をコピペして、ブラウザの中で最初の3Dオブジェクトが立ち上がる感動を体感してみてください!

このトピックについてさらに深く学びたいですか?

「自社のビジネスモデルに合わせたAIロードマップを作りたい」「自社独自のプロンプト集やAI利用規約を作りたい」といったご要望は、BNFのAI顧問が直接支援いたします。

BNF公式サイトでお問い合わせ