Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

アプリデザインの共通言語

199 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

アプリデザインの共通言語

  1. 1. アプリデザインの 共通言語 http://akiyama.akiroom.com/ 秋山博紀 @akiroom
  2. 2. はじめに • 今日話す内容について
  3. 3. はじめに デザイン
  4. 4. はじめに デザイン プログラミング
  5. 5. はじめに デザイン プログラミング
  6. 6. はじめに デザイン プログラミング Wireframe Design Spec
  7. 7. はじめに デザイン プログラミング ☝ 今日扱うところ Wireframe Design Spec
  8. 8. はじめに デザイン プログラミング ☝ 今日扱うところ = 共通言語(勝手に定義) Wireframe Design Spec
  9. 9. アプリデザインの共通言語 • デザイナとエンジニアのやり取りに 必要な概念(=共通言語)について説明します • 目的:アプリ開発をより円滑にする
  10. 10. こんな感じのサンプ ルアプリを例にやり ます ☜ iPhone5の 画面サイズを想定
  11. 11. アプリデザインの共通言語 • 大きくわけて3つ話します 構造 単位 色
  12. 12. アプリデザインの共通言語 • 大きくわけて3つ話します 構造 単位 色
  13. 13. 構造 • 基本はHTMLと一緒と思ってOK • <div>や<button>のような箱をどう敷き詰めるか • 意識してほしい3点 • 1.要素 • 2.階層 • 3.繰り返し
  14. 14. 構造1. 要素 • 表示要素のプログラム上の特性を理解する • どんな種類があるか(ボタン・スライダー・セルなど) • どのような性質のものか • デフォルトでアイコンが中央揃えされる • 内容に応じてサイズが変化する • Enabled/Disabled, Selected/Unselectedなどのステータス変化 • etc... • 分からないうちはエンジニアに聞く • 要素の境界を意識する • どこまでが要素なのか分かると 表示要素の本当のx, y, width, heightが指定できる
  15. 15. 要素の境界を考え ないと…
  16. 16. ☜ 実装が 超ムズい
  17. 17. パッと見、 白地がほとんどに 見えるけれど、
  18. 18. 要素の境界 (≒Clickableな領域)を 考える
  19. 19. 要素の境界を基準に MarginとPaddingを考える
  20. 20. 構造2. 階層 • すべての表示要素は入れ子になってる • Window • View • Button • Button • Slider • View • Button • 親要素や兄弟要素との関係を規定すれば すべての位置・サイズが決まる
  21. 21. ☜ さすがにありえない例
  22. 22. 要素の境界+入れ子を 考える
  23. 23. テーブルの中にセルが あって
  24. 24. セルの中に
  25. 25. 画像、ラベル、ボタンが 入ってる
  26. 26. 構造3. 繰り返し • 同じような表示をする表示要素は 共通のデザイン仕様を持たせるべき • 同じ意味の部品はなるべく共通化する
  27. 27. 厳密に書くとキリがない
  28. 28. 1カ所あれば分かる時は そこだけ書けばOK
  29. 29. ☜ 同じような部品の時 は比率でサイズを指定し てもいいかもね
  30. 30. 構造. まとめ • 要素の境界、親子・兄弟関係、共通性を意識
  31. 31. アプリデザインの共通言語 • 大きくわけて3つ話します 構造 単位 色
  32. 32. 単位 • 1. 絶対 • 2. 相対
  33. 33. 単位: 1.絶対 • Pixel(px) 色情報の最小単位(常識) • Point(pt) デバイスごとに異なるピクセル数 • Retinaの場合 「44ポイント=88ピクセルで、 画面上は44ピクセルで表示するもの」(出典) • 画面の設計はPointで考える • png/jpeg画像はPixelで考える • iOSの場合は img.png / img@2x.png / img@3x.png の3 種類の画像が必要(それぞれ1,2,3倍サイズ)
  34. 34. 単位: 1.絶対 • The Ultimate Guide To iPhone Resolutionsが超便 利
  35. 35. 今まで使ってきた図も ホントは間違い
  36. 36. ☜ ptを使う!
  37. 37. 単位: 2.相対 • % • 1:1, 4:3, 16:9, x:y, etc... • 可変長なデザイン(≒伸び縮み)
  38. 38. この例、大事な数字が 抜けてる
  39. 39. ☝セルの高さ
  40. 40. ☝ 相対値として定義
  41. 41. iPhone5の例
  42. 42. iPhone6Plusの例
  43. 43. iPhone6Plusの例 👈 👈👈 👈 比率と可変長な要素を使ったので 解像度が広がっても 「👈」で示した部分が適切に広がった
  44. 44. 単位まとめ • ピクセルとポイントの違いを理解して ワイヤフレーム・デザイン仕様書はptで書く • 相対的な単位と可変長な要素をうまく利用し デバイスサイズの変化に強いアプリをつくる
  45. 45. アプリデザインの共通言語 • 大きくわけて3つ話します 構造 単位 色
  46. 46. 色 • 1) 16進数で指定すればOK • #FF0000=赤 • 2) カラーパレットを用意しよう • 3) α値を使う場合は処理速度に注意 • 4) Blurも使えるよ
  47. 47. 色: 1) 16進数 • HTMLと同じく16進数の色指定でOKです • どの環境でも16進数の色指定を使いたいひとがい て、たいていスニペットがある
  48. 48. 色: 2) カラーパレット • 複数の画面で同じような色を使う場合 カラーパレットを定義して色の名前があると 便利です • コードのあちこちに色の指定が分散すると 修正が困難なので • すでに使っている色のうち意味のある色はまとめ ましょう
  49. 49. 色: 3) α値 • 半透明も、もちろん使えます • スクロールする場所に使うのは控える • モバイル端末は非力なので使いすぎるとカクカクする • 本当に半透明が必要か?先に混ぜた色を使えば済む のではないか?といった検討を必ずする
  50. 50. ☜ こんな感じでスクロール領域の外に 半透明な要素を設置するのは問題ない ☜ 「灰色に見えるけど実は黒25%の 半透明」とかやると重くなるリスクが
  51. 51. 色: 4) Blur • いわゆる「すりガラス」効果 も実装できます • が、処理が重かったり古い iOSでの実装がキツかった りAndroidで実装がしんどい 可能性があるので、効果的 に機能する場合のみ使うべ き
  52. 52. 色: まとめ • 1) 16進数で指定すればOK • #FF0000=赤 • 2) カラーパレットを用意しよう • 3) α値を使う場合は処理速度に注意 • 4) Blurも使えるよ
  53. 53. アプリデザインの共通言語 • 今日は3つの共通言語について話しました 構造 単位 色
  54. 54. アプリデザインの共通言語 • 今日は3つの共通言語について話しました • 分からないことがあればサッと聞いてしまった方が 早いです 構造 単位 色
  55. 55. アプリデザインの共通言語 • 今日は3つの共通言語について話しました • 分からないことがあればサッと聞いてしまった方が 早いです • 共通言語を使いつつ密なコミュニケーションで円滑 なアプリ開発を実現しましょう!👍
  56. 56. 著作権表示 • このスライドでは以下の画像を利用しています。 • 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

×