企画/ディレクション

ワイヤーフレーム

わいやーふれーむ

Webページやアプリの画面構成・情報配置を、装飾を省いたグレースケールや簡素な線画で示した設計図。レイアウトの合意形成と、構造と機能の確認という二面を持つ。

意味解説

1.色や装飾を排しレイアウトの合意を取るための叩き台

専門家向け解説

色・画像・フォントなどの装飾をあえて省き、どの要素をどこに置くか、レイアウトの構造・コンテンツの配置・UIの機能的なつながりだけを表現した設計図。装飾を排すことで「見た目の好み」の議論を避け、情報の優先順位や配置そのものに関係者の合意を集中させる狙いがある。この段階で作り込みすぎると、デザイン確定と誤解されて後の修正がしにくくなる。あくまでレイアウトの叩き台であり、「見た目がないから分かりにくい」と言われてビジュアルの議論に引っ張られてしまわないために、完成イメージではないことを共有しておくことが、後工程の手戻りを防ぐ。

クライアント向け説明

ページのデザインを決める前に、色や写真をあえて入れず、「どこに何を置くか」だけを示した下書きです。見た目の印象に左右されず、情報の並びや優先順位そのものを確認していただくための段階です。これは完成イメージではなく配置の設計図、とご理解いただくとスムーズです。

2.デザイン・実装に渡す仕様の起点となる設計図

専門家向け解説

合意されたレイアウトを、後続のデザイン制作や実装に引き渡すための仕様の起点。各要素の役割・遷移・表示条件などの判断がここに集約され、デザイナーやエンジニアはこれを基に作業を進める。要素の意図や挙動が書き込まれていないワイヤーフレームは、受け手が解釈で補うことになり、認識ずれや手戻りの原因になる。見た目を決める成果物ではなく、何をどう機能させるかの設計意図を伝える文書として扱う点が要点。

クライアント向け説明

確認いただいた配置をもとに、デザインや開発の担当者が作業を始めるための「設計の起点」になる資料です。各部分が何のためにあり、どう動くかという意図を含みます。見た目は地味ですがここが固まっていると、その後のデザインや実装がスムーズに進みます。

監修

yoneco

yoneco

庄司美雪

庄司美雪

別のキーワードで探す