この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
プロトタイプ作成ツールはいろいろありますが、実際にプロジェクトで使ってみてそれなりに使えるものがあったので紹介します。
axure
英語版はAxure社のサイトでダウンロードできます。
- このツール自体はネイティブアプリです。
- 現在のバージョンは7.0です。
- mac対応の日本語版はありません。
- Windows対応の日本語版はNTT DATAが取り扱いされています。
- 英語版のほうが安いのでお勧めです。
英語については、この手のツールでよく出てくる単語程度しか出てこないので問題無いです。 日本だと流通してないように感じますが、英語圏だと比較的に流通しているようです。
プロ版とスタンダート版があって、 値段はそれぞれ$589、$289となってます。 また、30日間のフリートライアル版があるので興味があればそちらを試すことも可です。
こんな時におすすめ
- プロトタイプを短期間でコードを書かずに作つくりたい。
- 静的なワイヤーフレームよりも操作ができて動きのあるプロトタイプが必要。
- 本開発に入る前にクライアントとの画面遷移やコントロール系の挙動等の仕様詰めを迅速に行いたい。
- チームメンバーにデザイン方針（動き、インタラクションなど）を共有したい（→開発チームの内部向けに使っても良し。）
こんな人におすすめ
- ワイヤーフレーム等を作ることがよくあるデザイナー。
- 情報設計等のデザインの知識があってワイヤーフレームを作るディレクター。
- 脳内のインタラクション等を具現化してプログラマーに伝えたいデザイナー。
基本的な操作・仕様
- キャンバス上にウィジェット（例：ボタン）をドラッグ&ドロップで配置する。
- デフォルトのパラメータでいじれるウィジェットのビジュアルデザインの粒度はあくまでもワイヤーフレーム程度のもの。
- ドロップしたウィジェットにGUIからイベント（例：クリック）を設定し、アクション（例：リンクを開く）が割り当てられる。
- 複数のページがつくれる。
- HTML,CSSで出力される 。対応ブラウザはIE, Firefox, Safari, or Chrome
アドバンス系の操作
widget library
axureが作ったものだけではなく、ユーザーも投稿できるライブラリがあるので色々と揃ってます。モバイル用（iOS、Android）用のUIキット等もあります。
masters
マスターとはイラレとかflashのシンボルみたいなオブジェクトのことです。 たとえば、複数のページで配置されているグローバルナビゲーションのようなパーツををマスターに変換しておけば、それぞれのページの該当箇所を修正する必要がなくなり、マスターの修正だけで各ページの該当箇所に反映されます。
イベントをはる＆アクションを設定する（Case Editor）
キャンバス上のウィジェットやオブジェクトにソースコードを書かずにGUIからイベントを貼ることができます。 アクションの種類は豊富です。簡単なアニメーションも設定できます。また、条件を設定できるのでロジックを組むこともできます。 例えば、Aテキストインプットのvalueが〜なら、Bウィジェットをenable/disableする 等のロジックが簡単に設定できます。
その他の割りと有用な機能等
Adaptive Views
レスポンシブルデザインに対応できます。ウィンドウサイズ、デバイスの横幅、高さの変化をトリガーとしてオブジェクトの位置、表示/非表示を切り替えたりできます。
page interraction
ページに対してイベントがはれます。
- ロードした時
- ウィンドウをリサイズした時
- ウィンドをスクロールした時
その他、ディテールなど
- ウィジェットをコピーして別のページに貼り付けた際にコピーした座標もキープされるのが良いです。その辺の細かなデザイン視点の配慮があります。
- 出力した際、たとえばベタ塗りの角丸なしのボタンであっても画像化（等倍）されるのが残念です。角丸を適応した場合、高解像度ディスプレイで見ると当然荒くなります。CSSで出力して欲しいです。
- axureの機能ではまかないきれない複雑なロジックが必要だったので、画面の一部分をやむおえずに別途javascriptを書く必要がありましたが、特に競合等がおこらずに問題なく動きました。
- 出力されるソースはdivの多用、position:absoluteの多用でセマンティックとは言えず、本開発でのソースの流用はできなそうです。
まとめ
- プロジェクトでプロトタイプ作成ツールを使うにあたってほかの似たようなツールも試して選定しましたが、私としてはこのツールが一番使えました。
- 使い方次第で自由度が高いこと、バグが少ないこと、あらかじめたくさんのウィジェットが揃っているのが良いです。ただ、ユーザーが投稿したウィジェットはゴミみたいなものも含まれます。
- パララックスエフェクトを多用したサイトの作成は難しいです。どちらかと言えばビジュアル重視のウェブサイトよりも多機能なシステム開発のプロトタイプに向いています。
- 実際にプロジェクトで起こった問題点として、このツールの成果物をデザイン周りの仕様書として兼ねるのは難しいです。ある程度の認識合わせの成果物の位置づけとするのが良いです。すべての仕様をカバーしようとするには無理があります。別途、詳細設計書等を用意することが好ましいです。
- 予算が十分にあるプロジェクトであれば、本開発前のユーザーテストに使うのも良さそうです。
3
