【わいやーふれーむ】
ワイヤーフレーム とは？
最終更新:
💡 画面設計の「間取り図」
Webサイトやアプリの画面構成を、線や枠などで表した設計図。装飾の作り込みを抑え、情報の優先順位、要素の配置、画面間のつながりを検討・共有するために使う。
📌 このページのポイント
- 画面の構造・配置・情報の優先順位を表す設計図
- 装飾を抑え、何をどこに置くか、どう操作するかを検討する
- 早い段階の認識合わせや修正に使い、詳細度は確認したい内容に合わせる
- 紙とペン、プレゼンソフト、FigmaやBalsamiqなどで作れる
ひよこ ワイヤーフレームって何？
ペンギン先生 家を建てる前の間取り図に近いよ。「ここにロゴ」「ここにメニュー」「ここに記事一覧」と、Webサイトやアプリの構成をシンプルに描くんだ。画面どうしのつながりも考えるよ。
ひよこ なんでキレイなデザインを最初から作らないの？
ペンギン先生 色やフォントを作り込む前なら、「この情報はもっと上に」「このボタンは必要かな」と構成を話し合いやすいんだ。線や枠で表しておけば、別の案も試しやすいね。
ひよこ どんなツールで作るの？
ペンギン先生 紙とペンでも、PowerPointなどの図形でも作れるよ。FigmaやBalsamiqのようなツールも使える。まず何を確認したいかを決めて、共有や修正がしやすい方法を選ぼう。
ひよこ ワイヤーフレームとモックアップは違うの？
ペンギン先生 ひよこ 上手に作るコツってある？
ペンギン先生 たとえば申込画面なら、利用者が必要な説明を読んで申込みへ進めるかを考える。重要な情報やボタンを配置し、関係者に見てもらって直すんだ。白黒は集中しやすい表現だけど絶対条件ではないよ。確認に必要な文字や注釈を入れよう。
まとめ：ざっくりこれだけ覚えればOK！
「ワイヤーフレーム」って出てきたら「画面の構成を考えるシンプルな設計図」と思えばだいたいOK！
📖 おまけ：英語の意味
「wireframe」 ＝ 針金の骨組み
💬 wireは「針金」、frameは「枠組み」。画面の細かな装飾より、骨組みを表すものと考えると分かりやすいよ。