前回の記事では構想と計画について解説し、すでに仕様書（spec）と計画書（plan）が手元にあります。しかし、これらはあくまで文字であり、目に見えず、手にも触れることができません。今回の記事では、この文字の塊をどのようにして具体的なビジュアルに変えていくかについてお話しします。
まずスタイル、それから画面
デザインにおける第一歩はUIを描くことではなく、まず全体的なビジュアルの方向性を決めることです。私は「cinematic-ui」というスキルを使用しました。これは、スタイルに関する説明に基づいて、一連の完全なビジュアルテーマを生成するものです。
私が指定した方向性は「宇宙感、テクノロジー感、ダークトーン」で、インスピレーションは映画『インターステラー』や『グラビティ』のような、静謐でありながら緊張感あふれるビジュアルスタイルから得ました。cinematic-uiはこれらの説明を受け取ると、一連のデザイン言語を生成します：
カラーシステム（メインカラー、サブカラー、背景色、文字色）
フォント構成（見出し用、本文用、ラベル用）
余白とレイアウトのルール
アニメーションの基調（イネーシェンス関数、トランジション時間）
これら一式が完成すれば、それはサイト全体のビジュアルDNAを持つことになります。その後、どのようなページを作成する場合でも、このフレームワークの中で展開されていきます。
デザイン・コンサルテーションで方向性を確認
視覚的なテーマが固まったら、design-consultationスキルを使ってより詳細なデザイン決定を行います。このツールの役割は、いわばデザインコンサルタントのようなものです。ブランドの方向性、色彩心理学、タイポグラフィの原則といった、より高次元の課題について議論することができます。
例えば、次のように尋ねます。「ダークな背景に対して、どの色のCTAボタンが最も目立つか？ナビゲーションバーは固定式にするか、ハンバーガーメニューにするか？記事一覧はカード形式にするか、リスト形式にするか？」
このツールは単に答えを出すだけでなく、その理由も説明してくれます。つまり、その選択が視覚的にどのような効果をもたらすか、ユーザーの閲覧フローにどのような影響を与えるかといった点です。こうした議論を通じて、実際に手を動かす前に多くのデザイン上の決定を下すことができました。
design-html による迅速なプロトタイプ作成
デザインの方向性が固まったら、次はそれを目に見える形にすることです。design-htmlスキルは、指定したページ構造とビジュアルスタイルに基づいて、直接HTMLプロトタイプを生成します。
これは最終的な本番コードではなく、デザインコンセプトを検証するための迅速なプロトタイプです。ブラウザ上で動作するため、色、フォント、余白の組み合わせによる実際の効果を確認できます。
このステップの価値は、デザインを抽象的な記述から具体的な画面へと変える点にあります。文章での説明では問題ないように思えたことも、画面に表示してみると違和感があることに気づくことがよくあります。例えば、ある色が暗すぎて見づらい、ある余白が狭すぎて窮屈に見えるなどです。こうした問題は文章での議論では発見しにくく、画面を見れば一目瞭然です。
design-review による視覚的チェック
プロトタイプが完成した後、すぐにコーディングに入るのではなく、まず design-review スキルを使って一通り視覚的なチェックを行います。
design-reviewでは、以下の観点からデザインを検証します：
一貫性：各ページ間のビジュアル言語は統一されているか？
階層感：情報の主従関係は明確か？
可読性：文字サイズ、行間、コントラストは長時間の閲覧に適しているか？
レスポンシブ：異なる画面サイズでも正常に表示されるか？
このレビューのおかげで、いくつかの問題点が見つかりました。トップページのヒーローセクションの文字が大きすぎてスマートフォンでははみ出している、シリーズページと記事ページのタイトルフォントサイズが統一されていない、一部のページで余白の値が異なっているなどです。こうした些細ながらも重要な問題は、体系的なチェックを行わなければ見落としがちです。
プロトタイプから実装への架け橋
この「テーマ → 相談 → プロトタイプ → 監査」という一連のプロセスを経ることで、デザインはもはや曖昧な概念ではなくなりました。手元には明確なカラーシステム、フォントルール、レイアウトパターン、そして検証済みのHTMLプロトタイプが参考資料として揃っています。
次は、これらのデザインを実際のコードへと変換する段階です。次回はアーキテクチャと実装について解説します。Serena MCPのようなセマンティックツールを活用し、コーディングの過程においてもデザイン段階と同様の体系性と効率性を維持する方法についてお話しします。