Xi(Android)タブレットお披露目会 for Developer内のOpenデ部の1セッションとして発表した際の資料です。元資料のだいたい抜粋版です。

1. デ部NT用再構成版です。
元資料はぐぐってね。
プログラマとデザイナが共有すべき
UIに関するAndroidの10の機能・改
@youten_redo（ようてん）
2011.10.01

2. 自己紹介
ようてん （@youten_redo）
IT系リーマンです。Androidの仕事をしています。
LTだいすき
つくったアプリ
他
どれもマイナーでごめんなさい
1

3. 本（元）資料のターゲット

4. 分担を明確にする際に
仕様：A社 プログラム みんなA社
：B社
デザイン
：C社
便利かも いらないかも
3

5. 使用タイミング
仕様：A社 プログラム
：B社 ・選定時に
・発注前に
・要件説明時に
（・社内教育に）
デザイン
：C社
4

6. 逆ではあまり役立たないかも
仕様：A社 デザイン ×デザインありき
：C社 のUIをどう実現し
たらいいのか
○Androidが得意
プログラム としているものを
組み合わせて高
：B社 い効果を狙う
5

7. UIに関するAndroidの10機能
プログラマは当然押さえておきたい
デザイナもさらっとは理解しておきたい
できればプログラマがデザイナに説明しておきた
い
6

8. 注意
「デザイン」の話ではありません。
押しやすいボタン配置とか
適切なフォントサイズとかマージンとか
そういうのは他で。
7

9. UIに関するAndroidの10機能
1. センタリング・アライン・マージン/パディング
2. 透過PNG
3. 均等配置・比率配置・HTMLの<table>と桁揃え
4. 通常時・押した時・無効時のボタン画像自動切り替え
5. タイトルバーのカスタマイズ
6. UI要素と画面遷移のアニメーション
7. タイマー
8. フォントのカスタマイズ
9. サイズやピクセル密度の違うデバイスのためのしくみ
10.アイコンとウィジェットのサイズ
8

10. 抜粋
1. センタリング・アライン・マージン/パディング
2. 透過PNG
3. 均等配置・比率配置・HTMLの<table>と桁揃え
4. 通常時・押した時・無効時のボタン画像自動切り替え
5. タイトルバーのカスタマイズ
6. UI要素と画面遷移のアニメーション
7. タイマー
8. フォントのカスタマイズ
9. サイズやピクセル密度の違うデバイスのためのしくみ
10.アイコンとウィジェットのサイズ
9

11. 1. センタリング・アライン・マージン/
パディング使えます

12. 1. センタリング・アライン・マージン/パディン
グ使えます
センタリングや上下左右寄せ、マージン/パディングがほぼ全
てのUI要素に対して指定できます。
文字列を中央に配置したい際に
ABCDEFGH
左端から200ピクセルとかじゃなくて
ABCDEFGH layout_marginLeft="200px"
中央という指定が可能です。
ABCDEFGH layout_gravity="center_horizontal"
11

13. 1. センタリング・アライン・マージン/パディン
グ使えます
右寄せ＋ちょっとマージンあけるというのも可能です。
ABCDEFGH layout_gravity="right" layout_margin="10dip"
なるべく論理的にデザインして欲しいですし、プログラマも論
理的に解釈すべきです。
12

14. 2. 透過PNG使えます

15. 2. 透過PNG使えます
透過色がインデックスカラーで指定できる8-PNGも、各ピクセ
ル毎に透明度が指定できるARGB32bitカラーの24-PNGも
使えます。
よって、素材は2次元のタイル張りではなくで、重ね合わせ前
提が望ましいです。
14

16. 2. 透過PNG使えます
たとえば、以下の様なUIの素材は
ABCDEFGH
こうじゃなくて
こうがいいということです。
ABCDEFGH
15

17. 4. 通常時・押した時・無効時のボタ
ン画像自動切り替えできます

18. 4. 通常時・押した時・無効時のボタン画像自
動切り替えできます
ボタンの画像は入れ替えが可能です。
Submit Submit
押された時の画像も入れ替えが可能です。
Submit Submit
その他、無効化時(enabled="false")や、2値トグルスイッチの
on/off時画像など、いくつかの状態が定義されており、それら
の状態にあわせて画像を入れ替えることが可能です。
17

19. 4. 通常時・押した時・無効時のボタン画像自
動切り替えできます
ボタンの状態によって画像を入れ替えるのにコードを書く必要
はなく、XMLだけでOKです。
<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed
state_pressed="true"
state_pressed
android:drawable="@drawable/button_image_pressed" />
<item
android:drawable="@drawable/button_image_normal" />
</selector>
18

20. 7. タイマー使えます

21. 7. タイマー使えます
Timerというとプログラマの感覚では「指定msec.後に
特定処理をキック」だと思いますが、それも含めた、一
般的な「タイマー」は一通り使えます。
「画面を表示してから3秒後に」みたいなタイマー使え
ます。
ABCDEFGH ABCDEFGH
ロゴ ロゴ スプラッシュスクリーンに…
「画面を表示している間、30秒に1回に」みたいなタイ
マー使えます。
周期的なアクセントに…
…
20

22. 7. タイマー使えます
「今○○時だったら、◇◇」みたいな時刻ドリブンのイ
ベントできます。
時刻ごとに背景を変えるとか、メッセージを変えるとか。
「バックグラウンドで1時間に1回」みたいな定期処理で
きます。
でもメモリ不足時などには勝手に終了してしまうので、必須
の処理にはあまり向いていません。
21

23. 8. フォントは少しカスタマイズできま
す

24. 8. フォントは少しカスタマイズできます
フォントのサイズ・色・透明度などが変更
できます。
ふつうに使える
• サイズ・透明度込みの色（#AARRGGBB）
分かりにくいけど使える
• 影の色・影のサイズ・影の方向・横方向倍率
• 袋文字とかは出来ないのが残念です。（影のサイ
ズを大きくすると、勝手にブラーがかかってしまう）
あまり期待できない
• BoldとかItalicとかserif/sans-serifとか
monospaceも定義はありますが、それらの指定に
より見た目がきちんと変化するシステムフォントが
組み込まれていないこともよくあります。
Droid_Robot fontの例
23

25. 8. フォントは少しカスタマイズできます
アプリ内にフォントを埋め込むこともできます。
英数字フォントやシンボルフォントにて、アクセントに使うのが妥当と思
われます。
日本語フォントはサイズが大きいので使い方には注意してください。
• 本体数百kバイトのアプリに、5Mバイトのフォントデータはアンバランスですよね
…？
• 固定文字列が大半なので、画像化した方がデータサイズ的にも優しかったりし
ませんか？
• ライセンス等、利用方法も本当に問題ない？
24

26. 9. ディスプレイサイズ・ピクセル密度
と単位

27. 9. ディスプレイサイズ・ピクセル密度と単位
Androidは様々なディスプレイサイズ・ピクセル密度のデバイス
に対応するために、それらの差分を吸収するための仕組みが
あります。
実際のところは仕組みがあるだけで、きちんと対応するにはそれなりの
手間がかかります。
ディスプレイサイズやピクセル密度別のリソースをディレクトリ（フ
ォルダ）ごとに指定することができます。
例
• drawable：共通のリソース置き場
• drawable-hdpi：高ピクセル密度端末用リソース置き場
• drawable-mdpi：中ピクセル密度端末用リソース置き場
• drawable-ldpi：低ピクセル密度端末用リソース置き場
26

28. 9. ディスプレイサイズ・ピクセル密度と単位
種々のサイズを指定するのに、物理的なpx（ピクセル）ではなく、
dp(dip, Density-independent Pixels)という画面密度に基づ
いた抽象的な単位を使うのが望ましいです。
たとえば「10dip」という指定をすれば、ldpiの端末でもmdpiの端末で
もhdpiの端末でもだいたい見た目の大きさが同じぐらいになる様なサ
イズを指定したことになります。
ユーザが設定したフォントサイズによって自動でサイズが変わる、
spという単位もあります。
テキスト部分にどうぞ。
ピクセルそのものを指すpxもあります。
1pxにこだわりたいあなたへ。
27

29. 論理的な配置
なぜ物理的（○○ピクセル）じゃなくて、論理的（右からちょっ
と離して）にする必要があるのか？
１つのレイアウトで、解像度（ピクセル数）の違う、複数のデバ
イスに対応する必要があるからです。
28

30. 実際の解像度の例
WVGA・FWVGA・qHDで今のところ（※）大半がサポートされます。
WVGA(480x800）の例
• Galaxy SII SC-02C：normal-hdpi
FWVGA(480x854）の例 「３種とも分類が一緒」
＝「1つのlayout.xmlで3
• Xperia acro SO-02C：normal-hdpi
解像度に対応する必要
qHDの（540x960）の例 がある」
• AQUOS PHONE SH-12C：normal-hdpi
有名な罠3例
IS03： ダブルVGA（640x960）でnormal-xhdpi
001DL（DELL Streak）：WVGA（480x800）でlarge-mdpi
SC-01C(Galaxy Tab)：600x1024でlarge-hdpi
※ただしGingerbreadまでに限る
29

31. １つのレイアウトで近しい解像度はカバー
9patchのPNGまたはXMLベースで
横方向に可変長に。
「横480-540・縦800-
960のUI」がカバー可能。
9patchと均等配置
縦方向に可変長なコンテ
ンツ領域 縦方向に可変長な
コンテンツ領域。
画面領域中央表示
による、固定サイズ
のコンテンツ配置。
均等配置・適切なマージン設定により、
操作UI部分であっても横方向の可変
性を確保。
30

32. 脱線

33. 脱線
１１．音鳴らせるよ。
バイブも忘れないで。
１２．「OK/Cancel」確認ダイアログ簡単に出せるよ。
Undoが不可能な操作の前には出したい。
１３．「ウェイティング」「プログレスバー」ダイアログ簡単に出せる
よ。
ユーザをちょっとでも待たせる際には、処理中であることを示す。
BACKキーでのキャンセルもできればがんばって。
32

34. まとめ

35. 画像素材レベルと使い分け（レベル0・1）
固定サイズのpngやjpg（あるいはai
レベル0 やpsd）にて提供される。 レベル1
プログラマがレタッチソフトで切り
ABCDEFGH
出すことが前提でコストが高く、慣
れない作業でピクセルずれや補完
リサイズによるジャギーが発生しが
ちになる。
正直オススメできない。
1枚絵をタイル切りした素材が提
供される。切り出しサイズによるマ
ジックナンバー問題によりコードの
素材依存度が上がり、改造コスト
が高くなる。
素材作成側のコストが低いため、
紙芝居デモ等初期検討向けには
有効。
34

36. 画像素材レベルと使い分け（レベル2・3）
適切なセンタリング・アライン・マー
レベル2 ジン調整を前提とした素材群が提 レベル3
供される。 bauhaus93
最終的な調整がXMLでできる様に .ttf
ABCDEFGH
なり、フォント等システムマターの問
題への対応コストが下がる。機種・
解像度が1,2種程度に限定できる
際に有効。
9patchに対応、アプリへのフォント
埋め込みまで検討した最高レベル
の素材。
ただしここまでやるには双方に相
当の知識が必要な上しっかりとし
た意識あわせが必要。
多デバイス展開が戦略上必須で
あれば採用を検討したい。
35

37. まとめ
1. まずお互いをよく知ろう
スキルの確認。Androidはまだまだ枯れた技術ではないし、
変化し続けている。
2. 必要があれば勉強会を開催
「他社メンバをわざわざ教育なんて…」ではなくて、信頼に
よるコミュニケーション効率のUP等、レベル差があるなら、
それをうまく利用するのが大事。
3. 「どの期間・期日で」「どのレベルまでやるか」意識あわ
せ
過剰品質は不幸の元。目的に合わせた選択を。
36