こんにちは。AI副業チャレンジ中の中年オヤジです。
これまでのブログでは「ポートフォリオを作る」というテーマで進めてきましたが、実は手順を詳しく書いていませんでした。
今回は、後で自分でもう一度やるときに役立つように、具体的な作業の流れを忘備録として残しておきます。
これから挑戦する人にも参考になると思うので、ぜひチェックしてください。
① プロンプトの作成
最初にやったのは、ChatGPTにプロンプトを作ってもらうことです。
私が言ったのはシンプルな一言。
「ポートフォリオを作りたいので、プロンプトを作ってください。」
するとChatGPTが、
「デザイン案や構成を作るための質問」を一気に並べてくれます。
ここでポイントなのが、質問を一度に全部見せられるとゲンナリするということ。
なので、私はこう頼みました。
「質問は一つずつしてください。答えたら次に進んでください。」
このやり方にすると、めちゃくちゃやりやすいです。
質問に答えるだけで、AIが全体の設計を整えてくれるので、最初のハードルはかなり低くなります。
② ChatGPTで作ったプロンプトをCopilotに貼り付ける
次は、ChatGPTで作った設計用のプロンプトをCopilotに渡します。
すると出てくるのが、ポートフォリオのワイヤーフレーム案。
ワイヤーフレームとは、サイトの骨組みの設計図みたいなものです。
「こんな風に作っていけばいいんだ！」と、正直この時は感動しました。
ここでやることは、基本的にAIの提案を受け取るだけです。
③ 配色を決める
次に、ポートフォリオの全体的な配色を決めていきます。
ここもAIに丸投げでOKです。
「シンプルで落ち着いた雰囲気にしたい」
「ビジネス向けの印象を出したい」
など、イメージを伝えれば、それに合ったカラーパレットを提案してくれます。
④ フォント案を決める
フォント（文字のデザイン）も同じです。
「柔らかい雰囲気」「モダンで洗練された感じ」など、イメージワードを伝えるだけでフォントの候補を出してくれるので、本当に楽ちん。
⑤ HTML / CSS / JavaScriptのコードを出してもらう
ここが一番「AIすげぇ！」と感じたところです。
ChatGPTに「今まで決めた要素を使って、コードを生成してください」と頼むと――
一気に、HTML / CSS / JavaScriptが出力されます。
正直、初めて見たときは衝撃でした。
自分が何日もかけて作るであろうものが、AIは数秒でやってしまうんです。
続きは後半で！
次回は、生成されたコードをどうまとめて、どうやって公開したのか――
Visual Studio Codeの使い方やGitHub公開の実際を解説します。
小説「AIとおやじ」 できることが増えていく
最初は文章だけだった。 次に、AIでイラストを描いてみた。 思った通りにはいかない。でも、少しずつコツが分かってきた。
「この構図、もう少し背景に温かみが欲しい」 「キャラクターの表情を“照れ笑い”にできる？」
AIは、田中の言葉を受け止めて、何度でも描き直してくれる。 その姿勢に、田中は不思議な安心感を覚えていた。
「俺の言葉が、誰かに届いてる気がする」 それは、これまで味わったことのない感覚だった。
✅ 次回予告（後半）
「コードをフォルダにまとめる → VS Codeで表示確認 → GitHubで公開！」
ここからが本当の戦いでした（笑）。お楽しみに！
