mizukiUIデザイナー2023.03.16アイデアを形にする#UIデザインShareリンクをコピーしましたこの記事は約11分で読めます。こんにちは!mizuki(@kikapyon)です。フォントサイズは、デバイスによって読みやすいと感じる大きさが違い、何に沿って決めていけばいいか最初はよく分からないですよね。この記事ではフォントサイズを決めていくためのガイドラインや業務で使えるコツをご紹介していきます。私のようなUIデザイン初心者で、そもそもどのくらいのフォントサイズが普通なんだ?と疑問に思っている方や、初心に立ち返ってフォントサイズについて知りたい方はぜひご覧ください。結局のところ、適したフォントサイズってなに?結論から言うと決まり・規則は無いフォントサイズは必ずこれ!これなら間違いない!という決まりはありません。いうのも、想定される表示環境(デバイスや解像度や用途など)が多く、適切なフォントサイズはその時々の状況によるからです。そのため今回は、最終的な記事のゴールとして「手元にある本を読む時のような自然と心地良いフォントサイズ」を模索していく時に役立つ情報を集めました。論文や記事などを調べてみて、いくつか参考になりそうなガイドラインや考え方のコツなどを発見したのでそちらをシェアしていきますね。調べたところちょっと面白いガイドラインを見つけました。読みやすいのはベースラインから0.3°の高さの文字です。これは理論的には素晴らしいことですが、実際には計算が非常に困難です。見ているモニター環境などが違うので一概に言えないのはもちろん、いちいち測ってデザインするのは現実的ではないですよね。規則が無いならどう決めていけば良いのかというわけで、ここからは実務で使えるフォントサイズを決める方法を4つ紹介します。1.デザインガイドラインを参考にする実はマテリアルデザイン(Google)やDeveloper(Apple)という有名なガイドラインがあります。この2大ガイドラインを理解しておくのがおすすめです。フォントサイズだけでなく、あらゆるUIデザインの基礎知識が身につき、自分のデザインに活用できるようにからです。design(Google)マテリアルデザインのデフォルトのフォントサイズは、16pxのRoboto、セカンダリーフォントサイズは14pxです。Pro、セカンダリーフォントサイズは15pxです。参考:Typography会社によっては、偶数単位(12px、14px、16px...)でデザインしたりと、各々のガイドラインを運用しているところもあります。2.ページの用途別にサイズを変える快適なフォントサイズは、用途別でも異なります。デスクトップWebサイトまたはWebアプリの場合、ほとんどはテキストが多いページとインタラクション(相互作用によるユーザーとページの交流)が多いページの2つに分類できます。テキストが多いページテキストが多いページは記事やブログ、ニュースなどです。これらは、ページ上にユーザーの目的があるページなので、インタラクションは少なく、あっても少しのリンク程度です。テキストの多いページでは目が疲れないように、より大きなフォントサイズが好まれます。記事やブログなどのページ以外では、よっぽどでないとページ内の全ての文字を読むことってなかなか無いですよね。装飾的な意味でのテキストと、テキストがメインのコンテンツは同列では語れません。インタラクションが多いページインタラクションが多いページはホバー、クリック、リストまたはテーブル内の項目の検索、編集、入力などを頻繁に行うページです。ページには多くのテキストがあっても、すべてを読むものではありません。テキストが多いページと違い、比較的小さいテキストサイズでも許容されることが多いです。ページ内でより重要な意味を持つテキストはより大きく、目立つようにする必要性があります。け】デジタルプロダクトにおける最適なコントラスト比を考えようコントラスト比を改善する方法!3つの事例と共に紹介3.できるだけ少ないフォントサイズを使う多種類のフォントサイズを使用してしまうことは初心者のUIデザイナーがやってしまいがちです。私もよく分からずにそれぞれの箇所に合わせた多くのフォントサイズを使っていました。全体を見た時まとまって見えないなと感じることが多々ありました。サイズの種類が多いと、メリハリがつかなくなって全体的にぼんやりとした印象になってしまい、本来の読ませたいテキストを読んでもらえなかったりします。インタラクションが多いページであったとしても、合計で約4種類のフォントサイズを使用すると、見栄えがよくなります。少ないフォントサイズの中でも、しっかりと強弱をつけてみてください。4.他言語のサイズ感を知っておく画像を見て分かるように、同じptのテキストでも英語と日本語を並べて比べてみると、顕著に違いが現れます。言語によっては大きさが異なることを理解した上で、その都度サイズ感を調整しながらデザインしていくのがおすすめです。デバイス別のフォントサイズについて常に実際のデバイスでデザインを表示することモバイルのフォントサイズを検討する際、必ず実際のデバイスでデザインを表示することをおすすめします。pc画面などでのデザインの感触は、手に持って見ている時とは大きく異なるため、逐一確認していくことが大切です。デスクトップで見ていたデザインを手元で確認してみると、フォントのサイズや間隔などが思っていたデザインとずれていることが多々あります。プレビューを確認する際も、画面に合わせて拡大されている場合があるので、実際のサイズ(100%)になっていることを再度確認してください。デスクトップ環境とモバイル環境の感じ方の違いまずユーザーは以下のような理由から、デスクトップと比べてモバイルでWebを見ることに負担を感じています。ダウンロードが遅いデータ入力用の物理的なキーボードが無いマウスが無いため、コマンドを使用したりコンテキストメニューを開くことができないモバイルに未対応のデスクトップ用Webサイトでは操作がしにくい画面が縮小されるためテキストも小さく表示され、見にくい一貫性のない奇抜なアプリUIである私自身も画面とテキストが縮小されて見にくくなってしまうので、わざわざパソコンを取り出してwebページを開いた経験があります。こんな時、さらにテキストが小さく見づらかったら、特に文字の多いページはユーザーの読む気を無くしてしまいます。デスクトップモニターと比べてモバイルのコンテンツ理解度は48%という研究結果が出ています。同じデザインでも約1/2も差が出てしまうので、そこを頭に入れた上でより分かりやすく2倍認知しやすいUIを作っていきたいですね。け】デザインにすぐ活かせる!カラーや形やサイズの一貫性がユーザーにもたらす影響をまとめてみたおわりにいかがでしたでしょうか。今回は読みやすいフォントサイズの決定へのコツをご紹介しました。これさえ覚えとけば間違いないというフォントサイズはありませんが、知識があればより見やすくデザインできます。紹介してきたような参考情報をいくつか持っていれば、とりあえずは安心ですよね。どのデジタルプロダクトで表示されるか、ページの用途は何かでも変わってくるため、大体のガイドラインを参考にしつつ、それぞれの環境デバイスで必ずチェックしながら決定していくのがおすすめです。mizukiUIデザイナー2022年9月ジョイン株式会社Flowz学生インターン生。自分のアイデアを形にすることを1ヶ月毎日続けてみた結果。tomokiデザインストラテジストアイデアを形にするサービスデザインファーム。インタビューしてもらって改めて気づいた、少数精鋭ならではの強みと、独自のソリューション。弊社デザイナーが出会った、素敵なデジタルプロダクト上の体験6つまとめてみました。鬼、弊社取締役に利きコーヒーを通じてリサーチしてみた。今月卒業するインターン生にインタビュー。tomokiデザインストラテジスト自分のアイデアを形にすることを1ヶ月毎日続けてみた結果。Flowz.incについてFlowzは、サービス開発に必要な調査・仕様設計・UI/UXデザイン・検証・開発を一気通貫でサポートするサービスデザインファームです。新規事業を立ち上げたいけどリソースがない、新しい体験を作りたいがユーザーのことがわからない、そんなお悩みをお持ちの方はご相談ください。