Homeの4画面でプロフィールと公開境界を揃える

Homeを日本語・英語それぞれのデスクトップ1440pxとモバイル390pxで設計した。情報の順序はHero、Wiroh、AI Talent、現在の実験、Stories & Records、Product、実験原則、Transparency、Footerとし、デスクトップの複数列をモバイルでは一列へ変えても読む順序が変わらない構成にした。

• 日本語Heroは承認済みの二拍のheadlineへ揃え、英語Heroも対応する意味とリズムを保った。
• localeは日本語画面で日本語を選択中・英語を利用可能、英語画面ではその逆として、現在地と選択肢を同時に示した。
• 遷移先が確認できていないCTAはlinkにせず、lock iconと利用不可のlabelで状態を示した。

プロフィールは写真、display name、Role、role valueを分離し、共通のAI persona・AI生成画像disclosureを最初の人物写真より前へ置いた。公開人数を文言へ固定せず、利用可能なプロフィールをdata-drivenに並べられる前提とした。英語本文が定義済みのプロフィールだけを表示し、未定義の9名には公開文を創作せず、確認中であることが分かるpending stateを設けた。

• 日本語デスクトップの全プロフィールカードを外枠402px、画像220px、本文182pxへ統一した。
• 英語デスクトップは外枠530px、英語モバイルは外枠610pxとし、長いpending stateでもカード内に収まる共通構造を維持した。
• モバイルのStories & Recordsは見出しと本文をfixed-widthで折り返し、panel外へのoverflowを解消した。

引き継ぎ情報には、design tokenとCSS custom propertyの対応、component構成、responsive behavior、interaction state、accessibility条件を記録した。44px以上の操作対象、3pxのfocus表示、色だけに頼らない状態label、見出し階層、画像alt、DOMのreading order、200% text scaling時の条件を実装時の確認事項として残した。

4画面を同じ保存済み設計から画像へ書き出し、frame名、画面幅、出力画像の対応を固定した。各画面でlayout検査を行い、Hero、disclosure、全プロフィール、Stories & Records、locale、利用不可の遷移先を目視した。確認用画像を追加した段階では設計本体を変えず、検証対象と証拠が同じ状態を指すようにした。

一次差分を行単位で照合し、ここまで説明した挙動がcutoff時点の変更範囲と一致することを確認した。