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

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

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

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

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

 

    UNITORO以外の最近の投稿

    Recent entries

    LNOZsdBsozFuBKN8.jpg

    はやり目(ウイルス性急性結膜炎)とかいう病気になった(*´ω`*)

    21AHIAK9yAYuZaEa.jpg

    CKEditor4.5をiPhoneで快適に使う方法

    E5_nlzKrjGaesyYH.jpg

    Windows7のCドライブが100%になるトラブル

    fRCuQMu7B7G2j5r4.jpg

    ローランスHDS3・Tiでついにリアルタイム等深線マップ作成が可能に!?

    uF4GDnWEslXvgOD7.jpg

    B.A.S.Sエリート第1戦ウィニングルアー

    picture from keitai

    バレンタインスペシャル

    3g_4ErKJATHUKh1n.jpg

    2017年のJBTOP50はボートが3種類必要

    l2N0atqBA5GYK8L4.jpg

    釣り道具をアメリカから輸入したときの関税について

    uZHPQ2sq8peb1soI.jpg

    久々にダラダラと駄文を書いてみる

    SEdbip8SZMwsy8ZJ.jpg

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

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

    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タッチが原因か?

    Category

    Popular entries 2016

    Popular entries 2015

    Popular entries 2014