スマートフォン/モバイルデバイス

スマホファーストでWEBサイトを作るなら画像に文字入れは必須になってきた、では文字サイズはどれくらいが適しているのだろうか?

この記事は約2分で読めます。

soba200.jpgいろんなWEBサイトのアクセス解析を見ているが、PCよりもスマホのほうが閲覧が多いのが普通になった。今や、WEBサイトは「PCで見るよりもスマホで見る」ことを前提に作成しなければならない。また、WEBサイトで表示する画像には文字を入れたほうがよい。理由は、スマホでは「チラ見」する傾向が強いからである。スマホでは本文の文章は精読されにくいが、画像は目にとまりやすく見てもらえる確率が上がる。だから、画像に文字を入れたほうがよい。では、画像に組み込む文字サイズはどのようなサイズがいいのだろうか?

写真に文字を組み込む実験

同じ写真と同じ文字で、左右のピクセル数を変えた場合と文字フォントサイズを変えた場合で実験してみた。

▼画像の左右は400ピクセルでフォントサイズは20
soba400.jpg

▼画像の左右は800ピクセルでフォントサイズは20と40の二種類混在
soba800.jpg

本来の2つの写真は左右サイズが400ピクセルと800ピクセルと2倍の違いがある。しかし、当ブログで2つの写真を上下に並べた場合は2倍の差に感じられないはずだ。

その理由は、当ブログの本文コンテンツの最大幅がパソコンだと640ピクセルになっており、それ以上の画像は640ピクセルのサイズに自動的に縮小されるからである。

そしてスマホで見ると、2つの写真はほぼ同じ横幅になって見えるはずである。

▼上記2つの画像をスマホで表示したもの
IMG_0438.PNG

当ブログはレスポンシブレイアウトになっているため、WEBサイトを見るデバイスの最大表示横幅サイズで自動的にサイズが調整される。そのため、パソコンでは本文コンテンツの右にあるメニューが、スマホでは本文コンテンツの下部に移動しスマホで見ると本文コンテンツが横幅いっぱいに表示されることになる。

ここで2つの写真を比較する。

スマホで見た場合は、左右400ピクセルでも800ピクセルでも同じサイズの写真に見える。ただし、写真画像内の文字サイズは違って見える。左右800ピクセルの写真にはフォントサイズ20と40の二種類の文字が入っているので違いがわかるだろう。

ここで注目したいのは
左右400ピクセルの画像のフォントサイズ20と
左右800ピクセルの画像のフォントサイズ40は
まったく同じ見え方になる
ということである。

なぜこうなるかを左右400ピクセルを表示できるスマホの例で説明する。左右400ピクセルの画像はそのまま表示されるが、左右800ピクセルの画像は半分のサイズで表示されることになる。結果的に画像サイズは同じになる。そして画像サイズが半分になればフォントサイズも見かけ上は半分に見えるということである。
つまり、左右800ピクセルの画像を左右400ピクセルで表示させるとフォントサイズ40の文字はフォントサイズ20に見えるということである。

このことを意識して画像に文字を組み込む必要がある。