ECコンサル アラタナはeコマースを中心とした「新たな○○を創造する」会社です!

UI設計ツールPrototyper(プロトタイパー)の使い方、すいすいデザイン!

こんにちは、アラタナが提供するネットショップ構築パッケージ「カゴラボ」のUIデザインを担当している飯干です。

JavaScript

UIデザインをしていて「こんな風に操作するだろうから、こういうUIにします」と提案してデザインした結果、「操作しづらい」「思った様にコンテンツに誘導できていない」「思っていた動きと全然違う」でも今から作り変えるなんて。。。
といった経験ないですか?

そこで「百聞は一見に如かず」百どころか千の価値があるのではというくらいすごい!
プロトタイプ作成ツール「Prototyper(プロトタイパー)」の使い方とUI設計方法をご紹介します。
使用ツール:「Prototyper」

日本語の記事がほとんどないので、初めて使用する方は是非参考にしてみてください。
プロトタイプを作成することでサイトを公開する前に動きを確認してプロジェクトメンバーやクライアントに情報を共有することで仮説が事実に変わり課題を早期に発見し改善することができます。

 

UIオブジェクトの配置が簡単

Prototyper(プロトタイパー)
Prototyper(プロトタイパー)の使い方として、一番便利だと思ったのがこの操作性です。
画面左側【Widgets】に用意されたオブジェクトをマウスでドラッグドロップして配置するだけ。

オブジェクトは画面右下の【Outline】でレイヤー管理されます。
【Outline】の上にある【Properties】よりオブジェクト名や詳細なプロパティの設定が行えます。

 

簡単にアニメーション作成

Prototyper(プロトタイパー)
Prototyper(プロトタイパー)では、発生イベントとアニメーションの種類を決めるだけでアニメーションができます。
イベントの設定は対象となるオブジェクトを選択して画面下にある【Events】のAdd Eventをクリックして【Interactions】ウィンドウより「どのイベントの時にアニメーションさせるか」を選択するだけ。
イージングやアニメーションの秒数も指定でき細かく設定ができます。

 

HTML出力ができる

Prototyper(プロトタイパー)
Prototyper(プロトタイパー)では、できあがったプロトタイプのHTML出力が可能です。
Ver6 の時点ではChromeで確認する場合は無料のエクステンションのインストールが必要になります。
IEやFirefoxではプラグインなどインストールしなくても確認ができます。

 

外部ファイルの取り込みもできる

prototyper04
flashのファイルやpdfファイル、HTMLファイルなどの外部ファイルの取り込みも可能です。これらのファイルを用いてPrototyper(プロトタイパー)でUIデザインを作成することも可能です。
CSVファイルのデータ取り込みも可能で実際のサイトさながらのUIデザインが可能です。

 

UIオブジェクトが豊富

prototyper05
Prototyper(プロトタイパー)では、iPhone や Android のUI オブジェクトが豊富に用意されていて、簡単に綺麗なワイヤーを描けること間違いなしです。
なんと Google glass のUI オブジェクトまで用意されています。
justinmindサイトより windows8 や Facebook、Bootstrap などのUIオブジェクトもダウンロード可能です。

 

複雑な条件も設定可能

prototyper06
入力フィールドが空白の時は〇〇するといった処理をさせたい場合などの条件設定もできます。

 

データの演算も可能

prototyper07
入力したデータに対して四則演算や文字数のカウントなども様々な演算がドラッグドロップで可能です。

 

スマートフォンで確認もできる

prototyper08
スマートフォンにPrototyper(プロトタイパー)のアプリをダウンロードしてログインするだけ。
Prototyper(プロトタイパー)で作成したプロトタイプがスマートフォンで確認できます。
勿論スマートフォン独自のスワイプやタップといったイベント作成ができます。

 

サイトマップも自動生成

prototyper09
Prototyper(プロトタイパー)作成したページの構成を自動で認識しサイトマップを作成してくれます。
サイト構造が容易にわかります。
この機能、すごく便利!

 

これだけ何でもできるツールの価格は?

1カ月29$、1年間継続利用だと1か月19$(日本円で2200円前後[現時])
1カ月は無料で利用可能なので、使い勝手を試してみると良いと思います。

 

残念ながら日本語対応していません

向かう所敵なしの様なUIプロトタイプ作成ツール「Prototyper(プロトタイパー)」ですが、現状日本語対応していません。
全て英語表記されていて取っつき難い感じがありますがすぐ慣れます。
以前のバージョンは、所々日本語にする事が可能だったみたいですが、英語ができない私でも操作ができています。

コードを全く書けなくてもドラッグドロップで実際のサイトの様に動きを確認できるプロトタイプを作成する事が可能なので、ディレクターやデザイナー、営業の方でも作成する事が可能です。

例えばPrototyper(プロトタイパー)をクライアントワークスとして使う場合、
文字で説明されるよりも実際に触れられた方が、わかりやすいですし、クライアントとの認識のギャップが明らかに少なくなりますので提案の際にもおすすめです。

UXやUIが重視される昨今、事業スタートアップ時に導入してみてはいかがでしょうか?

この記事を書いた人

ECのノウハウを知る

イベント・セミナー情報