スマホアプリの開発において、デザイナーとエンジニアのコミュニケーションを円滑にするために必要な概念（=共通言語）について、最低限必要と思われる要素をざっくりと紹介しました。その時に利用したスライドです。

1. アプリデザインの
共通言語
http://akiyama.akiroom.com/
秋山博紀
@akiroom

2. はじめに
• 今日話す内容について

3. はじめに
デザイン

4. はじめに
デザイン プログラミング

5. はじめに
デザイン プログラミング

6. はじめに
デザイン プログラミング
Wireframe
Design Spec

7. はじめに
デザイン プログラミング
☝
今日扱うところ
Wireframe
Design Spec

8. はじめに
デザイン プログラミング
☝
今日扱うところ
= 共通言語（勝手に定義）
Wireframe
Design Spec

9. アプリデザインの共通言語
• デザイナとエンジニアのやり取りに
必要な概念(=共通言語)について説明します
• 目的：アプリ開発をより円滑にする

10. こんな感じのサンプ
ルアプリを例にやり
ます
☜ iPhone5の
画面サイズを想定

11. アプリデザインの共通言語
• 大きくわけて３つ話します
構造 単位 色

12. アプリデザインの共通言語
• 大きくわけて３つ話します
構造 単位 色

13. 構造
• 基本はHTMLと一緒と思ってOK
• <div>や<button>のような箱をどう敷き詰めるか
• 意識してほしい３点
• １．要素
• ２．階層
• ３．繰り返し

14. 構造1. 要素
• 表示要素のプログラム上の特性を理解する
• どんな種類があるか（ボタン・スライダー・セルなど）
• どのような性質のものか
• デフォルトでアイコンが中央揃えされる
• 内容に応じてサイズが変化する
• Enabled/Disabled, Selected/Unselectedなどのステータス変化
• etc...
• 分からないうちはエンジニアに聞く
• 要素の境界を意識する
• どこまでが要素なのか分かると
表示要素の本当のx, y, width, heightが指定できる

15. 要素の境界を考え
ないと…

16. ☜ 実装が
超ムズい

17. パッと見、
白地がほとんどに
見えるけれど、

18. 要素の境界
(≒Clickableな領域)を
考える

19. 要素の境界を基準に
MarginとPaddingを考える

20. 構造2. 階層
• すべての表示要素は入れ子になってる
• Window
• View
• Button
• Button
• Slider
• View
• Button
• 親要素や兄弟要素との関係を規定すれば
すべての位置・サイズが決まる

22. ☜ さすがにありえない例

23. 要素の境界＋入れ子を
考える

24. テーブルの中にセルが
あって

25. セルの中に

26. 画像、ラベル、ボタンが
入ってる

27. 構造3. 繰り返し
• 同じような表示をする表示要素は
共通のデザイン仕様を持たせるべき
• 同じ意味の部品はなるべく共通化する

29. 厳密に書くとキリがない

30. １カ所あれば分かる時は
そこだけ書けばOK

31. ☜ 同じような部品の時
は比率でサイズを指定し
てもいいかもね

32. 構造. まとめ
• 要素の境界、親子・兄弟関係、共通性を意識

33. アプリデザインの共通言語
• 大きくわけて３つ話します
構造 単位 色

34. 単位
• 1. 絶対
• 2. 相対

35. 単位: 1.絶対
• Pixel(px) 色情報の最小単位（常識）
• Point(pt) デバイスごとに異なるピクセル数
• Retinaの場合
「44ポイント＝88ピクセルで、
画面上は44ピクセルで表示するもの」（出典）
• 画面の設計はPointで考える
• png/jpeg画像はPixelで考える
• iOSの場合は img.png / img@2x.png / img@3x.png の３
種類の画像が必要（それぞれ1,2,3倍サイズ）

36. 単位: 1.絶対
• The Ultimate Guide To iPhone Resolutionsが超便
利

37. 今まで使ってきた図も
ホントは間違い

38. ☜ ptを使う！

39. 単位: 2.相対
• %
• 1:1, 4:3, 16:9, x:y, etc...
• 可変長なデザイン（≒伸び縮み）

40. この例、大事な数字が
抜けてる

41. ☝セルの高さ

42. ☝ 相対値として定義

43. iPhone5の例

44. iPhone6Plusの例

45. iPhone6Plusの例
👈
👈👈
👈
比率と可変長な要素を使ったので
解像度が広がっても
「👈」で示した部分が適切に広がった

46. 単位まとめ
• ピクセルとポイントの違いを理解して
ワイヤフレーム・デザイン仕様書はptで書く
• 相対的な単位と可変長な要素をうまく利用し
デバイスサイズの変化に強いアプリをつくる

47. アプリデザインの共通言語
• 大きくわけて３つ話します
構造 単位 色

48. 色
• 1) 16進数で指定すればOK
• #FF0000=赤
• 2) カラーパレットを用意しよう
• 3) α値を使う場合は処理速度に注意
• 4) Blurも使えるよ

49. 色: 1) 16進数
• HTMLと同じく16進数の色指定でOKです
• どの環境でも16進数の色指定を使いたいひとがい
て、たいていスニペットがある

50. 色: 2) カラーパレット
• 複数の画面で同じような色を使う場合
カラーパレットを定義して色の名前があると
便利です
• コードのあちこちに色の指定が分散すると
修正が困難なので
• すでに使っている色のうち意味のある色はまとめ
ましょう

52. 色: 3) α値
• 半透明も、もちろん使えます
• スクロールする場所に使うのは控える
• モバイル端末は非力なので使いすぎるとカクカクする
• 本当に半透明が必要か？先に混ぜた色を使えば済む
のではないか？といった検討を必ずする

53. ☜ こんな感じでスクロール領域の外に
半透明な要素を設置するのは問題ない
☜ 「灰色に見えるけど実は黒25%の
半透明」とかやると重くなるリスクが

54. 色: 4) Blur
• いわゆる「すりガラス」効果
も実装できます
• が、処理が重かったり古い
iOSでの実装がキツかった
りAndroidで実装がしんどい
可能性があるので、効果的
に機能する場合のみ使うべ
き

55. 色: まとめ
• 1) 16進数で指定すればOK
• #FF0000=赤
• 2) カラーパレットを用意しよう
• 3) α値を使う場合は処理速度に注意
• 4) Blurも使えるよ

56. アプリデザインの共通言語
• 今日は３つの共通言語について話しました
構造 単位 色

57. アプリデザインの共通言語
• 今日は３つの共通言語について話しました
• 分からないことがあればサッと聞いてしまった方が
早いです
構造 単位 色

58. アプリデザインの共通言語
• 今日は３つの共通言語について話しました
• 分からないことがあればサッと聞いてしまった方が
早いです
• 共通言語を使いつつ密なコミュニケーションで円滑
なアプリ開発を実現しましょう！👍

59. 著作権表示
• このスライドでは以下の画像を利用しています。
• https://thenounproject.com/search/?q=design&i=57458
• https://thenounproject.com/search/?q=programming&i=128591
• https://thenounproject.com/search/?q=talk&i=80157
• https://thenounproject.com/search/?q=boxes&i=110313
• https://thenounproject.com/search/?q=ruler&i=39879
• https://thenounproject.com/search/?q=palette&i=93104
• https://thenounproject.com/search/?q=wireframe&i=21874
• https://thenounproject.com/search/?q=long&i=27905
• https://thenounproject.com/search/?q=document&i=453
• https://flic.kr/p/9qixXv
• https://flic.kr/p/85tiXG
• https://flic.kr/p/c5xQvs
• https://flic.kr/p/3et52r