Yuta Watanabe's Blog

開発周りと、その他諸々

FluidUI は Windows 8 アプリのワイヤーフレームも作成できる

アプリのワイヤーフレーム作成ツール FluidUI。iOS や Android アプリだけでなく、Windows ストア アプリ、Windows Phone 8 アプリ のワイヤーフレームも作成できます。画面のワイヤーフレームを作成するだけでなく、画面遷移も定義できますし、共有も簡単ということで結構便利です。

f:id:yuwata:20131228010416p:plain

Custom Display Size で任意の画面サイズに設定

Project Settings の Device Type で画面サイズを選べるのですが、Windows ストア アプリ向けのサイズはデフォルトにありません。ターゲットデバイスにあわせてカスタムサイズで設定しましょう。Windows 8 の基本解像度である 1366x768 に設定し向きはLandscape にしてみます。

f:id:yuwata:20131228010435p:plain

UI 部品をドラッグ & ドロップで配置していく

Windows 8 向けの UI 部品が多数用意されています。自分で素材をアップロードすることも可能です。

f:id:yuwata:20131228010451p:plain

これらをドラッグ & ドロップして画面を構成していきます。とっても簡単。

f:id:yuwata:20131228010738p:plain

ページを追加、遷移を定義

もちろん、複数ページ作成可能です。新しいページを追加して同じように画面を構成していきます。

f:id:yuwata:20131228010824p:plain

これらの画面間の遷移も定義できます。遷移のフックとなる UI を選択して Link を押し、どの画面に結びつけるか選択します。

f:id:yuwata:20131228010914p:plain

出来上がったワイヤーフレームはプレビューで画面遷移も確認しながら試すことが可能です。

モダンデザインのガイダンスを確認

Windows ストア アプリのデベロッパーセンターには、非常に充実したモダンデザインのガイドラインが公開されています。

f:id:yuwata:20131228011834p:plain

iOS や Android アプリのデザインにも参考になるものが多いので、ぜひ一度ご覧ください。