ChatGPT／Claude／Midjourney／Geminiで、ポートフォリオサイトの要件整理から画像生成までを一気通貫でやり切る実践フロー

デザインスタジオのポートフォリオサイトを作るとき、いちばん詰まりやすいのはたいていコードではなく、「結局どんなテイストにするのか、どんなページを書くのか」です。私は“4点セット”の流れで、要件・コピー・ビジュアル・実装までを一度で通します。

ChatGPTはアイデアを実行可能なチェックリストにする担当

たとえば「青い波紋テーマ＋カートゥーンの船と潜水艦」みたいに曖昧な目標をそのまま投げて、サイト構成、各モジュールの文案、インタラクションのポイントを出させます。小技：KISSの考え方で、トップを論文みたいにしないで、と念押しします。

Claudeは要件を納品用ドキュメント並みに書き起こす担当

Claudeは、「Bento Gridの黒背景＋アクセントカラー#2657FD、超特大の数字、Apple風スクロール演出、Framer MotionとTailwind CDN」みたいな要求を、開発が理解できる仕様に整理するのが得意です。ついでに、グラデーションを乱用しない、絵文字をメインアイコンにしない、といった境界条件も補ってくれます。

Midjourneyはビジュアルアセットの方向性を素早く決める担当

私は2種類の画像を出させます。1つはメインKVのイラスト（船／潜水艦／宇宙のカートゥーン人物）、もう1つは装飾用の線画小要素です。まずは9分割グリッドで方向性を探してから、部分的に拡大して詰めます。そうしないと、「あとちょっと」を延々と繰り返して崩壊します。

Geminiは照合チェックと抜け漏れ補完の担当

Geminiはむしろ「体験監査」に使うのが好きです。訪問者の視点でダメ出しさせて、情報が具体的か、会話が続く内容になっているか（「いい感じ」みたいな空疎な言葉だけになっていないか）をチェックし、さらに“人が書いた”っぽい自己紹介とFAQの改稿版を出してもらいます。

自分用の小さな愚痴

デフォルトのモデル設定は固定しておくのがおすすめです。行ったり来たりでモデルを切り替えると、新しい話題になった途端に「記憶喪失」するのが本当に面倒なので。

この流れをそのままあなたのプロジェクトに当てはめて遠回りを減らしたいなら、私がツールとテンプレをまとめたTitikeyを見てみてください。かなり時間を節約できます。