今話題のプロトタイピングツール徹底比較！！ どう使う？XD／Prottの実例紹介とそこから見る活用方法

iret,inc cloudpack二神 暢彦

my profile

• アイレットに今年6月入社

• Web制作業界には気がつけば5年目

• HTML書く⇒PHP書く⇒JavaScript書く⇒たまにディレクター的なことする（今ココ

AdobeXD,prott歴

• 自社受注案件にディレクター兼フロントエンジニアとして参加、２ヶ月ほどずっとこの２つを触ってました。

• 画面一覧、構成要素の確認、導線設計、画面遷移図をXDとprottを使って作成

本日の目次

1.プロトタイプって何かもう一度考えてみる

2.デザインツール？プロトタイプツール？AdobeXDの使い所

3.AdobeXD,prottの実演

そもそも プロトタイプってなんですか？何のため

に作るんですか？

質問

そもそも プロトタイプってなんですか？何のため

に作るんですか？

質問

プロトタイプ• 「プロトタイプ」（原型）という言葉の原義的には、量産モデルに発展させることが前提、ないし少なくともそのつもりはあるという点が、実験機や試験機や試作機（車）などと異なるが、たとえば制式採用を決定するコンペで敗れるなどして結局量産されないこともままあり、厳密な区別は無い（難しい）。新製品を量産に移す前などに試験用途として作られ、製品の設計に起因する問題やその他の不具合を発見でき、具体的な修正の検討に入れる。こうすることによって、量産して市場に出た後で不具合が発覚することを防げる。量産用プロトタイプが十分に洗練されていて、その機能性・強靱性・量産性および他の目標を十分に達すると判断された場合、その製品を量産に移せる。しばしば、そのような用途のプロトタイプは大量生産技術とは違った技術を用いて製造される。このための技術や手法はプロトタイピングと呼ばれる。

• コンピュータプログラムにおけるプロトタイプ　C言語には関数プロトタイプ宣言というものがあるが、これは関数・サブルーチンの引数と返り値の値を宣言するものである。外部とのやりとりを示す「宣言」に対し、中身を示すものを「定義」と言う。プロトタイプベースのオブジェクト指向プログラミングでは、プロトタイプは「クローンとしての新しいオブジェクト」を作ることができるオブジェクト、のことである….

• ロボットアニメにおけるプロトタイプ『機動戦士ガンダム』に端を発するリアルロボット路線のアニメでは、本来はその「プロトタイプ」である機体のパイロットではなかった主人公が偶然の行きがかりから搭乗して操縦したことをきっかけに物語が繰り広げられるというパターンが、ストーリー定型の1つとして存在する。この様な作品では、主人公が乗り込んだプロトタイプ機を主役メカとしてストーリーが展開されてゆく。また、制式機という設定であっても、実質的にプロトタイプ機も同然の少量生産の機体が主役メカであることも見られる。

引用 : Wikipedia プロトタイプ https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97

プロトタイプ• 「プロトタイプ」（原型）という言葉の原義的には、量産モデルに発展させることが前提、ないし少なくともそのつもりはあるという点が、実験機や試験機や試作機（車）などと異なるが、たとえば制式採用を決定するコンペで敗れるなどして結局量産されないこともままあり、厳密な区別は無い（難しい）。新製品を量産に移す前などに試験用途として作られ、製品の設計に起因する問題やその他の不具合を発見でき、具体的な修正の検討に入れる。こうすることによって、量産して市場に出た後で不具合が発覚することを防げる。量産用プロトタイプが十分に洗練されていて、その機能性・強靱性・量産性および他の目標を十分に達すると判断された場合、その製品を量産に移せる。しばしば、そのような用途のプロトタイプは大量生産技術とは違った技術を用いて製造される。このための技術や手法はプロトタイピングと呼ばれる。

• コンピュータプログラムにおけるプロトタイプ　C言語には関数プロトタイプ宣言というものがあるが、これは関数・サブルーチンの引数と返り値の値を宣言するものである。外部とのやりとりを示す「宣言」に対し、中身を示すものを「定義」と言う。プロトタイプベースのオブジェクト指向プログラミングでは、プロトタイプは「クローンとしての新しいオブジェクト」を作ることができるオブジェクト、のことである….

• ロボットアニメにおけるプロトタイプ『機動戦士ガンダム』に端を発するリアルロボット路線のアニメでは、本来はその「プロトタイプ」である機体のパイロットではなかった主人公が偶然の行きがかりから搭乗して操縦したことをきっかけに物語が繰り広げられるというパターンが、ストーリー定型の1つとして存在する。この様な作品では、主人公が乗り込んだプロトタイプ機を主役メカとしてストーリーが展開されてゆく。また、制式機という設定であっても、実質的にプロトタイプ機も同然の少量生産の機体が主役メカであることも見られる。

引用 : Wikipedia プロトタイプ https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97

• 実際のユーザインタラクションを確認するためのもの（機能だけがない状態

• 静止画にざっくりと動きをもたせたもの（画面遷移、簡単なUIの動き⇐今回取り扱うのはこちら

プロトタイプ

プロトタイプを開発フローに組み込む理由

• Webサイト、Webアプリで表現出来るUIの幅が広がり、構成要素として重要度が上がっている

•制作フローの効率化が進みこれまでの成果物では足りなくなった

•デザイナー/エンジニア間でより効率の良いコミュニケーションツールの必要性

Web制作フローでAdobeXDを使ってみよう！！AdobeXDはデザインツール？プロトタイプツール？2つのモードを持つ

AdobeXDを実際に使って感じたWeb開発においてのつかいどころを話します。

画面デザイン設計で使われる制作物

ワイヤーフレーム デザインカンプ プロトタイプ

要素の配置、導線の確認 配色・テクスチャの確認 サイトのイメージを決定

画面遷移イメージ UIを確認

骨組み、基礎 雰囲気、イメージ 使い勝手

Web制作における開発フロー

ヒアリング アイデア出し

画面数の確認 導線の設計

UIを検討モックアップ Web実装

Web開発におけるAdobeXDの範囲

ヒアリング アイデア出し

画面数の確認 導線の設計

UIを検討モックアップ Web実装

AdobeXDの使い所は プロトタイプツールではない？！！ （あくまで個人の主観です

今のAdobeXDの特徴• 豊富なcanvasサイズ

• 直感的で使いやすい矩形ツール

• スマートガイドで整列も楽

• マスク処理はドロップするだけ

• グループのサイズ変更がいい感じ

• リピートグリッド神！！

• 一括編集できる

• 月に一回のアップデート！！

• デザインモード、プロトタイプモードのスムーズな切り替え

• 録画もできるプレビュー機能

• 手軽なシェア機能

今のAdobeXDの特徴•豊富なcanvasサイズ

•直感的で使いやすい矩形ツール

•スマートガイドで整列も楽

•マスク処理はドロップするだけ

•グループのサイズ変更がいい感じ

•リピートグリッド神！！

•一括編集できる

•月に一回のアップデート！！

•デザインモード、プロトタイプモードのスムーズな切り替え

Prototypeモードは全然使ってません！

XDの足りないところを補う「prott」

• 画面遷移の設定が直感的

• 画面をフローに分けてグルーピングできるので画面管理がとても楽にできる

• 固定ヘッダ、フッタが設定できる

• まだBETAだけど遷移図出力が出来る

結論！！AdobeXDを使う理由

• ワイヤーフレームや簡易カンプ作成ツールとしてなら今すぐに使うべき！

• AdobeXDとprottを使えばExcelやkeynoteなどの面倒くさいツールから脱却できる※本格的にデザインするツールではないので注意

• Adobeの目玉製品として成長を見守るのもあり