ウェブサイト、アプリの画面設計に欠かせない
ワイヤーフレームツール

ワイヤーフレームとは？

　ワイヤーフレームは、図式、構造、概要、ブループリント、ユーザーインターフェイス要素の配置です。モックアップとも呼ばれます。ワイヤーフレームの目的は、システム設計者、プログラマー、およびユーザーがシステムの構造についてお互いに同じ概要を理解できるようにすることです。ユーザーは、ワイヤーフレームを確認する段階で、設計者に対してコメントをしたり、変更を要求したりします。設計したワイヤーフレームが認められたら、開発者はシステム構築を進めます。

　ワイヤーフレームを作成することで、システム開発が容易になります。 更に、システム変更により時間をたくさん費やす可能性のあるエラーや誤解を減らすこともできます。

　ワイヤーフレームは、紙で描くことや、コンピュータープログラムまたはウェブサイトを使用して設計することが可能です。また、無料版と有料版が提供されています。

ワイヤーフレームには、次の3つのレベルがあります。

1. 低忠実度ワイヤーフレーム：紙やプログラムに大まかなアイデアをスケッチします。
2. 中忠実度ワイヤーフレーム：画面上の特定の要素を定義します。
3. 高忠実度ワイヤーフレーム：より現実的な詳細を描き込み、メニューやボタンを置く位置や、実際に使用するラベルや説明文を定義します。

ワイヤーフレームツール

ワイヤーフレームツールは、下記のようにオンラインとオフラインに分類されます。

• オンライン： Cacoo, Jumpchart, FrameBox, iPlotz, MockFlow, Google Docsなど、Webサイトで使用するツール
• オフライン：Microsoft Visio, OmniGraffle, Adobe Photoshop, Adobe Firework, Pencil Project, Justinmindなど、コンピューターまたはスマートフォンへインストールされるツール

上記の中、MockFlowはお勧めのオンラインワイヤーフレームツールです。

MockFlow.comにアクセスしたら、MockFlowツールが使えます。下記は、このツールの利点です。

• 使いやすいワイヤーフレームツール
• スタイリッシュで美しいビルド済みコンポーネントがたくさん提供されています。
• その他の使用者が共有するUIテンプレートやパッケージをダウンロード可能です。
• 使用者はMockFlowプログラムをダウンロードして、自分のコンピューターにインストールできます。
• 作成したものをPNG、PDF、PowerPoint、Word、HTMLなど、多くのフォーマットにエクスポートできます。

　MockFlowは無料版と有料版が提供されます。価格は下記の通りです。但し、無料の「Basic」バージョンを使用する場合、一部の機能に制限があります。例えば、1つのプロジェクトに対して3ページしか使用できなく、作成したものをHTML形式でエクスポートすることは不可能です。

　MockFlowは、ワイヤーフレーム設計者向けに使いやすいツールです。プログラミングの知識があまりなくても、マイクロソフトVisioのような描画プログラムの使用経験があったら、MockFlowを簡単に使用できます。また、MockFlowを使いこなせたら、異なる機能を有する他のワイヤーフレームツールを簡単に使用できるようになります。

関連記事：UX/UIデザインとは？