やったこと

Claudeと話してGitHub Pagesで作るポートフォリオについて相談
Claudeと話して要求仕様書とCLAUDE.mdを書いてもらう
要求仕様書とCLAUDE.mdをClaude Codeに投げる
15分くらいでページができる（すごい !! ）
できたページに不具合があれば追加でプロンプトに入力して解決する

※ 今回は個人で契約したClaudeを使用しています

完成したページのスクリーンショット

サンプルで作り直したものなので、文言や名前は適当です。

雰囲気でイメージを伝えただけなのに、

いい感じのページを作ることができました。

Claude Codeで書いたポートフォリオページ。タイトル、自己紹介、作品一覧が見やすく表示されている — 完成したポートフォリオページ

作業風景

以降は、サンプルを作った時の作業風景を時系列でお送りします。

Claudeと話してGitHub Pagesで作るポートフォリオについて相談

githubでポートフォリオを作りたい。
アカウント名と、ポートフォリオで飾る作品のgithubのリンクは後から私の方でつけれるようにしたい。
飾る作品はいい感じにディスプレイさせたり、中身を動作させたりしたい。
将来的に他にもリポジトリを追加できるように作って欲しい。
必要なことがあったら教えて

Claudeで得た最初の回答。質問を理解し、右半分に一般的なポートフォリオサイトのページをコーディングし、プレビューしてくれている。 — Claudeからの最初の回答

この時点でプレビューできるの、神ですよね。

AIが質問してきたので回答しつつ、デザインが気になるので変えてみます。

ポートフォリオの対象者: どのような職種・分野向けのポートフォリオですか？　ゲーム開発です。
作品の種類: 主にどのような作品を展示予定ですか？　ゲームやwebページです
デザインの好み: 背景はシンプルに白っぽくして欲しい。 添付した猫のアイコンが入るようにして欲しい。 アイコンのデザインに合わせて、ボタンやフォントなどもいい感じにデザインしてもう一度出力してみてくれる？

minの手書きの猫のアイコン。猫は生地柄と白のハチワレの顔で、背景は黄色 — 猫アイコンも添付して雰囲気を伝えます

Claudeの画面でアイコンやコンセプトからデザインを変更して再度プレビューが表示されている。アイコンの背景に合わせた黄色が差し色に使われている — アイコンやコンセプトに合わせてデザインを変更してくれる

大枠部分のデザインについてはここの会話で決まりました

完成品を見ると希望した白を基調にし、アイコンの黄色を差し色にしたデザインがしっかり反映されています。

いい感じなのでこのまま要求仕様書に落としてもらいました。

Claudeと話して要求仕様書とCLAUDE.mdを書いてもらう

要求仕様書と、CLAUDE.md（AI向けの開発指示書）を作成します。

使用したプロンプトの一部を載せます。

いいですね。これで要求仕様書を書いてみてください。
公開する予定なのでセキュリティを考慮してください。
この仕様書を使ってclaud codeに開発させる予定です。

とてもいい要求仕様書だと思いました。
この要求仕様書を利用してClaude Codeで開発するので、CLAUDE.mdも作ってください。
要求仕様書も参照する感じでお願いします。

基本ファイル作成は丸投げしました。

そのほか、一般的にCLAUDE.mdを書くときに気にしておくことはないかな？

必要なら追記しておいて

丸投げからの無茶振りで、肉付けしていきます。

他にも、「.gitignore作って」や、「デプロイはCLAUDE.mdに含めないで」など、

自分でガードレールを考えて盛り込みました。

（このフェーズに一番頭を使いました）

GitHubポートフォリオサイト 要求仕様書ですが、
管理機能はコード上にコメントアウト的なものがあれば大丈夫で、
サイト上で実施できなくても大丈夫。
フィルタリング機能、統計情報表示もいらないです。
統計情報の代わりに、シンプルな自己紹介文を載せてくれる？
それを踏まえて書き換えられるかな？

突然の仕様変更も付き合ってくれます。

CLAUDE.mdも今回の変更を取り入れて書き換えてくれる？

もりもり頼んでいるとCLAUDE.mdがv18になっていました...

相手が人だったら頼みにくいお願いですが、

ここまで20分くらいで辿り着きました。（指示を考えるのに時間がかかります）

仕様変更を挟み、version 18まで更新されたCLAUDE.mdの画面 — v18になったCLAUDE.md

要求仕様書とCLAUDE.mdをClaude Codeに投げる

requirements.md（要求仕様書）、CLAUDE.md（開発指示書）を開発するディレクトリ配下に配置し、

Claudeに書いてもらったプロンプトをClaude Codeに打ち込みます。

プロンプト

CLAUDE.mdとrequirements.mdに基づいて、以下を一括で実装してください：

【目標】
猫アイコンテーマのゲーム開発者向けポートフォリオサイト（完全静的）

【必須機能】
✅ プロフィールヘッダー（猫アイコン + SNSリンク）
✅ 自己紹介セクション（メイン紹介文 + スキル + 想い）
✅ 作品ポートフォリオ（一覧表示、フィルタリングなし）
✅ レスポンシブデザイン（モバイル対応）
✅ config.js での簡単設定管理

【デザイン要求】
- 白ベース背景、黄色（#ffc947）アクセント
- 丸みのあるモダンデザイン
- ホバーエフェクト付き

【技術要求】
- Vanilla JavaScript（ES6+）
- 外部ライブラリなし
- GitHub Pages対応

【成果物】
完全に動作するポートフォリオサイト一式

CLAUDE.mdのフェーズ1-5に従って、品質重視で実装してください。

できたページに不具合があれば追加でプロンプトに入力して解決する

ページが空白、assets/に入れたアイコンを反映してなど、追加で要望を伝え、完成しました。

その他の学びや感想

コード読むとなると大変でした。あまり書かない言語なので余計難しく感じました。
AIで書いたコードを公開するのは勇気がいりました。
- でも、公開するとセキュリティとかJSの書き方とか知っておこうというきっかけができました。
- 公開は自己責任なので、静的ページに留めて、コードが十分読めるようになってからバックエンドも使うなど段階的にやるのが良さそうと考え中です。
- GithubのリポジトリでCodeQLを有効にしてセキュリティをチェックしました。
画像からデザインを作るときは画像をAIに学習させることになるため、著作権を侵害しないか注意が必要でした。（自作のオリジナルの絵が安心です）
AIは登場したばかりで、規制も少なく安価に使えるこの機会を大事に使いたいと思っています。