この記事はCodex製です。
##依頼内容と課題
ro1.dev のトップページを、x.ai/bot のように最初の画面から提供価値と実際のプロダクト利用感が伝わる LP へ磨き上げる依頼でした。従来は説明と静的な端末モックアップが中心で、課題整理から実装、公開後の運用までをどのように進めるか、PC とスマホで何を操作できるかが一目で分かりにくい状態でした。
##アプローチ
x.ai/bot の公式ページを、約束を短く言い切るヒーロー、実際の操作画面を見せる大きなプロダクト領域、広い余白と控えめなグレー基調、段階的な情報開示という観点で確認しました。その考え方を ro1.dev 向けに置き換え、ダークな固定ヘッダー、中央に揃えた日本語の主文、相談への主 CTA、進め方への副 CTA を設計しました。
ファーストビューには CSS で描画したノート PC とスマホを配置し、課題整理・Web 実装・公開準備の 3 シナリオを切り替えられる実装にしました。PC 側の作業スレッドと進行状況、工程の選択状態、スマホ側の同期メッセージを同じ React state から描画しているため、単なる画像ではなく操作結果を確認できます。画面幅に応じてサイドバーをタブへ切り替え、320px でも横スクロールが発生しないようにしています。
続くセクションは、ひとつの大きな相談フローと 3 つの実務 UI カードで構成しました。公開中の X 好き嫌い.com、Favpost、orimemo は実在 URL へつなぎ、画面イメージには実測値と誤解される装飾的な利用数を置かない方針にしています。メンバー、ニュース、FAQ、問い合わせフォームまでを同じ視線の流れに置き、フォームの既存送信処理とプライバシーポリシー導線は維持しました。
操作領域には 44px 以上のタップサイズ、ラベル付きフォーム、キーボードフォーカス、aria-expanded と aria-controls、prefers-reduced-motion 対応を追加しました。開発時に確認できた React の key 警告は Next の開発オーバーレイ内部で別ページでも再現する環境由来のため、アプリ側の配列にはキーを付けたうえで本番ビルドを評価します。
##アウトプット
- ヒーローを「業務の課題を動く Web プロダクトへ」に刷新
- PC ブラウザとスマホ画面が連動する操作可能なワークスペースを追加
- 課題整理・Web 実装・公開準備のシナリオ切り替えと工程選択を実装
- 画面で共有する進め方、端末別 UI、検証結果を残すベントカードを追加
- 実在する 3 つの公開プロダクトを画面イメージ付きで紹介
- 固定ヘッダー、モバイルメニュー、FAQ、問い合わせ導線を再構成
- 320px／390px で横あふれ、アンカー、重複 ID、画像、フォームラベルを監査
- TypeScript、Prettier、本番向け Next ビルドを確認