【超基本】ネットショップの「スマホページ」おすすめフォント設定

この記事は過去に書かれた「ogaRia繁盛レシピ」を再掲載しています。予めご了承くださいませ。

いつもお世話になっております！株式会社オーガランド、ogaRiaチームです。

現在、スマートフォン経由のインターネット通販が急成長しています。ヤフーでは流通総額に占める比率が10％超となっており、楽天では昨年対比で10倍に達する月もあるそうです。購入単価についても「PCやモバイル経由よりも20-30％高い」との情報も。

スマートフォンに強い店舗、そうではない店舗。分岐点は今かもしれません。

スマホの基本フォントは？

Macで制作なら「ヒラギノ角ゴPro W3」

MacOSのiPhoneで表示可能な日本語フォントは下記の2種類。

• ヒラギノ角ゴPro W3
• ヒラギノ角ゴPro W6

文字の太さが違う為、使い分けてメリハリを付けやすくはありますが、Androidに標準インストールされている「Droid Sans Japanese」には、「ヒラギノ角ゴPro W6」にあたるフォントがありません。

また、ボールドでの強調も不可の為、太さの違うフォントを組み合わせてもAndroidスマートフォンでは対応できないため、意図した表現ができません。

そのため、iPhoneでのフォント表示は「ヒラギノ角ゴPro W3」のみを使用し、ボールド表現に頼らないスッキリとしたデザインをする必要があります。

Windowsで制作なら「メイリオ」

上記のiPhone表示の説明で、Androidスマートフォンに合わせる為、「ヒラギノ角ゴPro W3」を推奨しましたが、Windows環境で作成する場合、元々、「ヒラギノ角ゴPro W3」は標準インストールされておりません。

スマートフォンサイト制作にかかわる機会が少ない、またフォント環境が整っていない方も多数いらっしゃると思います。

そこで有効なのがWindows Vistaより標準搭載の「メイリオ」です。

「ヒラギノ角ゴPro W3」と比較しても見た目がほぼ変わらないため、制作時と実際にスマートフォンで見た時の差を抑える事ができます。

フォント比較

「ヒラギノ角ゴPro W3」と「メイリオ」は共にほぼ同じ見た目ですが、「MS Pゴシック」では明らかな違いが確認できます。

このように見た目の違うフォントで制作をすると制作段階では一行だったテキストが実機で確認したら、改行されてしまったという事もありますので今後、スマートフォンサイトを作成される場合はご注意ください。

それでは、また次号もお楽しみに！