Your SlideShare is downloading. ×
0
デザインを考えるときにデザイナーが考えること ∼デザイナーの頭の中∼  秋葉ちひろ(@tommmmy)
とにかくデザイナーが必要!    You need designer!?
とにかくデザイナーが必要!            You need designer!?必要なデザイナーにリーチできていますか?   うまく協業できていますか?     Can you reach appropriate designer?  ...
秋葉ちひろ      Baidu Japan Inc      デザイナー / アートディレクター• Web制作関連• Androidアプリ制作関連
日本語入力キーボード Simeji  Japanese Input Method Editor Simeji                                        Simeji
Android App Designs 勉強会デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips    Design                 XML               Android Ap...
約   65   名   約   80   名        約   60   名      約   90   名                          Android App Designsについて ¦ Android App D...
デザイナーズハック「技術にしばられないでデザインを  考えていく」コミュニティ                デザイナーズハック
こんな印象ないですか?  Don’t you have such impression?
• 美意識が高そう、プライドが高そう She looks too proud of herself.• バカなこととかきらいそう She seems to dislike stupid thing.
• ときどき会話のキャッチボールが うまくいかないような気がする You may feel you don’t go well in the term of words catchball
• コードやプログラムの話が始まると、シャット ダウンして勝手に自分の世界に入り込む They imagine in their own world to make a wall around them when the others talk...
そういう傾向はある かも     It tends to...
デザイナーの仕事は?         So let’s think about designer’s role.デザイナーにしてほしいこと  What kind of things would you like designers to do?
もし発注するとして…具体的にきちんと説明できますか?   Can you explain what do you want designers to do?
たぶん、デザインで何かを解決してほしい  と思っているんだろうなぁー
きれいにしてほしい   To be beautiful
情報を見やすく整理して きれいにしてほしいほしいのかもしれない        To be beautifulThey may demand information architect to easy to see
かっこよくしてほしい    To be cool
伝えたいことがちゃんと かっこよくしてほしい伝わるようなビジュアルを    To be cool作ってほしいのかもしれない  They may demand to create visual images
ダサいのでなんとかしてほしい    I want something to be done
アートな要素を入れてダサいのでなんとかしてほしい  ほしいのかもしれない     I want something to be done   They may demand to put in artistic
デザインを考えるときに考えること    My thinking when creating design.
•1 コンセプトメイキング    concept making•2 画面の設計    architect of design•3 デザイン・実装    design and implement•4 演出    effects
コンセプトメイキング   concept makingターゲット       Target
コンセプトメイキング           concept making   ターゲット                Targetよくばりすぎず、明確に決める    fix clearly, not so many target
高校生10代後半∼20代女性                      30代女性・OL      20代男性・新社会人                   50代男性・サラリーマン 主婦
コンセプトメイキング       concept makingいつどんなときに使うのか     when and how to use
コンセプトメイキング       concept makingいつどんなときに使うのか     when and how to use ユースケースを想定する      suppose use case
• おじいちゃんおばあちゃんに孫の声を! Let’s send grandchild’s voice to grandparents!• 誕生日にみんなでおめでとうメッセージ Let’s send happy message to friend...
コンセプトメイキング   concept making 世界観  Design philosophy
•1 コンセプトメイキング    concept making•2 画面の設計    architect of design•3 デザイン・実装    design and implement•4 演出    effects
画面の設計 architect of design使いやすさ      Usability
画面の設計        architect of design   使いやすさ             Usability自然な人間の行動をもとに考える    think based on human action
画面の設計        architect of design• デベロッパさんはたいがい難しいことを考えて いる
シンプルすぎる        要素が多すぎる  too simple    too much elements
too much action     get lost to touchアクションが多くなる          最初に迷ってしまうシンプルすぎる             要素が多すぎる    too simple       too much...
画面の設計   architect of designコミュニケーション    Communication
画面の設計               architect of designコミュニケーション                 Communicationインターフェイスはユーザーとの接点    interface is a point be...
ここ押して!
ここをひっぱって!
横にスクロール  するよ!
とにかくシンプルに          Be simple  人間のためのコンピューター―インターフェースの発想と展開 (Brenda Laurel)
•1 コンセプトメイキング    concept making•2 画面の設計    architect of design•3 デザイン・実装    design and implement•4 演出    effects
デザイン・実装    design and implementグラフィックで表現する   express through graphics
デザイン・実装       design and implementグラフィックで表現する     express through graphics使いやすく/コミュニケーション    easy to use / communication
すべては観察して勉強する   Everything comes from observation
使いやすく/コミュニケーション                     easy to use / communication• 配置/余白 Layout / Padding• グルーピング Grouping• 写真/イラストの表現 Photo...
カンペ・リモート
文字入力・表示タイマー関連文字入力・表示
文字入力・表示タイマー関連文字入力・表示
文字入力・表示タイマー関連
文字入力・表示タイマー関連
デザイン・実装    design and implement○○しているようにみせる      pretend to xxxxxx
デザイン・実装             design and implement• ふくらんでいる Usability• へこんでいる Target• 光っている Lighting
影の黒光の白      ドロップシャドウ
デザイン・実装             design and implement• ふくらんでいる Usability• へこんでいる Target• 光っている Lighting
デザイン・実装    design and implement○○しているようにみせる      pretend to xxxxxx                           「ズルいデザイン」
Signifierユーザーを適切な行動へ導く知覚可能なサイン    visual sign which leads users for appropriate action                                     ...
アフォーダンスからシグニファイアへ - A Successful Failure
アフォーダンスからシグニファイアへ - A Successful Failure
アフォーダンスからシグニファイアへ - A Successful Failure
アフォーダンスからシグニファイアへ - A Successful Failure
アフォーダンスからシグニファイアへ - A Successful Failure
アフォーダンスからシグニファイアへ - A Successful Failure
アフォーダンスからシグニファイアへ - A Successful Failure
アフォーダンスからシグニファイアへ - A Successful Failure
アフォーダンスからシグニファイアへ - A Successful Failure
アフォーダンスからシグニファイアへ - A Successful Failure
アフォーダンスからシグニファイアへ - A Successful Failure
Signifierノコノコは踏めるがトゲゾーは踏めない                                            トゲがあるからwe can step on NOKONOKO, but can’t on TOGEZO ...
凹んでいるように見える                      Signifierノコノコは踏めるがトゲゾーは踏めない                                            トゲがあるからwe can step ...
デザイン・実装       design and implementコードで表現できるのか   how to express design by code
デザイン・実装•   デザインを考えるときにコーディングの          design and implement    ことを考えない    I don’t think about coding source when designing...
コードで表現できるのか                  how to express design by code• 画像で書きだすか、コードで表現するか Publish as images or express with source code
画像で書きだす場合publishing as images コードで表現できない                      高い画面密度に耐えられ 複雑なグラフィックを                      ない 再現できる        ...
画像で書きだす場合publishing as images              画像が荒れる コードで表現できない                       高い画面密度に耐えられ              Dirty image 複雑...
コードで表現する場合express with source code 高い画面密度でもOK                    複雑なグラフィックが  no problem in high density   表現できない  decive  ...
•1 コンセプトメイキング    concept making•2 画面の設計    architect of design•3 デザイン・実装    design and implement•4 演出    effects
演出         effects気持ちよさを追求する   how to comfort users
演出                 effects 気持ちよさを追求する          how to comfort usersアニメーション・トランジション・サウンド      animation & transition &sounds
演出 • ユーザーが使いたくなる動き            effects  animation and transition which users want to use  - おおげさなのがよい場合(ゲーム) 気持ちよさを追求する   i...
動きと音に力を入れたスマホ   Smartphone with animation and sounds
動きと音に力を入れたスマホ   Smartphone with animation and sounds
動きと音に力を入れたスマホ   Smartphone with animation and sounds
Flashでモックをつくる…    make mockup by Flash...
•1 コンセプトメイキング    concept making•2 画面の設計    architect of design•3 デザイン・実装    design and implement•4 演出    effects
?
?        デザイン画面の設計          コンセプトメイキング         実装
希望的なワークフローと役割   hopeful workflow and each roles
• 要望をきく       hearing      • 背景をきく       why does this app need?クライアント       ある程度 ディレクターおとしこんで形にする
• デザインをデザイナーまかせにしないでほしい Don’t put design to designer’s hand• 作りたい人の趣味や背景なども聞いてほしい Hobby or background of client is importa...
いちばん最悪なケース                 It’s the worst caseとりあえず何パターンか   作ってみてよ    Anyway, could you please design some petters?クライアント ...
最悪なケース                                 bad case• お客さんこう言ってるからこうしてくれない? “Please modify as the client says”• お客さんのメールをそのまま転送...
クライアント   ディレクター         デザイナー
みんなが知っておくといい一般教養        general knowledge which the team members should know• 今日お話したこと(for developers)  today’s session• プ...
T字型人材       general knowledge which the team members should know• 一般教養があり、ベースとなる知識がある They have general knowledge, and the...
T字型人材                「みんな」が        general knowledge which the team members should know「どの技術で何ができるか」 • 一般教養があり、ベースもそこそこ高い ...
「デザイナー」の定義  What’s the definition of “Designer?”
「デザイナー」の定義は?        What’s the definition of “Designer?”                                     Graphic Designer             ...
「デザイナー」の定義は? •みんながそれぞれの役割を持っている     Each member has ownthe definition of “Designer?”                  What’s role • ベースの知識...
いいプロダクトができる条件 the condition to create fantastic product巻き寿司チーム             Makizushi team
巻き寿司チーム  Makizushi team
巻き寿司チーム  Makizushi team                   具材:プレイヤー                   ごはん:共通認識                   のり:クライアント
巻き寿司チーム• みんながそれぞれの役割を持っている    Makizushi team Each member has own role• ベースの知識(一般教養)が共通してある             具材:プレイヤー Each membe...
• アプリやサービスを作る上で 要望を形にできない、 ただの伝達役の人はいらない we don’t need just a messenger who can’t create something from hearing           ...
ACTION!
ACTION!一般教養レベルをみんなが   持ってほしい       世界は分けてもわからない(福岡伸一/講談社現代新書)
ACTION!• デザイナーだけどプログラムで何ができるか 知っているから指摘や指示ができる Designers can point out and direct because they know what is able through p...
ACTION! 身のまわりのデザインを自分なりに分析することから    はじめよう
デザインをわからないデベロッパーのままで       いいのですか?
デザインをデザイナーまかせにして    いいのですか?
ありがとうございました   Thank you so much!!!        秋葉ちひろ        tommmmy
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Upcoming SlideShare
Loading in...5
×

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

133,488

Published on

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

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

Published in: Design
4 Comments
290 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
133,488
On Slideshare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
490
Comments
4
Likes
290
Embeds 0
No embeds

No notes for slide

Transcript of "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.

×