スイッチ | ブログ・サイト運営を応援するWebマガジン

ワイヤーフレーム、モックアップ、プロトタイプの違いと、それぞれの特徴


ワイヤーフレームとモックアップ、プロトタイプの違いや特徴についてまとめました。正しく使うことで、その効果も得られるというもの。それぞれの使いどころをしっかりと押さえて、デザイン業務をより効果的にしていきましょう。

デザインに使われる手法とは?それぞれの特徴まとめ

それでは、デザインで使われる手法について解説していきましょう。デザインフローにそって、順にご紹介していきます。

画面デザインの骨組み:ワイヤーフレーム

最初に使われるのは、ワイヤーフレームです。これは、画面デザインの骨組みについてまとめたものです。画面に表示されている要素や、画面遷移についてチャート形式でまとめたものが多いです。

ワイヤーフレームは、あくまで画面デザインの大幅なレイアウトです。そのため、内容のないダミーの画像や文章が使われることが一般的です。

デザイン面の確認:モックアップ

ワイヤーフレームでも画面デザインの枠組みを確認してはいるのですが、デザインを詰めていくには具体性に欠けています。そこで使われるのが、モックアップです。モックアップには、ワイヤーフレームにはなかった、画像やテキストなどのページ要素を配置していきます。小さな変化のようですが、これだけで大きく印象が変わります。

モックアップの目標は、デザイン面での修正箇所を早期に発見すること。プログラミングなどの後工程に入ってから発見されたのでは、大きな手戻りが発生してしまいますよね。モックアップはそれを防ぎ、デザイン業務を効率化する役目もあるのです。

機能面の確認:プロトタイプ

3つ目は、プロトタイプです。モックアップはデザイン面にフォーカスした手法でしたが、プロトタイプは機能の確認を行うための手法です。

それぞれの操作を行うと、どんな反応があるのか?画面遷移やエフェクトなどを乗せていくのです。プロトタイプによって完成後の製品をイメージして、機能の漏れや間違いを発見、修正していくことができます。

おすすめツール3選

ご紹介した3つのデザインに使えるツールを、3つご紹介します。

Prott

Prottは、気軽にプロトタイプの作れるツールです。比較的新しい部類に入るのですが、この手のツールとしては非常に有名です。直感的な操作で、サッとプロトタイプを作ることができます。有料のプランに限られますが、ワイヤーフレームを作成することもできます。

Prottはこちら

Adobe Experience Design

Adobeがリリースしている、プロトタイプの作成ツールです。記事執筆時点ではベータ版として提供されていて、無料で利用することができます。リピートグリッド機能など、プロトタイプ作成が捗る機能が備わっています。Mac版のみ。

Adobe Experience Designはこちら

Flinto

プロトタイプ作成のできる、Mac専用のツールです。アニメーション効果をつけたり、タップやスワイプなどのジェスチャーを盛り込むことができます。デザインツールのSketchからも、ファイルをインポートすることができます。

Flintoはこちら

あとがき

ワイヤーフレームとモックアップ、プロトタイプの違いや特徴について解説しました。デザイナーやエンジニアにとっては、必須の手法ですね。ディレクターや営業など、開発に携わらない方にとっても、おそらく触れることがあるはず。基礎知識としてしっかりと押さえておきましょう。


Sponsored Links

こちらの記事もおすすめです!

シェア頂けると励みになります!

ブログ更新情報はこちらから発信しています。

【完全保存版】ショッピングカートASP徹底比較2018

運営者情報

荒木 厚(株式会社コクリ 代表)

デザイン会社、WEB運営会社を経て、「株式会社コクリ」を設立。 Wordpressを使ったWebサイトやネットショップの企画・制作、SEO・リスティング広告を使った集客支援をしています。