画面デザインの設計で使われるツールであるワイヤーフレーム、カンプ、プロトタイプ、モックアップの用語を整理しておこう。プロトタイプ、モックアップは建築やプロダクトデザインの世界でも使われている。

以下Web・アプリ制作に関してまとめておく。

ワイヤーフレーム

画面の構成要素を線、図形、文字だけで描いたもの。手描きのものから、パワーポイントやイラストレーターで描いたものまで幅が広い。パワーポイントを使うと画面遷移も表現できるが、これは近年プロトタイプと呼ばれるようになり多くのツールがでている。
ワイヤーフレームのポイントは色をつけず、具体的な装飾を指示しない点である。

カンプ

ワイヤーフレームをもとに、Photoshopなどでデザインしたもの。余白もふくめて細かい箇所まで作り込んでいく。最終的な外観を正確に示し、ビジュアルデザインの確認に使う。見た目はコーディングされたWebページのようにみえる。

カンプは通常全ページはつくらない。代表的なページのみをつくり、残りのページはUIの部品だけをつくることが通常である。

カンプは印刷物制作からきた用語でWeb制作でも使われるようになった。最近はカンプを「モックアップ」と呼ぶ場合も多くなった。

PhotoshopはバージョンCC以降は大幅にレイアウト補助機能が進んでいて、カンプ作成が楽になっている。

モックアップ

モックアップはWeb制作の場合、カンプを指している。もともとはプロダクトデザインで使われていた用語で、実物大の模型や試作品を意味する。

プロトタイプ

一言でプロトタイプといっても実際は多様で、多くの手法、ツールがある。

2016年にAdobeが「Adobe Experience Design」というプロトタイプ作成ツールを発表し、Web制作者の間で話題になった。チャド・カマラ、ユジア・ジャオ著『UXデザインのやさしい教本』（エムディエヌコーポレーション、2016年）によれば

プロトタイプとは、意図するインタラクションを模擬的に見せるデザインモデルを指します。

と定義している。

インタラクションとは画面遷移や画面の変化である。クリック、タップした後のユーザーへのフィードバックである。『UXデザインのやさしい教本』では、プロトタイプを以下の3つの目的に分類している。

• 本番コードを書く前のユーザーテストのためのプロトタイプ
• アイデア発想のためのプロトタイプ
• コミュニケーションツールとしてのプロトタイプ

このように一言にプロトタイプといっても意味する幅は広い。

プロトタイプは新しい概念ではない

従来からパワーポイントでワイヤーフレームをつくり、実際にクリックできるして、インタラクションを確認する手法はあったし、ペーパープロトタイプといい、紙だけでインタラクションを確認する手法はあった。Carolyn Snyder著『ペーパープロトタイピング』（オーム社、2004年）の原書は2004年に刊行されている。

『UXデザインのやさしい教本』ではプロトタイプをインタラクション忠実度、制作コストという切り口で作成ツールを以下のようにまとめてある。下の項目にいくほどインタラクション忠実度と制作コストが高くなる。

• 紙
• In Vision
• POP
• Prott
• Adobe Fireworks
• Adobe Experience Design
• Microsoft PowerPoint、Apple Keynote
• Axure
• コード

In Visionは画面をとりこみ、画面遷移のアニメーションをつくれるWebアプリケーションである。モバイルアプリに特化している。

POPは紙にスケッチしたものをスマホで取り込んで、プロトタイプにできるアプリである。

Prottは日本のグッドパッチ社が開発したアプリで、紙に各画面のスケッチを描き、スマホで撮影していくと、プロトタイプが完成する。グラフィックツールから画像を読み込むことも可能である。

Prottまではプロトタイプの制作コストが低いため、実際にコードを書くまえのユーザーテストやコミュニケーションツールとして使うことができる。

Fireworksは現在も根強くWeb制作会社で使われている。2013年に新機能の開発の停止が発表され、CS6が最後のバージョンになった。in Designのマスターやパワーポイントのスライドマスターのようなページ管理機能がある。リンクを設定して、画面遷移を表現できる。Fireworksはカンプ制作やUI部品のつくりこみまで使っている制作会社がいまもある。

Adobe Experience DesignはUIのグラフィックを作成するDesignモードと画面遷移を作成するPrototypeモードを登載している。Designモードでは、Photoshopのカンプ制作では大変だったリスト表示やグリッドレイアウトを手早く作ることができる。将来はアプリやWebの画面デザイン作成ソフトの決定版になる可能性がある。

一番最後のコードというのは実際にHTML、CSSを組んでプロトタイプをつくってしまう手法である。下北沢にあるWeb制作会社、ベイジの代表をされている枌谷さんの「ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果」という実践記事が大変参考になる。