ずっと「作品が散らかっている状態」を放置していました。GitHub のリポジトリ、どこかにデプロイした 試作品、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 だけで構成しています。理由は単純で、このサイトに必要な「処理」がほぼ無い からです。お問い合わせフォームだけはサーバー処理が要るので、そこはレンタルサーバー（ロリポップ）上の 小さな PHP ハンドラに任せます。サーバーのメール機能を使って、自分の運営メールアドレスに通知が飛ぶ仕組みです。
Next.js も Astro も、もちろん候補にはあったけれど、「使う前にビルドが必要」というだけで、このサイズの個人サイトには ちょっと重い。フレームワークが何かを解決してくれる量より、ファイル構成と思考の自由度のために素の HTML に 振り切る方が、結果的に長持ちすると判断しました。1 年後にメンテナンスする自分を救えるのは、いつも結局 「ただの HTML」です。
運用フロー: Claude Code + codex + レンタルサーバー
実装は Claude Code に任せ、コードレビューは GitHub 上の codex に任せています。
この組み合わせで「コードを書く人」「コードを読む人」「コードをデプロイする人」がきれいに分業されるので、
個人開発でも独りよがりになりにくい。デプロイは、レンタルサーバー（ロリポップ）に SSH でつないで
コマンドをひとつ叩くだけ。GitHub の main を更新したらサーバー側で最新を取得して切り替える仕組みにしてあるので、
後はリポジトリで PR を回すだけです。
PR を作るたびに codex がコメントしてくれる、それを直して再依頼する、緑になったら squash マージ。 この単純なループがいちばん健全で、サイト本体のコードと同じくらい「壊れにくい仕組み」を作ることが 個人開発の本体だと改めて感じます。
その後、どうなったか
この記事を書いてから、サイトは少しずつ形になりました。Works には実際に公開している
Web サービスを並べ、Blog には個人開発や Web 技術の話だけでなく、暮らしの工夫やちょっとした
雑談まで、手を動かして気づいたことを書きためています。wanwangaogao.jp の独自ドメインで
公開し、HTTPS もレンタルサーバー側で自動化済み。最初に決めた「作品への入り口」と「短いメモ」という
2 本柱は、今もそのままです。
派手な機能を足すより、ひとつのことを地道に動かし続けるほうが、自分には合っているみたいです。 これからも、肩の力を抜いて少しずつ更新していきます。読んでくれてありがとう。