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