【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
•
72 likes•7,680 views
GDG Tokyo 2012-11 Android App Designs での資料。 第1回〜第4回までの総集編
【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
- 1. Android App Designs デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips 秋葉ちひろ @tommmmy
- 3. 約 65 名 約 80 名 約 60 名 約 90 名
- 4. 参加者内訳 63％ Webデザイン アプリデザイン 21% 16% 26% 37% Web開発 アプリ開発 0% 25% 50% 75% 100% (1回目と4回目の合計)
- 5. 参加者内訳 37％ Webデザイン アプリデザイン 21% 16% 26% 37% Web開発 アプリ開発 0% 25% 50% 75% 100% (1回目と4回目の合計)
- 6. 秋葉ちひろ @tommmmy • デザイナー／アートディレクター • Web系制作全般 • Androidアプリデザイン • BaiduでSimejiのプロモーションと 開発のフロントエンド実装の一部
- 7. 秋葉ちひろ @tommmmy • デザイナーズハックというデザイナー 中心のコミュニティ活動 • 7月に大阪から引っ越してきたばかり
- 8. Android App Designs デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips
- 10. 残念になる理由 A. デザイナーがAndroidデザインの基礎 を理解していない B. エンジニアがデザインのことをわかっ ていない
- 16. 結論からいうと… 落としやすいポイント •線 • 影 • 余白
- 17. 残念になる理由 A. デザイナーがAndroidデザインの基礎 を理解していない B. エンジニアがデザインのことをわかっ ていない
- 20. コードからつかんだ デザインのコツ デザイナーが知っておくと エンジニアもデザイン実装がしやすくなる！
- 22. どうやってかんたんに… • たぶんデザイナーに「dp」とかいって も受け入れてくれないと思う • デザイナーさんの身近な言語に翻訳し て伝えてみる
- 24. アジェンダ • デザイナーさんにわかりやすく興味を もってもらうための5つのポイント • 効率的な進め方 • Android App Designs アンケート結果
- 25. デザイナーさんに わかりやすく興味をもって もらうための5つのポイント 自然に責める
- 26. 1 640 px × 1066 px 720 px × 1280 px 作成するデザイン案のサイズ
- 27. 640 px × 1066 px 1 720 px × 1280 px • xhdpiでつくる - 320dpiといういちばん大きな画面密度 - 1dp = 2px なので計算がかんたん • 320dpと360dpの2種類
- 28. 640 px × 1066 px 1 720 px × 1280 px http://developer.android.com/design/style/metrics-grids.html
- 29. 640 px × 1066 px 1 720 px × 1280 px http://developer.android.com/design/style/metrics-grids.html
- 30. 640 px × 1066 px 720 px × 1280 px デザインを確認する端末によって分ける といいんじゃないかと思う
- 32. 480 x 800 (Double-click or ESC to hide) 332200ddpp 640 px × 1066 px
- 33. 720 x 1280 (Double-click or ESC to hide) 336600ddpp 720 px × 1280 px
- 34. 640 px × 1066 px 332200ddpp 336600ddpp 少し大きめ
- 35. 720 px × 1280 px 332200ddpp 336600ddpp 少し小さめ
- 36. 640 px × 1066 px 720 px × 1280 px
- 37. 640 px × 1066 px 720 px × 1280 px
- 39. 2 96 px 48dp Rhythm 48dp = 96 px http://developer.android.com/design/style/metrics-grids.html
- 40. 2 4の倍数 http://developer.android.com/design/style/metrics-grids.html
- 41. 2 4の倍数 http://developer.android.com/design/style/metrics-grids.html
- 42. 2 4の倍数 • ガイドラインでは 4の倍数 (dp) = 8の倍数 (px) = 大原則 • 細かいところはもうひとまわり小さい単位 でもいいのでは？ • 2の倍数 (dp) = 4の倍数 (px)
- 43. 116600ddppii 224400ddppii 332200ddppii mmddppii hhddppii xxhhddppii 1dp 1px 1.5px 2px 2dp 2px 3 px 4px 3dp 3px 4.5px 6px 4dp 4px 6 px 8px 5dp 5px 7.5px 10px
- 44. 116600ddppii 224400ddppii 332200ddppii mmddppii hhddppii xxhhddppii 6dp 6px 9 px 12px 7dp 7px 10.5px 14px 8dp 8px 12 px 16px 9dp 9px 13.5px 18px 10dp 10px 15 px 20px
- 45. 96 px 4の倍数
- 46. 3 伸縮幅・固定幅 横幅は原則 2種類 どこが伸縮／固定なのかをはっきりさせる
- 47. 3 伸縮幅・固定幅 • 640pxでつくっていたら、 720pxのときにはどこが伸びるのか • 720pxでつくっていたら、 640pxのときにはどこがちぢむのか • 余白はどちらのときも固定値にする
- 48. 3 伸縮幅・固定幅 http://developer.android.com/design/style/metrics-grids.html
- 49. 332200ddpp 336600ddpp 553333ddpp 664400ddpp 640 px 720 px
- 52. 16 px 12 px 4 px
- 53. 16 px 12 px 4 px
- 54. 伸縮幅・固定幅
- 56. 4 9-patch • 画面サイズはデバイスによってちがい、 必ず伸縮を考えなければならない • 画像が自由自在に伸びるようにする設定
- 57. 4 9-patch 画像を9分割して、四隅は固定、 その他を伸びてもいいようにする 伸びても耐えられるデザイン
- 60. 伸びるところ
- 78. 同じ色
- 85. 大きな グラデーション
- 91. 同じ色 同じ色
- 94. 4 9-patch グラデーションは注意！ • どこがのびるかを指定しよう • 光り具合などを計算している場合が多いの で勝手に変えられるといやだ
- 95. 9-patchの点まで つけてほしいなぁ… ム ォ フ ォ ォ フ フ
- 96. してもらってうれしいこと • 実際にデバイスで見るとどうのびるかを いっしょに体験する • Draw9PatchがデザイナーのPCで 動くようにする 慣れてきたら Photoshopでもつくるよ！
- 99. えいやー！
- 102. 5 矩形 <shape> • コードでかける矩形のことを知っておこう （コードの書き方は知らなくてもよい）
- 103. 5 矩形 <shape> R : 8px 2px
- 104. 5 矩形 <shape> R : 8px 2px
- 107. あ、残念だ…
- 108. 5 矩形 <shape> • グラデーションの場合、コードで可能なも のか、9-patchになるのかを考えておこう
- 109. 1 640×1066・720×1280 (px) 2 96px・4の倍数 3 伸縮幅・固定幅 4 9-patch 5 矩形 <shape>
- 110. 効率的な進め方 制作フローの再考
- 111. カンペくん（仮） ワイヤーフレーム カンペ受け取り待機時 tomipagos 「接続中 ・ 」 ・・ など接続に関する状況を表示 カウントダウンタイマー （tomiroidと同期） tomiroidと接続中 0 5 : 3 4 カンペを出す カンペ受け取り時 「終了」が押されると チャイム音が鳴る カンペをみる tomiroidと接続中 0 5 : 3 4 ピピッ オンマイクでおねがいします！
- 112. カンペくん（仮） ワイヤーフレーム tomiroid ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 113. カンペくん（仮） ワイヤーフレーム tomiroid じゃあ1週間で デザインおねがいね！ tomipagosと接続中 ＜その他＞ 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 プレゼン時間 おっけー！ ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 114. 1週間後 カンペくん（仮） ワイヤーフレーム tomiroid まだかなぁ… ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 115. 1週間後 カンペくん（仮） ワイヤーフレーム tomiroid まだかなぁ… ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす ごめーん！！ オンマイクでおねがいします！ カンペを出す 急な対応が入ってしまって… 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす あと2日くれない？ プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 116. 1週間後 カンペくん（仮） ワイヤーフレーム tomiroid わ、わかった… ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす ごめーん！！ オンマイクでおねがいします！ カンペを出す 急な対応が入ってしまって… 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす あと2日くれない？ プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 117. 2日後 カンペくん（仮） ワイヤーフレーム tomiroid できたかな♪ ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 118. 2日後 カンペくん（仮） ワイヤーフレーム tomiroid できたかな♪ ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 プレゼン時間 できたー！ ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 119. 2日後 カンペくん（仮） ワイヤーフレーム tomiroid ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す ・・・・・ 伝達事項を入力 プレゼン時間 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 120. 2日後 カンペくん（仮） ワイヤーフレーム tomiroid う…これは… もっかいおねがい tomipagosと接続中 ＜その他＞ 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 プレゼン時間 わかったー！ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 121. 2日後 カンペくん（仮） ワイヤーフレーム tomiroid う…これは… もっかいおねがい tomipagosと接続中 ＜その他＞ 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 122. さらに3日後 カンペくん（仮） ワイヤーフレーム tomiroid じ、じかんが… ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 123. さらに3日後 カンペくん（仮） ワイヤーフレーム tomiroid じ、じかんが… ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 プレゼン時間 できたー！ ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 124. さらに3日後 カンペくん（仮） ワイヤーフレーム tomiroid う…がんばる… ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 プレゼン時間 できたー！ ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 125. 従来のやりかた • ワイヤーを決める • デザインをデザイナーにまかせる • なかなかできあがってこない • デザインがないと実装できないよぅ∼
- 126. 従来のやりかた 設計 ワイヤー デザイン レイアウト 実装 テスト
- 128. カンペくん（仮） ワイヤーフレーム tomiroid ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 129. カンペくん（仮） ワイヤーフレーム tomiroid よし、モックつくろ♪ tomipagosと接続中 ＜その他＞ 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す よし、デザインつくろ♪ 伝達事項を入力 プレゼン時間 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 130. 1週間後 カンペくん（仮） ワイヤーフレーム tomiroid できたー！ tomipagosと接続中 ＜その他＞ 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 プレゼン時間 できたー！ 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 131. 1週間後 カンペくん（仮） ワイヤーフレーム tomiroid ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 132. 1週間後 カンペくん（仮） ワイヤーフレーム tomiroid ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 133. 1週間後 カンペくん（仮） ワイヤーフレーム tomiroid ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 134. 1週間後 カンペくん（仮） ワイヤーフレーム tomiroid ＜その他＞ tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします！ カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート （tomipagosと同期） 0 5 : 3 4 タイマーのスタート／ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
- 136. 同時進行のやりかた 設計 ワイヤー デザイン 実装 レイアウト テスト
- 137. XMLスタイリングを 最後にする ワイヤーさえ変わらなければ 最高の効率
- 141. ほとんどが<shape>
- 142. R : 8px 2px
- 143. 声おおきくー！ 声おおきくー！
- 144. 声おおきくー！ 押せるところ 盛り上がっている (ように見える) 声おおきくー！ 押せないところ すでにへこんでいる (ように見える)
- 145. 声おおきくー！ 押せるところ 盛り上がっている (ように見える) 声おおきくー！ 押せないところ すでにへこんでいる (ように見える)
- 147. text shadow R : 20px 1px
- 149. text shadow R : 8px 1px
- 150. shadow R : 8px 1px
- 154. R : 8px 1px
- 156. きれいにデザインを するためには • 数少ない表現方法でも、知っていれば それなりに組み合わせてきれいなデザ インを作れる • 残念になるのは両方が勉強不足？
- 157. Android App Designs アンケート 日々の見えない声
- 159. デザイナー → エンジニア
- 161. デザイナー → エンジニア 1px 1dp とても大事にデザインしている のと、ちゃんと 1px 1dp 1line 色 形 す べてに意味があるので、実装が難しい場合 はちゃんと対策を考えますので何も言わず に勝手に変更しないでください(>_<) 相談してください(>_<)
- 162. エンジニア → デザイナー
- 169. エンジニア → デザイナー Webの場合 デザイナー「やっぱりここを変えよう」 ↓ HTML + CSSを修正 ↓ デザイナー「終わったー」 ↓ プログラマー「あ、デザイン変わってる」 →つづく
- 170. エンジニア → デザイナー Androidの場合 デザイナー「やっぱりここを変えよう」 ↓ デザイナー「ここを変えたいから、修正しといて」 ↓ プログラマー「え?」→xml修正→「終わったー」 ↓ デザイナー「余白が違う」 ↓ プログラマー「え?」 →つづく
- 172. エンジニア → デザイナー • Androidのデザインを頼むとiPhoneっ ぽくデザインするのﾔﾒﾃ(´・ω・｀) • もっとAndroidのデザインを勉強してほ しい。 • 同種の画像を複数サイズで作成依頼時に 嫌な顔しないで欲しい。 • Androidも好きになってください。 →つづく
- 174. for your happy Android Life! Thank you so much!