ワイヤーフレーム

📖 もうちょい詳しく

何が新しいの？

ワイヤーフレームは、アプリやWebサイトを作るときに「画面に何をどこへ置くか」だけを線で描いた、画面設計の下書きのことです。
色やきれいな見た目はあえて省き、ボタンや文章、画像が入る場所を四角や線でざっくり示します。いきなり作り込んでから「思っていた配置と違った」とやり直すのは大変なので、その手戻りを減らすために、設計の早い段階で使われます。

どうやって動いてるの？

まず1つの画面ごとに「ここに見出し」「ここにボタン」「ここに一覧」と、要素の場所と並び順を四角や線で描いていきます。
このとき色や装飾はわざと使わず、灰色や線画だけで表すことが多いです。理由は、見た目の好みではなく「配置や使いやすさ」に話を集中させるためです。複数の画面をつなげて、ボタンを押すとどの画面に移るか、という流れまで描く場合もあります。

何ができるの？

作り始める前に、関係する人どうしで「画面のイメージ」をそろえられます。
紙やツールでさっと描けるので、直すのも簡単です。「このボタンはもっと上がいい」「この項目はいらない」といった話し合いを、本格的に作る前に済ませておけます。結果として、後半での大きなやり直しを減らせます。

🌱 身近なたとえ

間取り図で例えると、ワイヤーフレームは家を建てる前に描く「間取り図」のようなものです。
間取り図では、壁紙の色や家具のデザインは描かず、「玄関はここ」「キッチンはここ」と部屋の配置だけを線で示します。先に間取りを決めておけば、建ててから「動線が悪い」と気づく失敗を防げます。画面の世界でも、まず配置の下書きをそろえてから、見た目を作り込んでいきます。

✅ まず覚えるポイント

• ワイヤーフレームは、画面の「配置」だけを線で描いた下書き
• 色や装飾はあえて省き、配置と使いやすさに集中する
• 紙でもツールでもさっと描け、直すのが簡単
• 作る前に関係者の画面イメージをそろえられる
• 後半の大きなやり直しを減らすために使われる

🧭 よくある勘違い

ワイヤーフレームって、完成した画面のデザインのこと？

いいえ、完成形ではなく、その前段階の下書きです。
色や写真、フォントなどの見た目を決めるのは、ワイヤーフレームのあとの工程です。あくまで「何をどこに置くか」を決める段階だと考えると、役割がはっきりします。

ワイヤーフレームとプロトタイプは同じもの？

近いですが、目的が少し違います。
ワイヤーフレームは配置を示す静かな下書きで、プロトタイプはボタンを押すと画面が動く「試作品」を指すことが多いです。ワイヤーフレームをもとに動きを足したものがプロトタイプ、という順で進むこともあります。

🧩 関連して覚えると楽な言葉

• UI: 画面の見た目や操作部分のこと。ワイヤーフレームはそのUIの配置を先に決める下書き
• UX: 使ったときの体験のよさ。配置を整えるのは使いやすさのためでもある
• MVP: いちばん大事な機能だけで作る最初の形。設計の早い段階という点で発想が近い
• レスポンシブ: 画面幅に合わせて配置を変える仕組み。スマホ用の配置も下書きで考える

🏁 ひとことでまとめ

ワイヤーフレームは、見た目を作り込む前に「画面のどこに何を置くか」だけを線で描いて、関係者のイメージをそろえる画面設計の下書きです。