UI/UXデザイン改善 フォント周りで意識しておきたい7ポイント

作成日:2020.01.23 最終更新日:2020.01.23

フォント周りで大事な ポイントを君に捧ぐ。

知ってる?UI/UX改善って、ボタンとか色とか、見た目的な話だけじゃないんだぜ?

ほ~、それは興味深いね!聞かせてよ、松崎。

聞かせるぜ松崎!重要度も付けて説明するから、しっかり血肉化してくれよな!

 

フォントサイズで階層を表現しよう! 重要度:★★★★★

階層表現

デザイナーやコーダー初心者は、この視点が超抜けがちだぜ!

必ず意識できるようにしておきたいところだね!

階層を表現するってどういうこと?

うん、例を見てもらえばわかるぜ!

まずは悪い例を出そう!

Before フォントサイズの悪い例

文字の大きさ:Before

上記の例だと、見出しと本文の文字サイズが完全に同じです。

それゆえ、

  • どこで情報が区切れるのか
  • どういう階層で構成されているか

が非常にわかりづらくなっています。

After フォントサイズの改善例

after:改善例

こういう風にすれば、ぱっと見で情報の区切りと階層がわかりやすくなるぜ。

大きさと太さと余白が違うだけなのにね!こんなに違うんだ!

目立たせるために大見出しより小見出しの方が文字を大きくするケースもあるんだけどね。

でも、基本は大見出し、中見出し、小見出し、という順番で文字を大、中、小としていくのが良いぜ!

サイト内での表記を統一しよう! 重要度:★★☆☆☆

表現統一

ウェブサイトに会員登録したことってある?

うん、あるよ。

会員登録するとさ、大体「マイページ」ってあるじゃん?

その中でさ、自分の情報を編集しようと思ったら、「プロフィール」とか「基本情報」みたいなメニューを探すよね?

うん、そうね。

この表記がバラバラだとわかりづらくない?

ん?例えばどういうこと?

例えば、プロフィールと基本情報っていう、ふたつの項目があったとする。

でも、クリックするとどっちもプロフィール編集ページに飛ぶ。

こんなケースがたまにあるんだ。

たしかに、それはわかりづらいね!

あとは、「メール設定」と「通知設定」っていう表現が混在してたり、「カート」と「買い物かご」が混在してたりね。

クリック先は同じものなのに、表現が違っちゃうとユーザーが混乱しちゃいそうだね。

そういうことよ!
だから表現が統一されてるかを、サイト構築時はきっちり確認しておこう!

テストする時の確認項目として、入れておくのもアリだね!

書体は2種類以内におさえよう! 重要度:★★☆☆☆

書体は欲張るな

たまーーーにあるよね!

ゴシック体、明朝体、楷書体とか色んなフォントが混ざってるページ。
気持ち悪い感じのやつ。

まぁ、あえて注目させるために、フォントを混ぜまくってるケースもありそうだけど、基本はたくさん指定しない方が良いよ。

こだわりが強いお客様からWeb制作の依頼が入った場合、
「見出しをゴシック系、本文を明朝系」
みたいに指定してくるケースは、ごくまれにあるけどね。

まぁ、それぐらいだったら良い気がするけどね~

うん、そうだね。
基本、書体は1種類で良いんだけど、どうしても増やさなければいけないって時は、2種類をMAXとしておきたいよね。

色数が多すぎるウェブデザインが見にくいのと一緒で、フォントの種類が多すぎてもダメなんだね〜

そういうことだぜ!

ウェブフォントは使ってもOK! 重要度:★★★☆☆

Webフォントは使ってOK

日本語のウェブフォントって、容量が重いんでしょ?
文字数が多いから。

そうなんだよねぇ~
Webフォントが採用されたサイトをスマホで見ると、機種にもよるけど、体感で数秒読み込みが遅れることがあるんだ。

「数秒の遅れは致命的だから、なるべくウェブフォントは使わないほうが良い」
というのが、今までの主流的意見さ。

読み込みが遅いと、seoにも悪影響が出る可能性があるからね。

でも最近になって、googleフォントなら使っても良いかなという動きが出てきてるね。

実際、このWeb食いでもgoogleフォントを使ってるけど、SEO上位表示されてるし。

へぇ~そうなんだ。

これから、スマホの性能が上がれば、さらにWebフォントを使っても全く問題ない、という流れが来るだろうしね。

5Gになったら、動画も一瞬で読み込みが終わるみたいだし。

5Gって?

 

5Gの「G」は「Generation(世代)」の略。
現在の最新モデルである4G(第4世代携帯電話)、もしくは、4G LTEの上位に位置づけられる次世代の通信方式や携帯端末の通称を指す。

うん、つまりどういうこと?

超高速で超大容量で超大量接続が可能になるのが第5世代ってことさ!
だから動画もサクサク見られるようになるって言われてるんだよね。

へ~それは便利だね!早くきやがれ、第5世代!

本文フォントサイズは16pxに 重要度:★★★★★

love16px

なんで16pxなの?

16pxというのは、google推奨サイズなんだ。
この文字も16px!

16pxって、意外と大きいよね~

うん、でも読みやすいサイズだと思うぜ!
12pxとかでも読めなくはないけど、老眼の人とか弱視の方は、かなり読みづらいはず。

マイクロコピーのように「あえて小さく記載する」というケースを除いて、基本16pxに指定しておいた方が良いぜ!

全部を16pxにすればいいの?

んなわけあるかい!
最小サイズを16pxにってことだから、見出しは22pxにする、とかはアリアリよ!

というか、全部16pxだと、文章に強弱がなくなって読みづらくなっちまうぜ!

バランスを重視してってことね!

行間を広めに設定するのも忘れないようにだぜ!

…をうまく活用しよう 重要度:★★★☆☆

…の活用

…があると、何がいいの?

続きがある感を出せるんだよね。

単なる削除ボタンだと、急遽作っていたものが消されてしまう気がして、ちょっと押すのが怖いじゃん?

特に、ITリテラシーが低い人(PC操作に慣れていない人)は、「削除ボタン、本当に押して大丈夫だろうか?」とドキドキしてしまうぜ。

あ、Macって、メニュー開いてみると、…が活用されてるね!

 

macのメニュー

そうそう、無意識に見てると気づかないけど、「使いやすくするにはどうしたら良いか?」ってことを意識しながら見ると色々な発見があるよね!

奥が深いぜ、UI/UX!

UI/UXとかユーザビリティとは関係ない話だけど、よく「ITリテラシーが高い・低い」っていう言い方するじゃない?

これ、あんまりITに詳しくない人は意味がわからないから、もしお客さんがITに疎い人だったら、そのお客さんに合わせて会話やメールの言葉選びを考えるようにしようね。

カタカナとか専門用語ばっかり使う人、めっちゃたくさんいるけど、正直お客さんからしたらチンプンカンプンだからね。

あ~確かにそういうスかしたやついる~!
アサインとか、イニシアチブとか言う人ね!
普通に日本語で言えって感じだよね。

それそれ~!
そういう細かいところに気づける人が、UI/UXでも些細な点に気づけたりするもんさ!

読ませたいところはコントラストを強めよ 重要度:★★★☆☆

白黒ハッキリ

コントラストってなあに?

白黒はっきりしてるかどうかってことさ!

  • 白黒はっきりさせる=コントラストが強い
  • 白黒はっきりしてない=コントラストが弱い

っていう風に表現するぜ!

なるほどね!
当然、読ませたい部分はコントラストを強めると思うんだけど。。。

こんな当たり前のことをなんで取り上げたの?

かっこいいデザインを作ろうとすると、意外と忘れちゃうんだよ。

例えばさ、Webデザインギャラリーとかで素敵なサイトを開いてみてよ。

本文文字のカラーコードを見て欲しいんだ。

本文って真っ黒(カラーコードでいう#000)になってるのが普通じゃないの?

そんなこともないぜ、ちょっとだけ黒を薄めてるパターンが多いんだ。

例えば以下の「東京医療保険大学」のサイト。

本文文字のカラーコードが「#111」になってるぜ。

東京医療保険大学

ほんとだ!なんで真っ黒にしないの?

真っ黒よりも、ほんのすこーーーしだけ薄くした方が、デザイン的によく見えるんだ。

文字だけじゃなくて、淡い色とか薄い色っていうのは、デザインにおいてかっこよく見えたりする!

え、この東京医療保険大学のサイト、別に読みにくいってことは全くないけど、何か問題あるの?

このサイトは全く問題ないよ!良い例として出しただけだから。

問題なのは、「薄くする」とか「淡くする」っていうテクニックを多用しすぎると、コントラストが弱くなっちゃって読みづらくなっちゃう、ってことなんだ。

実際にそういうケースを僕は何百回も見てきたし、Webデザインギャラリーに載っているようなサイトでも「読みづらっ!」って思うものが出てくるよ!

なるほど…テクニックに走りすぎるなってことね。

恋愛と一緒ってことさ!

いや、キモいわ。

メニューを閉じる