ずっと「作品が散らかっている状態」を放置していました。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のままで充分に動く。
そういうわけで、このサイトはまだ「外側だけ作って中身は半分空っぽ」の状態で公開されています。 ここから少しずつ、自分の作品で埋めていく予定です。読んでくれてありがとう。