「文字小さくておっさん泣かせ」スマホサイトの最適な文字サイズは?

2017-02-09   

 

SEdbip8SZMwsy8ZJ.jpg

表題の件。40歳以下の方はスルーしてください(*´ω`*) 40オーバーの皆さんへ。

スマホサイトの文字小さくて見づらくないですか?

あくまでもブラウザ(サファリとかクローム)でみるwebの話です。スマホアプリの話ではありません。iPhoneの場合、iOSの設定で文字サイズを変えられます。OS側で文字サイズを大きくすれば対応してるアプリもたいがい文字が大きくなります。さらにアプリ自体の設定で文字サイズを大きくすることも可能です。なので「アプリ」はそれほど問題ありません。

以下にアプリの例を挙げてみます。

ニュースキュレーションアプリのSmartNews。

aNI4aywtj0VmqXkf.jpg

iOSで文字サイズを大きめに設定してるからSmartNewsの見出しも大きくて良い感じです。

SmartNewsで読売オンラインを開いた画面(19px)

bG8CR151kmpZ6Nsl.jpg

↑以降、画面サンプルの下に一行あたりの文字数を表示しています。この例では一行「15文字」。とても読みやすいです(*´ω`*) 

※見出しの横の(19px)はPCで言う19ピクセルという意味。iPhone7はPCと解像度が違うし、サイトごとに左右マージンが違うので単純計算できないけどおおよそ「570px÷2÷文字数」で計算しています。CSSで指定された正確なpx数ではありません。なおptではなくpxです。

フェイスブックアプリ(15px)

IxusD651iZaokBD3.jpg

これは一行19文字。読みづらくはないけど、ちょっとツライw

twitterアプリ(19px)

E5SEfTOdYKpIyuSm.jpg

これも設定で大きくしてるので15文字。らくらく読めます。


そしてこのエントリーの本題です。

オッサンにはブラウザで見るサイトの文字が小さすぎるぜ!読ませる気あんのかよw

Web版Facebook(10px)

ivaBD7Skmvi97QgT.jpg

アプリ版が19文字だったのに対しweb版になると一気に27文字!!10ピクセル!!こんな小さい文字読むにはiPhoneを50cmくらい離さいないと無理っす(*´ω`*) もともとアメリカの学生向けに始まったサービスとはいえ今の日本ではオッサンが一番使ってるんだからなんとかしてください(*´ω`*)

オッサンと言えば、オレより上の世代も読んでるであろう新聞社の公式サイトも調べてみました(普段はキュレーションアプリ経由で見るから、公式サイトを見ることがない)。

読売オンライン公式web(約13px)

KnBIJ7hMKxSIJ8q8.jpg

アプリでは19pixあったのにサファリで開くといきなり13pxくらい。これはかなりキツイレベルですオレは。

朝日.com公式web(15px)

EQ7KXTe2ETV6p_0_.jpg

一行あたりの文字数は、読売に比べ3文字少ないだけですが、断然読みやすい。

Yahoo!ニュース(約13px)

JYr71q9H1hi3KlQ5.jpg

読売オンラインを同じです。行間がちょっと広いかな?恐らくニュースサイトでは日本トップクラスのアクセス数だと想像しますが、そのサイトがこの小ささ・・・うーーん、オレは一切開かないけど、普段これを読んでいるおじさま達は読み難くないのかしら?

Google(約12px)

M8uBswDAH11tfjkq.jpg

ちなみにwebの神とまで言われるgoogle様は23文字。ちっさいわぁ。ただし「見出し」メインのGoogle検索結果と「長めの本文」とではまた印象が違うんですよね。

THE PAGE公式サイト (10px)

4gBTUXetHvJ7ezBv.jpg

Yahoo!の子会社がやっているニュースサイト。オレもちょいちょい見ますが、ターゲットは明らかにおじさま年代なはず。なのにまさかの10ピクセル!!!これは運営側に反省を求むレベルw

しかも。

上に挙げた大手新聞社やYahoo!ニュールは英数字記号が「全角」です。全角英数字なんてダサくて死んでも使いたくないけど大手老舗ニュースは全角なんですよね伝統的に。

で、THE PAGEを始め以下に載せてるサイトも英数字記号は全て半角です。なので「一行に何文字」と表記してますが文中に英数字が多いと一行あたりの文字数が増加します。

なので、上に載せたThePage26文字~っていうのも二行目はMainichiって半角ではいってるんで一行あたり30文字を超えています。

ちなみに

全角英数字 ABCDEFG12345
半角英数字 ABCDEFG12345

です。また半角英数字はiとWでは横幅が全然違うのでillustとWOWOWでは幅が全然異なります。日本語(と全角)は基本は同じ幅。

話を戻して

TechCrunch Japan(12px)

YNOIQMuh_0eAfM8m.jpg

WEB系のニュースサイトで長年twitterフォローしてサイトを見てたけどこの前フォロー外しました。理由は「文字小さくて読めねw」。この記事を書くにあたって調べたら12px。しかも文中に英字が多いので余計小さく感じるんですよねぇ。

tenki.jp(約13px)

FeI5i2EHqUwmZMIS.jpg

老若男女みるであろう天気情報サイトなのにまさかの13px。

この記事を書くにあたりこうやって数字を出してハッキリ解りました。あくまでもオレの場合ですが13pxはけっこうツライ。12px以下は読む気を失せる。15px以上が心地よい。

番外でアメリカcnn

kwzp9_6c6iRdSckF.jpg

先に書いたように日本語とアルファベットでは全然表示方法が違うので単純に比べられないけど一行に40文字以上ありました((((;゚Д゚)))) でも、英単語ってそれぞれ長さもバラバラなので、なんとなく斜め読みで読めちゃうのかもしれませんねネイティブの人たちは。有名なTypoglycemia、最初と最後の文字が合っていれば人間はたいてい読めるってやつみたいな。


みなさんが今読んでるUNITOROは20pxです。スマホの場合左右に大きく余白とってるんで一行あたり15文字です。

他のサイトよりかなり大きいんですが小さいと俺自身がウザくて読みたくないからです。

更にオレの釣りに至ってはもっと大きくて24pxです(*´ω`*)

Rvx073LWmKPOt70K.jpg

これはUNITOROよりも長文傾向になるので、なるべく読みやすいように大きくしてます。若い人には大きすぎてウザいかもしれませんが高齢者に優しいサイトでありたいのでお許し下さい(*´ω`*)

っても、ちょくちょく文字サイズなどは調整してて、未だにこれがベストってのはなくて模索中です。

なお、iPhoneのサファリの場合URL欄左のアイコンタップするとリーダーモードになります。

s39OoRnxZSG9hgJ7.jpg

これはめっちゃ読みやすい。色の反転もできるし文字サイズもめっちゃ巨大化可能。オレも長い文章読むときはこのモードにしています。これにすると広告も消えて超快適。

けど多くのニュースサイトは広告収入で運営されてるわけで、読み憎さのあまりユーザーがみんなリーダーモードにしちゃったら運営自体立ち行かなくなりますよね。そもそも同じニュースをアプリ版で快適に読めちゃうし。

ってことで、こんな個人サイトでアツク語ってもどーにもならないけど、世の中の(おっさん向け)スマホサイトの文字サイズが軒並みもっと大きくなることを願います(-ω☆)

 

カテゴリ:PC・スマホ・WEBネタ

UNITORO以外の最近の投稿

N/A

twitter

Recent entries

0crVXm8ypaDHEpWs.jpg

八郎潟の放流量と水位がリアルタイムでわかるサイト

_m4pI4GcuBXQRtGL.jpg

2016シーズン榛名湖バス釣りオレなりのまとめ3月~6月編

s7Hc0LUZe4JeRus7.jpg

Windowsの画面操作を動画としてキャプチャしてくれる無料ソフト「AG-デスクトップレコーダー 」

AZAscIi9kasOd5Cm.jpg

iPhoneの写真がデカすぎて色々困った時はこのアプリで一発縮小

ナカバヤシ コレクションケース ミニ ワイド 透明アクリル棚板タイプ ブラックを1/43モデルカー用に買ってみた

oOIlFSnKCnVl5I74.jpg

お気に入りのルアーをディスプレイしてみる?

7JbZkxWrzSWgPkp6.jpg

Dマガジンで実際に読めるページをベストカー誌で比べてみた

15MDtpsjJF1bHHae.jpg

Google Chromeでアメブロが真っ白になるやつの解決方法

ゴルフ7ネタ『VW純正 インフォテイメントシステム Discover Proのブルートゥース割り込みについて』

ゴルフ7ネタ『VW純正 インフォテイメントシステム Discover Proのブルートゥース割り込み』問題解決に Anker® ポケットサイズ ポータブルワイヤレススピーカーを買った

WTzbkVq7CjCF9yl0.jpg

ひげ剃りの替刃が買えないトラップにはまらないようにamazonで買ってみた

UtWE7vntu7wOS91Y.jpg

2017年JBトップ50第2戦が開催される「弥栄ダム」についての予習

sqnxX2YC4ohzJ1lU.jpg

乾燥と爆風で

hvY3xPNnohpKWI4L.jpg

VW 6代目ポロよりも先にセアト・イビサ登場

t4jfQ1nxccr9lum9.jpg

Google日本語入力がクロームでめっちゃ重い問題を解決

YgLAjHrUCmWc_kYE.jpg

月額432円で170冊の雑誌が読めるDマガジンを契約してみた

0MFccg0zaXtZN5Tq.jpg

VWポロを初めて運転した結果・・・

TLESK3TyFF__QwKU.jpg

VWゴルフ7ネタ『タイヤ周りの異音が解消』

8AZ86eX76capbnmM.jpg

VW新型ティグアンに試乗してきた(-ω☆)

6IOjoBtPFX6wxFC8.jpg

iPhone6S/7でタップが効きづらいやつ→3Dタッチが原因か?

RhMcpiPwEjawjoiv.jpg

パソコン操作の効率化!キーボートショートカットを使う手癖をつけよう

picture from keitai

俺の旅2017予定

zPigYeAduWvqJnRY.jpg

レトロデジカメ「ソニーデジタルマビカ MVC-FD71」

p0Ah42_4vxcXtM5d.jpg

12VバッテリーでUSBスマホ充電する防水ケーブル

HbDEQVFbZlBIx1Zk.jpg

今江克隆☓伊東由樹 共同開発中シャッド

j3rcvqoJbBLVpMFo.jpg

amazonプライムビデオで本場アメリカのバス釣りTV番組が見れる

lMdj5FHhEOlHXe5n.jpg

ランクル200でドライブ

T7k1bWgyzHoiajrv.jpg

水槽の水が茶色く濁るので薬品入れたら劇的にクリアになった!

picture from keitai

素晴らしい青空

picture from keitai

雪の赤城山

UvN3ynrmZhcn6nLb.jpg

韓国タイヤ「ネクセン」の正規販売がスタート!

Category

Popular entries 2018

Popular entries 2017

Popular entries 2016