アーカイブ : 2010年 12月

Air for Android、Packager for iPhoneでアプリを作る際、デザイナーさんに知ってもらいたいこと

アプリ、ゲームのデザインを専門にやっておられるデザイナーさんはまだ少ないと思うので開発側からデザイナーさんに知ってもらいたいことを下にまとめました。

※アプリケーションを作る場合と、ゲームを作る場合でいろいろデザインも変わってくると思いますのでそこらへんは臨機応変に対応お願いします。



基本的なお約束ごと一覧

  • デザインツールはFireworksがおすすめ。
  • 画面が回転します。また縦に固定、横に固定することもできます。
  • スマホがターゲットの場合は基本は480x800pxでタブレットはXGA?で作ればOK。
  • Android端末には複数の解像度、縦横比が存在する。
    アンドロイドは携帯専用OSではなく、TV、タブレット、携帯に搭載されることを想定して作られている。
    それぞれで画面解像度が異なっているという認識が大切。
    携帯端末だけでも画面の解像度は多岐に渡るのでリキッドデザイン/レイアウトが重要
  • ボタンは一辺が最低でも40pixel以上で作る。高解像度になるほど大きく作る必要がある。
    ※マウス操作ではなく指でタッチしてボタンを押すことになるので、WEBのような小さいボタンではとても押しにくい。
  • ボタンはロールオーバーがない。※プレスした状態は存在する。
  • 画像の中に読ませる文章を含めない。↑の解像度の問題に起因します。
  • フォントは14px以上で指定。
    PCのディスプレイよりも相対的に解像度が高いのでWEBと同じ大きさで作ると文字が読めません。
  • 文章が入る箇所はコントラスト高めの背景希望。
    屋外での利用も想定されるので日光の反射があると文字が読みにくい可能性がある。
  • アプリケーションを作る場合は、カスタムUIは可能なかぎり使わない。※ゲームの場合は自由※アプリを作る場合はFlexHeroを想定。
  • アプリケーションを作る場合はある程度Heroの概要レベルでいいので知っておいてほしい。Viewとかタブとか。
  • 画像の縦横サイズは2のべき乗もしくはそれを超えないpixel数で作る。また、1辺が1024pxを超えてはいけない。
    ※表示が高速化されます。
  • 画像に透明な処理、乗算効果などレイヤー効果は極力使わない。
  • 9スライスの仕組みを知っておいて欲しい。ボタンなどでよく使うことになると思います。



必要なデザインファイル

  • アプリのアイコン

    Androidアイコンのガイドラインアイコンテンプレート zip

    ・iPhoneは29,57,512px ,iPadは48,72pxのpngファイルを用意すればiPhone側で角丸をとって反射をいれたアイコンを自動生成してくれます。
  • 各画面デザイン

    ・ローディング、タイトル、設定画面、各種。

    ・遊び方、操作方法の説明画面。※必要に応じて

    ・マーケット登録時のアプリ画面キャプチャ※各マーケット参照

Flashでアプリ開発ができる、発売済み&来年発売予定のTablet PCまとめ

2010年はiPadの年、2011年はandroid tabletの年だと個人的に思っています。

そう考えると早く来年になってほしいと思うのですが、その気持ちを抑えつつ発売済み、来年発売予定のタブレットPCをまとめてみました。2.2対応端末だけまとめたので、2.1も含めると30機種以上になりそうです。

※噂含みます。また、日本で発売されていないものも含んでいます。
※並び順は個人的に気になる順で、AIRやFlashが動くかどうかを掲載基準にしています。
※一部異なるOSも混じっていますが、Flashは動きます!

・PlayBook http://us.blackberry.com/playbook-tablet/


※日本の発売未定 (SDKいれてみたところ日本語サポートしてない感じでした)もし日本で発売されるとすれば世界展開が秋なのでそれ以降の予感がします。OSがblackberrytabletOSという独自OSが乗っています。公式にAdobe AIRをサポートしていてSDKもFlex版のみですがすでに配布が始まっています。

・HP Slate 500 http://www.hp.com/go/slate/

windows7搭載のタブレットです。背面デザインが申し分なくかっこいいです。iPadはエンターテイメントベースでの利用が主ですが、こちらはビジネスユーザーをターゲットにしていることもあって法人向けにしか販売されていません。個人的には一番欲しい端末!!日本では未発売ですが、すでに発売中ですので通販サイトからは購入可能です。欲しい方はこちらから購入できます。

・Notion Ink Adam http://www.notionink.com/

インド発の激安タブレットですがかなりのハイスペックなんでかなり注目度が高いです。2011/12/10予約開始なんでもうすぐ発売秒読みです。
最小構成で31500円です。android2.2搭載。※上の写真はちょっと古いです。

他Tegra2搭載Tablet

他タブレット

AIR for Android 関連のブログ巡回先一覧

Air for Android関連の情報を定点観測してます。
<英語>
※chromeでみれば何となく翻訳してくれます。

<日本語>
http://hi-posi.jp/
http://himco.jp/air-for-android/

他にもおすすめあれば教えてください!

デバイスのディスプレイ解像度(ppi)について

android端末はメーカーによってモニタの縦横比やpixels,モニタの大きさに大きくばらつきがあります。
このばらつきによって端末のディスプレイが緻密や荒いといった評価になりますが、開発する際に画面のUIをPixelベースで作った場合端末によってボタンの大きさや文字の見えやすい&見えにくい状態が発生し、これらはかなり障害になってくると思います。Flashで制作を行う場合これらの留意点を対策する必要があります。

画面解像度の求め方

ppiという単位はpixel per inch の略で1inchあたりにどれだけのpixelがはいるか?を表す単位です。

・計算式による算出方法

ppi = √(縦pixel^2 + 横pixel^2) / 画面の大きさinch
でカタログのスペック表から求めることができます。

・ActionScriptからの参照方法

trace(Capabilities.screenDPI);

2010/12/13 現在の端末の画面解像度一覧

下の表が2010/12/13時点で発表されている端末の画面解像度ppiになります。

この表から以下のように分類できます。

  • 一般的な端末の場合、200ppi~300ppi(480x800pxが中心)
  • Retinaのような高解像度の場合 300ppi以上(640x960pxが中心)
  • タブレット端末や一部のレガシー端末の場合200ppi以下(XGAその他)

将来的にもっとマニアックなppiがでてくる可能性もあります。

じゃあ実際に作る場合どうするの?

Flex Heroで開発する場合この部分はある程度緩和されているはずですが、Flashで開発する際は自分でこの部分を実装しなければいけません。

いくつか方法はあって思いつくのは下の二つです。

  • Capabilities.screenDPIを引っ張ってきてデバイス毎にスケールを変更する(Adobe MAX2010翻訳記事pdf)
  • 高解像度デバイス、汎用デバイス、タブレットなど各デバイス向けに9スライスで構成したassetを含むflaファイルを作成し、リキッドレイアウトできるようにする。

前者のスケールする方法だと線がぼやけたり、いろいろな箇所にアンチエイリアスがかかって、デザイナーさん的に許せない感じになるかもしれません。ただ将来的にどんな解像度がでても修正ボリュームは最小になるはずです。

後者は解像度を3種に分けた場合縦横比も異なるので、各解像度&比率向けのUIをきっちり作り込んだ上でマニアックなものは捨て去りますよというスタンスです。applicatin.xmlでマーケットフィルタを追記してインストールできるデバイスを制限する方法です。

今の時点でどちらがいいかも分かりませんし、アプリケーションやゲームのデザイン/UIによってもケースバイケースで使い分ける必要があるかと思います。