Tweet
Tweet

Slide 1

Slide 1 text

ご案内 h 写真撮影＆SNS投稿ウェルカw h 資料は共有しまq h 引用元、参考文献は右下のUR( h アーカイブ動画は後日 公式YouTubeチャンネルで公開予定
 （※NGの方は本日中にお申し出ください） YouTube アナログでもデジタルでも使える！
 わかりやすい情報の伝え方 6.9 19:00-20:30 2022 木 UX基礎コース 第 弾 3 UIデザイン 入門 無料

Slide 2

Slide 2 text

今日のゴール だいじなゴール 今この瞬間より もうちょっとだけ
 「UI」と「デザイン」がわかる
 （細かいことは気にせず楽しむ！） 欲ばりゴール（90分後の理想状態P e 身の回りの「BADUI」に気づけ e 「近接・整列・反復・コントラスト」を使って改善でき e 「UI/UX」って言わない

Slide 3

Slide 3 text

ワーク）このバナー　何が課題？どう改善する？ https://www.youtube.com/watch?v=cenVq00Ozr8 ？

Slide 4

Slide 4 text

渡部知代 2022.06.09 UIデザイン 入門 11-design

Slide 5

Slide 5 text

今日はどこの話？

Slide 6

Slide 6 text

肩書きと守備範囲ざっくりイメージ（例：デジタルサービス） リサーチ UXリサーチャー UXストラテジスト プロダクトマネージャ UXデザイナー ビジュアルデザイナー モーションデザイナー インタラクションデザイナー UXライター フロントエンドエンジニア バックエンドエンジニア インフラエンジニア リリース マーケター カスタマーサクセス 体験設計 具現化 デザイン 実装 運用 「ユーザーは何を求めている か？」問いに答えを出す人 「ちゃんと動いて使えるものに するには？」 提供可能な現実製品を作り込む人 「実際に活用してもらうには？」 世の中/ターゲットに届ける人 「設計意図を体現するには？」 詳細レベルの表現に翻訳する人 「どのように体験を実現するか？」 方針を設計図に落とし込む人 「どの体験を提供すべきか？」 戦略と方針を決める人 UXコンサル 「どんなコミュニケーション
 の実現でビジネス目的が達成
 できるか？」を導き出す人

Slide 7

Slide 7 text

リサーチ 解くべき課題、ユーザーニーズ の探索／仮説検証 体験設計 提供側とユーザー側の理想が両 立する最適な妥協点を探る 具現化 設計したUXの構想を具体的な 形のあるものにしていく UXの３領域

Slide 8

Slide 8 text

自己紹介 渡部 知代　 （わたなべ　 ともよ） 11-design UXコンサルタント 経歴： 日本語教育専攻→Hawaii（言語学）
 →SIer（SE）→NY（Flower Design）
 →コンサルファーム（UX）→SaaS（Chat） →独立 好物：枯露柿 ご支援実績（業種業態抜粋）：建築、医療、教 育、服飾、飲食、小売、BtoB、通信、自動車
 など 　 @moyoko922

Slide 9

Slide 9 text

Youは何しにUXへ？ システムエンジニア （要件をもとに システムを構築する人） 情シス部門 （システムの要件を決めて 発注する人） ユーザー （現場でシステムを使って 業務を遂行する人） 業務システム ① ? ?? ② ③ 「使いやすいシステム」って何？ ユーザを見ないとだめじゃん！！ UX超だいじじゃん！ Me

Slide 10

Slide 10 text

UIデザイン

Slide 11

Slide 11 text

本日 抽象度高め 時間短め

Slide 12

Slide 12 text

がんばれ

Slide 13

Slide 13 text

UIとは

Slide 14

Slide 14 text

UX（エクスペリエンス） と UI（インターフェース）

Slide 15

Slide 15 text

「すき焼き（コンテンツ）を、お箸（インターフェース）で、食べたら美味しかった（エクスペリエン ス）！」「よいエクスペリエンス（雑）」とは、「ユーザーの精神活動をポジティヴにしていくこと」 の積み重ね。 超わかる！ユーザーエクスペリエンス（雑） https://note.com/fladdict/n/n3fdcc5f6d9d4

Slide 16

Slide 16 text

美味しいすき焼きを、ストローで飲むと、火傷 する コンテンツの質、UIの質を問わ ず、TPOが不適切なら、UIの品 質は本質的な意味をなさない 不味い料理は、最高のお箸で食べても、不味い インターフェースがコンテンツ の質を覆せることは、稀 美味しいすき焼きと、素敵なお箸、でもお箸が 苦手なことも… あるユーザーにとって良いエク スペリエンスが、万人にとって も良いとは限らない コンテンツ・インターフェース・エクスペリエンス https://note.com/fladdict/n/n3fdcc5f6d9d4

Slide 17

Slide 17 text

「ユーザーが対象と関わりはじめてから、縁が切れるまで、脳内で発生した精神活動のすべて」。 喜怒哀楽、記憶、予見、思い出、偏見、判断、感触…これらはみんなエクスペリエンスの一部。ユー ザーの脳内で発生する精神活動。予想、妄想、偏見、感触、情動、判断、思い出、評価などはすべてエ クスペリエンス エクスペリエンスとは https://note.com/fladdict/n/n3fdcc5f6d9d4

Slide 18

Slide 18 text

インターフェースとは、セカイとユーザーの境界面。あなたの体験するあらゆるインプットとアウト プットは、全て何かしらのインターフェースを介して行われる。 お箸、マウス、ディスプレイ、ボタンは、すべてインターフェース。目や耳や手もインターフェース インターフェースとは https://note.com/fladdict/n/n3fdcc5f6d9d4

Slide 19

Slide 19 text

「iPhoneのエクスペリエンス」 （iPhoneにまつわる精神活動のすべて@ 6 iPhoneってよいらしい（伝聞@ 6 iPhone欲しい（欲望@ 6 iPhone買おうかな（迷い@ 6 iPhoneを開封するぞ！（期待@ 6 iPhoneサクサク動く（感触@ 6 iPhone楽しい（感情@ 6 iPhoneでこんなことした（エピソード@ 6 iPhoneスキ（総体評価@ 6 iPhoneで人生が変わった 「iPhoneのインターフェース」 （世界との境界面としてのiPhone@ 6 画面スクリー• 6 カメx 6 音量ボタ• 6 電源ボタン 例)iPhoneのエクスペリエンスとインターフェース https://note.com/fladdict/n/n3fdcc5f6d9d4

Slide 20

Slide 20 text

UXの扱う範囲は、知ってから忘れるまでの全ての体験。 UIはUXの中でも最も重要な「使う」という領域を担っている。 UXの中の「使う」を担うUI 『UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるために』（2022）

Slide 21

Slide 21 text

ドヤれるやつ伝授

Slide 22

Slide 22 text

ちまたではUI/UXとセットで表現されることも多いのですが…「UI/UX」という表記は、「お箸/美味し い」と同じぐらいトンチンカンです。使わないようにしましょう。 「UI/UX」という言い方はやめて https://note.com/fladdict/n/n3fdcc5f6d9d4

Slide 23

Slide 23 text

デザインとは

Slide 24

Slide 24 text

あるある勘違い「デザインってこういうのでしょ」 パリコレ衝撃画像まとめ～もはや仮装大会～　https://www.pinterest.jp/pin/597571444293960519/

Slide 25

Slide 25 text

一般的に「デザイン」から想起されやすいイメージの例 見た目の美しさや カッコ良さの追求 美術・芸術の世界 アーティスト・クリエイター センスが必要 自分にはできない あるある勘違い「デザインってこういうのでしょ」

Slide 26

Slide 26 text

待て待て そうじゃない

Slide 27

Slide 27 text

ドアノブの課題解決デザインの変遷 片手で握って開ける 手・肘・モノで開ける 手のひらを使わずに開ける デザインとは課題解決（機能） https://gigazine.net/news/20200327-hands-free-door-opener/

Slide 28

Slide 28 text

忘れ物の課題解決「絶対に忘れ物をさせないトイレ」 一見すると、取っ手部分が少し大きい鍵だ が、閉めるために反転させると小物を置くた めのトレイに変身。スマートフォンや小銭入 れなど1キロまでの小物を置くことができ、す ぐに滑って落ちないように縁取りもされてい る。さらに、鍵を開ける際には置いた物を取 る必要があり、強制的に忘れ物をさせない仕 組みになっている。 NEXCO東日本北海道支社によると、高速道路 のSA・PAにはトイレの個室に多数の忘れ物が あり、その約6割がスマートフォンや財布など の小物だったという。 事例）課題解決デザイン　トイレの内鍵 https://twitter.com/picco_lo_/status/1028588996987772930?s=20&t=zhZKM_8k5t9BgULAX2JJ4w https://www.ick.co.jp/kenso/lost_property_tray.html https://news.biglobe.ne.jp/domestic/0814/blnews_180814_5502975380.html

Slide 29

Slide 29 text

プチワーク）ドアのデザイン 『Design Rule Index 要点で学ぶ、デザインの法則150』 ？

Slide 30

Slide 30 text

プチワーク）ドアのデザイン改善案 『Design Rule Index 要点で学ぶ、デザインの法則150』 アフォーダンスとは製品や環境に関わる物理的 特徴のこと。それらは、その機能や使い方に影 響を及ぼす。 望ましいアフォーダンスを持つ製品や環境は、 有効に機能し、ユーザーが直感的に使いこなせ る。 左側のドアは押さなければ開かないが、それは レバーが示す「引く」というアフォーダンスと 食い違う。「PUSH」という標示板はあるが、 これを人々が読むのは大抵、レバーを引っ張っ た後なので、あまり役に立たない。 レバーをただの平らなプレートに取り替えれ ば、この食い違いは解消され、標示板は不要に なる。プレートの持つ「PUSH」というア フォーダンスは、間違いや混乱を引き起こしに くい。

Slide 31

Slide 31 text

デザインとアート

Slide 32

Slide 32 text

デザインとアートの違い「行為の目的は何か」 https://xtech.nikkei.com/atcl/nxt/column/18/00787/052700001/ アートは「行うこと」そのも の、つまり「表現する行為自 体」が目的です。 　出来上がった作品が、他者か ら見て理解が難しくても、人に よって感じる価値が違っても、 問題ありません。作者が表現し たいことが表現できていれば、 目的を果たしているのです。 デザインは「何かを行う」こと が目的ではなく、「目標とする 何かが出来上がること」が目的 です。デザインした結果が「始 めに設定された目標」を満たし ていなければ、デザインの目的 は果たせていないことになりま す。

Slide 33

Slide 33 text

デザインとアートの違い https://blog.btrax.com/jp/designer-artist/

Slide 34

Slide 34 text

SEDAモデル 問題解決／問題提起 × 機能的価値/意味的価値 https://president.jp/articles/-/22316?page=2

Slide 35

Slide 35 text

・・・

Slide 36

Slide 36 text

わかってる

Slide 37

Slide 37 text

デザインの敗北 BADUI

Slide 38

Slide 38 text

「デザインの敗北」 伝えたい情報を簡素化し、目で何かを見た時に、 対象物やその対象物がもつ意味合いについて、瞬 間的に理解させる為のデザインのはずが、テプラ 等を貼られて情報を補足されてしまっている事を 指します。 恐らく、遡ると以下のツイートがきっかけで広 がったようです。（2017年1月23日） ※このタイミング以前からも「デザインの敗 北」というキーワード利用の形跡はありますが、 認知が広がったのはこのツイートの模様です。 「デザインの敗北」とは https://quartet-communications.com/info/topics/62463#:~:text=%E3%80%8C%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E6%95%97%E5%8C%97%E3%80%8D%E3%81%A8%E3%81%84%E3%81%86%E8%A8%80%E8%91%89, %E3%81%84%E3%82%8B%E4%BA%8B%E3%82%92%E6%8C%87%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

Slide 39

Slide 39 text

デザインの敗北事例 https://note.com/kaji_webmaster/n/nfcab8996c744

Slide 40

Slide 40 text

わかりにくいUIデザイン事例 https://twitter.com/i/events/823860969143009280?s=20

Slide 41

Slide 41 text

事例）LOFTのフロアガイド https://nlab.itmedia.co.jp/nl/articles/1801/24/news120.html https://twitter.com/ro_ki_/status/953915189006540800?s=20&t=mWnUOQbkIcUv5itYDB46Wg https://www.sogo-seibu.jp/shibuya/floor_guide/index_l.html https://www.loft.co.jp/kotokiji/detail.php?id=193893 https://twitter.com/kokubucamera/status/1124968433869680640?s=20&t=DQ54WfPz-tFVWHluY7Nk4g ロフト渋谷店のフロアガイド

Slide 42

Slide 42 text

プロダクトデザイナー じゃないし 看板とか作らないし？

Slide 43

Slide 43 text

他人事じゃない

Slide 44

Slide 44 text

心当たりない？ https://salary-man.tokyo/289/ https://www.city.kodaira.tokyo.jp/kurashi/files/81997/081997/att_0000001.pdf

Slide 45

Slide 45 text

デザインに関する教育を全く受けたことのない 人たちでも 「書類を作成する」「案内板やゴミ箱を設置す る」「本棚を整理する」は経験がある。 すべて「ユーザーインターフェースの作成」。 利用する人のことを少しでも気に留め「こうし た方がわかりやすいかな？」「こうしたら間違 いは減るかな？」と考え、自問自答しつつ試行 錯誤した経験はUIデザインの経験。 誰でもUIをデザインしている https://twitter.com/picco_lo_/status/1028588996987772930?s=20&t=zhZKM_8k5t9BgULAX2JJ4w https://www.ick.co.jp/kenso/lost_property_tray.html https://news.biglobe.ne.jp/domestic/0814/blnews_180814_5502975380.html

Slide 46

Slide 46 text

そんなこと言われても まだデザインって よくわかんないし…

Slide 47

Slide 47 text

今宵 4つの武器を授ける

Slide 48

Slide 48 text

世界を見る目が変わる

Slide 49

Slide 49 text

覚悟はいいか？

Slide 50

Slide 50 text

デザインの４大原則 近接・整列・反復
 ・コントラスト

Slide 51

Slide 51 text

近接 関係するやつは近づけろ https://umuco.jp/design-4/

Slide 52

Slide 52 text

このメニュー、どう？ 悪い例）近接 https://bulan.co/swings/design4principals/

Slide 53

Slide 53 text

人は位置的に近いものを「関係があるもの」と認識する習性がある。イラストと情報の位置関係で整理 改善例）近接 https://bulan.co/swings/design4principals/

Slide 54

Slide 54 text

Before → After）近接 https://bulan.co/swings/design4principals/

Slide 55

Slide 55 text

AHA！ アハ体験（ドイツ語: Aha-Erlebnis）とは、ドイツの心理学者カール・ビューラー（英語版）が提唱した心理学上の概念で、未知の物事に関する知覚関係を瞬間的に認識する事を指している https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%8F%E4%BD%93%E9%A8%93

Slide 56

Slide 56 text

整列 意識的に揃えろ https://umuco.jp/design-4/

Slide 57

Slide 57 text

この名刺、どう？ 悪い例）整列 https://bulan.co/swings/design4principals/

Slide 58

Slide 58 text

左右のでこぼこの余白による不揃いな印象が「見えない線」を感じることで、画面がスッキリ。 改善例）整列 https://bulan.co/swings/design4principals/

Slide 59

Slide 59 text

Before → After）整列 https://bulan.co/swings/design4principals/

Slide 60

Slide 60 text

AHA2！ アハ体験（ドイツ語: Aha-Erlebnis）とは、ドイツの心理学者カール・ビューラー（英語版）が提唱した心理学上の概念で、未知の物事に関する知覚関係を瞬間的に認識する事を指している https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%8F%E4%BD%93%E9%A8%93

Slide 61

Slide 61 text

反復 規則的に繰り返せ https://umuco.jp/design-4/

Slide 62

Slide 62 text

この資料、どう？ 悪い例）反復 https://umuco.jp/design-4/

Slide 63

Slide 63 text

色、書体、配置、揃え方、文字量などを反復して一貫性を出してリズムを作る 改善例）反復 https://umuco.jp/design-4/

Slide 64

Slide 64 text

Before → After）反復 https://umuco.jp/design-4/

Slide 65

Slide 65 text

AHA3！ アハ体験（ドイツ語: Aha-Erlebnis）とは、ドイツの心理学者カール・ビューラー（英語版）が提唱した心理学上の概念で、未知の物事に関する知覚関係を瞬間的に認識する事を指している https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%8F%E4%BD%93%E9%A8%93

Slide 66

Slide 66 text

コントラスト 要点は強調しろ https://umuco.jp/design-4/ 対比・強弱

Slide 67

Slide 67 text

このバナー、どう？ 悪い例）コントラスト https://bulan.co/swings/design4principals/

Slide 68

Slide 68 text

要素を分解し、それぞれに優先順位をつけます。そして強弱を意識し、違うものは思いっきり違わせる 改善例）コントラスト https://bulan.co/swings/design4principals/

Slide 69

Slide 69 text

Before → After）コントラスト https://bulan.co/swings/design4principals/

Slide 70

Slide 70 text

AHA4！ アハ体験（ドイツ語: Aha-Erlebnis）とは、ドイツの心理学者カール・ビューラー（英語版）が提唱した心理学上の概念で、未知の物事に関する知覚関係を瞬間的に認識する事を指している https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%8F%E4%BD%93%E9%A8%93

Slide 71

Slide 71 text

さて、準備は整った

Slide 72

Slide 72 text

行くぜ

Slide 73

Slide 73 text

好きだろ？ ワーク

Slide 74

Slide 74 text

ワーク）このバナー　何が課題？どう改善する？ https://www.youtube.com/watch?v=cenVq00Ozr8 ？

Slide 75

Slide 75 text

ワークシート）バナーの課題分析・改善案デザイン https://docs.google.com/spreadsheets/d/1dzXJfHhr7qSEOHWl5Q6lOpxJ-h6U73qIadoyXawrt_k/edit?usp=sharing

Slide 76

Slide 76 text

https://timer.onl.jp/

Slide 77

Slide 77 text

できた？

Slide 78

Slide 78 text

み・せ・ろ・よ♡

Slide 79

Slide 79 text

お手本

Slide 80

Slide 80 text

Before→After）プロデザイナーのバナー改善案 https://www.youtube.com/watch?v=cenVq00Ozr8

Slide 81

Slide 81 text

改善プロセス：要素の取り出し＞整理＆強調 【デザインの基本】構造整理 | 情報の"優先度"と"グループ"整理で9割決まります【作る前が大事】 https://www.youtube.com/watch?v=cenVq00Ozr8

Slide 82

Slide 82 text

俺のも見せろって？

Slide 83

Slide 83 text

トクベツだぞ♡

Slide 84

Slide 84 text

私のバナー改善案 https://www.youtube.com/watch?v=cenVq00Ozr8

Slide 85

Slide 85 text

文字もデザインの一部

Slide 86

Slide 86 text

文字のないアカウント作成画面 KOTOBA UX https://www.kotobaux.com/

Slide 87

Slide 87 text

文字のデザインと読解順序 https://twitter.com/TaRoS_physics/status/1479822142212808704?s=20&t=gwFmeNC4A7rB5ZsfEWlvkw

Slide 88

Slide 88 text

文字情報のデザインから始めよう https://www.amazon.co.jp/%E3%83%8E%E3%83%B3%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%82%BA%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%96%E3%83%83%E3%82%AF- %E7%AC%AC4%E7%89%88-Robin-Williams/dp/4839955557 伝わるプレゼン資料、わかりやすいメニュー、視認性の高い看板etc...

Slide 89

Slide 89 text

もう少しデザインを
 勉強するなら

Slide 90

Slide 90 text

デザイナーでない人のための デザインの定番基本書 超定番『ノンデザイナーズ・デザインブック 』 『ノンデザイナーズ・デザインブック』

Slide 91

Slide 91 text

まとめ

Slide 92

Slide 92 text

Q UI（インターフェース）とは、セカイとユー ザーの境界1 Q UXの中でも「使う」の領域を担W Q デザインとは、課題解決を目的とした工 Q デザインの4大原則は「近接・整列・反復・コ ントラスト」 UIデザイン まとめ

Slide 93

Slide 93 text

11-design UXコンサルティング ご支援形式 セミナー/勉強会のカスタム企画・講演 トレーニング・/内製化ご支援 UX研修・人材育成 リサーチ/体験設計/UI(WF)デザイン （業務委託） UXプロジェクト 定期UXアドバイザ 月1回程度の個別コンサル カスタム情報キュレーションサービス

Slide 94

Slide 94 text

UXでウェブマーケや、サービス品質・顧客満足 度の向上を実現した国内事例集 おすすめの厳選UX書籍が無料で閲覧できる UXライブラリー CROSS BEのUXコーナーをご活用ください 〒400-0031　 山梨県甲府市丸の内2-2-1　 CROSS500 1F （甲府駅南口徒歩3分　 甲府昭和I.C から車で15分） TEL　 055-244-2837 https://crossbe.co.jp/

Slide 95

Slide 95 text

アンケートでぜひ感想をお聞かせください アンケート
 フォーム

Slide 96

Slide 96 text

資料（PDF）のダウンロードはこちら スライドPDF 格納フォルダ

Slide 97

Slide 97 text

Youtube：本日＆過去のセミナー動画 チャンネル登録・いいねありがと https://www.youtube.com/channel/UC9QOcKTTo1nqAHGHcZtQkFw

Slide 98

Slide 98 text

Twitter：セミナー関連情報・UXネタのつぶやき フォロー・RT・いいねありがと

Slide 99

Slide 99 text

次回 8/4 再会だぜ

Slide 100

Slide 100 text

Coming Soon...

Slide 101

Slide 101 text

ありがとう
 ございました