Webサイトの最適フォントサイズ｜Yahooの実験をもとに実装

2023-06-03

今回はスマートフォンで見るWebサイトのフォントサイズは、何pxが読みやすいのか？という実験をYahoo!が大規模に行なっていましたので紹介します。

以前デザイン論文の記事を書いたときと同じく、デザイナーの筒井さんが紹介してくださっていましたので、筒井さんのVoicyは下記のリンクよりお願いいたします。

結論

フォントサイズは17px

行間は1.6

それでは、Yahoo!の記事をもとに紹介します。

これはスマートフォンサイズでのWebページ・アプリを対象に行われています。

ユーザーにとって、最も読みやすい文字サイズや行間はどのくらいなのだろうか？

その疑問をYahoo!が大規模に行なったものです。

スマートフォンの最適フォントサイズと行間

現代のWebサイトで一般的なフォントサイズは14〜16pxが多い印象です。

簡単にいうと、Webデザインの基本のようなものに8の倍数で数値を合わせていくと

綺麗に見えるといったようなデザイン理論があるからです。

ですので、一般的な文字サイズは16pxで、見出しは24pxや32pxなどが多いのではないでしょうか。

このサイトは、見やすさを強調していますので、見出しをさらに大きくしたりしています。

つまりデザイナーさんが企業や個人さんに合わせて、デザインしていく形が多いのです。

例えば、閲覧するユーザーさんが年齢層が高めであれば、明朝体のフォントにしたり標準のフォントサイズを18〜20ｐxのように大きくすることもあります。

他にも20代前後の女性向けであれば、10〜14pxの小さめのサイズにして、世界観や雰囲気に寄せていくこともあります。

たった1pxにこだわるほど重要なのか？そんな疑問が浮かんできますよね。

私はとても重要だと感じています。

なぜなら、現代人は文字を読む時間が、どんどん短くなってきているからです。

例えば、YouTubeやTikTokのように動画の媒体が増え、その他InstagramやTwitterなど主要で使われているSNSで動画が見れないSNSはありません。

総務省が2022年に発表した日本人の学習時間は平均13分ほど。

今では、YouTubeや他の動画媒体でも勉強ができるため、文字を読んで勉強する人も減っていることが想像できます。

この流れから考えても、ユーザーに少しでも心地よく文章を読んでもらう工夫は必要ではないかと考えます。

以前紹介したデザインの論文と併せて、見た目だけではなく論理的に裏付けされたデータをもとにWebデザインを行なっていきます。

Webサイトのデザインについて、研究論文がありましたので紹介させていただいています。

りょうまDesign

デザインの研究論文からわかる｜Webサイトデザインの第一印象 | りょうまDesign こんにちは、りょうまDesignです。一度は考えたことはありませんか？デザインの第一印象は何で決まるのだろうかこの疑問に対し、とても参考になることがありましたので…

制作したWebサイトは誰のためのものなのか？

その点を重視して、今後もクライアント様・クライアントのユーザー様が満足していただけるように制作を行っていきます。

主にホームページ制作を行なっています。その他、SEO対策、MEO対策、LINE公式アカウント構築等を承っております。