プロトタイプやワイヤーフレームを作ることのできるツールを4つご紹介します。プロトタイプやワイヤーフレームを導入する目的についても解説しています。
プロトタイプやワイヤーフレームの目的
プロトタイプやフレームワークなどの手法は、Webデザインでは欠かせないステップです。なぜプロトタイプやワイヤーフレームなどの手法に取り組むべきなのか、その目的について簡単に解説しておきましょう。
早期にデザインや機能を見直す
Webサイトやアプリを制作する時は、デザインや機能を練り直すことが多いかと思います。設計や仕様があったとしても、最終的なデザインや機能を検討することは、良い成果物を生み出すためには必須とも言えるのです。
しかし、大事なのは練り直すタイミングです。実装段階に入ってから見直しが入ってしまっては、大きな出戻りが発生してしまします。プログラミングなどの開発段階ではなく、デザインの段階で検討を終えることが望ましいと言えます。
プロトタイプやワイヤーフレームの目的は、ここにあります。プロトタイプやワイヤーフレームは、言わばたたき台。実装に入る前の早い段階で改善点や問題点を見つけて、デザインや機能を固めていくのです。
チーム内で認識が合わせられる
開発業務はチームで取り組むものです。チームの中を見ても、デザイナーやエンジニア、マネージャ、営業など多様な関係者がいます。メンバーのスキルやバックグラウンドも、さまざまです。
そのため、十分にコミュニケーションを取っていたとしても、認識の齟齬が出てくる可能性があります。それが原因で修正や出戻りが発生するなど、制作作業が滞ることも考えられます。
しかしプロトタイプやワイヤーフレームを導入することで、デザイン面での認識の齟齬を極力減らすことができるようになります。制作物のイメージもわきやすくなりますし、そのイメージをチーム内で共有することができるのです。
プロトタイプやワイヤーフレームが作れるツール4選
それでは、プロトタイプやワイヤーフレームを使うためのツールについて見ていきましょう。ここでは代表的な4つのツールをご紹介します。どれも魅力的なツールですが、それぞれ特徴が異なります。プロジェクトや制作物に合ったツールを使っていきましょう。
Prott
» Prott – Prototyping tool for Web iOS Android apps
最初にご紹介するのは、Prottです。デザイン関連で、今最も注目されているツールと言えるでしょう。Goodpatch社が開発しているツールで、プロトタイプを簡単に作ることができます。SketchやDropboxなど、外部サービスとの連携もできます。
Prottの特徴は、その直感的な操作性にあります。画像などの要素の追加は、ドラッグアンドドロップで簡単にできます。要素や画面を線でつなげれば、画面遷移もすぐに実現できます。
手書きのスケッチが使えることも、Prottを使うメリットの一つです。Prottはスマホやタブレットのアプリもリリースされているのですが、アプリから写真を撮るだけで手書きのスケッチを利用することができます。
Prottでは5種類の料金プランが用意されていて、1つのプロジェクトのみ利用可能なFreeプランや、プロジェクト数に制限のないProプラン（税抜3,900円/月）などがあります。ワイヤーフレーム機能を使うには、Proプランに登録する必要があります。なお、支払い方法は月間契約もしくは年間契約から選べます。
Adobe Experience Design CC
» ユーザーエクスペリエンス、プロトタイプ作成 | Adobe Experience Design CC
Adobe Experience Design CC（以下、Adobe XD）は、PhotoshopやIllustratorなどのデザインツールで有名なAdobeが提供しているプロトタイピングツールです。Project Cometの後継にあたるツールです。記事執筆時点ではプレビューとなっていて、Mac版のみリリースされています。
Adobe XDの特徴的な機能は、リピートグリッドです。任意のスタイルやページ要素を繰り返して配列させる機能なのですが、これがとても便利。コンテンツ一覧やギャラリーなど、同じ要素を連続して使っている場面は思いのほか多いです。リピートグリッド機能を使うことで、こういった繰り返しの要素を素早く簡単に作ることができます。
もちろんそれだけではなく、プロトタイプ制作にまつわる機能は一通り揃っています。シェイプなどの要素は直感的な操作で描画できますし、ライブプレビューや共有機能も使えます。
現在はプレビュー版のため、Adobeのアカウントさえあれば誰でも無償でダウンロードできます。製品版（Adobe Creative Cloudに含まれる）の提供は、2016年中を予定しているようです。
Flinto for Mac
» Flinto for Mac – デザイナーが待ち望んでいたプロトタイプツールの登場
Mac専用のプロトタイピングツールです。アプリのプロトタイプを、プログラミングをすることなく作成することができます。有料のツールなのですが、14日間のトライアル版も用意されています。
Flintoの特徴は、アニメーションを簡単に実装できるところ。スライドや3Dアニメーションを、思い通りに作ることができます。ドラッグアンドドロップなど、直感的な操作性も備えています。
Sketch専用のプラグインも用意されているので、Sketchからダイレクトに画像を読み込むことができます。ライブプレビューや共有など、他にも便利な機能が使えます。
inVision
» Free Web & Mobile Prototyping (Web, iOS, Android) and UI Mockup Tool | InVision
inVisionも、プロトタイプの作成ツールです。他とはひと味違うツールで、複数人でのコラボレーションやデザインプロジェクトの管理に便利な機能が使えます。
上で述べたように、デザイン業務ではさまざまなメンバーとのやり取りがありました。inVisionはプロジェクトとしてプロトタイプが管理できるので、チームでの作業に最適なのです。各画面のステータス管理のできるWorkflow機能や、プロトタイプの各画面についてinVision内でコメントをやり取りすることも可能です。
もちろん、プロトタイプを作成する基本的な機能もしっかりと備わっています。連携できるサービスも多く、Dropboxなどのストレージからの読み込みにも対応。プロトタイプのバージョン管理など、らしい機能も豊富に備わっています。
なお、inVisionでは全部で5つの料金プランが用意されています。プロトタイプが1つ作成できる無料のFREEプランや、チームで使える無制限のTEAMプランなどがあります。
あとがき
プロトタイプやワイヤーフレームなどの制作ができるツールを4つご紹介しました。手軽に使えるProttもいいですし、デザインプロジェクトの管理ができるinVisionもおすすめです。機能や料金プランを考慮しつつ、制作内容やチームに合わせて最適なツールを導入していってください。