前回でサイトを本番公開しました

動く。一覧も詳細もタグも出る。でも見た目は何のデザインもしていない仮UIのままでした

今回は デザインをちゃんと考える回 フレームワークやデプロイの話は前回まで
ここからは「DevRevっぽさ」を出しつつ、DevRev関連のサイト だと分かる見た目にします

ビフォー — 機能はある、ブランド感はない

着手前のサイトはこんな状態

これはCursorくんが自動的につくってれたモックサイトで、動くけどナレッジサイトとしての作り込みは未着手 — デザイン編の題材としてちょうどよい段階

Astroでサイトの骨組みを作るで手元確認したときのトップが、いちばん近いビフォー
ダーク背景＋アンバー見出しの仮UI

着手前の仮UI（ローカルトップ）

2つの AI にお仕事を任せる

骨組みから公開まで、コードは Cursor（エディタ上の AI）にお願いしてきた。ビフォーの仮UIも、Cursor が載せた土台でした

デザインも Cursor だけに頼む手はあったけど、「もっと DevRev っぽく」だけだと、黄ヒーローにするか・用語をどう置くかが毎回ブレてきます

デザインを考えるお仕事 は DevRev Computer に、そのデザインそって つくるお仕事 は Cursor に分けた

Computer は DevRev のことを一番よくしっているので、製品のブランドや用語を前提に相談できる

黄ヒーロー、黒ナビ、フラット高コントラスト Computer や Snap-in といった用語の置き方も含めて、「なんとなくそれっぽく」ではなく 「あ、DevRev あるあるだ」と分かるトーン を狙う

フェーズ	担当	やること
1. デザインを考える	Computer（DevRev上のAI）	DevRev ブランドに寄せた方針・色の一覧・HTMLモック。用語の置き方と非公式の線引き
2. 実装	Cursor	方針が固まったあと、サイトのコードに色のルールとコンポーネントを反映

Computer は 相談相手兼記録係 — 採用・却下と理由を design-log に残す
Cursor はComputer の指示を実装に落とし込む

同じ AI に全部お願いするより、得意な相手に分けました

Computer に任せる段取りが決まったら、まずモックを作るいきなり Cursor に実装を頼むと、黄ヒーローにするか・ナビを黒固定にするかがチャットの指示のたびにブレる HTML モックで見た目の合意を取ってから Cursor に渡す — この順番を守った

固め方の流れはだいたい次の4段

ブランドの線引き — カラーと用語は使う、公式ロゴと Chip フォントは使わない、非公式バッジは必須（次節の表）
色・フォント・角丸を一覧にまとめる — 色: #ffe600 や 12px などを design-log に書き出し、実装中はこの一覧を正本にする（チャットで都度変えない）
トップと詳細の HTML モック — 黄ヒーロー／黒ナビ／明るい本文の3段リズムをブラウザで確認。ロゴの黄色マーカー案などはここで試して却下
design-log に採否を残す — 採用・不採用と理由を記録。Cursor はこのログと色の一覧を参照して実装に落とす

一覧の見せ方（カテゴリ窓 vs 横スクロール vs 2ペイン）も、別モックで A/C/E を並べて比較してから方向を決めたトップ＋詳細の2画面で世界観が揃ったら、Cursor に渡した

Phase 1〜2 の実装後（ライトテーマ）:

Phase 1〜2 実装後のトップページ

詳細も同じ配色ルールで症状/原因/対処を分離:

詳細ページ（ライトテーマ）

あくまで 個人的なまとめサイト です。DevRev っぽい見た目にはしたいけど、公式の模倣にはしたくない

公開されているブランドの情報を見ながら、自分なりに次の線引きにした

フォントは OFL・Google Fonts のみ見出し Space Grotesk、本文 Inter + Noto Sans JP、ラベル JetBrains Mono — Chip に近い雰囲気を ライセンス明確な代替 で寄せた

Computer が HTML モック5点（トップ・詳細・一覧案・OGP・favicon）をリポジトリ内に置いたあと、Cursor で Phase 1〜2 を実装

Phase 1（シェル）

Phase 2（コンポーネント）

一覧の カテゴリ窓（案A）と2ペイン一覧（案E） もモック段階で採用方向は決めたが、本実装の細部は別フェーズ今回の記事では 世界観が載ったところ まで

仮UIから、DevRevっぽい見た目の土台 まで持っていった回