Figma の代わりに HTML でワイヤーフレームを作る

ワイヤーフレームを HTML で？

ワイヤーフレームは Figma で作るもの。そう思っていました。

ある日、Claude Code との作業中に「アプリの画面構成をざっくり確認したい」と思い、試しに「EC アプリのワイヤーフレームを HTML で作って」と頼んでみました。

出てきたのは、iPhone のフレーム内にきれいに収まった5画面のワイヤーフレーム。CSS だけで端末のフレーム、ノッチ、ステータスバーまで再現されていました。

作った画面

EC アプリの基本的なフローです。

1. ホーム画面 — プロモバナー、カテゴリ一覧、商品グリッド
2. 商品一覧 — フィルターバー、商品リスト
3. 商品詳細 — 商品画像、カラー/サイズ選択、カートボタン
4. カート — 商品一覧、数量コントロール、合計金額
5. チェックアウト — 配送先、支払い方法、注文確定

5画面が横並びで表示され、全体のフローが一目でわかるレイアウト。

端末フレームの再現

驚いたのは、CSS だけで iPhone のフレームを再現していたこと。

• 端末の外枠（角丸）
• ダイナミックアイランド
• ステータスバー
• 下部のタブバー

実機を模した見た目になるので、「アプリとして使ったときの感覚」が伝わりやすい。

Figma との使い分け

実際に両方使ってみて、使い分けが見えてきました。

HTML ワイヤーが向いている場面

• 全画面を俯瞰したいとき — 横並び一覧で画面遷移のフローが見える
• クイックに確認したいとき — Claude Code に一言伝えるだけで生成
• 非デザイナーに共有するとき — HTML を送るだけで見られる（Figma アカウント不要）

Figma が向いている場面

• コンポーネントの詳細設計 — サイズ、余白、状態バリエーション
• デザインシステムとの連携 — スタイルやトークンの一貫性
• チームでの同時編集 — リアルタイムのコラボレーション

ワイヤーフレームに求めるもの

ワイヤーフレームの目的は「構成の確認」であって「ビジュアルの完成」ではありません。

HTML ワイヤーは、この「構成の確認」に十分なクオリティを、圧倒的なスピードで出してくれます。1ファイル、JavaScript なし、ブラウザで開くだけ。

使い方のコツ

Claude Code に依頼するとき、いくつかのポイントがあります。

• デバイスサイズを指定する — 「iPhone 15 Pro サイズで」と伝えると適切な幅で作ってくれる
• 全画面を横並びにする — プレゼンや共有に便利
• グレースケールで — 色をつけるとワイヤーの域を超えてしまう
• iOS / Android のガイドラインを意識 — 「iOS 風の UI 要素で」と伝える

手段を増やすということ

Figma をやめて HTML に移行する、という話ではありません。道具が一つ増えた、という感覚です。

5分で全体のフローを確認したいとき、HTML ワイヤーは強力です。そこから詳細に落とし込むときは Figma。目的に合わせて道具を選べるようになりました。