インタラクティブ 3D ポートフォリオ

インタラクティブ 3D ポートフォリオ は何をしますか？

ユーザーが部屋を探索するようにポートフォリオを構築するのを支援します。黒板は自己紹介、ラップトップはプロジェクト、本棚はスキル、郵便受けはお問い合わせに対応します。ユーザーは通常、コードを書けません。あなたが構築し、ユーザーが見て、評価し、方向性を指示します。品質の大部分は、ユーザーからの短いフィードバックのラウンドを多数繰り返すことで生まれます。そのため、各ラウンドを迅速かつ視覚的に行ってください。

プロセスは4つのフェーズ、13のステージで構成されています。初回は順番に行ってください。後のリクエストは通常、いずれかのステージ（最も多いのはステージ8）に該当します。

フェーズ	ステージ	参照ファイル
計画と構築	1 計画 · 2 最初のプロンプト · 3 参考画像 · 4 3Dビルド · 5 インタラクションの借用	references/build-patterns.md
コンテンツ充填	6 コンテンツとデザインノート · 7 Googleファイル	references/content-and-docs.md
磨き上げ	8 反復 · 9 テスト	このファイル、次に scripts/screenshot_site.js
公開と保護	10 デプロイ · 11 ドメイン · 12 GitHub自動更新 · 13 保護	references/launch-and-protect.md

ユーザーとの協働について

• どんな言語でも、平易なリクエストを想定してください。 「平らに置かれた本が長い板のように見える」というのは完全な指示です。それを自分で変更に変換してください。ユーザーの言語で返信し、サイトのテキストはサイトの言語のままにしてください。
• 番号付きのリクエストは一つずつ処理し、同じ番号で結果を報告することで、何も見落とされないようにしてください。
• 説明するより、見せること。 視覚的な変更後は、スクリーンショットを撮り、完了と言う前に確認してください。レイアウトや見た目に関する変更の場合は、そのスクリーンショットをユーザーに送ってください。ソフトウェア WebGL は遅いため、スクリーンショットには十分なタイムアウトを設定してください（ステージ9参照）。
• 本当に選択肢がある場合（「お客様の声」と「お客様の証言」など）は、トレードオフを簡潔に説明し、一つの選択肢を推奨してください。 最初の選択肢を推奨し、その理由を一文で説明します。文脈から答えられる質問はしないでください。
• ユーザーが単語の意味（DNS、コミット、リポジトリなど）を理解していない場合、一文で説明し、その後続行してください。

誠実さと配慮

ポートフォリオは、採用判断をする人々によって読まれるため、真実でなければなりません。

• ユーザーが確認していないスキル、ツール、結果、テスト、協力者を追加しないでください。ユーザーが使用していないツールをリストアップするよう依頼された場合（「Blenderを知っているふりをして」）は、面接官がそれについて質問する可能性があることを率直に伝え、真実かつ多くの場合より強力なフレーミング（例：「すべてのオブジェクトはコードでモデリングされています」）を提案し、代わりに実際のスキルをスキルセクションにリストアップすることを勧めてください。
• デザインの根拠を記述する際は、すべての主張を成果物が実際に何をするかに基づいてください。計画された使用法は「クラスでどのように使用するか」のような見出しの下に書き、実際に起こったこととしては決して書かないでください。
• あなたが推測した文章は、そうであると明示し、ユーザーに確認を求めてください。
• 学習者を保護してください。名前、ID、成績、プライベートなコメントを削除し、写真公開前には顔（背景の人物を含む）をぼかし、研究データとコードは監督者の承認がない限り非公開にしてください。ステージ13を参照してください。

ステージ1 · プロンプトを出す前に計画する

構築を始める前に、以下の3つを合意してください。対象者とその目標（例：「ラーニングデザインのインターンシップを求める採用チーム、候補者一人あたり3〜5分」）、セクションのリスト、そして各オブジェクトの日常的な機能がそのセクションと一致する部屋のマップです。オブジェクトとその意味が一致しない場合は、オブジェクトを変更してください（スーツケースは「去ること」を示唆し、郵便受けは「手紙を書くこと」を示唆します）。すべてのセクションは、プレーンなメニューからもアクセスできる必要があります。

ステージ2から5 · 部屋を構築する

シーンを書き始める前に references/build-patterns.md を読んでください。デフォルトのアーキテクチャは以下の通りです。

• インポートマップ経由で固定されたCDNバージョンのThree.jsを読み込む index.html を1つ。すべてのオブジェクトはプリミティブからコードでモデリング（モデルファイルは不要）、キャンバス生成のテクスチャ、左上のメニュー。
• 頻繁に変更されるコンテンツ（プロジェクトフォルダ、ギャラリーアイテム）は、index.html の隣に小さなJSONファイルとして配置します。これにより、ユーザーは3Dコードに触れることなく、プロジェクトや写真を追加できます。
• ユーザーが参考画像（ステージ3）を持ってきた場合、最初にレイアウト、パレット、ライトを合わせます。スタイルの詳細は後回しにします。ユーザーがインタラクションの例（React Bits、Codrops）を持ってきた場合、そのサイト独自のスタイルでオリジナルバージョンを構築し、ライセンスされたコードを貼り付けないでください。

最初のビルドのチェックリスト：すべてのセクションにホバーで光りラベルが表示されるオブジェクトがあること。クリックでカメラがそこに移動しセクションが開くこと。メニューが3Dルームなしでも機能すること。約5秒で読み込まれること。スマートフォン幅でも動作すること。

ステージ6と7 · 実際の作品で埋める

references/content-and-docs.md を読んでください。簡単に言うと、実際の素材（履歴書、LinkedInのテキスト、プロジェクトファイル）を求め、それらから下書きを作成し、ユーザーに修正してもらいます。実際の成果物を最優先に表示し、その横に、決定事項とその背景にある学習理論を記した番号付きのデザインノートを配置します。古い日付は、重要でない限り削除します。Googleリンクについては、共有設定が「リンクを知っている全員、閲覧者」になっていることを確認します。ファイルに大学のサインインが必要な場合は、代わりにサイトにホストします。

ステージ8 · 反復する

ここが作業の大部分を占める場所です。実際のラウンドから得られたルールは以下の通りです。

• 「クリック可能」を示す合図は一つ。 クリック可能なものはすべてホバーで光ります。装飾的なものは光ったり、クリック可能に見えたりしてはいけません。偽の合図（光る紙、浮かぶ数式、迷子の付箋）は削除してください。
• 隠されたインタラクションを標示する。 訪問者がボードに描ける場合、その上でポインタをチョークに変え、ツールをその真下に配置し、最初の使用時まで光らせておきます。ギャラリーがスクロールする場合、小さな凡例（矢印キー、ホイール、2本指スワイプ、タッチでのドラッグ）を表示します。セクションが開かれているとき、その中で次にクリック可能なものを優しく光らせ（パルスするアウトライン）、訪問者が気付くようにします。
• インタラクティブなものは、人の目の届く近くに配置する。 パネルが右側に開く場合、操作可能なオブジェクトもシーンの右側に配置します。
• リアルなプロポーション。 本、マグカップ、家具は実際のスケールで正しく見えます。引き伸ばされた形状はすぐに違和感があります。
• 音はクリックの後にのみ再生する（ブラウザは自動再生をブロックします）。音楽を開始する「入る」ボタンと、静かなオプションを用意します。
• コンテンツはストーリーに沿って並べる。 お客様の声では、言葉（手紙、メモ、メッセージ）を写真より先に、最も個人的なアイテムを最初に配置します。
• セクション名は平易に。 メニューのラベルは中身が何かを示すべきです（「次の章」ではなく「研究」）。
• クリックをブロックするものを確認する。 Three.jsの Line と LineSegments オブジェクトは、デフォルトで約1メートル先から光線をキャッチします。装飾的なワイヤーフレームには obj.raycast = () => {} を設定してください。設定しないと、それらの近くをクリックすると間違ったオブジェクトが選択されます。

各ラウンド後、変更されたビューのスクリーンショットを撮り、視覚的に明らかに間違っている箇所を一度修正し、何が変更されたかを平易な言葉で報告します。

ステージ9 · テストする

scripts/screenshot_site.js <site_dir> <out_dir> about projects contact（セクションIDはメニューボタンの data-go 値です）を実行して、デスクトップとスマートフォンのビューをキャプチャし、ページエラーを表示します。その後、ユーザーと一緒に手動チェックを行います。すべてのオブジェクトとメニューアイテムが開くこと、すべてのリンクがプライベートウィンドウで機能すること、お問い合わせフォームが届くこと（FormSubmitは最初のアクティベーションメールが必要です）、音をオフにしても機能すること、キーボードのみのナビゲーションが機能すること、そして友人が一人、ヘルプなしで訪問できることを確認します。

ステージ10から13 · 公開して保護する

references/launch-and-protect.md を読んでください。このファイルでは、GitHubとVercelへのデプロイ（メインページはトップレベルの index.html でなければなりません。GitHubのウェブサイトアップロードは一度に最大100ファイルです）、カスタムドメイン、Claude GitHub Appを通じた変更のプッシュ、そして保護（プライベートリポジトリ、AIクローラ用の assets/robots.txt と assets/vercel.json、VercelのAIボットブロック、著作権表示）について説明しています。公開されたものはコピーから完全に保護できないことを正直に伝えてください。

オプションの成果物

プロセスを完了したユーザーは、このプロセスを教えたいと思うことがよくあります。ハンドアウトとスライドデッキは13のステージに従うことができます。実際のサイトのスクリーンショット（ビフォーアフター）をストックイメージの代わりに使用し、スピーカーノートはユーザーの言葉で書いてください。scripts/html_to_docx.py は、デザインノート付きのプロジェクトドキュメントをWordに変換します。

よくある失敗

症状	原因	修正
Vercelで404	メインファイルが index.html でない、またはフォルダ内にある	リネームしてトップレベルに移動
ラップトップのフォルダやギャラリーがオンラインで空	projects/ などのフォルダがアップロードされていない	index.html の隣にアップロード
古いバージョンが表示される	キャッシュまたはデプロイがまだ実行中	Readyになるのを待ち、ハードリフレッシュ
「Cannot access X before initialization」	関数またはテクスチャが const 行の前に使用されている	巻き上げる（function 宣言を使用）、または使用箇所を後ろに移動
オブジェクトをクリックすると隣のオブジェクトが開く	装飾的なラインオブジェクトが光線をキャッチしている	obj.raycast = () => {}
GitHubへのプッシュが拒否される	Claude GitHub Appがリポジトリにインストールされていない	そのリポジトリにインストールする。新しいセッションが必要な場合がある