ワイヤーフレームとは？
ワイヤーフレームとは、Webサイトやアプリなどの画面設計をする際に、内容や配置、構成を簡潔に表した設計図のようなものです。
主に、デザインや開発に入る前の“構想段階”で使われる図面で、見た目の細かいデザインではなく、「どこに何があるか」をシンプルに示すのが目的です。
どんなときに使うの？
Webサイトやアプリを作るとき、いきなりデザインやコーディングを始めるのではなく、まず「設計図」を作って、
- ユーザーがどこに何を見て、
- どのように操作し、
- どこにたどり着くか、といったユーザー体験（UX）を考えるために、ワイヤーフレームが作られます。
これは建築でいう「間取り図」のようなもので、家を建てる前に「リビングはここ」「トイレはここ」という感じでレイアウトを決めるのと似ています。
ワイヤーフレームの特徴
| 特徴 | 説明 |
| 見た目より構造を重視 | 色・画像・フォントなどは省略し、レイアウトや情報の優先順位が中心 |
| シンプルな表現 | 四角形や線、文字だけで構成されるラフな図 |
| 共有・確認しやすい | チーム間で「ここにボタンを置きたい」などのアイデアをすり合わせやすい |
| 修正が簡単 | 初期段階で作るため、意見があれば柔軟に直せる |
ワイヤーフレームに含まれる主な要素
- ヘッダー（ロゴ、ナビゲーションメニューなど）
- メインビジュアル（目を引く画像やキャッチコピーのスペース）
- コンテンツ（記事一覧、製品情報、サービス紹介など）
- CTA（Call To Action）ボタン（申し込み、問い合わせなど）
- フッター（連絡先、著作権情報、SNSリンクなど）
これらの要素を「どこに置くか」「どんな順序で見せるか」を整理して描きます。
ワイヤーフレームの作り方
- 紙とペン（手描き）：思いついたらすぐに描ける。スピード重視。
- 専用ツール（デジタル）：より精密なワイヤーを作る場合に使用。
以下のようなツールがあります：
- Figma（フィグマ）
- Adobe XD（アドビ エックスディー）
- Balsamiq（バルサミック）
- Sketch（スケッチ）
ワイヤーフレームのメリット
- デザインの前に「伝えたいこと」「見せたい順序」を整理できる
- 開発者・デザイナー・依頼主が認識を揃えやすい
- 後戻りの手間が減り、スムーズに開発が進む
- ユーザー視点の導線設計がしやすい
まとめ
ワイヤーフレームとは、Webサイトやアプリの設計初期に使う、要素の配置や構成をシンプルに描いた図面のことです。
デザインよりも「情報の流れ」「使いやすさ」「構造」を考えることに重きを置き、プロジェクトの“土台”となる重要な工程です。