以前、送迎バスの案内資料を読み違えて、乗る予定とは別のバスに乗ってしまったことがあります。あとから振り返ったとき、「これは資料の作り、つまりデザインの問題でもあったのかもしれない」と考えるようになりました。
「ちゃんと書いてあるのに迷う」と感じたことはありませんか？
案内の資料を読んだはずなのに、なぜか間違えてしまう。
必要な情報は載っていたのに、見つけられなかった。
そんな経験がある人は、意外と多いかもしれません。
この記事では、Webデザインを学んでいる私が、案内の資料を読み違えた体験をきっかけに考えた「デザインとは何か」をまとめます。
AIでデザイン案やプログラムの文（コード）まで作れるようになった今、人が考えるべきことはどこにあるのか。
自分なりにたどり着いた考え方を、体験と一緒に整理してみました。
この記事でわかること
- 案内の資料の読み違いから見えた、情報の配置と優先順位の大切さ
- 「情報がある」と「迷わず判断できる」の違い
- AI時代に、人間がデザインで考えたいこと
- ペルソナ（サイトを使う人物像）を「判断基準」として使うという考え方
- 古い交通安全の看板から考えた「余裕」とデザインの関係
結論
デザインは、見た目を整えることだけではないのかもしれません。見る人がどんな気持ちで情報を受け取り、どう判断し、どう行動するのか。そこまで想像して、迷わず安心して行動できる状態をつくること。それが今の私が考えるデザインの土台です。
Photo by Hobi industri on Unsplash
まずは、そのとき何が起きたのかから振り返ってみます。
案内の資料を読み違えたときのこと
そのときは、送迎バスの案内を含む資料を見て予定を確認していました。
ただ、資料の中の情報はあちこちに散らばっていて、どこに何が書いてあるのかがつかみにくい作りでした。
特に困ったのが、送迎バスの日程の欄です。
私が確認したかった欄が空欄になっていました。
そこで私は、上のほうに書かれていた別のバスの情報と同じなのだろうと思い込んでしまいました。
結果として、私は予定とは違うバスに乗ってしまいました。
あとになって、「どうして間違えたんだろう」と考えました。
「情報がある」と「迷わず判断できる」は違うのかもしれない
振り返ってみると、資料には必要な情報が「なかった」わけではないのだと思います。
問題は、その情報がどこにあり、どの順番で目に入り、どう読み取られるかでした。
この体験から、私は次の3つが利用者の判断に大きく影響することを実感しました。
- 情報の配置：関係する情報が近くにまとまっているか
- 優先順位：大事な情報が目立っているか
- 視線の流れ：上から読んだときに、自然に正しい情報へたどり着けるか
使いやすさの研究で知られるアメリカの調査会社Nielsen Norman Group（ニールセン・ノーマン・グループ）は、画面の使いやすさを確かめるための考え方を10の原則としてまとめています。
その中には、間違いを起こしにくくする「間違いの防止」や、表記や扱いをそろえる「一貫性」といった考え方が含まれています。
空欄が「上と同じ」なのか「未定」なのかが分からない状態は、まさに誤解を生みやすい形だったのかもしれません。
同じくNielsen Norman Groupは、Webページの文章が「F」の字のように拾い読みされやすいという調査結果も紹介しています。
人は資料をすみずみまで読むとは限らず、目に入った情報をもとに判断することが多いと考えられます。
だからこそ、「必要な情報がある」だけでなく「迷わず正しい判断ができる情報設計」が大切なのだと気づきました。
AIが作れる時代に、人が考えたいこと
最近のAIは、必要な項目の洗い出し、ページ構成、デザイン案、コードを書く作業まで、短い時間でこなせるようになってきました。
Webデザインを学んでいる身としては、正直「人がやることは残るのかな」と考えることもあります。
けれど、資料を読み違えた経験から、それだけでは良いデザインにはならないのではないかと感じました。
資料の項目そのものは、きちんとそろっていたからです。
足りなかったのは、それを見る人がどんな状況で、どんな気持ちで読むのかという想像だったように思います。
私が人間の役割として大切にしたいと考えたのは、次のような問いです。
- 誰に向けた情報なのか
- どんな状況で使われるのか
- そのとき、見る人はどんな心理状態なのか
- 見た人に、どんな行動をとってほしいのか
AIは作る作業を大きく助けてくれます。
そのうえで、こうした問いに答えを出していく部分に、人が関わる価値があるのではないかと考えています。
ペルソナは「人物設定」より「判断の基準」
Photo by Denisse Leon on Unsplash
Webデザインを学んでいると、「ペルソナ」という言葉によく出会います。
ペルソナとは、サイトを使う代表的な人物像を具体的に設定する方法のことです。
一方で、「ペルソナは必要ない」という意見を目にすることもあります。
私自身は、今回の経験を通して、「全員にとって見やすいサイト」を目指すのは難しいと感じるようになりました。
すべての人に向けて情報を増やしすぎると、必要な情報が埋もれたり、優先順位が分からなくなったりします。
その結果、かえって使いにくくなることもあるのではないでしょうか。
そう考えると、ペルソナは細かい人物設定を作ること自体が目的なのではなく、利用者の目的や心理状態を理解し、設計の判断基準を持つための考え方なのだと思えてきました。
Nielsen Norman Groupも、ペルソナは使う人を思い浮かべやすくし、設計の判断を助けるものとして紹介しています。
「この人なら、ここで迷わないか」と考える物差しとして使うと、私にはしっくりきました。
使う人の目線でサイトを見る方法は「Webデザイン分析記事に人間味が大切な理由｜使う人の目線で見る5つのポイント」でくわしく書いています。
「どんな人か」より「心がどう動くか」に興味がある
ペルソナについて考える中で、私が特に興味を持ったのは、「どんな人か」以上に「その人の心がどう動くのか」という部分でした。
サイトを訪れた人は、ページを読み進めながら、不安になったり、安心したりします。
迷ったり、納得したり、そして最後に「行動してみよう」と思ったりします。
この心の流れを想像して設計することが、デザインの核なのではないかと感じています。
あのときの資料でいえば、私は空欄を見た瞬間に「たぶん上と同じだろう」と思い、そのまま安心してしまいました。
もしそこに「◯◯と同じ」「当日案内」などの一言があれば、私の心の動きはまったく違っていたかもしれません。
小さな一言が、人の判断を左右することもあるのだと実感しました。
古い交通安全の看板から考えた「余裕」
また別のとき、外で古く汚れた交通安全の看板を見かけました。
大切なことが書いてあるはずの看板なのに、汚れたままになっていました。
それを見て私が感じたのは、「人は余裕がなければ、相手のことまで考えられない」ということでした。
看板を作った人や管理する人にも、きっとそれぞれの事情があるのだと思います。
忙しさや手の足りなさの中では、見る人の立場まで気を配るのは難しいのかもしれません。
そこから、見やすいデザインとは、作り手が見る人のことを考える余裕を持って生まれたものでもあると考えるようになりました。
そして同時に、見る人に余裕を与えるものでもあるのではないかと思います。
迷わずに済むデザインは、見る人の時間や気持ちに、少しゆとりを残してくれるからです。
デジタル庁の「ウェブアクセシビリティ導入ガイドブック」でも、年齢や障害の有無などに関わらず、誰もが情報にたどり着きやすくすることの大切さが説明されています。
見る人の状況を想像することは、アクセシビリティ（情報への届きやすさ）を考えることともつながっていると感じました。
卒業制作でオリジナルサイトを作ったとき、私は伝えたいことを全部ページに詰め込もうとしていました。今思えば、見る人が「どこを見ればいいか」で迷うページだったのかもしれません。
たどり着いた、私のデザインの考え方
Photo by Javier Allegue Barros on Unsplash
一連の出来事を通して、私の中でデザインの考え方が少し整理されました。
今の私が考えるデザインの本質は、次の一文です。
人を理解し、その人が迷わず、安心して、自然に行動できる環境をつくること。
そのために、配置、配色、文字の選び方、小さな絵記号（アイコン）、動き、コードを書く作業といった技術があるのだと考えています。
木にたとえるなら、人への理解が「根」であり、デザインの技術はそこから伸びる「枝葉」です。
根がしっかりしていれば、技術はその人のために自然と形を変えていけるのではないでしょうか。
これから何かを作るときは、見た目を整える前に、まず見る人の立場に立ってみたいと考えています。
制作の最初に「この人はどこで迷いそうか」と問いかけることを、習慣にできたらと思います。
あのときの読み違いが、これからのデザインの物差しになりそうです。
この記事のまとめ
資料に情報がそろっていても、配置や優先順位、視線の流れによっては、人は迷ってしまうことがあります。
AIが作る作業を助けてくれる時代だからこそ、見る人の状況や心の動きを想像する部分に、人が関わる意味があるのかもしれません。
ペルソナは判断の物差しとして、余裕は作り手と見る人をつなぐものとして。
「人への理解が根、技術は枝葉」という考え方を大切にしながら、これからもWebデザインを学んでいきたいと思います。
よくある質問
Q. 情報設計とは何ですか？
A. 情報をどこに、どの順番で、どの程度目立たせて置くかを考えることです。見る人が迷わず必要な情報にたどり着き、正しく判断できるようにするための設計だと考えられています。
Q. 空欄の項目は、どう扱うと誤解されにくいですか？
A. 「上と同じ」「未定」「当日案内」など、空欄の意味を一言添える方法が考えられます。私自身、空欄を見て思い込みで判断してしまった経験から、意味を明示することの大切さを感じました。
Q. ペルソナは本当に必要ですか？
A. 必要ないという意見もあります。私は細かい人物設定よりも、利用者の目的や心理状態を想像し、設計の判断基準を持つための考え方として役立つと感じています。
Q. AIでデザインが作れるなら、デザインを学ぶ意味はありますか？
A. AIは構成案やコードを作る作業を助けてくれます。一方で、誰がどんな状況で使い、どこで迷いそうかを考える部分には、人の理解が関わる余地が大きいと考えています。
Q. Webデザイン初心者は、まず何を意識するとよいですか？
A. 見た目を整える前に、「このページを見る人は何を知りたいのか」「どこで迷いそうか」を考えてみると、配置や優先順位が決めやすくなるかもしれません。
参考・引用元
- 10 Usability Heuristics for User Interface Design – Nielsen Norman Group
- F-Shaped Pattern of Reading on the Web – Nielsen Norman Group
- Personas Make Users Memorable – Nielsen Norman Group
- ウェブアクセシビリティ導入ガイドブック – デジタル庁
関連記事
