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

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

on

  • 117,957 views

デブサミ2013(Developers Summit 2013)Action! ...

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

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

Statistics

Views

Total Views
117,957
Views on SlideShare
27,478
Embed Views
90,479

Actions

Likes
269
Downloads
438
Comments
4

55 Embeds 90,479

http://creive.me 77349
http://webcre8.jp 5027
http://bikkuri.me 2292
http://daipresents.com 1828
http://www.susi-paku.com 1139
http://d.hatena.ne.jp 449
http://trident-com.net 348
https://twitter.com 295
http://cloud.feedly.com 230
http://event.shoeisha.jp 218
http://blogger.tempus.org 209
http://select-aster.com 184
http://a-hum.unoke.pfu.co.jp 178
http://designers-hack.net 172
http://namihira.hatenablog.com 117
http://halfway.hateblo.jp 113
http://nomadarian.com 90
http://isaomatsunami.blogspot.jp 33
http://be-de.tumblr.com 28
http://hemisophia.com 20
http://www.feedspot.com 19
http://isaomatsunami.blogspot.com 18
http://susi-paku.com 11
https://www.google.co.jp 9
http://www20437ui.sakura.ne.jp 9
http://reader.aol.com 8
http://www.google.co.jp 8
http://webcache.googleusercontent.com 8
http://intra.iwest.in.infocom.co.jp 7
http://tweetedtimes.com 6
http://digg.com 6
http://9045604675826371170_b61f6a8b14a9a2319f1fd5160a9fe9c1d58861bc.blogspot.com 6
http://edit.optimizely.com 6
http://fullrss.net 5
http://hatebutv.com 5
http://s.deeeki.com 4
http://www.pinterest.com 3
http://www.tumblr.com 2
https://cybozulive.com 2
http://uedajirou.6.ql.bz 2
http://pinterest.com 2
http://localhost 1
http://twitter.com 1
http://translate.googleusercontent.com 1
http://tabunmuri.hatenablog.com 1
https://www.facebook.com 1
https://www.chatwork.com 1
http://www.inoreader.com 1
http://isaomatsunami.blogspot.ru 1
https://www.google.nl 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

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

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

  • デザインを考えるときにデザイナーが考えること ∼デザイナーの頭の中∼ 秋葉ちひろ(@tommmmy)
  • とにかくデザイナーが必要! You need designer!?
  • とにかくデザイナーが必要! You need designer!?必要なデザイナーにリーチできていますか? うまく協業できていますか? Can you reach appropriate designer? Do you cooperate with them?
  • 秋葉ちひろ Baidu Japan Inc デザイナー / アートディレクター• Web制作関連• Androidアプリ制作関連
  • 日本語入力キーボード Simeji Japanese Input Method Editor Simeji Simeji
  • Android App Designs 勉強会デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips Design XML Android App Designsについて ¦ Android App Designs
  • 約 65 名 約 80 名 約 60 名 約 90 名 Android App Designsについて ¦ Android App Designs
  • デザイナーズハック「技術にしばられないでデザインを 考えていく」コミュニティ デザイナーズハック
  • こんな印象ないですか? 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 about programs.
  • そういう傾向はある かも 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’s birthday!• アリバイの録音に Let’s record environmental sounds as alibi
  • コンセプトメイキング 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 elements
  • 画面の設計 architect of designコミュニケーション Communication
  • 画面の設計 architect of designコミュニケーション Communicationインターフェイスはユーザーとの接点 interface is a point between users and app
  • ここ押して!
  • ここをひっぱって!
  • 横にスクロール するよ!
  • とにかくシンプルに 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• 写真/イラストの表現 Photos / Illustration
  • カンペ・リモート
  • 文字入力・表示タイマー関連文字入力・表示
  • 文字入力・表示タイマー関連文字入力・表示
  • 文字入力・表示タイマー関連
  • 文字入力・表示タイマー関連
  • デザイン・実装 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 because he has prickles
  • 凹んでいるように見える Signifierノコノコは踏めるがトゲゾーは踏めない トゲがあるからwe can step on NOKONOKO, but can’t on TOGEZO because he has prickles
  • デザイン・実装 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 I only think about to xxxxxx design when coding
  • コードで表現できるのか how to express design by code• 画像で書きだすか、コードで表現するか Publish as images or express with source code
  • 画像で書きだす場合publishing as images コードで表現できない 高い画面密度に耐えられ 複雑なグラフィックを ない 再現できる can not proof against high density express complicated graphics which are not expressed by code 縦横比に注意が必要 should pay attention to aspect rate
  • 画像で書きだす場合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
  • コードで表現する場合express with source code 高い画面密度でもOK 複雑なグラフィックが no problem in high density 表現できない decive can not express complicated graphics
  • •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 - おおげさなのがよい場合(ゲーム) 気持ちよさを追求する in the case exaggeratedly (ex. games) - 多すぎないほうがよい場合(ツールなど) how to comfort users in the case not too much (ex. tools)アニメーション・トランジション・サウンド animation & transition &sounds
  • 動きと音に力を入れたスマホ 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 important- ガテン系 / ブランド好き / 車好き Outdoor / Brands / Carsクライアント ディレクター
  • いちばん最悪なケース It’s the worst caseとりあえず何パターンか 作ってみてよ Anyway, could you please design some petters?クライアント ディレクター
  • 最悪なケース bad case• お客さんこう言ってるからこうしてくれない? “Please modify as the client says”• お客さんのメールをそのまま転送してくる Director forwards email from the client.クライアント ディレクター
  • クライアント ディレクター デザイナー
  • みんなが知っておくといい一般教養 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
  • 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歳のときに知っておきたかったこと スタンフォード大学集中講義(ティナ・シーリグ)
  • 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歳のときに知っておきたかったこと スタンフォード大学集中講義(ティナ・シーリグ)
  • 「デザイナー」の定義 What’s the definition of “Designer?”
  • 「デザイナー」の定義は? What’s the definition of “Designer?” Graphic Designer Interface Developer Logic
  • 「デザイナー」の定義は? •みんながそれぞれの役割を持っている 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
  • いいプロダクトができる条件 the condition to create fantastic product巻き寿司チーム Makizushi team
  • 巻き寿司チーム Makizushi team
  • 巻き寿司チーム Makizushi team 具材:プレイヤー ごはん:共通認識 のり:クライアント
  • 巻き寿司チーム• みんながそれぞれの役割を持っている Makizushi team Each member has own role• ベースの知識(一般教養)が共通してある 具材:プレイヤー Each member has basic general knowledge• 共通の認識(アプリの世界観とコンセプト) ごはん:共通認識 Common acknowledge (App’s philosophy and concept) のり:クライアント
  • • アプリやサービスを作る上で 要望を形にできない、 ただの伝達役の人はいらない 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 program• エンジニアだけどデザインの最低限のTipsは一般教養レベルをみんなが 知っているから指摘や指示ができる 持ってほしい Engineers can point out and direct because they know the basic tips of design
  • ACTION! 身のまわりのデザインを自分なりに分析することから はじめよう
  • デザインをわからないデベロッパーのままで いいのですか?
  • デザインをデザイナーまかせにして いいのですか?
  • ありがとうございました Thank you so much!!! 秋葉ちひろ tommmmy