← Blog 一覧

このポートフォリオを 1 日で立ち上げた話

ずっと「作品が散らかっている状態」を放置していました。GitHub のリポジトリ、Cloudflare Pages にデプロイした 試作品、Gist にコピペで残した 50 行のスクリプト、Twitter にだけ流して URL が行方不明になった小さな Web ページ。 ひとつひとつ自分では覚えているつもりでも、人に「最近なに作ってるの?」と聞かれた瞬間、どこから話せばいいのか わからなくなる。これを片付けるために、今日 1 日でひとつのポートフォリオサイトを立ち上げました。

何を載せ、何を載せないか

最初に決めたのは、このサイトの守備範囲を「自分が公開している Web サービスや小さなプロダクトへの入り口」と 「それにまつわる短いメモ(このブログ)」の 2 つに絞り込むこと。それ以外、たとえば履歴書・スキルマトリクス・ 受賞歴のような「面接で渡す自己 PR」はここには置きません。なぜなら、自分にとってのポートフォリオは 「人に頼まれてやった仕事」よりも「自分で勝手に始めて勝手に作ったもの」が主だからです。

About ページにスキル一覧を縦に長く並べたい衝動を抑え、「ハンドルネーム」「拠点」「コードはここに置いてある」程度の 最小情報に削ぎ落としました。代わりに Works のカードからクリック 1 回で実物に飛べる、 という導線を最優先にしています。

デザインの方向

テーマは「プレイフル × ネオン」。背景はクリーム、太枠でカードを置き、マゼンタとターコイズをアクセントに使う。 ロゴ周りはわざとちょっと回転させて、面接用ポートフォリオによくある「綺麗だけど誰の名前も思い出せないやつ」 にならないようにしました。wanwangaogao という名前自体がふざけているので、サイトの見た目も 多少ふざけている方が正直で良いはず、というのが言い分です。

フォントは Space Grotesk をディスプレイに、Manrope を本文に。 和文フォールバックに Noto Sans JP。アクセシビリティの観点から、装飾的な絵文字(🐾 や ◉) は aria-hidden を徹底し、フォーカス可視化と prefers-reduced-motion の尊重を最初から入れています。

技術スタックは最小限

フレームワークなし、静的 HTML だけで構成しています。理由は単純で、このサイトに必要な「処理」がほぼ無い からです。お問い合わせフォームだけはサーバー処理が要るので、そこは Cloudflare Pages Functions に置いた 小さな TypeScript ハンドラに任せます。MailChannels を経由して、自分の運営メールアドレスに通知が飛ぶ仕組みです。

Next.js も Astro も、もちろん候補にはあったけれど、「使う前にビルドが必要」というだけで、このサイズの個人サイトには ちょっと重い。フレームワークが何かを解決してくれる量より、ファイル構成と思考の自由度のために素の HTML に 振り切る方が、結果的に長持ちすると判断しました。1 年後にメンテナンスする自分を救えるのは、いつも結局 「ただの HTML」です。

運用フロー: Claude Code + codex + Cloudflare Pages

実装は Claude Code に任せ、コードレビューは GitHub の chatgpt-codex-connector[bot] に任せています。 この組み合わせで「コードを書く人」「コードを読む人」「コードをデプロイする人」がきれいに分業されるので、 個人開発でも独りよがりになりにくい。Cloudflare Pages は GitHub と連携するだけで main ブランチへの push が 自動デプロイになるので、後はリポジトリで PR を回すだけです。

PR を作るたびに codex がコメントしてくれる、それを直して再依頼する、緑になったら squash マージ。 この単純なループがいちばん健全で、サイト本体のコードと同じくらい「壊れにくい仕組み」を作ることが 個人開発の本体だと改めて感じます。

これからの予定

  • Works を埋める: 「準備中」と書かれた 3 枚のカードを、本物のプロダクトリンクに差し替えていく。
  • Blog を増やす: 週に 1〜2 本、技術メモを増やす。手を動かしたことだけ書く。
  • AdSense 審査: コンテンツが 10 本くらい溜まったところで申請する。広告は本文を邪魔しない位置だけに置く。
  • Cloudflare のカスタムドメイン: そろそろ独自ドメインに移したい。今のところは *.pages.dev のままで充分に動く。

そういうわけで、このサイトはまだ「外側だけ作って中身は半分空っぽ」の状態で公開されています。 ここから少しずつ、自分の作品で埋めていく予定です。読んでくれてありがとう。