正直に書きますと、実はiPhone 4を持っていないんです。もちろん友人に頼んで動作することは確認しましたが、万一不具合があったらぜひ教えてください！よろしくお願いいたします。

そこで従来のアプリケーションもiPhone 4に対応すべく、アップグレードをしようとする方も多いと思います。グラフィック的には単純に倍にすればいいのですが、実際の作業は結構大変です。倍にすれば描き込める箇所も多いですし、アラも倍に拡大されます。こういう時は元データをベクターデータで描いておいて良かったと思います。ビットマップだけで描いていたら、たぶんほとんど書き直しだったと思います。

今日はそのiPhone 4に対応したベクターデータのテンプレートを公開しようと思います。データはillustrator CS4のデータになります。恐らくiPhoneのGUIデザインをしている人のほとんどはMacユーザーだと思うのですが、自分はWindowsで描いていますので、フォント関連がちょっとおかしいかも知れません。ご了承ください。WindowsにはHelveticaもヒラギノもないんです…。モックアップ作成やプレゼンテーションにお役立てください。

iPhoneは確かによく出来たプラットフォームですが、供給がApple一社だけというのはいささか危うさもあるのではないかと思います。iPhone向けにアプリを開発しても、審査で落ちてしまうかもしれませんし、いったん発売できてもある日突然発売を中止されてしまうことがあるかも知れません。またユーザーにとっても選択肢がひとつというのはちょっと寂しいのではないでしょうか。

そういう意味でぜひAndroid携帯にもがんばって欲しいと思います。特にSony EricssonのXperiaシリーズはキャリアがドコモということもありますし、ユーザーの期待もまだ高いものがあります。実際、ヨーロッパやアジアに旅行するとiPhoneでけでなく様々なAndroid端末を目にすることも多いです。アプリケーションを開発する方にしても単一のプラットフォームに依存するよりも、複数のプラットフォームに向けて開発した方がよりリスクを回避できるのではないかと思います。

そのXperia用というかAndroidアプリケーションのUIを開発するためのテンプレートを描きましたので公開しようと思います。UIの開発、プレゼンテーションなどにお使いください。データはAdobe Illustrator CS4のデータになっています。

Ninepatchイメージは、拡張子が.9.pngの特殊なPNGファイルですが、中身は通常のPNGファイルのようです。まず、拡大縮小可能なように中心部がタイリングできるようなグラフィックを描きます。

図では紫の部分がタイリング可能なようにベタ塗りとして、上から下へのグラデーションをつなぎ目のないように描いています。このファイルを通常のPNGファイルで書き出します。

次にAndroid SDKのツールディレクトリにあるdraw9patch.batを開きます。特に開発環境をインストールしていなくても、Javaが動く環境であれば動作すると思います。

起動に少し時間がかかりますが、図のようなウィンドウが開くと思います。

このウィンドウに先ほど保存したPNGファイルをドラッグ＆ドロップします。

右に拡大縮小した場合のプレビューが表示されます。このままだと見た目がおかしいですね。Ninepatchイメージは実際のグラフィックの周囲1ピクセルに範囲指定用の特殊な領域を持ったPNGファイルです。そこにツールを使って範囲の指定を行います。範囲の指定と言っても難しいことは何もなく、線を引くだけです。上と左の領域でタイリングする範囲を指定します。線を消すにはShiftキーを押しながら引きます。

これで右のプレビューでも正しく表示されるようになりました。次に、コンテンツ（文字など）がどこまで表示されるかを指定します。その指定には右と下の領域を使います。この時に右下の「Show content」チェックボックスをオンにすると実際のエリアをプレビューすることができます。

最後にFileメニューから保存を選んで、ファイルを保存します。この時に自動的には拡張子が付きませんから、必ずfile_name.9.pngと指定することを忘れないようにします。これで拡大縮小可能なGUIパーツの完成です。詳細はデベロッパーサイトのDraw 9-patchに記述されていますので参照してください。

そういうわけで配布されている Android Icon Templates Pack, v2.0 ではちょっと都合が悪いので、これをいったんIllustratorで書き直してみました。ついでに色の指定、グラデーションのデータもIllustratorのデータとして1枚のシートにまとめましたので、これをここで配布しようと思います。

グラデーションに透明などを多用しているので、持っていない方には申し訳ないですがCS4のファイルになります。もしご興味があれば下のボタンからダウンロードして頂いて、公式のガイドラインと合わせてお使いください。（IllustatorのファイルはオープンソースのInkspaceで編集することができます）

ただiPhoneの場合はただの四角いグラフィックを用意すればシステムで角を丸くして、反射まで入れてくれるのですが、Androidではそういう工夫はないので、2.0であってもアイコンをあくまでちゃんと描かないといけません。Androidでは結構有名な企業のアプリケーションでもアイコンのデザインが残念なものを見かけることが多いので、せっかくですからアイコンもちゃんとしたデザインにした方がいいのではないかと思います。ガイドラインは英語で長い文章なのでここに簡単に要約して描き方を説明してみます。

まずはデベロッパーサイトから「Android Icon Templates Pack, v2」をダウンロードします。Launcherのアイコンは「Launcher-icon-template.psd」というファイルに入っています。PhotoShopがなくても最近のGimpで開くことができますから、とりあえずそれで開いてみましょう。２つのレイヤーに分かれていて、ひとつはMaterials Paletteというベースとなるグラフィックです。もうひとつはCombined Materialsというレイヤーでこれはベースデザインの参考例です。前述のガイドラインによれば、Androidのアイコンが何かしらの現実のマテリアル（金属、プラスチックなど）から削り出したようなデザインがいいそうなので、Material Paletteにあるような素材感のあるベースを用意して、そこに何かしらのモチーフを組み合わせるということになります。またガイドラインによればナチュラルな色、簡単に言えば黒、白、グレーですが、をベースにガイドラインにあるような色を組み合わせることが推奨されています。上の例では薄いグレーのグラデーションを引いた四角にマテリアルを加えてベースとし、明るい青の色を組み合わせて、そこに電話のモチーフを描き加えています。

実際に作成する場合、Launcherのアイコンのサイズは例えばXperia用のアプリケーションであれば、high-density screenなので、72×72ピクセルになります。新規ファイルで72×72ピクセルのファイルを作成します。最初にTempleteからベースとなるグラフィックをペーストします。そしてレイヤーを追加して組み合わせる順番にグラフィックを描き加えていきます。描き方は人それぞれなのですが、PhotoShopで作成する場合、グラフィックはビットマップではなく、ベクトルマスクで描いた方がいいと思います。なぜかというとビットマップで描いてしまうと後で大きさを拡大・縮小する時に都合が悪いからです。Templeteの作例も、ほとんどがベクトルマスクで描かれています。

ここで注意しなければいけないのはアイコンの実サイズです。アイコンサイズ72×72ピクセルというのは最大サイズなので、実際にすべてのアイコンがその最大サイズいっぱいに描かれてしまうと、当然ですが四角のアイコンが丸のアイコンより大きく見えてしまいます。そのためガイドラインでは四角形のベースを持つアイコンは57×57ピクセルで描くように指示があります。丸のベースの場合は、それより少し大きな60×60ピクセルで描きます。そうすることでバランスが取れて同じ大きさに見えるのです。そうしないとユーザーがアイコンを並べた時にバラバラな大きさになってしまいます。ベースのない、例えば吹き出しのようなアイコンでは大きさを調整して72×72ピクセルに収まるように描きます。この場合、ドロップシャドウ分も含めて72ピクセルに収まるよう注意します。この辺もiPhoneでは必要のないテクニックなので面倒です。iPhoneではベースが決まっていますから。ただAndroidでは逆に好きな形のアイコンにすることができますから、ガイドラインに準拠して素敵なアイコンを用意できるといいですね。ちなみにガイドラインを作成したのはサンフランシスコの「PUNCHCUT」というデザイン会社のようです。記述に多少違ったことが書いてありますから、結構時間のない中で作成されたのかも知れません。

噂のマルチタスクもちょっと想像とは違う形で実装されました。簡単に言うと厳選された7つの動作だけがマルチタスクでバックグラウンド処理を行うことができるのです。音楽再生、VoIP などはバックグラウンドで動かせるのですが、例えば歩数計のようなアプリを裏で動かすことはできないようです。またサーバーが必要だったプッシュ通知も、サーバー不要でアプリ自身が通知できるようになります。他にも新機能が満載で、Androidの追撃をかわすに十分な内容になっています。マルチタスクはサポートされませんが、ちゃんと3Gや3GSで動くところもポイント高いですね。

それより特筆すべきはUI周りではなく、広告配信プラットフォームiADと、ゲームプラットフォームの提供でしょう。特にiADはアップル自身が広告配信するということで、GoogleのAdMobに対抗するものですし、ゲームプラットフォームは任天堂やソニーに真っ向から対抗して、iPhoneをゲーム機として本格的に位置づけるものだと思います。いやいや恐るべしApple。しかしジョブス氏は痩せてしまいましたね。Apple最大にして唯一の懸念はやはり同氏の健康状態かも知れません。

過去のリサーチ事例

• 北米における最新ネットサービス（2007）
• グローバル化とサービスデザイン（2008）
• GUIトレンドリサーチ（2010）

NTTドコモから、ソニー・エリクソン端末、Xperia SO-01Bが発売になりました。SO906を最後にしばらくドコモから発売されなかったソニエリ端末ですが、ドコモとしてHT-o3Aに続く二番目のAndroid端末として帰ってきました。

仕様は海外向けのXperia X10とほぼ同じですが、日本語入力に独自の「POBox Touch 1.0」が採用された他、対応SNSとしてmixiが追加されています。ひさしぶりのソニエリ端末、スマートフォンとして大変注目を浴びているモデルです。今回はドコモも独自のアプリケーションマーケットであるスマートフォン向けポータルサイト「ドコモマーケット」を用意して、スマートフォンのシェア拡大に力が入っている様子が伺えます。果たしてiPhoneの独占状態に待ったがかかるでしょうか。

HT-o3AとiPhoneの両方を一年近く使った経験から考えると、それぞれに良い点、悪い点があり、どちらが優れているか判断するのは難しい問題です。簡単に言えば利便性のAndroid、快適性のiPhoneではないでしょうか。iPhone最大の魅力はなんといっても操作感と iTune Storeです。対するAndroid端末はマルチタスクの利便性とGoogleのサービスだと思います。Xperiaはそれに加えて、810万画素オートフォーカス対応カメラと、「Mediascape」、「Timescape」といったオリジナルのUIがあります。現時点ではすでに発売されて時間が経っているiPhoneが多少リードしていると思いますが、仕事に使うということであれば意外にいい勝負ではないかと思います。もちろんXperiaは従来のスマートフォンのようなビジネス用途の端末として訴求されていないのですが、ウィジェットを使えばアプリを開くことなく、ニュースや株価、To Doをチェックできますから、むしろビジネスに便利ではないかと思うわけです。

4月末にはソフトバンクからAndroid OS 2.1を採用したHTCのDesireも発売されますし、今年はiPhoneだけでなくスマートフォン全体のシェア拡大が期待される年になりそうです。

弊社では単にグラフィック表現としてのGUIデザインにとどまらず、機能そのものから最適なインターフェースデザインを提案し、ワイヤフレームを使って機能、遷移、動きを検証し、最終的なプロダクション作業まで一貫してデザインサービスを提供しています。