セマンティックワイヤーフレーム

なぜセマンティックワイヤーフレームか

ALPSによる設計では、同じ情報構造を複数の形式で可視化できます。

ALPSプロファイル（JSON/XML）はアプリケーションの意味構造を正確に定義しますが、開発者向けです
ASD（状態遷移図）はアプリケーション全体の状態遷移をグラフとして可視化します
セマンティックワイヤーフレームは同じ情報構造を、従来のワイヤーフレームの延長で — HTMLページとして可視化します

ビジュアルデザインに投資する前に、ステークホルダーと情報アーキテクチャについて合意を取ることができます。

仕組み

同一のHTMLに対してCSSだけを差し替える — CSS Zen Garden（2003）と同じ考え方です。違いは目的にあります。CSS Zen Gardenは「意味とデザインの分離」というCSS技術のデモンストレーションでしたが、セマンティックワイヤーフレームはその分離を活かして、ビジュアルデザイン前にステークホルダーと情報アーキテクチャの合意を取るための設計ツールです。

HTMLのCSS classにはALPSのセマンティックディスクリプタIDだけを使用し、プレゼンテーション用のclassは含みません。

<article class="Book">
  <h2 class="bookTitle">The Art of Web Design</h2>
  <span class="price">$29.99</span>
  <a href="cart.html" class="doAddToCart">Add to Cart</a>
</article>

containerやbtn-primaryのようなプレゼンテーション用classはありません。HTMLには意味構造だけが残ります。このセマンティックなclassに対してCSSを適用し、CSSだけを差し替えることで3段階のフィデリティを実現します。

Level 1 — 最小限の可読性、レイアウトなし
Level 2 — 情報スケルトン（ワイヤーフレーム）
Level 3 — タイポグラフィ、カラー、レスポンシブレイアウトを含むフルデザイン

AIスキル（alps-to-mock）やMCPツール（alps2mock）で自動生成できます。

視覚記法

Level 2ワイヤーフレームは以下の視覚記法を使います。

ホバーラベル

Book.Book 要素にホバーするとALPSのセマンティックディスクリプタIDがツールチップで表示されます

破線の枠

section

section、article、asideは破線で囲まれ、ブロック構造が見えるようになります

下線リンク

Book Details safe遷移（go*） — 副作用のない読み取り専用ナビゲーション

遷移タイプと左ボーダー色

ボタンの左ボーダーの色で遷移タイプを区別します。状態遷移図のエッジカラーと同じ色を使います。

safe — 読み取り専用、副作用なし

unsafe — 状態変更、非冪等

idempotent — 状態変更、冪等

×ボックス画像

画像プレースホルダー — 「ここに画像」を示すワイヤーフレームの標準記法

デモ

同じオンライン書店の情報構造を3つの形式で確認できます:

ALPS — プロファイル
ASD — 状態遷移図
ワイヤーフレーム — セマンティックワイヤーフレーム

ワイヤーフレームからCSSを差し替えるだけで、スケルトン表示やプロダクションに近いデザインに切り替えられます。3段階のフィデリティを比較できます。

AIとの親和性

セマンティックワイヤーフレームのHTMLは意味構造が自己記述されているため、AIは純粋な形で情報構造を取得できます。通常のHTMLではflex, md:grid-cols-3, shadow-lgといったレイアウト・装飾のノイズに埋もれた意味を推測する必要がありますが、セマンティックHTMLではその推測が不要です。より少ないトークンで、より正確に理解できます。