デザインにおける「視認性」とは？

こんにちは！onegiftっていうサービスの代表してます。井上です。(挨拶定まらん😂 でもしばらくこれ使おかな)
今日書いていくのは「デザインにおける視認性とは？」という内容です。

僕がonegiftのシンボルロゴをデザインしたことは前回のnoteで書かせていただいたんですけど、その中でメンバーからのフィードバックを大切にしていたっていう話があったと思うんですよね。で、今回はそのフィードバックの中で出てきた「視認性」というキーワードについてのお話です。デザインしたロゴも改めて載せておきますね。

「視認性」が悪い

これはシンボルロゴのグラデーションを何パターンか試したときにメンバーからもらったフィードバックです。実際にみてもらえると早いんですけど確かに視認性は悪いですよね。白の背景にイエローなんて見にくいです。表現として正解かは微妙ですけど目がチカチカします。イエローを使った理由としてはポップさとか元気さの要素も含めればな〜と考えていたんですけど、xdで作って2秒で「これはダメ」と自分でもわかりましたね。でも、メンバーに見せたのは「何とかしてくれ〜」って感じでした。流石にイエローをやめるという選択で現在のオレンジのグラデーションが採用されました。オレンジの方が確かにシンボルロゴも文字も見やすいですよね。

てか「視認性」とは？

今回のテーマはここです。僕もフィードバックもらったときググりました。「デザインにおける視認性って何？」って感じで。で、記事とかをいくつか読んで自分なりに理解したのでそれを共有したいと思ってます。

視認性・可読性・判読性というキーワード

皆さんはこの3つの言葉の違い説明できますか？僕は無理でした。視認性というワードを調べたときに検索結果に並んでた言葉たちですが、正直どれも同じに感じますよね。「要は全部見えやすいんでしょ？」って。でも読んでいくとしっかり違いがあったので引用させていただきます。この3つの違いをしっかり認識することで視認性についての理解もより深まると思ったので。では、早速3つの違いを見ていきましょう！

視認性とは？

視認性
目で何かを見た時に、対象物やその対象物がもつ意味合いについて、正しく確認・理解ができるかどうかの度合い。
見やすいかどうか。瞬間的な認識を指す。

デザインにおける視認性
伝えたい文字情報を大きくしたり色を変えたり差別化することはもちろん、文字情報に限らず例えば背景に対し物体の色や形が際立っていて分かりやすい様も視認性が高いと言える。

まずはメインの視認性に対する説明です。端的でとてもわかりやすいです。視認性のキーワードは「瞬間的」です。一瞬で伝えたい情報をユーザーに伝えることができるのかというポイントが視認性において最も重要視されることです。文字情報に限らず〜のところはまさしくonegiftのロゴのイエローを使ってしまっていた方が指摘されています。背景が白にも関わらず、ガッツリ彩度も明度も高いイエローを使っていれば視認性が悪いのは当然ですよね。視認性を意識してデザインをすれば、デザインごとに使用する色はある程度決まってくるのかもしれません。

可読性とは？

可読性とは
読み取れる性質、読み取れる度合などを表す言葉。
正確に早く、読み続けても疲労を感じないか。視認性が瞬間的な認識を指すのに対し、可読性はその先を指す。

デザインにおける可読性
自然化学やプログラミングなど対象物により可読性という言葉の意味は若干異なってくるため、主にデザインにおいて正しく使うには「文章の可読性」と前置きをつける方が良さそう。
文章自体を読みやすい構成にする他、例えば主題を抜きとり見出しに変えたり、連続して長く読み続けられるよう余白を入れ適度に休憩ポイントを作るなどの工夫も可読性向上の一部になる。

可読性はこんな感じです。視認性との大きな違いは「瞬間的」な認識のためのものではないということです。可読性は一定時間ユーザーが読むものに対して有効なテクニックです。まさしく僕が書いているこのnoteに必要なテクニックです。見出しは太字で大きく、それ以外のところは普通に。でも、長い文章の中で大事なところは太字で書くことによって読んでくれる人が少しで読みやすいように工夫しています。(読みやすいことを願ってますw)

判読性とは？

判読性とは
判読とははっきりしない文字、わかりにくい文意などを前後の関係などから推測しながら読むことであるため、判読性とは文章の分かりやすさを指す。見ている人に正確に文章の意味が伝わるかどうか（＝誤読・誤解をさせないかどうか）。対象物への「判断」まで含む。

デザインにおける判読性
まずはターゲットユーザーが容易に読める文字の大きさは確保すること。一般的に馴染みのない専門用語の使用は控える。文章だけでは伝えづらく誤解を招きそうな文面は、図形やイラストなど視覚要素を活用するなどもひとつの手法だと思う。

これが判読性の説明です。可読性との差を簡単にまとめますね。可読性は「読みやすさ」が重視されています。そして、判読性は「わかりやすさ」「理解しやすさ」が重視されるポイントです。例えば、すごく可読性に優れた文章があるとしますよね。でも、その文章の文字がすごく小さいとどうですか？読めないですよね。これは判読性に欠けるデザインだと言えます。以前かっこいいデザインを追求するあまり、フォントサイズを小さくしてしまうデザイナーがけっこういるみたいな記事を読みました。これは判読性のことだと僕は理解していてnoteの文章のように長くない文章(例えばwebページのボタンとか)でもフォントサイズが小さくなりすぎていると、ユーザーとしては分かりにくいんです。採用している画像とかの都合で小さくしたいと感じることはあるんですが、僕はページサイズによってフォントサイズの幅をある程度決めて判読性を損なわないようにしています。判読性についてはロゴでも言えることがあると思います。今回onegiftはタイプロゴも制作したんですね。そのときタイプロゴ担当のメンバーと「”g”が一瞬でわかるか」というポイントを話し合いました。そのときは「判読性が！」とかは意識していなかったですが、後から改めて深く考えて良かったと感じています。

まとめ

視認性への疑問から始めり、可読性と判読性のことについても書かせていただきました。この3つの要素は調べる前から意識していたことではあったのですが改めて認識すると3つとも大事だなとデザインする度に感じます。「ユーザーを意識してデザインする」という当たり前なんですが、かっこいいものとかを追求しているとついつい忘れてしまうことを再認識するきっかけになったので是非皆さんも視認性、可読性、判読性の3つを意識してみてください！では、また次の記事も読んでくださいね！

参考記事：https://www.genius-web.co.jp/blog/design-tips/we-looked-at-the-differences-in-the-words-with-the-sense-of-legitimacy-readability-obfuscity-decipherability-and-similar-meanings.html

onegift
onegift HP : https://onegift.design/
ワンギフライト(onegift light) : https://light.onegift.design/index.html
Instagram : https://www.instagram.com/onegift_presentweb/?hl=ja
Twitter : https://twitter.com/present_web

個人アカウント
Instagram : https://www.instagram.com/naotake_designer/?hl=ja
Twitter : https://twitter.com/naotake_design