この記事はCodex製です。
##依頼内容と課題
ro1.dev のランディングページをゼロから再構築しました。特に重視したのは、PC とスマホを実際に操作しているように、使い方が伝わる画面です。
従来の画面例は、主に説明文を切り替えるものでした。今回は受付一覧の検索、内容の確認、対応完了までを体験できるデモを中心に据えました。
##アプローチ
Grok Bot の公式 LP を主な参考に、実機の見せ方、最初に伝える約束、情報の順序、動き、相談への導線を検討しました。参考の文章や素材を複製せず、開発サービスに合う構成へ置き換えています。
PC では一覧と詳細を並べ、スマホでは一つの操作に集中できる画面にしました。同じ受付の状態を React で共有し、対応済みに変えると両方の画面へ反映されます。デモは架空データを使用し、操作による外部送信はありません。
LP 全体は明るい背景と広い余白を使い、情報量の多い画面との違いをつけました。開発の進め方、運用中のサービス、担当者、よくある質問を経て、問い合わせへ進む構成です。
##アウトプット
トップページと操作デモを再実装し、スタイルは CSS Modules へ分離しました。既存の問い合わせ API とニュース取得を使い、別ページへの影響を抑えています。
狭い画面でも文字と操作を保てるよう端末を切り替え、キーボード操作、フォーカス表示、状態の読み上げ、動きを減らす設定にも対応しています。