ワイヤーフレームツール「Fluid UI」のスマホでリンク確認機能が便利

iPhone、Androidに限らずボタンなどのパーツが予め用意されているワイヤーフレームツールはたくさんありますが、今まで試してきたワイヤーフレームはピンと来ませんでした。

それはなぜか。

ワイヤーフレームで画面遷移図を作成したら、後はデザイン、プログラミングとアプリを組み立てていくのですが、ある程度アプリが完成するまで実際の画面遷移は頭のなかでしか描けません。

そうすると実際に動き出した内容を見て、修正したいなんてことも出てきます。

そうなる前にワイヤーフレームのプロトタイプ的なモックアップ段階で簡単なリンク機能で構わないから画面遷移が確認できたらと、常々に思っていました。

ワイヤーフレームツール「Fluid UI」のスマホでリンク確認機能が便利

ワイヤーフレームツール「Fluid UI」の利用

それを叶えてくれるのが、この「Fluid UI」です。
Chromeアプリとして登録ができます。
http://www.fluidui.com/

ワイヤーフレームツール「Fluid UI」の主な特徴

リンク機能でiOSやAndroidでタッチして画面遷移を確認

ワイヤーフレームツール「Fluid UI」はリンク機能が備わっており、デザイン及びプログラミング作業に入る前のプロトタイプとしてリンク付きでスマートフォンで画面遷移を確認することができます。

これにより、完成イメージの完成度をより高めることができ、プログラミング実装後の修正を減らしてくれます。

自分で作成したパーツや画面をアップロードすることも可能

予めiPhoneやAndroid、Windows Phoneのボタンなどのパーツが用意されていますが、自分で作成したパーツや画面をアップロードして使うこともできますので、よりリアルに近いイメージのモックアップが作成出来ます。

作成したワイヤーフレームを共有

作成したワイヤーフレームはQRコードが発行されたり、そのワイヤーフレームへのリンクが作成され、共有することができます。

続きを読む

フリーアカウント制限

ワイヤーフレームツール「Fluid UI」は、基本的に無料で利用できますが、下記の制限があります。
フリーだと10画面分しか作成できないので、どちらかと言うとこのサービスはビジネス向けと言ったところでしょうか。
・1プロジェクト
・10画面
・10MBのアップロード
・共有の無制限
・モバイルテスト

プラン詳細はこちら。
http://www.fluidui.com/plans/

ワイヤーフレームツール「Fluid UI」のスマホでリンク確認機能が便利

ワイヤーフレームツール「Fluid UI」の使い方

さっとですが、Fluid UIの使い方について簡単に紹介します。

基本画面

基本的には、画面左のライブラリエリアにあるボタンやナビゲーションバーのパーツをドラッグするか、ダブルクリックで画面に配置されますので、それを動かして調整します。
ワイヤーフレームツール「Fluid UI」の使い方

ワイヤーフレーム選択

ライブラリエリアの一番上にある「Wireframe」は、iPhone、iPad、Android、Android 4、Android Tablet、Windows 8のパーツが予め用意されています。
自分で作成したパーツや画面は、一番下にある「Uploads」でアップすることができます。
ワイヤーフレーム選択

画面サイズ設定

このワイヤーフレームツール「Fluid UI」では、画面の事を「ページ」と呼んでいます。
ページのサイズを設定することができます。
デフォルトでiPhone、Android、Windows Phoneの画面サイズをせんたくすることはもちろん、自分でサイズをカスタマイズすることもできたり、横画面にすることもできます。
画面サイズ設定

レイアウト作成

ボタンやナビゲーションバーなどを配置するとこんな感じで表示されていきます。
リンク作成は、パーツを選択した状態で「Link」ボタンを押せば、他のページへのリンクができます。

パーツは、キーボードの「Delete」ボタンか、パーツを選択した状態でゴミ箱へドラッグなどすることで削除出来ます。
レイアウト作成

作業をやっていて、取り消しを行いたい場合は「Ctrl + Z」です。

ページ(画面)の削除

ちなみに、ページ(画面)を削除するには、画面上部にある「ズームアウト」ボタンをクリックして、全体を表示した状態でページを画面右下のゴミ箱へドラッグで削除することができます。

ワイヤーフレーム作成時のポイント

ワイヤーフレームの作成自体は、さほど難しくはありませんが、画面上部にはステータスバーのパーツを入れておくといいです。
というのもiPhoneの実機での検証時に本体のステータスバーが邪魔をしてボタンが見えなかったりしますので、入れておくことをお薦めします。

また、このように画面からパーツがはみ出しても問題ありません。
ワイヤーフレーム作成時のポイント

プレビュー時には、このように余分な部分をカットして表示してくれます。
余分な部分をカットして表示
スクロール用の縦長の画面も作成可能です。
その場合には、「画面サイズ設定」で「Page size」の「Height」を長めの画面サイズに設定します。

サンプルプレビュー

サンプルでiPhone向けの3画面分を作成してみました。
iPhone 5向けの画面サイズとなっていますのでiPhone 5で見る時には、Safariで下記のURLにアクセスして「ホーム画面」に登録します。
そうすると、Safariブラウザの画面下のメニューバーを非表示にした状態でプレビューを閲覧することができます。