Web・システム用語辞典ことはじめ 用語一覧へ
まず覚える画面を作る

ワイヤーフレーム

ワイヤーフレームとは?

画面の配置を簡単な線で示した設計図。

まず、短く答えると

ワイヤーフレームの意味

色や写真を決める前に、情報の順番やボタンの場所を確認します。

どんな場面で使う?

Webサイトやアプリの見た目、情報の並び方、利用者の操作を考える場面で登場します。

見た目の好みだけでなく、迷わず使えるか、スマートフォンでも読みやすいかという視点で確認します。

身近な例

家の間取り図のように、まず全体の配置を決めます。

覚え方のコツ

何を押さえればいい?

役割

画面の配置を簡単な線で示した設計図。

理解の深さ

まずは「何をするものか」と具体例を結び付けて覚えれば十分です。

確認の視点

見た目の好みだけでなく、迷わず使えるか、スマートフォンでも読みやすいかという視点で確認します。

混同しないために

似た言葉・関連する言葉との違い

「ワイヤーフレーム」は画面の配置を簡単な線で示した設計図ものです。一方、「プロトタイプ」は考えた仕組みを試すための試作品ものです。役割を分けて考えると、二つのつながりを理解しやすくなります。

使うとき・学ぶときの注意

きれいに見えることだけを目的にせず、読みやすさ、操作のしやすさ、さまざまな利用環境を一緒に考えることが大切です。

よくある疑問

ワイヤーフレームについてのQ&A

Qワイヤーフレームをひと言でいうと?

A画面の配置を簡単な線で示した設計図。

Qワイヤーフレームはどの言葉と一緒に覚えるとよい?

A「プロトタイプ」、「UI」と一緒に覚えると、役割や使われる場面の違いが分かりやすくなります。

AIに相談してみる

このままコピーして使える指示文

[ ]の部分を自分の状況に合わせて書き換えてください。

あなたは情報設計の専門家です。以下の目的と現状を踏まえ、ワイヤーフレームの構成案を設計してください。利用者の目的・情報の優先順位・主要な操作・画面遷移を考慮し、推奨案・判断理由・実施手順・注意点を簡潔に示してください。情報が足りない場合は、先に確認質問をしてください。

目的:
[ここに記入]

現状・制約:
[ここに貼り付け]
秘密情報は入力しないでください

ほかの言葉も調べてみませんか?

用語一覧へ戻る