この記事はCodex製です。
##依頼内容と課題
ro1.devトップページのスマホ表示は維持したまま、PC幅で見出し、CTA、スマホとMacの表示が離れて見える状態を整理する依頼です。特に、CTAが狭い左列に縦積みされ、デバイスプレビューが別の段に置かれていたため、ファーストビューの視線のまとまりが弱くなっていました。
##アプローチ
PC幅では見出しとCTAを左側、SaaSダッシュボードのデバイスプレビューを右側に置く2カラム構成へ変更しました。見出しはPC幅で自然な2行に収まるサイズへ調整し、CTAは横並びを維持しています。
1024px前後ではデバイス同士が過度に重ならないよう、PC用2カラムを1280px以上で適用する境界にしました。それ未満では従来の縦積みを使い、スマホ表示の構造と見え方を保っています。
##アウトプット
- PC幅で見出し、CTA、デバイスプレビューを一つの視覚的なグループとして配置
- 1280px未満では安全な縦積みに切り替え
- 390pxのスマホ表示を維持
- 固定ヘッダー、デバイスの非浮遊、公開文言の表示状態を再監査
- 型検査と本番相当ビルドを実行