制作裏側

Claude Codeでポートフォリオサイトを作った話

2026.06.15

副業収入ゼロなのに、なぜサイトを作ったのか

売るものがないのにサイトを作る。矛盾してると自分でも思っていました。

でも「やってます」と言える場所がないと、何も始まらないんですよね。誰かに「何してるの？」と聞かれた時に、見せられるものが何もありませんでした。SNSのプロフィールにURLを貼りたくても、貼るものがなかったんです。

名刺代わりでもいい。まず看板を出そう。そう思って作り始めました。

ただ、問題がありました。Web制作の経験がほとんどないんです。

技術開発職を12年やっています。でもそれはハードウェア寄りの話で、Webサイトを作るのは専門外でした。

HTMLは少しわかります。CSSも基本は知ってます。でもNext.jsとかTailwind CSSとか言われても、正直よくわかりませんでした。Reactのコンポーネントって何？という状態です。

そこでClaude Code（Anthropicが作ったAIのコーディングツール）に相談してみました。「ポートフォリオサイトを作りたい。シンプルで、自分で更新できるやつ」と。

返ってきたのは「Next.js + Tailwind CSS + Cloudflare Pagesがいいと思います」という提案。自分だけなら絶対選ばなかった構成でした。

「本当にこれでいけるのか？」と不安でしたけど、「無料でホスティングできて、GitHubにpushするだけで自動デプロイされます」と聞いて、とりあえず試してみることにしました。

最初は丸投げしてみたんです。「いい感じに作って」と。

出てきたものは、たしかに「それっぽい」。でも微妙でした。自分が何者で、誰に何を届けたいのかがぼんやりしてるから、AIも曖昧なものしか返せないんですよね。

当たり前でした。自分が言語化できていないことを、AIが代わりに言語化してくれるわけがありません。

そこから変えたのは、AIの使い方です。

「正解をちょうだい」じゃなくて、「壁打ち相手になってほしい」。自分の考えをぶつけて、穴を指摘してもらって、また考える。その繰り返しです。

「この案、穴ある？」「別の切り口ない？」「反論するなら何て言う？」。こういう使い方をしたら、一気に進みました。

実際に使ってみてわかったのは、AIは「形にする」のは得意だけど、「何を作るか決める」のは苦手だということです。

「ヒーローセクションを作って」と言えば、きれいなものが出てきます。でも「このサイトで何を伝えたいか」は、自分で考えるしかありません。

逆に言えば、「何を作るか」さえ決まっていれば、AIは強力な味方になります。コードを書くスピードは人間の何倍も速いし、デザインのバリエーションも一瞬で出してくれます。修正も「ここの余白をもう少し広げて」と言えば数秒で直ります。

結局、AIを使いこなすコツは「自分の頭で考えることをサボらない」ことでした。考えた結果をAIに渡す。AIが形にする。自分がチェックする。直してもらう。この繰り返しですね。

サイトを作る過程で、意外なことが起きました。

「自分が何者か」が整理できたんです。

プロフィールを書くために、自分の経験を振り返る。サービスページを作るために、「自分は何ができるのか」を言語化する。事例ページを作るために、「なぜこれを作ったのか」を考える。

サイトを作るつもりが、自分のことを整理する作業になっていました。

「ストーリーLP制作」というポジションも、サイトを作る過程で見つかりました。最初は「AI漫画制作」と書いていたけど、自分が本当にやりたいことは「人の体験を聞いて、伝わる形に変えること」だったんです。サイトを作りながら、何度もテキストを書き直す中で、それに気づきました。

売上はまだゼロです。でも「やってます」と言える場所ができました。それだけで、動き方が変わりましたね。

看板を出す意味は、売上が立ってからわかるんじゃなくて、出した瞬間にわかるものでした。