スマートフォン対応でメイリオ化してみる

2011年08月17日 02:07スマートフォン対応でメイリオ化してみる

私が運営しているサイトでは、font-familyを「Verdana, 'ＭＳ Ｐゴシック', 'Osaka', Arial, sans-serif」と指定しています。基本的にWindowsでは英数字はVerdana、それ以外の文字は全てＭＳ Ｐゴシックで表示されます。

このVerdanaとＭＳ Ｐゴシックのフォント幅に合わせて、各サイトの文字数とデザインの幅を調整しているわけです。例えば、「あいうえおかきくけこさしす」の13文字まで表示できるようにした箇所では、当然パソコンで閲覧すると、正常に表示されます。

しかし、スマートフォンで見てみると、「あいうえおかきくけこさし」までの12文字しか表示されません。

この原因はスマフォではサーバー側のCSSに影響することなく、Android Browserでは「メイリオ」、Safariでは「ヒラギノ角ゴ Pro W3」といったfont-familyが使われるからです。

この2つのフォントは、Windows XPユーザーには馴染み深い「ＭＳ Ｐゴシック」とは異なり、等幅フォントですので「かな、カナ、漢字、句読点」が全て同じ横幅で表示されます。そのため、等幅ではみ出してしまった文字が、ズレてしまう障害が発生します。

運営中のアフィリエイトサイトの「ブラウザとOS別」のセッション数を調べてみたところ、Android Browser（Android）が約12％、Safari（iPhone＋iPad）が11％もありました。

Safari（Macintosh ）も合わせると1/4以上が等幅フォントなわけです。そろそろスマフォ対応しないとユーザーの直帰率が上昇していきます。

確かに手持ちのAndroidケータイやiPadで自分のサイトを見ると、強制的にメイリオかヒラギノ角ゴ Pro W3に変換されてしまい、以前から「記事が読みにくい」とは気付いていました。

そこであるサイトのfont-familyを「"メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "ＭＳ Ｐゴシック", "MS PGothic", Arial, sans-serif」に置換してみました。ついでにmarginとline-heightもいじっています。

その後、この「副業するサラリーマン」のブログも、スマフォやタブレット、もしくはWindows 7などで閲覧すると、メイリオやヒラギノ角ゴ Pro W3が表示されるように改修してみました。

最初は読み慣れないかもしれませんが、facebookなどもすでに等幅フォント化をされています。これからはＭＳ Ｐゴシックではなく、メイリオが一般的になるはずです。

また、アフィリエイトサイトのような情報を数ページ読んで、リダイレクトさせるサイトでは、わざわざスマフォ専用のCSSを含めたコンテンツを提供するほどの対応は必要ないと考えています。その手間をかけるなら新規サイトを制作するほうがコストパフォーマンスは高いでしょう。

最低限のスマフォ対応として、今回の等幅フォント化とサイトの画面解像度は横幅800pxで紹介した横幅の800px固定化が必要だと感じます。

Tweet