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?

16.
たぶん、デザインで何かを解決してほしい と思っているんだろうなぁー

17.
きれいにしてほしい To be beautiful

18.
情報を見やすく整理して きれいにしてほしいほしいのかもしれない To be beautifulThey 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

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.
コンセプトメイキング concept making 世界観 Design philosophy

32.
•1 コンセプトメイキング concept making•2 画面の設計 architect of design•3 デザイン・実装 design and implement•4 演出 effects

33.
画面の設計 architect of design使いやすさ Usability

34.
画面の設計 architect of design 使いやすさ Usability自然な人間の行動をもとに考える think based on human action

35.
画面の設計 architect of design• デベロッパさんはたいがい難しいことを考えて いる

36.
シンプルすぎる 要素が多すぎる too simple too much elements

37.
too much action get lost to touchアクションが多くなる 最初に迷ってしまうシンプルすぎる 要素が多すぎる too simple too much elements

38.
画面の設計 architect of designコミュニケーション Communication

39.
画面の設計 architect of designコミュニケーション Communicationインターフェイスはユーザーとの接点 interface is a point between users and app

40.
ここ押して！

41.
ここをひっぱって！

42.
横にスクロール するよ！

43.
とにかくシンプルに Be simple 人間のためのコンピューター―インターフェースの発想と展開 （Brenda Laurel）

44.
•1 コンセプトメイキング concept making•2 画面の設計 architect of design•3 デザイン・実装 design and implement•4 演出 effects

45.
デザイン・実装 design and implementグラフィックで表現する express through graphics

46.
デザイン・実装 design and implementグラフィックで表現する express through graphics使いやすく／コミュニケーション easy to use / communication

47.
すべては観察して勉強する Everything comes from observation

48.
使いやすく／コミュニケーション easy to use / communication• 配置／余白 Layout / Padding• グルーピング Grouping• 写真／イラストの表現 Photos / Illustration

49.
カンペ・リモート

50.
文字入力・表示タイマー関連文字入力・表示

51.
文字入力・表示タイマー関連文字入力・表示

52.
文字入力・表示タイマー関連

53.
文字入力・表示タイマー関連

54.
デザイン・実装 design and implement○○しているようにみせる pretend to xxxxxx

55.
デザイン・実装 design and implement• ふくらんでいる Usability• へこんでいる Target• 光っている Lighting

56.
影の黒光の白 ドロップシャドウ

57.
デザイン・実装 design and implement• ふくらんでいる Usability• へこんでいる Target• 光っている Lighting

58.
デザイン・実装 design and implement○○しているようにみせる pretend to xxxxxx 「ズルいデザイン」

59.
Signifierユーザーを適切な行動へ導く知覚可能なサイン visual sign which leads users for appropriate action 複雑さと共に暮らす―デザインの挑戦 ドナルド・ノーマン (著)

60.
アフォーダンスからシグニファイアへ - A Successful Failure

61.
アフォーダンスからシグニファイアへ - A Successful Failure

62.
アフォーダンスからシグニファイアへ - A Successful Failure

63.
アフォーダンスからシグニファイアへ - A Successful Failure

64.
アフォーダンスからシグニファイアへ - A Successful Failure

65.
アフォーダンスからシグニファイアへ - A Successful Failure

66.
アフォーダンスからシグニファイアへ - A Successful Failure

67.
アフォーダンスからシグニファイアへ - A Successful Failure

68.
アフォーダンスからシグニファイアへ - A Successful Failure

69.
アフォーダンスからシグニファイアへ - A Successful Failure

70.
アフォーダンスからシグニファイアへ - A Successful Failure

71.
Signifierノコノコは踏めるがトゲゾーは踏めない トゲがあるからwe can step on NOKONOKO, but can’t on TOGEZO because he has prickles

72.
凹んでいるように見える Signifierノコノコは踏めるがトゲゾーは踏めない トゲがあるからwe can step on NOKONOKO, but can’t on TOGEZO because he has prickles

73.
デザイン・実装 design and implementコードで表現できるのか how to express design by code

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.
コードで表現できるのか how to express design by code• 画像で書きだすか、コードで表現するか Publish as images or express with source code

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.
画像で書きだす場合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.
コードで表現する場合express with source code 高い画面密度でもOK 複雑なグラフィックが no problem in high density 表現できない decive can not express complicated graphics

79.
•1 コンセプトメイキング concept making•2 画面の設計 architect of design•3 デザイン・実装 design and implement•4 演出 effects

80.
演出 effects気持ちよさを追求する how to comfort users

81.
演出 effects 気持ちよさを追求する how to comfort usersアニメーション・トランジション・サウンド animation & transition &sounds

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.
動きと音に力を入れたスマホ Smartphone with animation and sounds

84.
動きと音に力を入れたスマホ Smartphone with animation and sounds

85.
動きと音に力を入れたスマホ Smartphone with animation and sounds

86.
Flashでモックをつくる… make mockup by Flash...

87.
•1 コンセプトメイキング concept making•2 画面の設計 architect of design•3 デザイン・実装 design and implement•4 演出 effects

88.
？

89.
？ デザイン画面の設計 コンセプトメイキング 実装

90.
希望的なワークフローと役割 hopeful workflow and each roles

91.
• 要望をきく hearing • 背景をきく why does this app need?クライアント ある程度 ディレクターおとしこんで形にする

92.
• デザインをデザイナーまかせにしないでほしい Don’t put design to designer’s hand• 作りたい人の趣味や背景なども聞いてほしい Hobby or background of client is important- ガテン系 / ブランド好き / 車好き Outdoor / Brands / Carsクライアント ディレクター

93.
いちばん最悪なケース It’s the worst caseとりあえず何パターンか 作ってみてよ Anyway, could you please design some petters?クライアント ディレクター

94.
最悪なケース bad case• お客さんこう言ってるからこうしてくれない？ “Please modify as the client says”• お客さんのメールをそのまま転送してくる Director forwards email from the client.クライアント ディレクター

95.
クライアント ディレクター デザイナー

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.
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.
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.
「デザイナー」の定義 What’s the definition of “Designer?”

100.
「デザイナー」の定義は？ What’s the definition of “Designer?” Graphic Designer Interface Developer Logic

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.
いいプロダクトができる条件 the condition to create fantastic product巻き寿司チーム Makizushi team

103.
巻き寿司チーム Makizushi team

104.
巻き寿司チーム Makizushi team 具材：プレイヤー ごはん：共通認識 のり：クライアント

105.
巻き寿司チーム• みんながそれぞれの役割を持っている Makizushi team Each member has own role• ベースの知識（一般教養）が共通してある 具材：プレイヤー Each member has basic general knowledge• 共通の認識（アプリの世界観とコンセプト） ごはん：共通認識 Common acknowledge (App’s philosophy and concept) のり：クライアント

106.
• アプリやサービスを作る上で 要望を形にできない、 ただの伝達役の人はいらない we don’t need just a messenger who can’t create something from hearing ディレクター

107.
ACTION!

108.
ACTION!一般教養レベルをみんなが 持ってほしい 世界は分けてもわからない（福岡伸一／講談社現代新書）

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.
ACTION! 身のまわりのデザインを自分なりに分析することから はじめよう

111.
デザインをわからないデベロッパーのままで いいのですか？

112.
デザインをデザイナーまかせにして いいのですか？

113.
ありがとうございました Thank you so much!!! 秋葉ちひろ tommmmy