【Claude code】チャットのやりとりだけで理想のサイトをつくる（プロンプト付き）

タイトル通りなのですが、「いつかは作らねばな…」と思いながらも時間がないことを理由に目を瞑り続けていたポートフォリオサイトを、Claude codeで作ってみました。

先に仕上がりがこちらです。

か、かわいい！（嬉）

サイト自体は多分、ものすごく流行りの形ではないかもしれないけど、ずーっとサイトが欲しかったわたしからすれば十分過ぎるほど仕上がり。しかもこれノーコード(HTMLやCSSを書かずにつくること)で、スマホ用の表示もほぼ調整いらずで完成しました。
指示だけ出してあとは家事をしたり育児をしたりしているあいだに仕上がりました。天才だ！（claude codeが）

この記事は、「Claude codeでとりあえず、これくらいのクオリティでサイトを作ってみたいな」な方に向けての記事です。
もうバリバリ使いこなしている玄人向けではありませんのでご勘弁ください。

メンバーシップの掲示板にも書いたけれど、このサイトを仕上げているあいだにも、chatGPTが究極進化を遂げていたり、ClaudeもClaude designが発表されてさらに便利になったり…と色々あるのでもっと簡単に作る方法はありそうな気がしつつ、とりあえずは「Claude codeでこれができるんだな〜」を体感してもらえればと思います。そして多分これができると、Claudeともっと仲良くなれると思う。

とりあえずパソコンに詳しくない人でも、「こういう順番でやれば作れるんだ」とわかるように書いてみました。

前提としてclaudeは「Maxプラン」で作ってます

先に前提として、claudeにはざっくり「Proプラン」と「Maxプラン」が存在していて、それぞれできることは一緒です。
ただ使用できる容量がちがう、みたいな感じ。わたしはmaxで契約していて月1.5万くらい。proプランだと3000円で使えます。（無料版はClaude code使えないので課金してね）
「サイトをつくる」になると結構たくさんやりとりをするので、Maxプランをおすすめしたい。
「ええ…1.5万高くない？」と思うかもしれないけど、サイトを外注でつくろうとしたらこの何倍もかかるので、全然安いと思う…！
とはいえ、いきなりハードルが高い人はproからはじめて、「あー制限やっぱかかっちゃうな」と思ったらアップデートしても良いかもです。1ヶ月だけプランを上げてみる、とかもできるしね。とりあえず無料だとそもそも使えないので、どちらか契約してはじめてください。

https://claude.ai/

ちなみに、「自分は物作りしてないし、ポートフォリオサイトなんて必要ないかもな〜」と思っている人も、作れること自体が武器にもなると思ってるし、サイト作りを通してAIに触れることで理解も深まるとおもっているので、触ってみてほしいです。

ノーコードでのポートフォリオサイトの作り方（画像やそのままコピーで使える指示付きです）

ということで、ノーコードでのポートフォリオサイトの作り方です。もしできれば実際にClaude codeを触りながら読んでもらえるとわかりやすいかも。

以下わかりやすさ重視で指示を刻んでいるけれど、メモ等にまずは一通りプロンプトを書いてしまって、まとめて実行してもOKです。