「UIデザイン」入門セミナー

・UIとは
・デザインとは
・デザインの敗北・BADUI
・デザインの4原則（近接・整列・反復・コントラスト）
・ワークショップ（バナー改善）
・まとめ
　- UI（インターフェース）とは、セカイとユーザーの境界面
　- UXの中でも「使う」の領域を担う
　- デザインとは、課題解決を目的とした工夫
　- デザインの4大原則は「近接・整列・反復・コントラスト」

動画
https://youtu.be/JX_HfzqMLuM

Transcript

1. ご案内 h 写真撮影＆SNS投稿ウェルカw h 資料は共有しまq h 引用元、参考文献は右下のUR( h アーカイブ動画は後日 公式YouTubeチャンネルで公開予定
 （※NGの方は本日中にお申し出ください） YouTube アナログでもデジタルでも使える！
 わかりやすい情報の伝え方 6.9 19:00-20:30 2022 木 UX基礎コース 第 弾 3 UIデザイン 入門 無料
2. 今日のゴール だいじなゴール 今この瞬間より もうちょっとだけ
 「UI」と「デザイン」がわかる
 （細かいことは気にせず楽しむ！） 欲ばりゴール（90分後の理想状態P e 身の回りの「BADUI」に気づけ e 「近接・整列・反復・コントラスト」を使って改善でき e 「UI/UX」って言わない
3. ワーク）このバナー　何が課題？どう改善する？ https://www.youtube.com/watch?v=cenVq00Ozr8 ？
4. 渡部知代 2022.06.09 UIデザイン 入門 11-design
5. 今日はどこの話？
6. 肩書きと守備範囲ざっくりイメージ（例：デジタルサービス） リサーチ UXリサーチャー UXストラテジスト プロダクトマネージャ UXデザイナー ビジュアルデザイナー モーションデザイナー インタラクションデザイナー UXライター フロントエンドエンジニア バックエンドエンジニア インフラエンジニア リリース マーケター カスタマーサクセス 体験設計 具現化 デザイン 実装 運用 「ユーザーは何を求めている か？」問いに答えを出す人 「ちゃんと動いて使えるものに するには？」 提供可能な現実製品を作り込む人 「実際に活用してもらうには？」 世の中/ターゲットに届ける人 「設計意図を体現するには？」 詳細レベルの表現に翻訳する人 「どのように体験を実現するか？」 方針を設計図に落とし込む人 「どの体験を提供すべきか？」 戦略と方針を決める人 UXコンサル 「どんなコミュニケーション
 の実現でビジネス目的が達成
 できるか？」を導き出す人
7. リサーチ 解くべき課題、ユーザーニーズ の探索／仮説検証 体験設計 提供側とユーザー側の理想が両 立する最適な妥協点を探る 具現化 設計したUXの構想を具体的な 形のあるものにしていく UXの３領域
8. 自己紹介 渡部 知代　 （わたなべ　 ともよ） 11-design UXコンサルタント 経歴： 日本語教育専攻→Hawaii（言語学）
 →SIer（SE）→NY（Flower Design）
 →コンサルファーム（UX）→SaaS（Chat） →独立 好物：枯露柿 ご支援実績（業種業態抜粋）：建築、医療、教 育、服飾、飲食、小売、BtoB、通信、自動車
 など 　 @moyoko922
9. Youは何しにUXへ？ システムエンジニア （要件をもとに システムを構築する人） 情シス部門 （システムの要件を決めて 発注する人） ユーザー （現場でシステムを使って 業務を遂行する人） 業務システム ① ? ?? ② ③ 「使いやすいシステム」って何？ ユーザを見ないとだめじゃん！！ UX超だいじじゃん！ Me
10. UIデザイン
11. 本日 抽象度高め 時間短め
12. がんばれ
13. UIとは
14. UX（エクスペリエンス） と UI（インターフェース）
15. 「すき焼き（コンテンツ）を、お箸（インターフェース）で、食べたら美味しかった（エクスペリエン ス）！」「よいエクスペリエンス（雑）」とは、「ユーザーの精神活動をポジティヴにしていくこと」 の積み重ね。 超わかる！ユーザーエクスペリエンス（雑） https://note.com/fladdict/n/n3fdcc5f6d9d4
16. 美味しいすき焼きを、ストローで飲むと、火傷 する コンテンツの質、UIの質を問わ ず、TPOが不適切なら、UIの品 質は本質的な意味をなさない 不味い料理は、最高のお箸で食べても、不味い インターフェースがコンテンツ の質を覆せることは、稀 美味しいすき焼きと、素敵なお箸、でもお箸が 苦手なことも… あるユーザーにとって良いエク スペリエンスが、万人にとって も良いとは限らない コンテンツ・インターフェース・エクスペリエンス https://note.com/fladdict/n/n3fdcc5f6d9d4
17. 「ユーザーが対象と関わりはじめてから、縁が切れるまで、脳内で発生した精神活動のすべて」。 喜怒哀楽、記憶、予見、思い出、偏見、判断、感触…これらはみんなエクスペリエンスの一部。ユー ザーの脳内で発生する精神活動。予想、妄想、偏見、感触、情動、判断、思い出、評価などはすべてエ クスペリエンス エクスペリエンスとは https://note.com/fladdict/n/n3fdcc5f6d9d4
18. インターフェースとは、セカイとユーザーの境界面。あなたの体験するあらゆるインプットとアウト プットは、全て何かしらのインターフェースを介して行われる。 お箸、マウス、ディスプレイ、ボタンは、すべてインターフェース。目や耳や手もインターフェース インターフェースとは https://note.com/fladdict/n/n3fdcc5f6d9d4
19. 「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
20. UXの扱う範囲は、知ってから忘れるまでの全ての体験。 UIはUXの中でも最も重要な「使う」という領域を担っている。 UXの中の「使う」を担うUI 『UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるために』（2022）
21. ドヤれるやつ伝授
22. ちまたではUI/UXとセットで表現されることも多いのですが…「UI/UX」という表記は、「お箸/美味し い」と同じぐらいトンチンカンです。使わないようにしましょう。 「UI/UX」という言い方はやめて https://note.com/fladdict/n/n3fdcc5f6d9d4
23. デザインとは
24. あるある勘違い「デザインってこういうのでしょ」 パリコレ衝撃画像まとめ～もはや仮装大会～　https://www.pinterest.jp/pin/597571444293960519/
25. 一般的に「デザイン」から想起されやすいイメージの例 見た目の美しさや カッコ良さの追求 美術・芸術の世界 アーティスト・クリエイター センスが必要 自分にはできない あるある勘違い「デザインってこういうのでしょ」
26. 待て待て そうじゃない
27. ドアノブの課題解決デザインの変遷 片手で握って開ける 手・肘・モノで開ける 手のひらを使わずに開ける デザインとは課題解決（機能） https://gigazine.net/news/20200327-hands-free-door-opener/
28. 忘れ物の課題解決「絶対に忘れ物をさせないトイレ」 一見すると、取っ手部分が少し大きい鍵だ が、閉めるために反転させると小物を置くた めのトレイに変身。スマートフォンや小銭入 れなど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
29. プチワーク）ドアのデザイン 『Design Rule Index 要点で学ぶ、デザインの法則150』 ？
30. プチワーク）ドアのデザイン改善案 『Design Rule Index 要点で学ぶ、デザインの法則150』 アフォーダンスとは製品や環境に関わる物理的 特徴のこと。それらは、その機能や使い方に影 響を及ぼす。 望ましいアフォーダンスを持つ製品や環境は、 有効に機能し、ユーザーが直感的に使いこなせ る。 左側のドアは押さなければ開かないが、それは レバーが示す「引く」というアフォーダンスと 食い違う。「PUSH」という標示板はあるが、 これを人々が読むのは大抵、レバーを引っ張っ た後なので、あまり役に立たない。 レバーをただの平らなプレートに取り替えれ ば、この食い違いは解消され、標示板は不要に なる。プレートの持つ「PUSH」というア フォーダンスは、間違いや混乱を引き起こしに くい。
31. デザインとアート
32. デザインとアートの違い「行為の目的は何か」 https://xtech.nikkei.com/atcl/nxt/column/18/00787/052700001/ アートは「行うこと」そのも の、つまり「表現する行為自 体」が目的です。 　出来上がった作品が、他者か ら見て理解が難しくても、人に よって感じる価値が違っても、 問題ありません。作者が表現し たいことが表現できていれば、 目的を果たしているのです。 デザインは「何かを行う」こと が目的ではなく、「目標とする 何かが出来上がること」が目的 です。デザインした結果が「始 めに設定された目標」を満たし ていなければ、デザインの目的 は果たせていないことになりま す。
33. デザインとアートの違い https://blog.btrax.com/jp/designer-artist/
34. SEDAモデル 問題解決／問題提起 × 機能的価値/意味的価値 https://president.jp/articles/-/22316?page=2
35. ・・・
36. わかってる
37. デザインの敗北 BADUI
38. 「デザインの敗北」 伝えたい情報を簡素化し、目で何かを見た時に、 対象物やその対象物がもつ意味合いについて、瞬 間的に理解させる為のデザインのはずが、テプラ 等を貼られて情報を補足されてしまっている事を 指します。 恐らく、遡ると以下のツイートがきっかけで広 がったようです。（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
39. デザインの敗北事例 https://note.com/kaji_webmaster/n/nfcab8996c744
40. わかりにくいUIデザイン事例 https://twitter.com/i/events/823860969143009280?s=20
41. 事例）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 ロフト渋谷店のフロアガイド
42. プロダクトデザイナー じゃないし 看板とか作らないし？
43. 他人事じゃない
44. 心当たりない？ https://salary-man.tokyo/289/ https://www.city.kodaira.tokyo.jp/kurashi/files/81997/081997/att_0000001.pdf
45. デザインに関する教育を全く受けたことのない 人たちでも 「書類を作成する」「案内板やゴミ箱を設置す る」「本棚を整理する」は経験がある。 すべて「ユーザーインターフェースの作成」。 利用する人のことを少しでも気に留め「こうし た方がわかりやすいかな？」「こうしたら間違 いは減るかな？」と考え、自問自答しつつ試行 錯誤した経験は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
46. そんなこと言われても まだデザインって よくわかんないし…
47. 今宵 4つの武器を授ける
48. 世界を見る目が変わる
49. 覚悟はいいか？
50. デザインの４大原則 近接・整列・反復
 ・コントラスト
51. 近接 関係するやつは近づけろ https://umuco.jp/design-4/
52. このメニュー、どう？ 悪い例）近接 https://bulan.co/swings/design4principals/
53. 人は位置的に近いものを「関係があるもの」と認識する習性がある。イラストと情報の位置関係で整理 改善例）近接 https://bulan.co/swings/design4principals/
54. Before → After）近接 https://bulan.co/swings/design4principals/
55. AHA！ アハ体験（ドイツ語: Aha-Erlebnis）とは、ドイツの心理学者カール・ビューラー（英語版）が提唱した心理学上の概念で、未知の物事に関する知覚関係を瞬間的に認識する事を指している https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%8F%E4%BD%93%E9%A8%93
56. 整列 意識的に揃えろ https://umuco.jp/design-4/
57. この名刺、どう？ 悪い例）整列 https://bulan.co/swings/design4principals/
58. 左右のでこぼこの余白による不揃いな印象が「見えない線」を感じることで、画面がスッキリ。 改善例）整列 https://bulan.co/swings/design4principals/
59. Before → After）整列 https://bulan.co/swings/design4principals/
60. AHA2！ アハ体験（ドイツ語: Aha-Erlebnis）とは、ドイツの心理学者カール・ビューラー（英語版）が提唱した心理学上の概念で、未知の物事に関する知覚関係を瞬間的に認識する事を指している https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%8F%E4%BD%93%E9%A8%93
61. 反復 規則的に繰り返せ https://umuco.jp/design-4/
62. この資料、どう？ 悪い例）反復 https://umuco.jp/design-4/
63. 色、書体、配置、揃え方、文字量などを反復して一貫性を出してリズムを作る 改善例）反復 https://umuco.jp/design-4/
64. Before → After）反復 https://umuco.jp/design-4/
65. AHA3！ アハ体験（ドイツ語: Aha-Erlebnis）とは、ドイツの心理学者カール・ビューラー（英語版）が提唱した心理学上の概念で、未知の物事に関する知覚関係を瞬間的に認識する事を指している https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%8F%E4%BD%93%E9%A8%93
66. コントラスト 要点は強調しろ https://umuco.jp/design-4/ 対比・強弱
67. このバナー、どう？ 悪い例）コントラスト https://bulan.co/swings/design4principals/
68. 要素を分解し、それぞれに優先順位をつけます。そして強弱を意識し、違うものは思いっきり違わせる 改善例）コントラスト https://bulan.co/swings/design4principals/
69. Before → After）コントラスト https://bulan.co/swings/design4principals/
70. AHA4！ アハ体験（ドイツ語: Aha-Erlebnis）とは、ドイツの心理学者カール・ビューラー（英語版）が提唱した心理学上の概念で、未知の物事に関する知覚関係を瞬間的に認識する事を指している https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%8F%E4%BD%93%E9%A8%93
71. さて、準備は整った
72. 行くぜ
73. 好きだろ？ ワーク
74. ワーク）このバナー　何が課題？どう改善する？ https://www.youtube.com/watch?v=cenVq00Ozr8 ？
75. ワークシート）バナーの課題分析・改善案デザイン https://docs.google.com/spreadsheets/d/1dzXJfHhr7qSEOHWl5Q6lOpxJ-h6U73qIadoyXawrt_k/edit?usp=sharing
76. https://timer.onl.jp/
77. できた？
78. み・せ・ろ・よ♡
79. お手本
80. Before→After）プロデザイナーのバナー改善案 https://www.youtube.com/watch?v=cenVq00Ozr8
81. 改善プロセス：要素の取り出し＞整理＆強調 【デザインの基本】構造整理 | 情報の"優先度"と"グループ"整理で9割決まります【作る前が大事】 https://www.youtube.com/watch?v=cenVq00Ozr8
82. 俺のも見せろって？
83. トクベツだぞ♡
84. 私のバナー改善案 https://www.youtube.com/watch?v=cenVq00Ozr8
85. 文字もデザインの一部
86. 文字のないアカウント作成画面 KOTOBA UX https://www.kotobaux.com/
87. 文字のデザインと読解順序 https://twitter.com/TaRoS_physics/status/1479822142212808704?s=20&t=gwFmeNC4A7rB5ZsfEWlvkw
88. 文字情報のデザインから始めよう 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...
89. もう少しデザインを
 勉強するなら
90. デザイナーでない人のための デザインの定番基本書 超定番『ノンデザイナーズ・デザインブック 』 『ノンデザイナーズ・デザインブック』
91. まとめ
92. Q UI（インターフェース）とは、セカイとユー ザーの境界1 Q UXの中でも「使う」の領域を担W Q デザインとは、課題解決を目的とした工 Q デザインの4大原則は「近接・整列・反復・コ ントラスト」 UIデザイン まとめ
93. 11-design UXコンサルティング ご支援形式 セミナー/勉強会のカスタム企画・講演 トレーニング・/内製化ご支援 UX研修・人材育成 リサーチ/体験設計/UI(WF)デザイン （業務委託） UXプロジェクト 定期UXアドバイザ 月1回程度の個別コンサル カスタム情報キュレーションサービス
94. 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/
95. アンケートでぜひ感想をお聞かせください アンケート
 フォーム
96. 資料（PDF）のダウンロードはこちら スライドPDF 格納フォルダ
97. Youtube：本日＆過去のセミナー動画 チャンネル登録・いいねありがと https://www.youtube.com/channel/UC9QOcKTTo1nqAHGHcZtQkFw
98. Twitter：セミナー関連情報・UXネタのつぶやき フォロー・RT・いいねありがと
99. 次回 8/4 再会だぜ
100. Coming Soon...
101. ありがとう
 ございました