エンジニアじゃない自分が、Claude Codeで自分のポートフォリオサイトを作った日

転職活動を控えて、実績をまとめたポートフォリオサイトが欲しくなりました。
外注すれば数万円、無料テンプレートではデザインの自由度に限界がある。
そこで試したのが、AIと会話しながらプログラムを作れる「Claude Code」でした。
この記事では、実際に自分がゼロからサイトを形にするまでの流れを、つまずいた点も含めてそのまま紹介します。

「プログラミングは無理」という思い込みが一番のハードルだった

正直に言うと、触る前は「結局エンジニアじゃないと使いこなせないのでは」という不安の方が大きかったです。
学生時代にプログラミングの授業でつまずいた苦い記憶もあり、ターミナルという黒い画面を開くこと自体に身構えていました。
実際に触ってみると、日本語で普通に会話するだけで進んでいくと分かり、身構えていた分だけ拍子抜けした感覚を覚えています。

テンプレートサービスで感じていた不満

それまで検討していた無料テンプレートサービスは、あらかじめ用意された枠組みに文章や写真を当てはめる形式で、「この項目を削りたい」「独自のセクションを足したい」という細かい要望には対応しづらいものでした。
Claude Codeなら、白紙の状態から会話で組み立てていけると聞いて、試してみることにしました。

準備したのはメモ程度のもの

完璧な文章を用意する必要はないと分かっていたので、掲載したい実績・経歴・自己紹介のメモを箇条書きでざっと作り、使いたい写真を一つのフォルダにまとめただけで作業を始めました。

最初の一言で構成案が返ってきた

ターミナルを開き、「フリーランスのWebデザイナー向けのポートフォリオサイトを作りたい。
自己紹介・実績一覧・お問い合わせフォームのあるシンプルな1ページ構成にしたい」と伝えると、Claude Codeが構成案を文章で提案してくれました。
納得して「このHTMLファイルを作って」と伝えると、数十分ほどでファイルが作成され、その場でブラウザに開いて見た目を確認できました。

初めて見たエラーにパニックになった話

作業を進める中で、一度画面が真っ白になってしまうトラブルに遭遇しました。
何が起きたのか分からず一瞬パニックになりましたが、落ち着いて「画面が真っ白になって、コンソールにこういう表示が出ています」とそのままの状況をClaude Codeに伝えると、原因を特定して数分で修正してくれました。
自分でエラーの意味を理解する必要はなく、見えている状況をそのまま伝えるだけでよいと分かってからは、トラブルへの恐怖心がかなり減りました。

「なんとなく違う」を言葉にする作業

最初のデザインは仮のようなものでしたが、「見出しの色をもう少し落ち着いた青にして」「実績のカードをもっと大きくして」と気になった点を思いつくままに伝えるだけで、その都度反映されていきました。
専門用語は一切使わず、見た目・動き・雰囲気を自分の言葉で伝えることだけを意識しました。

自己紹介文で手が止まったとき

経歴を並べるだけでは味気なく、かといって長々と書くのも読みにくい。
悩んだ末に「この経歴メモをもとに、300字程度の自己紹介文を3パターン作って」と頼んでみると、硬めの口調と親しみやすい口調の複数案が並び、比較しながら選ぶだけで済みました。

実績は「課題・行動・結果」で整理し直した

ただ実績を並べるより「課題」「行ったこと」「結果」の3点セットで書くと説得力が増すと知り、バラバラだったメモをClaude Codeに整理してもらいました。
写真がある実績は「この画像をカードの左側に、右側にテキストを置くレイアウトにして」と伝えるだけで、画像とテキストを組み合わせたレイアウトも簡単に作れました。

お問い合わせフォームとスマホ表示

「メールアドレス宛に届く簡単なお問い合わせフォームを設置して」と伝えると、名前・メールアドレス・メッセージ欄のあるフォームが組み込まれました。
「スマートフォンで見たときのレイアウトも整えて」と一言添えるだけで、画面幅に応じて自動調整される設定も入れてもらえました。
公開前には自分でテスト送信をして、通知が正しく届くことを確認しています。

検索で見つけてもらうための一手間

サイトの見た目が整った後、「このサイトが検索結果に出やすくなるよう、ページのタイトルと説明文を整えて」とお願いしたところ、検索エンジン向けの設定(メタタグと呼ばれる部分)も追加してもらえました。
自分では聞いたこともなかった仕組みでしたが、名前を検索されたときに正しい説明文が表示されるようになり、細部まで気を配れたことに満足しています。

独自ドメインを取るかどうかで悩んだこと

無料の公開先のままにするか、自分の名前を使った独自ドメインを取得するかで少し悩みました。
転職活動という目的を考えると、印象を左右する部分だと思い、最終的には安価な独自ドメインを取得することにしました。
ドメインの設定方法もClaude Codeに手順を確認しながら進めたことで、初めての作業でも迷わずに済みました。

公開してからも少しずつ育てている

完成したサイトは友人に見てもらい、「ここが分かりにくい」という感想をそのままClaude Codeに伝えて改善しました。
コードとして手元に残っているので、新しい実績が増えるたびに「実績一覧の一番上に追加して」と頼むだけで更新できます。
月に1回、まとめて更新する日を決めたことで、無理なく続けられています。

実際の転職活動での反応

面接の場でこのサイトのURLを共有したところ、「自分でここまで作ったのですか」と話のきっかけになったことが何度かありました。
職務経歴書だけでは伝わりにくい実績の背景や、写真付きの説明が好意的に受け取られた実感があります。
技術力そのものをアピールする場面ではなくても、行動力や工夫を伝える材料として役立ったと感じています。

料金について不安だったこと

使い始める前、AIに作業を任せることでどれくらいの費用がかかるのか見当がつかず、不安に感じていました。
実際に使ってみると、サイト1つを作り上げるのにかかった費用は、外注する場合と比べてかなり抑えられた実感があります。
ただし使い方次第で費用感は変わってくるため、最初は無料や低価格の範囲で試しながら、自分の使い方に合った感覚をつかんでいくのがおすすめです。

似たようなサービスとの比較で悩んだこと

Claude Codeを試す前は、似たようなノーコードのサイト作成サービスも比較検討していました。テンプレートを組み合わせる形のサービスは手軽な反面、細かいカスタマイズには限界があり、逆にClaude Codeは自由度が高い分、最初にどう指示を出せばいいか戸惑う場面もありました。
結局は「手軽さを取るか、自由度を取るか」という軸で選ぶのが分かりやすいと感じています。

作業時間はトータルでどれくらいかかったか

構成を考える時間、素材を用意する時間、Claude Codeとやり取りしながら形にしていく時間をすべて合わせても、休日の半日程度で最初の公開バージョンが完成しました。
プログラミングの勉強を一からしていたら決してこの期間では終わらなかったはずで、この手軽さこそがAIと一緒に作る一番の利点だと感じています。

もし今から作り直すとしたら

今振り返ると、最初にもう少し丁寧に構成案を練ってから作り始めればよかったと思う部分もあります。
ただ、完璧な準備を待つよりも、まず動くものを作ってから直していくというやり方自体は間違っていなかったとも感じており、次に何か作るときも同じ進め方をするはずです。

作ってみて分かった、任せられる範囲の広さ

着手する前は「デザインの細かい調整までは自分でやらないと無理だろう」と思っていましたが、実際には色・余白・配置といった細部まで言葉で伝えるだけで反映してもらえました。
想像していたよりずっと広い範囲を任せられると分かったのは、大きな発見でした。

周囲の反応から感じたこと

完成したサイトを見せた際、技術的な話をしなくても「見やすい」「使いやすそう」という感想をもらえたことが、一番の手応えでした。
裏側の仕組みを知らない人にとっても、きちんと形になったものは伝わるのだと実感しています。

他の人にも勧めたいと思った理由

同じように転職活動でポートフォリオが必要な友人にも、この方法を勧めています。
専門知識がなくても、伝えたいことさえ整理できていれば形にできるという体験は、多くの人にとって新しい選択肢になるはずだと感じているからです。

費用面で助かったこと

外注する場合の見積もりも事前に取っていたのですが、それと比べると圧倒的に費用を抑えられました。
浮いた分の予算を写真撮影など別の準備に回せたのも良かった点です。

公開後に見た目の細かい崩れに気づいたときも、「このボタンの位置がずれています」と状況を伝えるだけで即座に直してもらえたのも、安心して使い続けられた理由の一つです。

まとめ

• Claude Codeなら未経験でも自分だけのポートフォリオサイトを一から作れる
• 専門用語ではなく「見た目・動き・雰囲気」を自分の言葉で伝えるのがコツ
• エラーが出ても、見えている状況をそのまま伝えれば対処してもらえる
• 自己紹介文や実績の整理、検索対策まで一緒に仕上げてくれる
• 公開後も会話ベースで少しずつ更新していける

まずは自己紹介と実績のメモを1つ用意して、Claude Codeに話しかけるところから始めてみましょう。

もっと基本から知りたい方へ: Claude Codeの基本操作をイラスト付きでやさしく解説した『漫画でわかるClaude Code — AIと一緒にコードが書ける!初心者のための最強ツール入門』をKindleで販売中です。Amazonで「漫画でわかるClaude Code」と検索してみてください。