PhotoshoperにAndroidアプリのデザインをお願いする際の失敗例 - ReDo

2012年3月12日

PhotoshoperにAndroidアプリのデザインをお願いする際の失敗例

伝説のSHARPハッカソンに参加してきました。

3月10日-11日に第4回SHARPハッカソン@東広島が開催されます
http://d.hatena.ne.jp/bs-android/20120309/1331256472


ハッカソンそのもののなんたらはもうみんな書いてるので、僕が一番失敗した点のみピックアップしてご説明します。脳内垂れ流しなのでみんなはマネしないでね!

○メインターゲットの解像度って?

会場で一番シェアの端末はぶっちぎりでGalaxy Nexus/ICSだったわけですが、ターゲットのシャープ端末はそんなことはないよねー、と。

参考:Android 通信キャリア 2011-2012秋冬春モデル一覧
http://greety.sakura.ne.jp/redo/2011/10/android-2011-2012.html

そんなわけで、qHD(960x540)のhdpi端末をターゲットにお願いしちゃったわけですが、これが微妙でして。

【会場にあった(気がする)端末リスト】
SH-01D 720x1280
SH-06D 720x1280
INFOBAR C01 480x854
DM011SH 480x854
103SH 540x960
104SH 720x1280
IS13SH 540x960
IS14SH 540x960
A01SH 1024x600

意外とqHDメインでもないな!


○ピクセルとdipの実関係

※dip:Density-independent Pixelsの略で、訳すと「ディスプレイの画素密度に依存した論理ピクセル数」という感じのものです。
例えば「40px」と指定すると画素密度が高い端末では実表示サイズが小さくなっちゃいますが、「40dip」と指定すると画素密度が高い端末でも低い端末でもだいたい見た目が同じサイズになります。

ここでひとまず脱線して、「hdpi・FWVGA神話が終わった今、ベストプラクティスはどうなのよ」を考えます。

【hdpi】
800x480px WVGA N1,NS,EVO,GalaxyS他
 ⇒ 533x320dip
854x480px FWVGA
 ⇒ 569x320dip
960x540px qHD
 ⇒ 640x360dip

【xhdpi】
1280x720px HD Navibarなし SH-01D, 104SH他
 ⇒ 640x360dip
1280x720px HD Navibarあり GN (実1184x720px)
 ⇒ 592x360dip

【余談】

SH-01D 1280x720
SMB104SH 1280x720
SC-04D 1184x720

あれ?104SHって1280x720なの?

横幅が「A. 320dip」と「B. 360dip」の2種類に分類することができたわけですが...。

hdpiを想定して横450pxのボタンを作ってもらうと、dip換算では300dipになります。
 A. 左右が10dip余る
 B. 左右が30dip余る

だいぶ違いますね。
逆のパターンは画面外にボタンがはみ出てしまうのでもっちょい悲惨です。

実際に画面に適用させると以下の様な感じになります。

yoko360dpi.jpg
横360dip機でいい感じのマージンがあっても

yoko320dpi.jpg
横320dip機だときっつきつに。

そのあたりを深く考えずにえいやでお願いして微妙なことになってしまったわけですが、具体的には以下の失敗をしました。


失敗1. qHDな端末はあまりメインではなかった
 ⇒ qHD推ししたけどバラバラでした。

失敗2. ステータスバーを考慮したキャンバスサイズを指定しなかった
 ⇒ 960x540でお願いしてしまいました。

失敗3. 会場で借りられる機種をターゲットにするとホテルに戻ったら試せなくなる
 ⇒ 結局みんなGNでやったので、途中からHDにターゲットを変更しました。
   xhdpi端末でhdpi素材を表示するとdot by dotが守れなくてごめんなさいになります。


○どうすべきだったの?

Excel方眼紙先生でかいた(キリッ

hdpi-xhdpi.png

○他のチームはどうだったの?

ソースコードはこちらです。
http://code.google.com/p/shthon2012s/

【PrettyIsPants(チームパンツ)】
 ・2.3.3 API Lv10
 ・minSdkVersion="10"
 ・hdpi+無印

【AwesomeGallery(エイキチームLiveDeco)】
 ・4.0.3 API Lv15
 ・minSdkVersion="4" targetSdkVersion="11"
 ・xhdpi+nodpi+layout-v11

【SpringHidaka(チームつけまつげ)】
 ・2.3.3 API Lv10
 ・minSdkVersion="8"
 ・320dpi+nodpi+sw720dp(+hdpi)

【sutami(特攻野郎Bチーム)】
 ・2.3.3 API Lv10
 ・android:minSdkVersion="4" android:targetSdkVersion="10"
 ・hdpi+無印

これだけ並べても色が出て面白いですね。
発表資料とUI思い出しながらAndroidManifest.xmlとresと追加jar見るだけで興奮します。

コメント(4)

横360「dpi」て何やねんwwwwwwwwww
ピクセルかドットとちがうんかなー

すいませんdpiとdipを豪快に間違えてます!

dip(dp)さんはAndroid特有の見た目の大きさを示す単位です。
(ややこしいんで気が向いたらもう少し説明を足します)

Photoshoper→Photoshopper

>tttさん
Σ(・x・)シマタ

コメントする