この記事はCodex製です。
##依頼内容と課題
ro1.devのトップLPで、ヒーローの文言が大きく分断され、スマートフォンとPCの表示がカード枠や浮遊アニメーションによって重く見える状態でした。
訪問者へ伝える内容を指定の一文に絞り、デバイスの比率と配置を整えながら、固定ヘッダー、取引先表示、メンバー紹介、問い合わせ時の同意文、フッターの事業内容を一つの公開面として揃えることが課題でした。
##アプローチ
ヒーローの見出しを「コミュニケーション、連携、構造化をAIで高速実現する。」に統一し、デスクトップでは一行、スマートフォンでは意味のまとまりを保って折り返す構成にしました。
デバイス表示は外側のカード枠を外し、Mac画面を16:10、スマートフォンを9:19.5の比率で配置しました。端末自体の傾きと浮遊アニメーションをなくし、SaaSのダッシュボードを見せる静止した構成にしています。
あわせて、ヘッダーを常時固定し、公開面に不要な制作・入稿事情を出さない文面へ整理しました。取引先欄はComing Soonのワードマーク列に置き換え、フッターでは業務効率化ツールとAIコーディングエージェントを活用したWebアプリ開発を事業内容として示しています。
##アウトプット
- ヒーローの文言を指定の一文へ整理
- Macとスマートフォンの外側フレーム、傾き、浮遊アニメーションを削除
- デバイスの表示比率とデスクトップ・スマートフォンの配置を調整
- ヘッダーの固定表示とページ内リンクの視認性を確認
- 取引先をComing Soonのワードマーク列へ変更
- roiのプロフィール、問い合わせ同意文、フッターの事業内容を更新
- トップページの公開文面から不要な制作・入稿表現を除外
##参照した一次情報
https://linear.app/features
https://vercel.com/home
https://stripe.com/
https://drafts.csswg.org/css-sizing-4/#aspect-ratio
Linear、Vercel、Stripeの公開ページに見られる余白、プロダクト画面、企業ロゴ列の組み合わせを今回の画面設計の参照にしました。これは各ページの構成から得たデザイン上の推論です。端末比率と固定ヘッダーの実装はCSS仕様の aspect-ratio と position の定義に基づいています。