プロトツールはデザイナーのためのもの？
近年ではUXという単語が増えてきたため、
画面デザイン自体はデザイナーが専任して行うことが多いかと思います。
それでも、エンジニアが自ら画面設計を含めすべて行うことも沢山あります。
エンジニアの皆様は脳内で大体の画面内容や画面遷移・アニメーションなどが目に浮かぶことも多いかと思いますが、
それを人に説明したりするのって難しいですよね。
そんな場合に簡単に使えるプロトツールと、
実際の画面デザインでも使えるデザインツールを紹介します。
様々なプロトツール
共通の特徴
スマホで撮影した画像、または画像をアップロードして
画面遷移を設定できます。
ウェブサービス
ウェブサービスであるため、どこでも作業ができます。
また、専用のモバイルアプリを使用することでモックを動作させることができるため、
ゲーブルなどを全く使わずネットワーク経由で更新および動作確認が可能になります。
POP
スマートフォンアプリのプロト作成に特化したサービスです。
スマートフォンまたはタブレットのアプリをダウンロードして使用します。
スマートフォンで撮影した画面のワイヤーフレームをそのまま使用したり、
最新版ではスマートフォン上でのワイヤーフレーム作成ができます。
手書きでスマーフォンアプリのワイヤーフレームを書きたい人にはうってつけのアプリです。
Prott
無料で1プロジェクトを作成することができます。
基本は日本語なのも嬉しいですね。
有料のProプランになると、下記の機能が追加されます。
- ワイヤーフレーム作成
- 画面遷移図作成
また、Sketch向けのプラグインも存在するため、
Sketchで作った画面を転送して表示することができます。
ローカルアプリ
デザインツールが主となりますが、
機能としてプロトタイプとして動作確認を行うことができます。
Adobe XD
Mac, Windows両対応のツールです。
AdobeCCのファミリーのためCreativeCloudのコンプリートプランに入っているユーザは無料で使うことができます。
また、無料プランも存在し1プロジェクトのみなら作成できます。
専用のモバイルアプリが存在し、
Wi-Fi経由で作成したモックを表示・画面遷移させることができます。
Justinmind Prototyper
Mac, Windows両対応のツールです。
デザインに必要な機能が揃っており、
細かい設定がしやすいツールです。
無料版と有料版がありますが、
画面遷移などの設定は無料版で使用可能です。
Origami Studio
Mac専用アプリ。
デザインツールよりもプロトタイプツールとしての意味合いが強いため、
インタラクションの設定が細かい。
ざっくり指定したい場合には役不足感が否めないが、
細かい指定が必要になった場合には重宝しそう。
Sketch
Mac専用アプリ。
ちょっと前までは最強とも一部で言われていたデザインツール。
どちらかというとAdobeのIllustratorに近い存在だが、
プラグインの多さやモバイル・Web用のコンポーネントの多さから
愛用者は多い。
専用のモバイルアプリが存在し、
Wi-Fi経由で作成したモックを表示することができます。
(画面遷移などのアクションは使えない）
さいごに
Webアプリやモバイルアプリを作る際に、
画面モックを作ったりして簡単に動かしてUI/UXの確認をすることが多いかと思います。
エンジニアの皆様はもらったデザインを元にコーディングをしますか？
それともなんとなく自分でHTMLやらXMLやらStoryboardを組みますか？
だいたいそういう場合ってほしい文字を並べていった結果ごちゃっとした内容になりませんか？
もちろん、WebアプリであればHTMLを書いたものをモックとして
使用するという文化はありましたが、
もっと早い動作確認が必要になるケースって結構多いと思います。
開発者だから、と言わずに。
画面設計が必要な場合はいきなりコードを書かずに、
手書きでもいいので画面のワイヤーフレームを書けると
すっきりした画面を作れると思います。
お願い
ここに紹介したもの以外にもたくさんのツールがあります。
私自身が使ったことのあるツールのみを紹介していますので、
もっといいツールがあったら是非教えてください。
なお、最近はSketchでアイコンなどを作り、
AdobeXDで画面モックを作ることが多いです。(Illustratorは勉強中・・・）