文字が読みやすいスマホサイトを制作するには？

通勤電車の中ですごい勢いでスマホに顔を近付けて見ている方々を頻繁に見かけます。制作現場よりもリアルにアクセシビリティについて考えさせられる瞬間です。

AppleやGoogleのガイドラインからヒントを得る

文字が読みやすいスマホサイトを考える上で、AppleのヒューマンインターフェイスガイドラインやGoogleのMaterial designガイドラインはすごく参考になります。

アプリのガイドラインなのですが、スマホサイトはアプリと同じくスマホで利用しますので、ガイドラインに沿って制作されることが望ましいはずです。

文字は読みにくかったら意味が無い

Apple、Google両者ともに読みやすさを重視する前提で文字サイズ、ウェイト、行間、余白、コントラスト等が記載されております。

文字を読みやすくするには単純に文字サイズを大きくするだけでは無く、その他様々な要因が絡み合って、はじめて読みやすいコンテンツができると言うことです。

読みやすい文字サイズ

両ガイドラインに視力云々を考慮すると本文の文字サイズは15px、16pxで170〜180%の行間、見出しの文字サイズは17px〜24pxで140%程度の行間になります。

読みやすいデザイン

見出しと本文のみのシンプルな構造なら問題無いのですがHTMLには見出しレベルが1〜6まで存在するので、本文が16px程度になると見出しの文字サイズに頭を悩ませます。

見出しを単純に大きくすれば見出しが読みにくくなるので簡単な問題ではありません。それを解決するのがWebデザイナーの仕事なので、こういったガイドラインが気になったりするわけです。

読みやすいコントラスト

コントラストが低いと可視性が落ちますが、真っ黒（#000）の背景に真っ白（#fff）の文字のような高コントラストも目が疲れるため読みやすいコンテンツとは言い難いので、適度なコントラストをたもつのが読みやすいコンテンツと言えるでしょう。

文字が読みやすいスマホサイトを制作するつもりで制作する

文字が読みやすいスマホサイトを制作するには、文字が読みやすいスマホサイトを制作するつもりで制作することです。

何を当たり前なと思われるかもしれませんが、様々な要因をクリアし、はじめて読みやすいスマホサイトが制作できるわけですから、そのつもりが無いと良いものはできません。

個人的にはペルソナマーケティングのペルソナ次第ではある程度ユーザビリティやアクセシビリティは無視しても・・・・とは思いますが、デザイナーとしては誰が見ても読みやすくて好感がもてるデザインを作りたい！ってのは根底にある想いです。