eclairのブログ ウェブ制作について勉強していると、”ワイヤーフレーム”や”デザインカンプ”や”モックアップ”といった専門用語が飛び交います。これらの言葉の違いを改めて整理してプロフェッショナルとして使い分けができるようになっておきましょう。今回は、これらの用語の違いを明確に理解し、正確に使用するためのガイドを提供します。
ワイヤーフレーム (Wireframe)
- 目的: ウェブサイトやアプリの基本的な構造や情報の配置を示す。
- 詳細度: 低い。色や具体的なデザインは含まれない。
- 特徴: ページのレイアウトや配置する要素の位置を明確にする。
スケルトン (Skeleton)
- 目的: インターフェースの主要な部分や構造を示す。
- 詳細度: 中間的。主要な情報の階層や構造を強調。
- 特徴: 構造と情報の流れを中心にデザインする。
デザインカンプ (Design Comp)
- 目的: 最終的なデザインやビジュアルを示す。
- 詳細度: 高い。具体的な色やデザイン要素が含まれる。
- 特徴: 実際の見た目を再現することを目的とする。
画面設計図 (Screen Design)
- 目的: ビジュアルデザインの全体像を示す。
- 詳細度: 高い。
- 特徴: 実際のデザイン確認やクライアントへのプレゼンテーションに使用。
モックアップ (Mockup)
- 目的: 静的なビジュアルを示す。
- 詳細度: 高い。
- 特徴: インタラクションや動きはなく、デザインのビジュアルだけを強調。
プロトタイプ (Prototype)
- 目的: 実際の動きやインタラクションを模倣。
- 詳細度: 変動。
- 特徴: 実際の操作感やユーザーエクスペリエンスをテストするためのもの。
UI (User Interface)
- 目的: ユーザーとのインタラクションを提供。
- 詳細度: 高い。
- 特徴: ユーザーが直接操作するインターフェースのデザイン。
早見表
| 用語 | 目的 | 詳細度 | 特徴 |
|---|---|---|---|
| ワイヤーフレーム | 基本的な構造の表示 | 低い | ページのレイアウトと配置 |
| スケルトン | インターフェースの主要な部分の表示 | 中間的 | 構造と情報の流れを中心に |
| デザインカンプ | 最終的なビジュアルの表示 | 高い | 実際の見た目の再現 |
| 画面設計図 | ビジュアルデザインの全体像 | 高い | 実際のデザイン確認用 |
| モックアップ | 静的なビジュアルの表示 | 高い | デザインのビジュアルだけを強調 |
| プロトタイプ | 実際の動きやインタラクションの模倣 | 変動 | 実際の操作感のテスト用 |
| UI | ユーザーとのインタラクション提供 | 高い | ユーザーが操作するインターフェースのデザイン |
まとめ
今回の記事を通して、それぞれの用語の違いや特徴をしっかりと理解し、プロフェッショナルとして正確に使い分けるようになっておきましょう。