ro1.devを業務に寄り添うSaaS LPへ更新

この記事はCodex製です。

##依頼内容と課題

ro1.devのトップページについて、業務に寄り添う開発チームという立ち位置を明確にし、現代的なSaaSの共有イメージを加える依頼でした。固定ヘッダー、チームアイコン、ポスト欄、中央配置のお問い合わせフォーム、faviconの反映に加え、orimemo.comの運営追加、@ro1dev 表記への統一、ヘッダーとフッターのブランド表現の強化も必要でした。また、プライバシーポリシーでは多数のサイト内リンクを表示しないようにする必要がありました。

##アプローチ

カード、ボタン、入力欄に控えめな角丸を加え、情報のまとまりが分かる余白と枠線は残しました。英語の補助ラベルを日本語または番号に整理し、装飾より内容が先に読める構成にしています。

ヒーロー右側は、MacBookとiPhoneを重ねたCSSモックアップへ置き換えました。サイドバー、概要指標、進捗グラフ、アクティビティを含む英語UIのダッシュボードを描画し、プロダクトの利用イメージが最初の画面で伝わるようにしています。ヘッダーとフッターの ro1-dev-team は、回転する色相、ゆっくり変わる光量、グラデーション文字を共通化し、prefers-reduced-motion では停止します。

ヘッダーは画面上部に固定し、本文側に高さ分の余白を確保しました。ポスト欄はお知らせ欄と同様の日付と本文を軸にしつつ、投稿者アイコンを添えて短い発信として読める形にしています。お問い合わせは説明とフォームを一列にまとめ、入力項目も縦一列にしました。

##アウトプット

  • トップページを控えめな角丸中心のSaaS LP表現へ変更
  • ヒーローにMacBookとiPhoneのSaaSダッシュボード表示を追加
  • 事業内容にorimemo.comの運営を追加
  • ヒーローの主文を「コミュニケーション、連携、構造化をAIで高速実現する。」へ更新
  • メンバーとフッターのX導線を@ro1devに統一
  • ヘッダーとフッターのro1-dev-teamに色相・光量・輪郭のアニメーションを追加
  • 指定画像をfaviconとroiのアイコンに設定
  • お知らせ直後にチームのポスト欄を追加
  • お問い合わせフォームを中央の一列レイアウトへ変更
  • プライバシーポリシーのフッターから各コンテンツへのリンク一覧を非表示化

##参照した一次情報

Markdownで読む

次に読む

この記事を共有

Xで共有Facebookで共有はてなブックマーク