問題解決としてのデザイン-チラシと新型iPhoneの登場で感じたこと-
はじめに
家のポストを覗くとポスティングのチラシが入っていたーーよくある光景です。
ピザ屋、整骨院、不動産と種類は様々。刷り方も違えば、色数、サイズもすべてバラバラで、一見どれも違った個性があるように見えます。しかし果たして、とある一点において、この三つには共通点があります。皆さん、お分かりになるでしょうか。
個体と流体 -アナログとデジタル-
答えを出す前に少しデータの紹介をしたいと思います。
この記事を読んでいる皆さんの多くはスマートフォンやタブレット、PCのいずれかをお持ちのことだと思います。街に出れば老若男女問わず多くの人がスマートファンのカメラで写真を撮っている風景を見ることができます。しかし、実際のところ、スマートフォンなどの機器の普及率は如何ほどなのでしょうか。
というわけで、困ったときの内閣府消費動向調査の出番です。
消費動向調査 令和2年（※長期時系列表は最新月を参照） 3月調査 | ファイル | 統計データを探す | 政府統計の総合窓口
上記リンク先からをCSVファイルをDLして確認すると、全世帯でのスマートフォンの普及率は77.6%、タブレットが35.2%、そしてPCが67.7%ということがわかります。
このデータは令和2年3月調査のもので直近では最新のものになります。
スマートフォンの普及率がPCを上回っているというのは僕自身知っていましたが、いつの間にか10%近い開き担っていることに驚きました。しかし、自宅でくつろいでいるときにちょっとした調べ物をするときはPCに向かわずスマホで調べていることを思い返すと、この数字にも納得できます。片手でさっと調べることのできるスマホは確かにお手軽です。
さて、もしこの記事を読んでいるあなたの近くにスマートフォンがあれば、ぜひそれを手にとってみてください（というより、この記事を見てるデバイスがスマートフォンかもしれませんね）。あなたの機種はiPhoneですか、それともAndroidですか。もしiPhoneなら機種は何でしょう。最新のiPhone12か、それとも一つ前のiPhone11か、はたまたiPhone8なのかもしれません。AndroidだったらGaraxyかPixelでしょうか。
きっとこの問だけでも沢山の答えが返ってくるでしょう。
それだけ見ている人の機種は様々だということです。また、ひとによっては見やすさを上げるために文字を拡大して表示しているかもしれませんね。また色覚をサポートする機能をオンにしている方もいるかもしれません。人によって使っている機種は様々で、たとえ同じ機種を使って同じものを見ていても表示の仕方が異なる可能性があるのがスマホという端末です。
勘の良い方だったらここでピンと来たかもしれません。
そう、紙とスマホーーデジタル端末の最大の違いはココです。紙は見え方が固定されているのに対し、デジタルは同じコンテンツであっても見え方が異なるのです。
常に同じ画を見せることの難しさ
機種が違うということは当然大きさも違います。もっというとプリインストールされているフォントも異なります。たとえば、iPhoneにプリインストールされているデフォルトの日本語フォントはヒラギノですが、AndroidはNoto Sans CJKになります。またWindowsとMac両方にある游ゴシックはiPhoneとAndroidにはインストールされていません。
Webフォントなどを使えばこの問題はある程度コントロールできますが、そもそも論、見る側の環境によって変化するというのはデジタル領域では当たり前のように起こることなのです。
無論、だからといって元々のデザインをしっかりしなくても良い、というわけではありません。それはまったく別軸のお話です。ここで論じたいのはあくまでも、「100人いたら100人全員が同じ画面を見ているわけではない」という事実です。
いままではスマホの話でしたが、この問題は当然PCでも起こりえます。先程、WindowsとMac両方にインストールされている游ゴシックというフォントについて少しお話をしましたが、このフォントも決して万能ではありません。というのも同じfont-weightを定めているにも関わらず、WindowsのChromeではかすれて見えるという問題をはらんでいるからです（これについては各種様々な解説がネットにあるので一読してみると面白いです）。
どうでしょう、ここまで読んでいて全てを完璧に、デザインどおりに上げることの難しさがなんとなく伝わったかと思います。ではWEBにおいて画面の再現度が難しいとするなれば、何を優先してデザインをすればよいのでしょうか。その答えのヒントはすでにこれまでに説明した中に実はあります。
アクセスのしやすさ
さきほど、人によっては文字の大きさを変更したり、色覚サポートの機能を利用している方がいることについて軽く触れましたが、ここにヒントがあります。彼らはどうしてそれらのサポートを使用するのでしょう。それはもともとの状態が彼らにとって見えにくいからです。見えにくいということはサービスを利用する上で大きな障害です。たとえば、あなたがとある商品についてサポートを求めていたとします。WEBサイトからお問い合わせをしようとしたとき、もし問い合わせ先へのリンクがわかりにくい形（文字が小さい、ボタンが周囲の色と馴染んで見えにくい等）だったり、そもそも導線が適切でなっていたとしたらどうでしょう。きっと大変なストレスになるはずです。
ではそのストレスを無くすためにはどうしたらよいでしょうか。
「単純に文字や色をはっきりしたものにすればよいのでは？」
もしかしたらこのように考えたかもしれません。それは確かに答えの一つではありますが、全てではありません。設計上、文字を小さくすることが他との差別化にも繋がりますし、あえて色を周囲となじませている場合だってあるからです。
重要なのはそのWEBサイトを見に来た人が、何を目的にしているのか、そしてその目的を達成するためにはどうすればいいのかを考えた全体の設計をするということです。これとこれをやったから迷わなくなるからユーザーにとって優しい作りになる！という単純なものは残念ながらありません。
とはいえ、意図せず見えにくいものを作ってしまうのはもったいないものです。幸いネットを探せばその手のガイドラインはたくさんあります。以下はAppleとGoogleが公表しているガイドラインです。読み応えがあるのでぜひご一読することをおすすめします。
web.dev（英語）
さいごに
WEBサイトの見た目のカッコよさを追求するーーこの事自体が間違っているとは僕は思いません。しかしながら、その格好良さを追求するあまりUXが低下してしまうのは本末転倒です。WEBサイトは実利品です。ただただ見た目をこだわっていても、そこから何かしらのCVが得られなければ広告としての機能は残念ながらないと言わざるを得ないでしょう。
弊社ではWEBサイト制作をする際、ディレクター、デザイナー、エンジニアが議論し、訪問したユーザーがストレスなく目的を達成できるようサイト作りを心がけています。もし、サイトのリニューアルや新規作成でお悩みの方がおられましたら弊社問い合わせまでご連絡ください。お客様の目的にあったサイト制作のプランをご提案させていただきます。
この記事を書いたライター
