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

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以外の最近の投稿

    OvHnLtapAV9PsJEh.jpg

    安いベアリングをタトゥーラSVTWSのノブに入れたけど効果なし?

    このページに書いてる内容は間違いです。以下のページが正し...

    「オレの買い」 08月17日(木)

    IXRCqbQtfDgDogDK.jpg

    レジットデザインワイルドサイド3本

    未だにレジットなのかレジッドなのか迷うオレw きっとロゴマ...

    「オレの買い」 08月15日(火)

    ry0ikqiQ6XOGOTJy.jpg

    ゲーリーの黒バズベイト

    オレの中でのNo1はOSPゼロワンバスですが売ってない(´...

    「オレの買い」 08月15日(火)

    17年08月08日 八郎潟 8月のGo86ツアー2017 1.5/1.5

    朝起きて天気予報を見てみたら・・・秋田県だけ見事にぽっか...

    「オレの釣り」 08月12日()

    WNqLwgCb6M97RBWd.jpg

    タカ産業「汚れても安心ベルト」でダイワのFF船バッグのベルト交換

    バッカン愛用者です。なんでも突っ込めて防水でテキトーに色...

    「オレの買い」 08月11日(金)

    17年08月07日 八郎潟 8月のGo86ツアー2017 1/1.5

    そんな訳でオレ的な真夏の八郎の釣りは 沖の浚渫の釣り(ディ...

    「オレの釣り」 08月11日(金)

    QvEkbv8X45soPW_C.jpg

    TATULA SVTWを2個増設

    7月の頭に書いたこれ ダイワ タトウーラSV TWのインプレ...

    「オレの買い」 08月04日(金)

    17年08月01日 榛名湖 14mのトップパターン研究

    張り切って榛名山を登ってみたけど現場についたらさざ波・・...

    「オレの釣り」 08月03日(木)

    n6t6feD1Q4OvwXwb.jpg

    最近かったのいろいろ7月下旬

    YGKリアルDtexプレミアムWX8 0.4 弊社のトラウトマンが絶...

    「オレの買い」 08月01日(火)

    17年07月26日 桧原湖 デスアダーへの愛

    それまで曇天・雨が続きフットボールジグが炸裂してた桧原湖...

    「オレの釣り」 07月28日(金)

    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 2016

    Popular entries 2015

    Popular entries 2014