ワイヤフレームとは
Webにおけるワイヤフレームとは、サイトのデザインや画面遷移等の骨組みを指します。(どちらかといえば3Dの方がピンとくるのですが。)
開発者が複数人やお客さんがいる場合、設計資料が無く口頭だけでは詳細部分でこちらの意図した点が伝わらない事があります。
それを伝える手段としてワイヤフレームがあります。
(Webについて私自身、全く関わった事がありませんが・・・。）
ワイヤフレーム自体は、Webに限らずどのようなプログラムでも必要になってきます。
「画面に何を表示するのか」、「ボタンを押すとどうなるのか」などを明確化する為にも必要であると思います。
要するに明確化され、誰が見ても理解できればいいわけですからそこまで凝る必要ありません。
iPhoneアプリのUI設計
iPhoneアプリの場合はどうでしょうか。
色々とプロトタイプ用のテンプレートがあります。
- iPhone GUI PSD Version 4 | Teehan+Lax Photoshop用のPSD形式のテンプレート
- Keynotopia: User Interface Design Libraries for Keynote, PowerPoint and OpenOffice
「Keynote」、「Power Point」、「OpenOffice」用のテンプレート
iPhoneだけでなく、iPadやAndroid等のテンプレートが用意されています。
当初は、「Keynotopia」＋「Keynote」の組み合わせを考えました。
しかし、
・別途資料を作成するのはまだWindowsの方が比重が高い点
・別の人が見るのもWindowsなので別の形式にエクスポートしないといけない点・修正するには別の人も同じ環境が必要である点
の理由により結局、見送りました。
もう一つ別の理由があり、別のツールが見つかったという点です。
Rich interactive wireframes to define web and mobile applications
参考：これが無料とは！ スマートフォン向けサイトやアプリのワイヤーフレームを作成するソフトウェア -Prototyper | コリス
「iPhone」、「iPad」、「Android」のワイヤフレームの作成が行えます。
Windows、Macと対応している点も便利です。
「Pro Edition」だともっとインタラクティブなワイヤフレームが作成できるようです。
スマホ向けのワイヤフレームの作成に一度、試してみてはいかがでしょうか。
UIデザイン
ワイヤフレームにも関係するのですが、SDKで用意されているコンポーネント(ボタンやテキスト、ラベルなど)をそのまま利用できれば問題ありません。
多くの場合においてアプリ全体のデザインとマッチする事の方が稀なのかもしれません。
社内システム系であればそれ程重視する点では全くありません。
しかし、コンシュマー向けとなると見逃せません。
同じアプリでもデザインが「しょぼい」のと「カッコいい」のでは同じ機能なら「カッコいい」方を選ぶと思います。
(あえてしょぼいのを選ぶのもそれなりの理由があるのかもしれません。)
では、このデザインをカスタムするにはどうするか。
もちろん画像が作成できればいいのですが、結構手間が掛かります。
そこで最近気になっているツールに「PaintCode」があります。
これも画像作成する点では同じなのでデザインスキルは必要でしょうが、他のツールと異なり「ソースコード」を出力します。
「ソースコード」を出力する点で最も有利な点は、何といってもカラーバリエーションをプログラム側で制御できる事でしょう。
(画像でもパターン作成するのはそれ程大変ではないと思いますが・・・。)
あとは、作成されるソースコードからどのようにコーディングすれば画像が作成されるのか勉強にもなると思います。
とりあえず体験版があるので考えてみます。