creatersnest138

モバイル(スマートフォン)サイトに最適なフォントサイズとは?


モバイルフレンドリーの影響で見直されるスマホサイト。
閲覧しやすいフォントサイズとは?
またエラーにならないフォントサイズとは?
実際に検証してみた!

「画面が見にくいから」が6割を超えるモバイルサイトの現状

web_200

近年Webサイトもスマホの普及によりPCだけではなくスマホからの閲覧も多く見られます。
まだ、製造業や建築業などのサイトでは、モバイルの割合は2割程度ですが、業種によってはモバイルからの方が逆転して
いるサイトもあります。
特にECサイトではモバイルからの利用が増えています。実際私が担当していたECサイトはモバイルが6割と、PCを超えて
いました。
リサーチバンクのインターネットショッピングに関する調査の数字をみても、2013年1月のスマホからの利用者は13.1%
に対して2015年1月の調査ではスマホからの利用者は47.6%とここ数年で延びていることが分かります。
でもスマホを持っているのにPCからインターネットショッピングをするという方の理由は2013年1月も2015年1月も
「画面がみにくいから」という答えが6割を超えています。

2015年4月21日より実施が始まったモバイルフレンドリー

Googleは2015年2月27日に「スマートフォン利用に最適化されたサイトが「モバイルでの」検索結果で優遇されやすくなる
ように変更する」との発表をしました。
要約しますと、モバイルサイトでも適切な設定で最新端末でも表示が可能なサイトが検索結果で優遇されるということ。
このモバイルサイトはきちんとコンテンツとして利用ができているのか?
読みやすいのか?モバイルでの表示を想定して作成がされているのか?という内容です。
では、具体的には何をどう変更すればよいのでしょうか?

GoogleのモバイルフレンドリーテストでURLを入力し解析をしてくれます。
解析の内容は以下の項目で、
・テキストのサイズ
・リンクの間隔
・モバイル用viewportの設定
・コンテンツの幅の大きさ
以上4点を判断してくれます。

適切なフォントとは?実際にモバイルフレンドリーテストをして検証してみました。

web_201

テキストが小さすぎて読めません

との結果を受けてフォントの大きさを変更してみました。
すると、10pxでエラー対象、11pxからエラーが消えました。
ということは、11pxならOKということが分かりました。
でもこれは、あくまでもOKのギリギリのラインです。
「読みにくい」を解消するにはせめて12pxは必要ということですね。
ニュースやコラムなどを扱うサイトでは最大フォント15px、最小フォント12pxと通常私たちが読み物として目に触れている
サイトの文章は12pxが多いようです。

まとめ

モバイルの利用者が増え実際にECサイトではPCより閲覧が多くなっている状況を考えれば、Googleがモバイルフレンドリーを
導入したことにも納得がいきます。
また検索順位に左右されるとなれば多くのサイトオーナーはモバイル対応を進めるであろうという、導入の仕方はウェブサイト
全体に向けてモバイル最適化を促進するには適切な判断だったといえるでしょう。
実際このモバイルフレンドリーがなければそこまでスマホの「見にくい」「読みにくい」の対応は遅れていたかもしれません。
Webデザイナーにとってもしっかり基準を設けてくれることは制作しやすくなります。

web_202

 

未だにスマホで見ると画面からはみ出しているサイトも少なくはなくはないです。
利用者のことを考えればモバイルも「見やすい」を追求することは必要です。
フォントサイズも「見やすい」を優先し、最低サイズを12pxと定義しておくのがいいですね。
より快適に閲覧してもらうこともWebデザイナーにとって必要なスキルですね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


yamatama

紙面のデザイナーからWebデザイナーに転身。紙媒体とWebの違いに戸惑いながら制作・Web解析を学んできました。 現在はフリーで活動中。 一児の母(小学生の娘)

Next ArticlePhotoshopで半透明のグラデーションをかける方法と参考になる美しいサイト10選