今回のテーマは「モバイルデザイン」

Googleは開発者向けイベント「Google I/O」や「Google Developer Day」で無料でAndroid端末を配布した。iPhoneは先日、iPhone 3G Sを発表しており間もなく発売が開始される。どちらもモバイルの業界地図を変えかねないほど熱狂的に取り上げられている。

従来の携帯電話と大きく異なるのは、アプリケーションのマーケットプレイスの存在だろう。これにより開発者が自作したアプリケーションを有料で世界中に販売できるようになる。企業ではマネタイズが難しいかもしれないが、個人の開発者がアイディアひとつで勝負するには非常に面白い環境だ。

アプリケーションや最適化されたWebサイトを構築する際には、その端末に合わせた制約がいくつか存在する。そのため、ただやみくもに作るのではなく、まずはモックアップやワイヤーフレームを使って試してみるのがよい。今回はそんなiPhone/ Android向けアプリケーションデザインに役立つWebアプリケーション、オープンソース・ソフトウェアを紹介しよう。

今回紹介するOSS・Webアプリ
『iPhone Mockup』 iPhoneアプリのデザインモック作成に
『TestiPhone.com』 iPhoneで見たWebサイトはどんな感じ?
『DroidDraw』 Android版インタフェースビルダー
『LiveView』 iPhoneを使って実際の表示感覚をチェック


iPhoneアプリのデザインモック作成に

名称 iPhone Mockup
URL http:/http://iphonemockup.lkmc.ch/

『iPhone Mockup』はその名のとおり、iPhoneアプリケーションのモックアップを作るためのWebアプリケーションだ。iPhone Mockupにアクセスし、イラストレーションまたはペンシルのどちらかを選択する。イラストレーションはどちらかといえば精密なデザインで、ペンシルはラフなデザインになっている。選ぶとユニークなURLに変わり、その場でデザインができるようになる。

イラスト風のインタフェース。ラベルを日本語に変えることが可能

左側に配置されたコンポーネントをiPhoneの画面に落としていけばモックアップを作成することができる。生成されたURLを友人に伝えれば共有も可能だ。ブレインストーミング的にラフに作っていきたい場合は、ペンシルを選ぶと、多少の配置のズレなど気にせずに一気に作ることができそうだ。

ペンシル風。イラスト風に比べるとずいぶんラフなイメージになる

マウス風の矢印を配置できるので、画面を押した時のアクションを真似ることもできる。iPhoneの画面構築やプレゼンテーションで役立つだろう。



iPhone向けWebサイトの表示をチェック

名称 TestiPhone.com
URL http://www.testiphone.com/

最近、徐々にiPhoneに最適化されたWebサイトを見かけるようになった。そんなiPhone最適化サイトをiPhone風のフレームを通してみることができるのが『TestiPhone.com』だ。TestiPhone.comではiPhoneにおけるWebサイトの見た目をテストすることができる。

左側に表示されているのがiPhone風の画面。Safariで見るとさらにそれらしく見える

とはいえ、フレームで区切っただけのようで、とくにiPhoneのユーザエージェントを真似ているといったわけではない。そのため同じドメインでiPhoneとPCブラウザとを分けている場合には利用できない。サブドメインやパスを分けている場合に、そのURLにアクセスするとiPhoneで見た時のような画面で確認できるようになる。

同じURLで判別されている場合は難しいが、別サイトとして分かれていればシミュレートできる

iPhoneの端末サイズは小さい。そのため、PC向けサイト並みに情報を詰め込むとページの表示が重くなり、ユーザから敬遠されてしまう可能性もある。ブラウザを使ってiPhoneの見た目をテストできれば、開発がもっと手軽になるかもしれない。



Android版インタフェースビルダー

名称 DroidDraw
URL http://code.google.com/p/droiddraw/

iPhoneにくらべると出遅れた感もあるが、ついにAndroid向けアプリケーションの開発も本格的になってきた。iPhone向けアプリ開発は、Objective-CということもあってMac OS Xが必須だが、Androidの場合はWindows/ Mac OS X/ Linuxのいずれでも開発ができる。そしてiPhoneで言うところのインタフェースビルダーに相当するのが『DroidDraw』だ。

Androidのインタフェースを開発するのに便利なソフトウェア

DroidDrawは、多数登録されているウィジェットをAndroidエミュレータ風の画面にドロップして画面を作成する。ルートレイアウトを選べば、より簡単にデザインが可能だ。配置したウィジェットはプロパティを編集してラベル等を変更できる。完了すればapkファイルやXMLとして出力し、開発に役立てることができる。

できあがったインタフェースはapkファイルとして、またはXMLとして出力できる

特徴的なのはスクリーンサイズを変更できる点。実機は端末メーカーによって異なるAndroidだけに、スクリーンサイズが場合によっては変わってくる。いずれのサイズでも表示に問題がないようなデザインを心がけるのがAndroid流と言えそうだ。



iPhoneを使って実際の表示感覚をチェック

名称 LiveView(オープンソース・ソフトウェアではありません)
URL http://labs.ideo.com/2009/01/20/liveview-an-ip...

iPhoneアプリを開発する際にAdobe PhotoshopやAdobe Illustrator等を使ってデザインを作成するケースは多い。そのようなとき、iPhoneでは実際にどのように見えるかをチェックするには、画像として保存したり、大きさを合わせたりと手間がかかってしまう。そこで使ってみたいのが『LiveView』だ。

Mac OS Xの本体では枠を表示した場所に合わせる

LiveViewは、iPhone端末に合わせた枠を表示するMac OS X向けのソフトウェアだ。その枠をiPhoneで見たい場所に合わせておき、iPhoneから専用アプリケーションを使ってLiveViewへ接続すればよい。Mac OS X側で表示されている内容がそのままiPhoneでも表示されるようになる。実機での表示が確認できれば印象が分かってくることだろう。

iPhone側で見た画面。本体で表示している場所がそのまま投影される

シミュレータはやはりシミュレータでしかない。実際手に持った時の雰囲気を確かめるにはLiveViewのような仕組みが必要だ。

いかがでしたか?

iPhone/ Androidは日本独自ではなく世界共通で提供されている。当然、市場の規模は何倍もある。また、アプリケーションを販売するマーケットプレイスが提供されているので、個人であっても十分にマネタイズできる可能性がある。Androidはこれからシェアを伸ばしていくだろうし、iPhoneもOS 3.0になればまた別の可能性を持ったアプリケーションが登場してくるだろう。

開発環境はAppleやGoogleから提供されているとはいえ、それは最低限だ。今回紹介したようなツールを使いこなし、もっと便利に、もっと楽しいアプリケーションを開発して欲しい。

著者プロフィール:MOONGIFT 中津川 篤司(なかつがわ あつし)

1978年生まれ。オープンソース紹介サイト「MOONGIFT」管理人。プログラマ、SE、ITマネージャを経て、オープンソースのビジネス活用を推進する。現在は独立し、Webサービスのコンサルティング、プロデュースを行う。