【連載】

セカイ系ウェブツール考

76 iPhone/ Android向けアプリのデザインに役立つもの

 

76/88

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

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サービスのコンサルティング、プロデュースを行う。

76/88

インデックス

連載目次
第88回 マーケティングに欠かせない"短縮URL"サービスたち
第87回 CMSに合わせた見せ方もあり? - 従来型とはひと味ちがうCMSたち
第86回 注目ワード「リアルタイムウェブ」、その世界を体験する
第85回 ひと味ちがうプレゼンのために - 資料作成から発表サポートツールまで
第84回 Wikipediaを巡る便利なアレコレ
第83回 積読本が増えて困ってます! そんなお方に読書管理サービスを
第82回 ネットビジネスの基本"広告モデル"で使える技術・サービス
第81回 開発環境・スタイルに適した「プロジェクト管理」を実現するために
第80回 そろそろ大事! "Webサービスのデータ"をバックアップするということ
第79回 利用者視点で見るWebサイト - ユーザテストの実施に使えるもの
第78回 Webデータベースシステムを実現するには
第77回 Webサービスの"レスポンス向上"に使えるもの - まずは現状把握から
第76回 iPhone/ Android向けアプリのデザインに役立つもの
第75回 「Google」の波に乗るべし! 注目したいGoogle系最新サービス
第74回 リーダビリティを高めるために効果的なもの
第73回 写真を "魅せたり・売ったり・楽しんだり" するために
第72回 文章を効率的に書くために - 執筆作業サポートツール
第71回 読むだけじゃない"PDFの活用"について考えてみる
第70回 RIA開発に知っておきたい「JavaScript」の最新事情
第69回 「Twitter」があったから生まれたサービスたち
第68回 「Ruby on Rails」は進化を止めない - Webアプリなどに見るRails最新事情
第67回 ユルさも大事な「ToDo管理」 - あなたに合うものはどれ?
第66回 正直シンドイ"新しい生活"をちょっと支えるツール集
第65回 思いつきが、すごいサービスに!……という夢には「アイディア」管理が大事
第64回 10年前とは違う、実務に役立つ「グループウェア」の今模様
第63回 見た目が大事! Webサービスの「インタフェース」設計に使えるもの
第62回 Webサービス開発者が参考にしたい「Google App Engine」活用の道
第61回 いまこそ「オンラインファイル管理」と真剣に向き合うべし!
第60回 きっと役立つ! ブラウザ上で「グラフ」を表現するための解決策
第59回 仕事のムダは「タイムトラッキング」で排除する - 時間管理を見つめ直す
第58回 iPhoneアプリ開発者なら知っておきたい便利ツール&サービス
第57回 Webサービス登録しまくりの人! 「ライフストリーミング」で集中管理を
第56回 わりと便利な"Webサービス用ランチャー"たち
第55回 Web開発の可能性を広げる「クラウド」サービスたち
第54回 プレゼン資料に欠かせない"スクリーンショット/キャスト"の作成に
第53回 ユーザビリティの高いWebサイトの設計に! サイトデザインに便利なもの
第52回 観て・編集して・配信して! ムービーの全方位的楽しみ方
第51回 時が見える! 年表から効率化まで、楽しくベンリな"時間系"サービス
第50回 表計算/データベースアプリも"Web化"の時代に
第49回 チャートにネットワーク図に……描くのに便利な"ドロー"はどれだ?
第48回 存在感を取り戻したイマドキのCMSたち
第47回 ソーシャルニュースサイトを、作ってみる、楽しんでみる
第46回 ネット時代の"オリジナルテープ作り"にも - 音楽データの活用を考える
第45回 ローカルにもネットにも大事なデータ、どうバックアップする?
第44回 リソース不足はアイディアで乗り切る! スタートアップ・業務応援ツール
第43回 IT業界人・ひとり暮らし・コンビニ好き……「健康管理」は大丈夫?
第42回 非王道的ウイルス対策? 敵のソースコードを知り、軽量対策ツールを持ち……
第41回 止まらない物欲、散財地獄……脱出したい人、どうぞ
第40回 アナログっぽさがいい刺激に! "ホワイトボード・黒板"を再現する
第39回 成功の影に"プロジェクト管理"アリ!
第38回 オフラインでもWebアプリを使えないか?
第37回 オンラインストレージ、本気で使ってみる?
第36回 情報整理マニアへ! "スクラップ&サーチ"をもっとラクにする方法
第35回 ソーシャルブックマークの利便性を加速させる
第34回 GPS・同期・リモート・開発……iPhone/iPod touchを便利にするツールは?
第33回 画像加工だってWebベースシフトの時代です
第32回 "メモ"スタイルにこだわるアナタに
第31回 お金はかけたくない……でも必要な"PDF系ツール"を調達!
第30回 使えるカレンダーサービス&カレンダーを使い倒すツール!
第29回 (大きく育つ前の)中・小規模Webサイト構築に便利です!
第28回 地図サービスがもっと便利に!
第27回 オープンソース的"仕事・人材さがし"という手もある
第26回 ガジェット! いまやデスクトップ&Webサイトの必須アイテムに!?
第25回 やりとりの基本 - ちょっと進化した"メール"のカタチ
第24回 オリジナルを超えた!? 一流Webサービスのクローンたち
第23回 Web開発者はラクじゃない - 情報サービスを駆使して技術力向上を!
第22回 見直してみる? 人と人をつなぐ"アドレス帳"のカタチ
第21回 甘く見ないで! "Web版オフィス系アプリ"をどうぞ
第20回 ネットビジネスに必須! "アクセス解析"でユーザ動向を探る
第19回 聴衆を眠らせないプレゼンを作るには?
第18回 ググってばかりの検索ライフにNO! "限定サーチ"もご使用ください
第17回 Eコマースをはじめるなら注目(大手サイトがすべてじゃない)
第16回 今度こそ! "ToDo・タスク管理"でシゴトを円滑に
第15回 溢れる情報の共有と整理には「Wiki」がイチバン!
第14回 「データベース」といっても実にイロイロ
第13回 いまどきのインスタントメッセンジャー事情
第12回 マイナーだけど期待のCMSコレクション
第11回 "マニアックで特徴的"なWeb APIをお届け
第10回 「Amazon S3」を最大限活用するために
第9回 新たなPC活用法を発見できる"バージョン管理"のススメ
第8回 これぞ合理的! 開発環境もWebベースに移行してみる
第7回 ジャパン系! 海外発ばかりじゃない魅力的なWebサービス
第6回 ジェネレータを使ってブログ&Webサイトにアクセントを!
第5回 「Ruby on Rails」の魅力を体験するなら、まずはコレ!
第4回 アイディア出しと整理に効くんです!
第3回 ブログをもっと活用したい! - 便利なエディタからCMSまで
第2回 ローカルとネットのはざまで - 理想的な文書管理・編集スタイル
第1回 ドキュメント管理によく効きます!

もっと見る



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

管理職の半数以上が「同年代で活躍している人は3割以下」と回答
[06:30 9/1] シゴト
シュラスコ! サッカー! リオ五輪! ブラジルを丸ごと楽しむフェスタ開催
[06:30 9/1] 趣味
Motorola、「Moto Z Play」発表、Moto Modsに対応する普及帯モデル
[06:02 9/1] スマホとデジタル家電
コロチキのナダル、アメトーーク!で想像を絶する“ひんしゅく”エピソード
[06:00 9/1] エンタメ
秦の始皇帝、裏切り、迫害…過酷な少年時代が今明らかに
[06:00 9/1] エンタメ

求人情報