3ページ12画面のサイトデザインを再作成する

旧sampleを保存用の別artifactへ残し、current masterではHome、Privacy、Termsを日本語・英語、desktop・mobileで合計12画面、ゼロから再構成した。既存の18 reusable componentsを保持し、header、footer、navigation、locale、AI persona disclosureなど8つの共有componentを追加した。

• Home mobile menuはページ内の3導線だけに限定し、PrivacyとTermsはfooterだけから移動できる構成にした。
• legal mobileはmenuを持たない専用headerとし、locale切替と現在routeを明確にした。
• 未確認のCTA、問い合わせCTA、追加legal route、個別product導線は画面へ加えなかった。

AI Talentのプロフィールは写真、Name、Role、Role Valueをカードへ配置し、本文を15px以上、cardとtext領域を内容に応じて伸びる構造にした。日本語・英語のdesktop・mobileにある40 instanceを同じminimumとwrapping条件へ揃え、AI persona disclosureが人物表示より前に読める順序を維持した。

mobile操作では、menuのclose cueを日英とも同じ×にし、accessible name、expanded state、制御対象、Escape・activateによるclose、focus return、keyboard orderを仕様frameへ記録した。focusは3px、touch targetは44×44px以上とし、legal locale linkを88×44px、legal headerを390×72pxへ整えた。

• 全mobile footerでPrivacyとTermsを高さ44px以上のlink frameへ入れた。
• 色だけに頼らない導線として、12個のlegal link実体へvisibleな2px bottom borderと明示的なroute labelを付けた。
• 日本語desktopの「Wirohについて」は1文字だけ次行へ残るwidowを解消し、1行で収めた。

12画面とaccessibility仕様frameをlayout検査し、480のtext nodeを現在のsite inputへ照合した。各画面を公式のExport UIからPNGへ出力し、長いHome mobileは8192px上限で全体比率を保つ出力として、実寸の参照元をphysical designに残した。