Tweet
Tweet

Slide 1

Slide 1 text

見えにくい、読みにくい「困った！」を解決するデザイン【改訂版】出版記念交流会 2024/10/19 CUD友の会

Slide 2

Slide 2 text

間嶋 沙知 @mjmjsachi • 高知在住デザイナー • 印刷物＋ウェブ • 小規模受託案件メイン • こぶたと暮らしている

Slide 3

Slide 3 text

今日のトピックス 1 初版→改訂版のこぼれ話 2 私のCUDの取り組みかた 3 困った！を考える座談会

Slide 4

Slide 4 text

初版→改訂版のこぼれ話 経緯・意図・反響・変更点

Slide 5

Slide 5 text

困った！を解決するデザインが生まれた経緯 2021年11月 ：勉強会の開催 2022年1月：DTP Transit セミナー（キーパーソン鷹野さん） 2022年11月：初版の出版 2024年9月：改訂版の出版 当初の企画：現役デザイナーによるユニバーサルデザイン・アクセシビリティの入門書

Slide 6

Slide 6 text

ポイント1：ずっと使える基礎知識が身につく

Slide 7

Slide 7 text

章立ての意図 色・文字・ことば（構成要素） 図解（組み立て） UI（+操作） • 複雑な課題も基礎の組み合わせで解決できる • 媒体によらず共通して使える基本 • 媒体特性を意識すべきポイント

Slide 8

Slide 8 text

ポイント2 ：具体例の改善で理解が深まる

Slide 9

Slide 9 text

パターンランゲージの考え方 問題・解決・状況 経験則やコツを言語化し断片的な知識を体系化していろんな人が活用できる共通言語にする手法 職種を問わず使えるデザインのヒント集

Slide 10

Slide 10 text

困った！の具体例

Slide 11

Slide 11 text

パターン化するメリット •類似の問題を発見しやすい •目の前のデザインに応用しやすい •「つまみ読み」しやすい

Slide 12

Slide 12 text

ポイント3： 6人の登場人物とたのしく学べる

Slide 13

Slide 13 text

パターン別「困る人」の懸念点 • 障害や特性で人が切り分けられてしまう • 自分とは遠い存在に感じられる • 「〜してあげる」

Slide 14

Slide 14 text

ペルソナ・スペクトラム スペクトラム【spectrum】 物事が曖昧な境界をもって連続していること

Slide 15

Slide 15 text

ケイくんの場合 永続的： D型色覚 一時的 ：8歳 状況：イヤホンを忘れた https://komatta-design.studio.site/persona

Slide 16

Slide 16 text

登場人物設定のねらい • 障害者・高齢者のための特別対応ではなく普段のデザインの延長線上で考える • 誰かの困りごとの解決はいろんな人のメリット

Slide 17

Slide 17 text

読者の声・反響 全人類におすすめしたい 社内で輪読会をしました クライアントに配ってます なーんだそういうことか！ 普段からやっていた／今すぐ意識できることだ

Slide 18

Slide 18 text

2年で改訂のワケ 改訂版＝別の本として流通 • ページ数はそのまま最新の事例やトピックスを追加 • 全体の表現の見直し（300箇所以上）

Slide 19

Slide 19 text

初版から改訂版までのトピックス • 障害者差別解消法の改正 • デジタル庁「ウェブアクセシビリティ導入ガイドブック」の登場 • WCAG 最新バージョンの勧告 • アクセシブルなウェブデザインギャラリーAAA11Yの登場

Slide 20

Slide 20 text

PowerPoint「色なしの確認」機能

Slide 21

Slide 21 text

改訂版追加事例：CUD対応チョーク https://www.rikagaku.info/items/eyechalk.html

Slide 22

Slide 22 text

改訂版追加事例：仙台市指定ごみ袋 https://www.city.sendai.jp/sesakukoho/gaiyo/shichoshitsu/kaiken/2024/06/04shiteibukuro02.html

Slide 23

Slide 23 text

私のCUDの取り組みかた 実践のポイントと事例紹介

Slide 24

Slide 24 text

過去の仕事を振り返ると…

Slide 25

Slide 25 text

お肉のカタログ

Slide 26

Slide 26 text

色分けが機能していない

Slide 27

Slide 27 text

明度差の大きな配色に改善

Slide 28

Slide 28 text

記号をつければOK？

Slide 29

Slide 29 text

色による「わかりやすさ」を誰もが受け取れているか

Slide 30

Slide 30 text

色でもわかりやすく

Slide 31

Slide 31 text

スマホアプリ「色のシミュレータ」

Slide 32

Slide 32 text

改善提案事例：ウェブページのテキストリンク・強調

Slide 33

Slide 33 text

色以外の手がかりを加える 強調→太字,　 テキストリンク→下線つき

Slide 34

Slide 34 text

考慮する点は増えるが伝わる可能性が高まる より良いデザイン これまでのデザインを拡張する基本品質として取り組んでいる

Slide 35

Slide 35 text

1人で実践するだけでは限界がある… デザインする人、発注・評価する人、職種を問わずもっと多くの人に知って欲しい！

Slide 36

Slide 36 text

noteマガジン「困った！を解決するこぼれ話」 https://note.com/mjmjsachi/m/mc786518c0ba8

Slide 37

Slide 37 text

困った！を解決するデザイン展 https://press.mjmj.co/2024/05/komatta-exhibition-report/

Slide 38

Slide 38 text

色で困った！コーナー

Slide 39

Slide 39 text

コントラストテーブル

Slide 40

Slide 40 text

色覚シミュレーションコーナー

Slide 41

Slide 41 text

引き出し式キャプション

Slide 42

Slide 42 text

みんなの困ったコーナー

Slide 43

Slide 43 text

フライヤーが表紙に

Slide 44

Slide 44 text

発信するメリット • 人に伝えることで自分の理解も深まる • フィードバックや周辺情報が集まる • 各地で取り組んでいる人とつながる • 需要の喚起 → 次の仕事につながる 理論と実践の良いサイクルが生まれる

Slide 45

Slide 45 text

困った！を考える座談会 身の回りの困った！を共有しよう

Slide 46

Slide 46 text

電子版もあります！ 固定レイアウト・リフロー https://www.amazon.co.jp/dp/4839987505