PhotoshopやIllustrator、Sketchなどを使って静的にデザインカンプを作成したりプロトタイピングを行うのはまだまだ人気です。
一方で、機能や操作性などのUX面での改善を目的に、動的にデザインを設計することができるツールとして、プロトタイピングツールも現在では広く普及してきました。

実際のところ、プロトタイプを作成するのは、それなりに手間がかかってしまいます。
例えば、Webサイトの場合は、デザイン素材をレイアウトし、スライスを作成し、リンクを整備したりします。
これらをHTML・CSS・JavaScriptなどのコーディングなどを行いながら手作業でコツコツ作るのは、ちょっと大変です。
大幅に修正しなければならなくなった場合には、またゼロからコーディングを行わなければならず、非効率ですよね。

プロトタイピングツールは、こうした背景もあり、ここ数年で広く普及してきました。
ドラッグアンドドロップなどの直感的な操作でプロトタイプを作成することができ、作成したプロトタイプの共有も簡単に行えるものが多いのです。

ところが、現在プロトタイピングツールの中でも世界で多く利用されているのは、Adobe XD(Experience Design)やInVisionといった、もともと海外で作成されたものが主流でした。
Adobe XDも、リリース当初は英語だったので、日本人が使うには少しハードルが高かったのかもしれません。

今回は、国産のデザイン＆プロトタイピングツールをご紹介します。
国産なので、もちろん日本語対応も問題ありません。
ワイヤーフレームから、動的なプロトタイプまで、いろいろなものを作ってみましょう。

早く使いたかった国産のデザイン＆プロトタイピングツール4選

1. 【サービス終了】Prott

01.jpg

Prottは株式会社グッドパッチによって開発されているプロトタイピングツールです。

Prottでは、Sketch上で利用できるプラグインを提供しており、Sketchで作成したデザインデータを同期することで、簡単にPrott上で確認することができます。
Sketch自体はデザイン作成に関してはとても優れたツールですが、プロトタイプを作成するような機能はありません。
しかし、ProttとSketchを組み合わせて使うことで、UIデザインツールとプロトタイピングツールのそれぞれの利点を組み合わせて利用することができるので、デザインの作成からフィードバックまで、デザイン業務の幅広い範囲をカバーすることができます。

また、Prott自体はデザインを作成するためのツールではありませんが、簡単なワイヤーフレームであれば簡単に作成することができます。

モバイル端末でも簡単に確認が行えるのも、人気の理由のひとつです。
Prottが公開しているiOS・Androidアプリを使えば、デスクトップで作成したプロトタイプを簡単にスマホで確認することができます。
もちろん変更もリアルタイムで反映されるので、スマートフォンで変更を確認しながら修正を行うこともでき、非常に効率よく作業を行うことができます。

参考：
スマホサイトやアプリのワイヤーデザインを簡単に作れるProttの使い方

2. [PLOGLESS]

02.jpg

[PROGLESS]は、iOS、Android、タブレット、PC、Apple Watchなど、あらゆるデバイスのプロトタイプをWeb上で作成することができる、シンプルなプロトタイピングツールです。
株式会社リキッドデザインによって運営されています。

モックアップを作成するのも非常に簡単で、プロトタイプ内の画面数が10枚までは無料プランで作成することができます。
従来はプロトタイプのみを作成するツールでしたが、ワイヤーフレームやフローチャートの作成にも対応しました。
プロトタイプは、ホームページにも埋め込むことができ、限定URLを使ってポートフォリオとして公開することもできます。

3. cacco

03.jpg

caccoは株式会社ヌーラボが提供している、個人やチームで図の作成・共有がすばやく簡単にできるドローイングツールです。
プロトタイピング専用のツールではありませんが、ワイヤーフレームの作成によく使われており、そのほかにもマインドマップやフローチャート、オフィスレイアウト、サイトマップの作成などに広く使われています。

cacooがワイヤーフレームの定番になっているのは、数100種類以上のテンプレートやステンシルから最適なワイヤーフレームが選択できるからです。
テンプレートを選んでデザインを始めるか、自分でデザインしたものをカスタマイズするかは、自分次第です。
完成したワイヤーフレームデザインをプライベートページに保存すれば、何度も繰り返し利用できます。

4. [STUDIO]

04.jpg

[STUDIO]は、株式会社オハコが開発している、プロトタイプのためのUXデザインツールです。
デザインスキルもプログラミングスキルの有無も関係なく、直感的にプロダクトを形にすることができるシンプルな操作性が特徴です。

プロダクトに追加したい要素をドラッグ&ドロップで移動させるだけで、レイアウトを完成させることができ、難しい知識は一切必要さりません。
また、ブロックやテキストなど、必要なコンポーネントがデフォルトで用意されており、好みに合わせて調整することもできます。
Unsplashの画像も読み込むことができ、スタイリッシュな画像やアイコンもライブラリから読み込むことができるので、素材探しのために時間を浪費することもありません。

デザインデータは、サイズに合わせて可変するレスポンシブデザインに対応しているので、デバイスごとにデザインを分けて作成する必要がないのも、STUDIOの強みです。
作成したデザインデータは、専用のアプリを使うことで実機で瞬時に確認することができます。
変更はリアルタイムで反映されるので、チームが一つの画面を見ているかのような一体感を演出することができます。