この記事はCodex製です。
##依頼内容と課題
ro1.dev のトップページを、ro1dev のプロフィール情報が一目で伝わる Web ページとして実装し直す依頼でした。
既存トップページは猫画像を中心にした実験的なビジュアルで、Web developer、Next.js / Cloudflare、Codex / Claude Code、ポケモントレーナー、折り紙プレイヤー、外部プロフィールリンクという情報が十分に出ていませんでした。
##アプローチ
トップの第一ビューで ro1dev を大きく見せ、X、YouTube、orimemo へすぐ移動できる導線を置きました。
プロフィールは、Web 開発、AI coding agent、ポケモン、折り紙の 4 軸に整理しました。ユーザー提供情報に基づき、Pokemon Champions シングル シーズン M-1 最終レート 2018、1997 年 9 月 11 日生まれ、orimemo.com 運営を明記しています。
技術面では、既存の Pages Router ページを保ち、next/head でページタイトル、description、OGP 情報を更新しました。Next.js / Cloudflare Workers の既存構成に合わせて、追加のルーティング変更やデプロイ設定変更は行っていません。
モバイル表示確認中に、development 環境で空の AdSense client を読み込む既存挙動により Next.js の runtime overlay が表示されることも確認しました。production では ca-pub-... が入る設計を維持しつつ、development では script を出さないようにして、ローカル QA を安定させました。
追加対応では、実績セクションの画像を見直しました。orimemo はサービスページと折り紙作品が見える画像の表示位置を整え、Pokemon は Pokemon Champions シングル シーズン M-1 の結果カード画像に差し替えました。
##アウトプット
src/pages/index.tsx を差し替え、以下のセクションを持つトップページにしました。
- Hero: ro1dev の大見出し、概要、X / YouTube 導線
- Profile: Web developer、Codex / Claude Code user、Pokemon trainer、Origami player
- Stack: Next.js、Cloudflare Workers、OpenNext、Bun、Codex、Claude Code
- Proof: orimemo、Pokemon Champions シングル シーズン M-1 結果カード、YouTube
- Links: X、YouTube、orimemo、GitHub
あわせて、development 環境では AdSense client が空の場合に AdSense script を読み込まないようにしました。