【システム開発技術】画面の「骨組み・構造」を可視化する設計図！「ワイヤーフレーム」｜情報処理問題1000本ノック
基本情報技術者試験、応用情報技術者試験、WebUI/UXデザイン分野で超頻出の画面設計用表現手法。「ワイヤーフレーム（Wireframe）」の定義と、前回学習した「ストーリーボード」や他のデザイン試作ツールとの違いを攻略しましょう。
1. 【 問題 】：テクノロジ系（システム開発手法・画面設計）
【 問題 】 Webサイトやモバイルアプリケーションの画面開発において、本格的なビジュアルデザインやプログラミングに入る前段階で、画面の各要素（ヘッダー、ボタン、テキスト、画像枠など）の配置や主要部分のレイアウト構造をシンプルに示す設計図（骨組み）はどれか。
（ア）ワイヤーフレーム（Wireframe）
（イ）モックアップ（Mockup）
（ウ）ストーリーボード（Storyboard）
（エ）サイトマップ（Sitemap）
2. 正解：
正解：（ア）ワイヤーフレーム（Wireframe）
3. 解説：「『画面のどこに何を置くか』を決める骨組み設計図！」
ワイヤーフレーム（Wireframe）は、直訳すると「針金の枠組み」という意味の通り、色や装飾を省いたモノクロに近いシンプルな画面レイアウトのレイアウト図です。
「何がどこに置かれるか」というレイアウトと情報構造だけに集中して議論できるため、仕様の行き違いを早期に防ぐことができます。
| 用語・試作成果物 | 概要・主な目的 |
|---|---|
| （ア）ワイヤーフレーム | 画面のレイアウト・構造（骨組み）を示す設計図。色や装飾は省く。 |
| （イ）モックアップ | 配色やフォント、写真などを反映した完成後の見た目（静止画ビジュアル）を再現した見本。 |
| プロトタイプ（狭義） | 実際のボタンクリックや画面遷移などの動的な操作感（インタラクション）を試せる試作版。 |
| （ウ）ストーリーボード | ユーザーの状況や利用の流れをシナリオやコマ割り文章（物語）で表現したプロトタイプ。 |
1. 理解のコツ:
・「家づくり」で例えると、ワイヤーフレームは「間取り図（どこに部屋やドアがあるか）」、モックアップは「外観・内装のパース図（どんな色や壁紙か）」、プロトタイプは「モデルハウス（実際にドアを開け閉めできる）」にあたります。
2. 試験対策の視点:
・問題文に「画面の主要部分の構造」「レイアウト」「配置を示す設計図」「骨組み」と来たら、迷わずワイヤーフレームを選択しましょう！
4. まとめ
Web画面などの情報要素のレイアウトや主要部分の構造を表すレイアウト設計図。これがワイヤーフレームです。見た目（ビジュアル）を再現する「モックアップ」や、動作を伴う「プロトタイプ」との役割の違いを整理しておきましょう！