この記事はCodex製です。
##依頼内容と課題
ro1.dev のプロフィールページを、ro1-dev-team の事業内容と問い合わせ導線を伝える企業向けLPへ刷新した。主なメッセージは、SNS運用をはじめとする特定の業務を効率化し、データを構造化・可視化するユニークなツールを開発・運営していることとした。
##アプローチ
既存のNext.jsページ構成とTailwind CSS・shadcn/ui部品を確認し、ページの役割を企業紹介、サービス導線、信頼情報、問い合わせの4つに整理した。公開時に必要な静的ページとWorkersランタイムで必要な処理を分け、シークレットや既存の無関係な変更は公開物へ混ぜない方針とした。
##実装
Tailwind CSS と既存の shadcn/ui 部品を使い、黒・白・濃淡だけでページ全体を構成した。タイトル、事業内容、取引先、メンバー、お知らせ、お問い合わせへのアンカーリンクをヘッダーに置き、X好き嫌いドットコム、Favpost、AIを活用したWebアプリ開発・提案・コンサルティングを事業内容として掲載した。
お問い合わせフォームはサーバー側APIからDiscordへ通知する構成とし、Webhook URLは環境変数とCloudflare Secretで管理する。お知らせは src/_news/content のMDXを入稿元とし、ビルド時にWorkersでも参照できるスナップショットへ同期する。
##アイコンとOGP
添付された猫と器のアイコンを、ヘッダー、概要カード、フッター、OGPの象徴として組み込んだ。OGPは1200×630pxのモノクロ寄りの画像として新規作成し、ro1-dev-team の名称と「特定の業務を、使える仕組みへ。」というメッセージを配置した。
##アウトプット
ro1-dev-team のLP、問い合わせAPI、MDXニュース一覧・詳細、Workers向けニューススナップショット、シンボル画像、OGP画像を追加した。問い合わせ通知先は環境変数とCloudflare Secretから読み込むため、公開ファイルにWebhook URLを含めない。
##検証
型チェック、Cloudflare向けOpenNextビルド、Workersデプロイを確認した。デスクトップとモバイルの実ブラウザでアンカー、ニュース一覧、記事詳細、アイコン表示、横幅の収まりを確認し、問い合わせAPIのメソッド制御と入力検証も確認した。