Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜

143,368
-1

Published on

デブサミ2013(Developers Summit 2013)Action! 1日目のデザインセッション「デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜」の発表資料(2013年2月14日)

--------------------------------------------------
途中、時間がなくて話せなかったところも入っています(そこがかなりいい話だったりする)ので、やっぱりここも実際に聞きたい!という方はまたどこかで呼んでくださいm(_ _)m よろしくお願いします。

Published in: Design
4 Comments
296 Likes
Statistics
Notes
  • 確かにこのリモコンにおいてはオレンジは紛らわしいかもしれませんね。ひょっとしたら試作品でオレンジにして紛らわしいのでユーザビリティを優先してオレンジ以外の色にしたのかもしれません。そういうことでしたら、私の以前のコメントは業界ルールよりもユーザビリティを優先したということで見当違いで申し訳ありません。
    現在は、私がざっと調べた感じではリンナイは220Vシリーズのようにうまくまとていらっしゃるし、スタイリッシュリモコンや家電メーカーのエコキュートリモコンが各社様々な色であるように、色については業界ルールも実際のところないように、見受けられます。大変失礼いたしました。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @isamuchujo 掲載されているリンナイのリモコンな風呂を使っていますが、追い炊きは色をオレンジにするべきではありませんね。
    基本は赤い「自動」で事足りるので、オレンジでは紛らわしいです。

    もし業界がオレンジがベターだと思っているなら、似すぎていることで混乱することを考慮した方が良いかもしれませんね。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • わたしの勉強不足で、意識の行き届かなかった部分で、申し訳ありません。大変ありがたいご指摘ありがとうございます。
    スライドの差し替えができたら変更しますが、できなかったらこのままですいません。このコメントでみなさんにもお伝えできたらと思います。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Rinnaiのリモコンの例が出ていますね。でも、ユーザーがどのメーカーの物でも分かりやすいよう業界ルールとして当時は(現在は分かりませんが)おいだきボタンはオレンジであるべきですが、このリモコンは確か緑に光ります。そこが伝えたいポイントで無いのは充分にに承知していますが、ユーザビリティに触れている以上、そういったルールを無視した商品をとりあげるのはあまり適切ではないかと。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
143,368
On Slideshare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
496
Comments
4
Likes
296
Embeds 0
No embeds

No notes for slide

Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜

  1. 1. デザインを考えるときにデザイナーが考えること ∼デザイナーの頭の中∼ 秋葉ちひろ(@tommmmy)
  2. 2. とにかくデザイナーが必要! You need designer!?
  3. 3. とにかくデザイナーが必要! You need designer!?必要なデザイナーにリーチできていますか? うまく協業できていますか? Can you reach appropriate designer? Do you cooperate with them?
  4. 4. 秋葉ちひろ Baidu Japan Inc デザイナー / アートディレクター• Web制作関連• Androidアプリ制作関連
  5. 5. 日本語入力キーボード Simeji Japanese Input Method Editor Simeji Simeji
  6. 6. Android App Designs 勉強会デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips Design XML Android App Designsについて ¦ Android App Designs
  7. 7. 約 65 名 約 80 名 約 60 名 約 90 名 Android App Designsについて ¦ Android App Designs
  8. 8. デザイナーズハック「技術にしばられないでデザインを 考えていく」コミュニティ デザイナーズハック
  9. 9. こんな印象ないですか? Don’t you have such impression?
  10. 10. • 美意識が高そう、プライドが高そう She looks too proud of herself.• バカなこととかきらいそう She seems to dislike stupid thing.
  11. 11. • ときどき会話のキャッチボールが うまくいかないような気がする You may feel you don’t go well in the term of words catchball
  12. 12. • コードやプログラムの話が始まると、シャット ダウンして勝手に自分の世界に入り込む They imagine in their own world to make a wall around them when the others talk about programs.
  13. 13. そういう傾向はある かも It tends to...
  14. 14. デザイナーの仕事は? So let’s think about designer’s role.デザイナーにしてほしいこと What kind of things would you like designers to do?
  15. 15. もし発注するとして…具体的にきちんと説明できますか? Can you explain what do you want designers to do?
  16. 16. たぶん、デザインで何かを解決してほしい と思っているんだろうなぁー
  17. 17. きれいにしてほしい To be beautiful
  18. 18. 情報を見やすく整理して きれいにしてほしいほしいのかもしれない To be beautifulThey may demand information architect to easy to see
  19. 19. かっこよくしてほしい To be cool
  20. 20. 伝えたいことがちゃんと かっこよくしてほしい伝わるようなビジュアルを To be cool作ってほしいのかもしれない They may demand to create visual images
  21. 21. ダサいのでなんとかしてほしい I want something to be done
  22. 22. アートな要素を入れてダサいのでなんとかしてほしい ほしいのかもしれない I want something to be done They may demand to put in artistic
  23. 23. デザインを考えるときに考えること My thinking when creating design.
  24. 24. •1 コンセプトメイキング concept making•2 画面の設計 architect of design•3 デザイン・実装 design and implement•4 演出 effects
  25. 25. コンセプトメイキング concept makingターゲット Target
  26. 26. コンセプトメイキング concept making ターゲット Targetよくばりすぎず、明確に決める fix clearly, not so many target
  27. 27. 高校生10代後半∼20代女性 30代女性・OL 20代男性・新社会人 50代男性・サラリーマン 主婦
  28. 28. コンセプトメイキング concept makingいつどんなときに使うのか when and how to use
  29. 29. コンセプトメイキング concept makingいつどんなときに使うのか when and how to use ユースケースを想定する suppose use case
  30. 30. • おじいちゃんおばあちゃんに孫の声を! Let’s send grandchild’s voice to grandparents!• 誕生日にみんなでおめでとうメッセージ Let’s send happy message to friend’s birthday!• アリバイの録音に Let’s record environmental sounds as alibi
  31. 31. コンセプトメイキング concept making 世界観 Design philosophy
  32. 32. •1 コンセプトメイキング concept making•2 画面の設計 architect of design•3 デザイン・実装 design and implement•4 演出 effects
  33. 33. 画面の設計 architect of design使いやすさ Usability
  34. 34. 画面の設計 architect of design 使いやすさ Usability自然な人間の行動をもとに考える think based on human action
  35. 35. 画面の設計 architect of design• デベロッパさんはたいがい難しいことを考えて いる
  36. 36. シンプルすぎる 要素が多すぎる too simple too much elements
  37. 37. too much action get lost to touchアクションが多くなる 最初に迷ってしまうシンプルすぎる 要素が多すぎる too simple too much elements
  38. 38. 画面の設計 architect of designコミュニケーション Communication
  39. 39. 画面の設計 architect of designコミュニケーション Communicationインターフェイスはユーザーとの接点 interface is a point between users and app
  40. 40. ここ押して!
  41. 41. ここをひっぱって!
  42. 42. 横にスクロール するよ!
  43. 43. とにかくシンプルに Be simple 人間のためのコンピューター―インターフェースの発想と展開 (Brenda Laurel)
  44. 44. •1 コンセプトメイキング concept making•2 画面の設計 architect of design•3 デザイン・実装 design and implement•4 演出 effects
  45. 45. デザイン・実装 design and implementグラフィックで表現する express through graphics
  46. 46. デザイン・実装 design and implementグラフィックで表現する express through graphics使いやすく/コミュニケーション easy to use / communication
  47. 47. すべては観察して勉強する Everything comes from observation
  48. 48. 使いやすく/コミュニケーション easy to use / communication• 配置/余白 Layout / Padding• グルーピング Grouping• 写真/イラストの表現 Photos / Illustration
  49. 49. カンペ・リモート
  50. 50. 文字入力・表示タイマー関連文字入力・表示
  51. 51. 文字入力・表示タイマー関連文字入力・表示
  52. 52. 文字入力・表示タイマー関連
  53. 53. 文字入力・表示タイマー関連
  54. 54. デザイン・実装 design and implement○○しているようにみせる pretend to xxxxxx
  55. 55. デザイン・実装 design and implement• ふくらんでいる Usability• へこんでいる Target• 光っている Lighting
  56. 56. 影の黒光の白 ドロップシャドウ
  57. 57. デザイン・実装 design and implement• ふくらんでいる Usability• へこんでいる Target• 光っている Lighting
  58. 58. デザイン・実装 design and implement○○しているようにみせる pretend to xxxxxx 「ズルいデザイン」
  59. 59. Signifierユーザーを適切な行動へ導く知覚可能なサイン visual sign which leads users for appropriate action 複雑さと共に暮らす―デザインの挑戦 ドナルド・ノーマン (著)
  60. 60. アフォーダンスからシグニファイアへ - A Successful Failure
  61. 61. アフォーダンスからシグニファイアへ - A Successful Failure
  62. 62. アフォーダンスからシグニファイアへ - A Successful Failure
  63. 63. アフォーダンスからシグニファイアへ - A Successful Failure
  64. 64. アフォーダンスからシグニファイアへ - A Successful Failure
  65. 65. アフォーダンスからシグニファイアへ - A Successful Failure
  66. 66. アフォーダンスからシグニファイアへ - A Successful Failure
  67. 67. アフォーダンスからシグニファイアへ - A Successful Failure
  68. 68. アフォーダンスからシグニファイアへ - A Successful Failure
  69. 69. アフォーダンスからシグニファイアへ - A Successful Failure
  70. 70. アフォーダンスからシグニファイアへ - A Successful Failure
  71. 71. Signifierノコノコは踏めるがトゲゾーは踏めない トゲがあるからwe can step on NOKONOKO, but can’t on TOGEZO because he has prickles
  72. 72. 凹んでいるように見える Signifierノコノコは踏めるがトゲゾーは踏めない トゲがあるからwe can step on NOKONOKO, but can’t on TOGEZO because he has prickles
  73. 73. デザイン・実装 design and implementコードで表現できるのか how to express design by code
  74. 74. デザイン・実装• デザインを考えるときにコーディングの design and implement ことを考えない I don’t think about coding source when designing• コーディングのときはデザインをできるコードで表現できるのか だけ再現できるように考える how to express design by code I only think about to xxxxxx design when coding
  75. 75. コードで表現できるのか how to express design by code• 画像で書きだすか、コードで表現するか Publish as images or express with source code
  76. 76. 画像で書きだす場合publishing as images コードで表現できない 高い画面密度に耐えられ 複雑なグラフィックを ない 再現できる can not proof against high density express complicated graphics which are not expressed by code 縦横比に注意が必要 should pay attention to aspect rate
  77. 77. 画像で書きだす場合publishing as images 画像が荒れる コードで表現できない 高い画面密度に耐えられ Dirty image 複雑なグラフィックを ない 再現できる can not proof against high density express complicated graphics 画像の縦横比が崩れる which are not expressed by code 縦横比に注意が必要 should pay attention to aspect rate Break aspect rate
  78. 78. コードで表現する場合express with source code 高い画面密度でもOK 複雑なグラフィックが no problem in high density 表現できない decive can not express complicated graphics
  79. 79. •1 コンセプトメイキング concept making•2 画面の設計 architect of design•3 デザイン・実装 design and implement•4 演出 effects
  80. 80. 演出 effects気持ちよさを追求する how to comfort users
  81. 81. 演出 effects 気持ちよさを追求する how to comfort usersアニメーション・トランジション・サウンド animation & transition &sounds
  82. 82. 演出 • ユーザーが使いたくなる動き effects animation and transition which users want to use - おおげさなのがよい場合(ゲーム) 気持ちよさを追求する in the case exaggeratedly (ex. games) - 多すぎないほうがよい場合(ツールなど) how to comfort users in the case not too much (ex. tools)アニメーション・トランジション・サウンド animation & transition &sounds
  83. 83. 動きと音に力を入れたスマホ Smartphone with animation and sounds
  84. 84. 動きと音に力を入れたスマホ Smartphone with animation and sounds
  85. 85. 動きと音に力を入れたスマホ Smartphone with animation and sounds
  86. 86. Flashでモックをつくる… make mockup by Flash...
  87. 87. •1 コンセプトメイキング concept making•2 画面の設計 architect of design•3 デザイン・実装 design and implement•4 演出 effects
  88. 88.
  89. 89. ? デザイン画面の設計 コンセプトメイキング 実装
  90. 90. 希望的なワークフローと役割 hopeful workflow and each roles
  91. 91. • 要望をきく hearing • 背景をきく why does this app need?クライアント ある程度 ディレクターおとしこんで形にする
  92. 92. • デザインをデザイナーまかせにしないでほしい Don’t put design to designer’s hand• 作りたい人の趣味や背景なども聞いてほしい Hobby or background of client is important- ガテン系 / ブランド好き / 車好き Outdoor / Brands / Carsクライアント ディレクター
  93. 93. いちばん最悪なケース It’s the worst caseとりあえず何パターンか 作ってみてよ Anyway, could you please design some petters?クライアント ディレクター
  94. 94. 最悪なケース bad case• お客さんこう言ってるからこうしてくれない? “Please modify as the client says”• お客さんのメールをそのまま転送してくる Director forwards email from the client.クライアント ディレクター
  95. 95. クライアント ディレクター デザイナー
  96. 96. みんなが知っておくといい一般教養 general knowledge which the team members should know• 今日お話したこと(for developers) today’s session• プログラムを使ってできること(for designers) what can we do with program• 開発手法(Waterfall / Agile) development methodology
  97. 97. T字型人材 general knowledge which the team members should know• 一般教養があり、ベースとなる知識がある They have general knowledge, and they have the basic knowledge• そして、何かひとつ以上のことに秀でている And they have outstanding ability of something onillu e atiint hic fac str ap er gr 20歳のときに知っておきたかったこと スタンフォード大学集中講義(ティナ・シーリグ)
  98. 98. T字型人材 「みんな」が general knowledge which the team members should know「どの技術で何ができるか」 • 一般教養があり、ベースもそこそこ高い They have general knowledge, and high potential を知っている • そして、何かひとつ以上のことに秀でている And they have outstanding ability of something “Everyone” knows “what we can do with what technology” on illu e ati int hic fac str ap er gr 20歳のときに知っておきたかったこと スタンフォード大学集中講義(ティナ・シーリグ)
  99. 99. 「デザイナー」の定義 What’s the definition of “Designer?”
  100. 100. 「デザイナー」の定義は? What’s the definition of “Designer?” Graphic Designer Interface Developer Logic
  101. 101. 「デザイナー」の定義は? •みんながそれぞれの役割を持っている Each member has ownthe definition of “Designer?” What’s role • ベースの知識(一般教養)が共通してある Graphic Each member has basic general knowledge Designer • 共通の認識(アプリの世界観とコンセプト) Interface Common acknowledge (App’s philosophy and concept) Developer Logic
  102. 102. いいプロダクトができる条件 the condition to create fantastic product巻き寿司チーム Makizushi team
  103. 103. 巻き寿司チーム Makizushi team
  104. 104. 巻き寿司チーム Makizushi team 具材:プレイヤー ごはん:共通認識 のり:クライアント
  105. 105. 巻き寿司チーム• みんながそれぞれの役割を持っている Makizushi team Each member has own role• ベースの知識(一般教養)が共通してある 具材:プレイヤー Each member has basic general knowledge• 共通の認識(アプリの世界観とコンセプト) ごはん:共通認識 Common acknowledge (App’s philosophy and concept) のり:クライアント
  106. 106. • アプリやサービスを作る上で 要望を形にできない、 ただの伝達役の人はいらない we don’t need just a messenger who can’t create something from hearing ディレクター
  107. 107. ACTION!
  108. 108. ACTION!一般教養レベルをみんなが 持ってほしい 世界は分けてもわからない(福岡伸一/講談社現代新書)
  109. 109. ACTION!• デザイナーだけどプログラムで何ができるか 知っているから指摘や指示ができる Designers can point out and direct because they know what is able through program• エンジニアだけどデザインの最低限のTipsは一般教養レベルをみんなが 知っているから指摘や指示ができる 持ってほしい Engineers can point out and direct because they know the basic tips of design
  110. 110. ACTION! 身のまわりのデザインを自分なりに分析することから はじめよう
  111. 111. デザインをわからないデベロッパーのままで いいのですか?
  112. 112. デザインをデザイナーまかせにして いいのですか?
  113. 113. ありがとうございました Thank you so much!!! 秋葉ちひろ tommmmy
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×