Web制作

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

2015.10.13

2017.05.23

スマホを見せ合う二人

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

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

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

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

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

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

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

読みやすい文字サイズ

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

読みやすいデザイン

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

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

読みやすいコントラスト

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

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

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

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

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

SHARE

この記事の筆者

デザイナー 若井 徳彦

デザイナー 若井 徳彦

ターゲットに合わせたUIやUX、目的を達成させるためのデザインをモットーに取り組んでいます。SEOやグロースハックとの親和性の高いデザインが求められてると感じています。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。