• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
 

細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ

on

  • 1,934 views

ーーーーーーーーーーーーーーーーーーーーーーー ...

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/290/room
ーーーーーーーーーーーーーーーーーーーーーーー

Statistics

Views

Total Views
1,934
Views on SlideShare
1,281
Embed Views
653

Actions

Likes
11
Downloads
0
Comments
0

4 Embeds 653

http://schoo.jp 615
http://www20437ui.sakura.ne.jp 33
http://design.schoo.jp 3
https://twitter.com 2

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…
Post Comment
Edit your comment

    細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ 細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ Presentation Transcript

    • 細かすぎて伝わらない 気配りデザインの極意 株式会社ツクロア 秋葉ちひろ 株式会社ツクロア 秋葉ちひろ
    • 株式会社ツクロア • Webサイト、スマートフォンアプリ • 設計∼デザイン∼表側の実装 • プロトタイプの作成 • デザインワークとコンサルティング
    • 気配りデザイン ?
    • ユーザー(=人)のことを考えた、 ほんのちょっとした小さな工夫のこと •デザイン上の工夫 •操作をした時の動き •画面遷移のしかた •言葉での表現方法 など
    • •気付かないぐらい自然! •とても細かい! •ほんとうに些細なこと
    • なぜ「気配り」? •アプリは、操作が必要 •小さな画面でいかに使いやすくなるか
    • なぜ「気配り」? •アプリは、操作が必要 •小さな画面でいかに使いやすくなるか アプリは、気配りのたまもの
    • べつに、設計者が やればいいじゃん
    • べつに、設計者が やればいいじゃん
    • •設計者だけが設計するのは、もう限界 •いろんな分野の人が、いろんな見解で 意見を出し合ってほしい!
    • 1 まず、気付くこと 2 理由を考えること
    • •すごーい •つかいやすーい •これいいね!
    • •すごーい •つかいやすーい •これいいね!
    • 抽象的なことばでは なく、ちゃんと人に 伝わるように言語化 しよう
    • 今日のアジェンダ 1. デザインによる気配りデザイン 2. 動きによる気配りデザイン 3. 機能による気配りデザイン
    • 1. デザインによる気配りデザイン デザインとは? 情報を整理して見やすくする
    • 1. デザインによる気配り 情報を整理して見やすくする •情報を、どうやって直感的に伝えられ るか •頭で考えなくても人間がパッとみてわ かりやすいようにするには
    • 1. デザインによる気配り 1 タイムラインや履歴表示での 時間を表示するとき
    • 20:30 治療履歴 秋葉 ちひろ 2013.11.26 32歳 1981.09.17 6回目 B7 金歯差込 2013.11.26 18:23 5回目 B7 仮歯 2013.11.24 15:54 4回目 B3 治療終了 2013.11.20 18:43 3回目 B3 虫歯治療、型取り 2013.10.09 18:34 2回目 クリーニング 2013.10.08 17:45 初回 初回カウンセリング 2013.10.07 18:34
    • 20:30 20:30 治療履歴 2013.11.26 秋葉 ちひろ 32歳 1981.09.17 6回目 B7 金歯差込 5回目 B7 仮歯 2013.11.26 18:23 治療履歴 秋葉 ちひろ 32歳 1981.09.17 6回目 B7 金歯差込 5回目 B7 仮歯 2013.11.20 18:43 3回目 B3 虫歯治療、型取り 2013.10.09 18:34 2回目 クリーニング 2013.10.08 17:45 2013.11.24 15:54 4回目 B3 治療終了 3回目 B3 虫歯治療、型 取り クリーニング 2013.10.07 18:34 初回 before 2013.11.26 18:23 2日前 2回目 初回カウンセリング 1時間前 2013.11.24 15:54 4回目 B3 治療終了 初回 2013.11.26 初回カウンセリン グ after 6日前 2013.11.20 18:43 1ヶ月前 2013.10.09 18:34 2ヶ月前 2013.09.25 17:45 2ヶ月前 2013.09.24 18:34
    • 20:30 20:30 治療履歴 秋葉 ちひろ 6回目 B7 金歯差込 5回目 B7 仮歯 2013.11.26 32歳 1981.09.17 2013.11.26 18:23 治療履歴 2013.11.26 秋葉 ちひろ 6回目 B7 金歯差込 5回目 B7 仮歯 32歳 1981.09.17 1時間前 2013.11.26 18:23 2013.11.24 15:54 2日前 • •1ヶ月以上前のものについては、だいた 4回目 B3 治療終了 2013.11.20 18:43 3回目 B3 虫歯治療、型取り 2013.10.09 18:34 2回目 クリーニング 2013.10.08 17:45 2013.11.24 15:54 今を起点に、何時間前、何日前かを計算 4回目 初回 初回カウンセリング B3 治療終了 3回目 2013.10.07 18:34 B3 虫歯治療、型 取り いの○ヶ月前というのを表示 2回目 初回 クリーニング 初回カウンセリン グ 6日前 2013.11.20 18:43 1ヶ月前 2013.10.09 18:34 2ヶ月前 2013.09.25 17:45 2ヶ月前 •それだけだとアバウトすぎるので、詳細 before な日時もわかるように表示するafter 2013.09.24 18:34
    • 1. デザインによる気配り 2 回数や時間の尺を 表示するとき
    • •所要時間 •金額 •乗換回数
    • •所要時間 •金額 •乗換回数
    • あなたならどうする? •所要時間 •金額 •乗換回数
    • 中河原→鎌倉 1時間33分 21:45 ¥1,010 楽 分倍河原 武蔵小杉 中河原 1時間31分 21:57 安 11月23日(土) 21:38出発 早 ¥1,010 安 大船 分倍河原 中河原 鎌倉 武蔵小杉 鎌倉 21:45 中河原 23:28 ¥1,200 1時間43分 府中 23:18 渋谷 明大前 武蔵小杉 鎌倉 23:28
    • 中河原→鎌倉 1時間33分 21:45 ¥1,010 楽 分倍河原 武蔵小杉 中河原 1時間31分 21:57 安 11月23日(土) 21:38出発 早 ¥1,010 安 大船 分倍河原 中河原 鎌倉 武蔵小杉 鎌倉 21:45 中河原 23:28 ¥1,200 1時間43分 府中 23:18 渋谷 明大前 武蔵小杉 鎌倉 23:28
    • 1. デザインによる気配り 3 アクションを予測させるとき
    • 動画
    • •左にちょっとはみ出して重なっているよ うに見えることで、 「右にスライドすると何かが出てくるの では?」 と思わせる →Google+
    • 1. デザインによる気配り 人間が見て、頭を使わなくても 直感的にわかる
    • 1. デザインによる気配り 人間が見て、頭を使わなくても 直感的にわかる • 頭を使わなくてもパッと見てわかるデザイン • 時間軸で情報が整理されたデザイン • 次のアクションを予測できるようなデザイン
    • 2. 動きによる気配りデザイン 気持ちのいい動きを考える
    • 2. 動きによる気配り 1 ギャラリーの写真の スライド表示方法
    • 動画
    • iPhone A
    • iPhone A A B
    • iPhone A A B B
    • Android (Nexus系) A
    • Android (Nexus系) A A B
    • Android (Nexus系) A A B B
    • スローモーション撮影
    • 2. 動きによる気配り 2 Google+での タイムラインの表示方法
    • 動画
    • iPhone
    • iPhone
    • iPhone
    • Android
    • Android
    • Android
    • 2. 動きによる気配り 気付かないけど重要な 遷移アニメーション • 完全な横スライドより、深度も利用したほう が気持ちよい場合もある • スローモーション撮影を利用しよう
    • 3. 機能による気配りデザイン アプリを使うときのことを 考える
    • 3. 機能による気配り 1 Google+で リンク(URL)を投稿するとき
    • 動画
    • 3. 機能による気配り 2 スマートフォンで カッコを入力するとき
    • 動画
    • 3. 機能による気配り 自然な流れで操作できるように
    • 3. 機能による気配り 自然な流れで操作できるように • 必ずそう使うと決まっているものは、自動で 処理できるようにする
    • 気配りデザイン 気配りデザインをすることによって、 使う人は気持よく使える
    • 気配りデザイン 気配りデザインをすることによって、 使う人は気持よく使える 頭をつかわなくても 自然につかえる
    • 気配りデザイン • 今日紹介したアプリは、ぜったいに使ってみ てください • iPhoneもAndroidも、使いこんでください
    • 質疑応答
    • 宿題 気配りデザインを見つけて その理由を言語化しよう。
    • 宿題の回答例1 スマホで写真を新しく撮ったあ とにFacebookを起動すると、 その写真が出てくる • 写真を新しく撮ったあとは、その写真をアップ ロードする可能性が高い • その写真をサジェストすることで、自然と「あ、 この写真アップしよう」と思い、写真をアップす る数が増える
    • 宿題の回答例1
    • 宿題の回答例2 駅の改札の中にATMがある • 電車を降りて改札を出るときに、チャージ金不足 だった • ふと財布を見るとお金がなかった • 駅が負担することを軽減させる
    • ありがとうございました 株式会社ツクロア 秋葉ちひろ 株式会社ツクロア 秋葉ちひろ