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

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

    17年06月21日 八郎潟 6月のGo86ツアー2017 3/3

    STC到着と同時にODメーターが7万キロジャスト!いぇーーーい...

    「オレの釣り」 06月25日()

    17年06月20日 八郎潟 6月のGo86ツアー2017 2/3

    はい2日め。今日も天気予報的には初日と同じような感じらしい...

    「オレの釣り」 06月24日()

    17年06月19日 八郎潟 6月のGo86ツアー2017 1/3

    薄曇り弱風。気温は恐らく秋田のこの時期の朝にしてはかなり...

    「オレの釣り」 06月24日()

    vL1CwkCB8C6YICEZ.jpg

    「夏の扉」フロッグ・ロングワーム・ディープクランク

    ついに夏の扉が開いて裸足の季節がやってきました♪ がまフ...

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

    17年06月13日 霞ヶ浦 フロッグ講習会in霞ヶ浦

    暑い熊谷生活してると他の地の気温感が謎で困っちゃう。普段...

    「オレの釣り」 06月15日(木)

    otl3lWxGvNHh0Tn8.jpg

    ダイワ タトウーラSV TWを買い増し

    ついに恐るべき事態に((((;゚Д゚)))) 去年ダイワの試投会で...

    「オレの買い」 06月13日(火)

    jizYTKWFdiCL6akg.jpg

    補充いろいろ

    あさって火曜日は霞水系にいく予定です(*´ω`*) ...

    「オレの買い」 06月12日(月)

    _vtPAEuQTL9O2c4a.jpg

    ティムコアーマーチャガー

    SNS界隈ではティムコのネズミが話題のようですが、あれではな...

    「オレの買い」 06月10日()

    17年06月07日 榛名湖 ミッド~ポスト期。無風に散る。

    素晴らしい曇天です。気温は13度だったかな?Tシャツ一枚で汗...

    「オレの釣り」 06月09日(金)

    17年06月01日 琵琶湖 琵琶湖に八郎潟を求めて

    そんな訳で今ではイマカツ社からスポンサードされ去年までト...

    「オレの釣り」 06月09日(金)

    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