ユーザー満足度を上げる！UXデザインで守るべき10のルール
Webサイトを作っていく中でユーザー満足度を上げるデザインにすることは非常に重要です。実際にあるサイトの事例をもとにUXデザインにおける10のツールを紹介しているので、デザイナーの方やWebサイトを作ってみたいという方はぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Designmodoのブログ記事を、Webdesigner Depotより了解を得て日本語翻訳し掲載した記事になります。
Webサイトやアプリにおいて、良いタイポグラフィとは単に見栄えのいい書体というわけではありません。
それらは、コンテンツと有機的に連携しながら、ユーザーの読みやすさと情報の見つけやすさを両立するものです。一見このような表現をするとすごくハードルが高いように感じますが、少しの練習で出来るようなものです。
今回は、素晴らしいUX（ユーザー体験）の助けになるような10個のルールを紹介します。そして、10個のルールそれぞれを紹介する中で傑出したタイポグラフィを表現しているWebサイトの例も取り上げていきます。
読みやすさのルール
Webサイトのフォントにsan serifを使わなければならないというのはもはや時代遅れの話ですが、その考え方の根本にあるものはとても大切なことで、それは「テキストは読みやすくなくてはならない」ということです。
つまり、ユーザーにとって読みにくい書体、しばしば使われる珍しい書体だったり、blackletter書体は使用を控える必要があります。（ここではアートとして使われる装飾文字は言及対象外です。）
一番ユーザーが読みやすい書体とは、ユーザーの目に入ってきやすく、必要以上の注意を引かない書体です。
こういった「存在感の無い」書体はとても読みやすく、ユーザーは文章を読む中でその書体自体に注目することはありません。なぜなら、書体が機能してユーザーが文章の中身に集中できているからです。
必要十分な余白を行間に設ける
行間は、ユーザー体験を向上させる上で重要な一つの要素です。特にモバイル機器からの閲覧において行間は重要視されています。モバイル機器でWebサイトを閲覧しているユーザーにとって、大げさなくらい行間スペースを取ったはWebサイトはとても読みやすいものになっています。
どのくらい行間のスペースを取るべきかは、複数の要素できまります。
– テキストサイズ
– テキスト量
– 書体
– スクリーンの幅
現時点では、適切なスペースを算出するための標準的な数式はありません。しかしながら、これらを割り出す方法はいくつかあります。
– ほとんどのWebサイトには、スペースをテキストサイズの約125%で設定する
– モバイル機器でのアクセスには、スペースをテキストサイズの約150%で設定する
– ユーザーにとって重要な段落を見つけやすいよう、段落間のスペースを大きくする
– テキストがユーザーから見た時にどう見えるかテストする。文字が詰め込まれたように見えるか、離れているように見えるかを「感覚」で確認する
円形で丸みのある書体を選ぶ
大きく丸みのある書体はユーザーにとって読みやすいものです。
ここでいう、大きく丸みのある書体とは、大きな円が文字の一部をなすようなものであったり、文字の中に大きなスペースがあるものなどを指しています。
詰め込み過ぎに見える文字や、凝縮されたように見える文字は読みにくいですが、たとえば本記事のような比較的横幅があるテキストはユーザーにとって読みやすいものです。
なぜなら、それぞれの文字をユーザーは容易に識別できるからです。また、丸みのある書体は、子供の頃読み書きを習うときに触れる字体に近く、ユーザーはそのような字体に昔から慣れ親しんでいることも要因として挙げられると思います。
一定のフォントサイズを持つ
フォントのサイズ指定で少しでも迷ったら、自分が適切だと思うフォントの一回り大きいものを選びましょう。どれほど大きくすべきか、小さくすべきかの判断は、コンテンツ内にいれるテキスト量によって変わってきます。
特に長いテキストのブロックには注意が必要です。
デザイナーごとに意見は異なりますが、一番信憑性があるのは、だいたい45-60文字程度を1ラインに含めることです。モバイル端末においてはこの半分程度が適切と言われています。
小文字の高さへの注意
文字の高さ、特に小文字の高さは読みやすさに大きな影響を与えます。
ここで注目したいのは小文字の「x」の高さです。小文字の「x」の高さが高い、大文字と小文字の高さの差が大きくない書体は基本的に読みやすいとされています。
ぜひ小文字の「x」の高さが大文字の2/3から3/4の書体を見つけてみてください。
素晴らしいカーニング(文字間のすき間)から学ぶ
良いカーニングは、良いタイポグラフィと同義です。
文字同士の間隔調整をする時間もないし、カーニングの必要性を感じないとお考えかもしれませんが、とても重要です。
きっと全ての文字列をあたかもそれぞれのために作られたかのように一緒に置きたいかもしれませんが、重要な部分を伝えられない致命的なWebサイトから脱却することになります。
均整を取るという考え方
書体を作り上げるときには、「均整」という考えを持ちながらやると良い結果を生む傾向にあります。とても数学的な聞こえがしますが、これをやることで仕事は効率的に進むようになります。
行間に意識を向けるのも、均整を取るためのひとつです。ボディやサブ見出し、ヘッドラインやフォントサイズなど、これら全てをリンクさせて均整を取るという概念は、見栄えを整える上で手助けになるはずです。
はじめは少し複雑ですが、Tuts Plusがこの概念を理解しやすいようチュートリアルを用意していますのでご活用ください。
適切な余白を持つ
書体を考えるときには、合わせて余白を考えることが重要です。
ほとんど余白のない文字列はコントラストに欠けて読みにくいものです。また、余白がありすぎるのも目が追いつくことができず読みやすくありません。同様に、余白が多かったり、少なかったりするような文字が存在する書体も読みやすさに課題があります。
これらの解決策は比較的均一な幅の余白を持たせることです。均一の余白を持った書体は、読みやすいだけでなく使用するのが簡単です。背景の選択肢を狭めることなく、読みやすさの観点でも信頼性が担保できています。
書体数の制限
どのようなプロジェクトであっても、2つの書体で収めるよう努力しましょう。
1つのコンテンツの中に書体が複数あると、単純にうるさい印象を与えますし、ユーザーの読みやすさを阻害します。
コンテンツを制作する上では、2つの書体を選んだうえで、アートの要素としてもう1つ書体を選ぶことをおすすめします。そして、選んだらそれを突き通しましょう。
書体を使っていくにあたっては、どの書体をどこで使うかあらかじめマッピングすることをおすすめします。この工程では、カラーやサイズ、どこに配置するかも含めて決めていきます。
これらは、ページを横断して一貫しているべきですし、デバイスごとに一貫性があるべきです。
コントラストへの意識
一部の流行りでは、背景と文字のコントラストを最小限に抑えたものがありますが、それらはクールに見える一方、ユーザーにとって不親切で読みにくいものです。
あなたが制作するコンテンツは、ユーザーにとって特別なもの、重要なものになるべきですから、背景と文字のコントラストをつけて一文字一文字読みやすくするべきです。
白か薄い背景に、黒かグレーの文字が多いのは、読みやすさを担保しやすいからです。
あなたのWebサイトのテキスト量が多くなればなるほど、これらの要素の重要性は上がっていきます。
もしあなたがテキストを見る時に目を細めなくてはならないようであれば、きっとコントラストが足りません（もしくは文字が小さい）。Color Safeはカラーの組み合わせを決めるうえでとても役立つ素晴らしいツールで、完璧なコントラストレシオも出してくれます。（そしてWebサイトもクールです）
タイポグラフィは、素晴らしいUX（ユーザー体験）を実現するうえで必要な要素のひとつなのです。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
