ポートフォリオサイトを公開するまで

これまでは、外部のポートフォリオサービスに作品を載せていました。これまでの仕事を一度棚卸しして、自分の現在地として見える形にしたかったのですが、自分で作る選択肢はそれまで考えていませんでした。日常的にAIを使うようになり、作ってみることにしました。

最初は、これまでの仕事を整理して見せるだけの、1ページのサイトを作るつもりでした。進めるうちに、AIを使った個人試作開発と、雑記的な記事を設けることで、ポートフォリオのアップデートになるのではと思い、コンテンツにしてみました。

まずはClaude Codeで形にする

履歴と職務経歴を渡して開始。

経歴や作品を渡し、構成を考えてもらいました。

分からないことが出てきたら、聞けばいいので、最後にはそれなりのポートフォリオができるだろう。丸投げすればうまくまとめてくれると目論んでいました。まあ、そう簡単にはいかないのです。

使い始めたのはClaude Codeです。同じClaudeでも、チャットで話すのとは違い、こちらはパソコンの中のファイルを直接作ったり書き換えたりしてくれます。

まずサイト全体の構成案を出してもらい、セクションの並びや情報の置き場所を一緒に考えながら、実際のサイトを組み立てていきました。

今回使ったAIの中では、何をどの順番で見せるかを考える段階で、Claudeがいちばん合っていました。まとまっていない経歴や実績をWebサイトの形へ持っていくための、最初の設計でかなり助けられました。

コードもClaude Codeが書いてくれます。技術的に分からないことは、その都度説明してもらえます。以前なら自分では触れなかったHTMLやCSS、JavaScriptを使ったサイトが、ひとまず形になりました。

ただ、コードが出てくればサイトが完成する、というわけではありません。

それと、Claude Codeがサイトを作るのに不向きであることも分かり、ここでの詳細は割愛しますが、Claude Designという選択肢も考えましたが、自分にはハードルが高かったので、設計の見直しをChatGPTに移し、コーディングツールも見直しました。

ChatGPTで見直して、Cursorへ移る

一度形になったサイトを、今度はChatGPTに持ち込んで見直しました。

構成に無理がないか、説明が重複していないか、何をどの順番で見せるか。文章は伝わるか。初めて見る人が迷わず読み進められるかなど。

Claude Codeで形にして、ChatGPTで見直す。直すべき点を整理して、またClaude Codeへ戻す。この方法でもサイトは作れますが、修正箇所が細かくなるほど、やりづらくなり、AIを切り替えるたびに、そのための引き継ぎ資料まで増えていく始末で、指示を繰り返すうちに、私の頭の切り替えがうまくいかず行き詰まりました。

Claude Codeが合わなかったというより、細かい修正を重ねる段階では、別の環境のほうが私には扱いやすかったのだと思います。

そこで途中からCursorを使い始めました。AIが組み込まれたコード編集ソフトで、サイトの画面を見ながら、その場で直してもらえます。

これまでは「ここをもう少し下げたい」「この文章を変えたい」と言葉で細かく説明していましたが、Cursorで特に良かったのが、ダイレクトにプレビュー上で選択して修正点を伝えられることで、作業工程も減り、スムーズに進めることができました。

後半はCursorを中心に、ChatGPTと、OpenAIのCodexというコードを書いてくれるAIも併用しています。ここまでくると担当をきれいに分けていたわけではなく、必要に応じて相談先と作業環境を変えながら仕上げていました。バイブコーディング（自分でコードを書かず、AIに指示を出しながら作る進め方）の凄さを実感した瞬間でした。

AIがコードを書いても、決めるのは自分

環境を変えても、判断する場面はなくなりません。

たとえばサイトのいちばん上には、「Connecting Design」「価値を見つけて、つないで、届ける。」「コミュニケーションデザイナー」という3つの言葉が並んでいます。どれを最初に読ませるか。意味が重なって見えないか。言葉の温度をどうするか。最後の見せ方は自分で決めるしかありませんでした。

今のABOUT、PROCESS、ARCHIVE、NOTE、PROFILE、CONTACTという並びに落ち着くまでも同じです。何をどこで伝えるか、同じ説明が重なっていないかを何度も見直し、載せる実績を選び、残すものと削るものを決め、順番を入れ替えました。

パソコン版ができたあとには、スマートフォンでの見え方も確認します。パソコンで問題がなくても、スマートフォンでは余白や文字の見え方が変わるので、片方を直したらもう片方も見直すことになりました。

AIがコードを直してくれても、何を修正するか、何を目立たせるか、どの案を採用するかは、最後は自分で決めることになります。

公開するまで

コードはGitHubで管理しました。作ったファイルを保管して、変更の履歴も残しておけるサービスです。公開にはCloudflare Pagesを使いました。GitHubで管理しているサイトのデータをCloudflare Pagesにつなぎ、Web上へ公開しました。

このあたりも分からないことだらけでしたが、その都度AIに説明してもらいながら進め、最終的にpages.devのアドレスで、誰でも見られるサイトになりました。

自分でWebサイトをゼロから作ることは、以前の私には現実的な選択肢ではありませんでした。それが今は、外部サービスの枠を借りるのではなく、自分で管理できるサイトがWeb上にあります。

最初に考えていた「分からないことをその都度AIに聞きながらなら作れるのではないか」は、公開するところまでは本当でした。

丸投げで、という部分を除けば。