ユーザー満足度を上げる！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%で設定する
– ユーザーにとって重要な段落を見つけやすいよう、段落間のスペースを大きくする
– テキストがユーザーから見た時にどう見えるかテストする。文字が詰め込まれたように見えるか、離れているように見えるかを「感覚」で確認する
[PR] UI/UXデザインで挫折しない学習方法を動画で公開中
円形で丸みのある書体を選ぶ
大きく丸みのある書体はユーザーにとって読みやすいものです。
ここでいう、大きく丸みのある書体とは、大きな円が文字の一部をなすようなものであったり、文字の中に大きなスペースがあるものなどを指しています。
詰め込み過ぎに見える文字や、凝縮されたように見える文字は読みにくいですが、たとえば本記事のような比較的横幅があるテキストはユーザーにとって読みやすいものです。
なぜなら、それぞれの文字をユーザーは容易に識別できるからです。また、丸みのある書体は、子供の頃読み書きを習うときに触れる字体に近く、ユーザーはそのような字体に昔から慣れ親しんでいることも要因として挙げられると思います。
一定のフォントサイズを持つ
フォントのサイズ指定で少しでも迷ったら、自分が適切だと思うフォントの一回り大きいものを選びましょう。どれほど大きくすべきか、小さくすべきかの判断は、コンテンツ内にいれるテキスト量によって変わってきます。
特に長いテキストのブロックには注意が必要です。
デザイナーごとに意見は異なりますが、一番信憑性があるのは、だいたい45-60文字程度を1ラインに含めることです。モバイル端末においてはこの半分程度が適切と言われています。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
小文字の高さへの注意
文字の高さ、特に小文字の高さは読みやすさに大きな影響を与えます。
ここで注目したいのは小文字の「x」の高さです。小文字の「x」の高さが高い、大文字と小文字の高さの差が大きくない書体は基本的に読みやすいとされています。
ぜひ小文字の「x」の高さが大文字の2/3から3/4の書体を見つけてみてください。
素晴らしいカーニング(文字間のすき間)から学ぶ
良いカーニングは、良いタイポグラフィと同義です。
文字同士の間隔調整をする時間もないし、カーニングの必要性を感じないとお考えかもしれませんが、とても重要です。
きっと全ての文字列をあたかもそれぞれのために作られたかのように一緒に置きたいかもしれませんが、重要な部分を伝えられない致命的なWebサイトから脱却することになります。
均整を取るという考え方
書体を作り上げるときには、「均整」という考えを持ちながらやると良い結果を生む傾向にあります。とても数学的な聞こえがしますが、これをやることで仕事は効率的に進むようになります。
行間に意識を向けるのも、均整を取るためのひとつです。ボディやサブ見出し、ヘッドラインやフォントサイズなど、これら全てをリンクさせて均整を取るという概念は、見栄えを整える上で手助けになるはずです。
はじめは少し複雑ですが、Tuts Plusがこの概念を理解しやすいようチュートリアルを用意していますのでご活用ください。
適切な余白を持つ
書体を考えるときには、合わせて余白を考えることが重要です。
ほとんど余白のない文字列はコントラストに欠けて読みにくいものです。また、余白がありすぎるのも目が追いつくことができず読みやすくありません。同様に、余白が多かったり、少なかったりするような文字が存在する書体も読みやすさに課題があります。
これらの解決策は比較的均一な幅の余白を持たせることです。均一の余白を持った書体は、読みやすいだけでなく使用するのが簡単です。背景の選択肢を狭めることなく、読みやすさの観点でも信頼性が担保できています。
書体数の制限
どのようなプロジェクトであっても、2つの書体で収めるよう努力しましょう。
1つのコンテンツの中に書体が複数あると、単純にうるさい印象を与えますし、ユーザーの読みやすさを阻害します。
コンテンツを制作する上では、2つの書体を選んだうえで、アートの要素としてもう1つ書体を選ぶことをおすすめします。そして、選んだらそれを突き通しましょう。
書体を使っていくにあたっては、どの書体をどこで使うかあらかじめマッピングすることをおすすめします。この工程では、カラーやサイズ、どこに配置するかも含めて決めていきます。
これらは、ページを横断して一貫しているべきですし、デバイスごとに一貫性があるべきです。
コントラストへの意識
一部の流行りでは、背景と文字のコントラストを最小限に抑えたものがありますが、それらはクールに見える一方、ユーザーにとって不親切で読みにくいものです。
あなたが制作するコンテンツは、ユーザーにとって特別なもの、重要なものになるべきですから、背景と文字のコントラストをつけて一文字一文字読みやすくするべきです。
白か薄い背景に、黒かグレーの文字が多いのは、読みやすさを担保しやすいからです。
あなたのWebサイトのテキスト量が多くなればなるほど、これらの要素の重要性は上がっていきます。
もしあなたがテキストを見る時に目を細めなくてはならないようであれば、きっとコントラストが足りません（もしくは文字が小さい）。Color Safeはカラーの組み合わせを決めるうえでとても役立つ素晴らしいツールで、完璧なコントラストレシオも出してくれます。（そしてWebサイトもクールです）
タイポグラフィは、素晴らしいUX（ユーザー体験）を実現するうえで必要な要素のひとつなのです。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
