• Save
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,033 views

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

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

Statistics

Views

Total Views
2,033
Views on SlideShare
1,380
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がある • 電車を降りて改札を出るときに、チャージ金不足 だった • ふと財布を見るとお金がなかった • 駅が負担することを軽減させる
  • ありがとうございました 株式会社ツクロア 秋葉ちひろ 株式会社ツクロア 秋葉ちひろ