UNITORO

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

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

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

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

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

 

AD

AD

Recent entries

冬の自転車で指先が寒い!USB電熱グローブは駄目だったがハンドルカバーが最強だった話

月額780円YouTubeプレミアムライトに加入した

日本人の9割が知らない本当の暗闇:ボートルスケール3の世界

宅トレの救世主? Apple Fitness+が日本上陸!エニタイム会員なら3ヶ月ごとの更新で無料という神特典

Xプレミアムが解約できない!カスタマーサポート不在で起きた問題と解決法

「LAWSON 50th Anniversary presents Special LIVE ~ 櫻坂46 / 日向坂46 ~」に行ってきた

Lanzhouからの刺客!11月半ばから急増した中国からのBotアクセスをブロックしたつもりが日本の一部も遮断!生成AIとBot対策の「ご利用は計画的に」

あすけん卒業。ChatGPTとGeminiを併用した「ダブルAI査定」で挑む、初老の再減量ログ。

レーザービームプリンターの怪奇現象?IT歴40年と最新AIが「もったいない」に敗北した日

釣りもアクセスも失ったオレが、30年目に思うこと

iOS 26のミュージックアプリが「余計なお世話」すぎる?新機能AutoMixの衝撃と対策

2026年の運、完全燃焼。有明アリーナ5列目とステージ上の「ジェンスン・フアン」

Geminiを使えばYouTube動画を再生しなくても動画の要点がわかってしまういい時代!

30年目のREDPEPEPRSをよろしくお願いします

坂道グループにはまった2025年、そして坂道に全く興味ないオジサンに向けた説明

雑居ビルで忘年会してたら火災報知器が鳴ったんだけど店側スタッフが全員外国人でびっくりした

スターな男#25 ふたご座流星群2025チャレンジ ー本格チャレンジでわかった流星群撮影のことー

Xアプリでうっかり動画再生すると次の見たくもない動画が勝手に再生するのを止める方法やSNSのアルゴリズムが変わった話

イタリアへ行ってきた話 ー最終話:小ネタ・書き忘れ補足ー

イタリアへ行ってきた話 ースーパー・ホームセンターなど編ー

Category

Archive

2026年02月 (2)2026年01月 (12)2025年12月 (15)2025年11月 (2)2025年10月 (3)2025年09月 (5)2025年08月 (3)2025年07月 (1)2025年06月 (7)2025年05月 (3)2025年04月 (3)2025年03月 (5)2025年02月 (2)2025年01月 (1)2024年12月 (6)2024年11月 (5)2024年10月 (7)2024年09月 (3)2024年08月 (5)2024年07月 (3)2024年06月 (8)2024年05月 (8)2024年04月 (6)2024年03月 (6)2024年02月 (8)2024年01月 (5)2023年12月 (8)2023年11月 (5)2023年10月 (11)2023年09月 (10)2023年08月 (6)2023年07月 (4)2023年06月 (12)2023年05月 (5)2023年04月 (10)2023年03月 (5)2023年02月 (10)2023年01月 (11)2022年12月 (5)2022年11月 (12)2022年10月 (11)2022年09月 (8)2022年08月 (10)2022年07月 (13)2022年06月 (5)2022年05月 (6)2022年04月 (16)2022年03月 (6)2022年02月 (6)2022年01月 (7)2021年12月 (7)2021年11月 (6)2021年10月 (15)2021年09月 (17)2021年08月 (13)2021年07月 (14)2021年06月 (12)2021年05月 (2)2021年04月 (26)2021年03月 (3)2021年02月 (3)2021年01月 (2)2020年12月 (5)2020年11月 (3)2020年10月 (6)2020年09月 (5)2020年08月 (18)2020年07月 (13)2020年06月 (8)2020年05月 (3)2020年04月 (11)2020年03月 (19)2020年02月 (18)2020年01月 (19)2019年12月 (7)2019年11月 (11)2019年10月 (14)2019年09月 (21)2019年08月 (14)2019年07月 (26)2019年06月 (7)2019年05月 (19)2019年04月 (23)2019年03月 (24)2019年02月 (22)2019年01月 (16)2018年12月 (17)2018年11月 (14)2018年10月 (30)2018年09月 (28)2018年08月 (22)2018年07月 (23)2018年06月 (11)2018年05月 (18)2018年04月 (27)2018年03月 (26)2018年02月 (26)2018年01月 (24)2017年3月 (10)2017年2月 (34)2017年1月 (50)2017年12月 (25)2017年11月 (29)2017年10月 (37)2017年09月 (62)2017年08月 (32)2017年07月 (79)2017年06月 (66)2017年05月 (41)2017年04月 (60)2017年03月 (23)2016年9月 (34)2016年8月 (32)2016年7月 (69)2016年6月 (54)2016年5月 (40)2016年4月 (52)2016年3月 (27)2016年2月 (16)2016年1月 (18)2016年12月 (27)2016年11月 (36)2016年10月 (33)2015年9月 (18)2015年8月 (16)2015年7月 (21)2015年6月 (39)2015年5月 (26)2015年4月 (30)2015年3月 (51)2015年2月 (40)2015年1月 (55)2015年12月 (17)2015年11月 (12)2015年10月 (19)2014年9月 (41)2014年8月 (19)2014年7月 (32)2014年6月 (37)2014年5月 (39)2014年4月 (31)2014年3月 (32)2014年2月 (43)2014年1月 (47)2014年12月 (29)2014年11月 (38)2014年10月 (30)2013年9月 (29)2013年8月 (39)2013年7月 (53)2013年6月 (39)2013年5月 (17)2013年4月 (28)2013年3月 (22)2013年2月 (22)2013年1月 (46)2013年12月 (24)2013年11月 (42)2013年10月 (41)2012年9月 (42)2012年8月 (30)2012年7月 (49)2012年6月 (24)2012年5月 (28)2012年4月 (48)2012年3月 (43)2012年2月 (40)2012年1月 (19)2012年12月 (33)2012年11月 (70)2012年10月 (57)2011年9月 (26)2011年8月 (40)2011年7月 (59)2011年6月 (27)2011年5月 (42)2011年4月 (53)2011年3月 (44)2011年2月 (37)2011年1月 (30)2011年12月 (40)2011年11月 (48)2011年10月 (44)2010年9月 (42)2010年8月 (53)2010年7月 (34)2010年6月 (38)2010年5月 (47)2010年4月 (42)2010年3月 (39)2010年2月 (30)2010年1月 (17)2010年12月 (45)2010年11月 (41)2010年10月 (37)2009年9月 (16)2009年8月 (24)2009年7月 (25)2009年6月 (16)2009年5月 (20)2009年4月 (16)2009年3月 (21)2009年2月 (21)2009年1月 (24)2009年12月 (25)2009年11月 (17)2009年10月 (17)2008年9月 (18)2008年8月 (24)2008年7月 (11)2008年6月 (16)2008年5月 (17)2008年4月 (13)2008年3月 (13)2008年2月 (30)2008年1月 (30)2008年12月 (29)2008年11月 (21)2008年10月 (12)2007年9月 (51)2007年8月 (45)2007年7月 (22)2007年6月 (8)2007年5月 (5)2007年4月 (12)2007年3月 (10)2007年2月 (19)2007年1月 (13)2007年12月 (29)2007年11月 (36)2007年10月 (38)2006年9月 (21)2006年8月 (6)2006年7月 (13)2006年6月 (15)2006年5月 (16)2006年3月 (19)2006年2月 (23)2006年1月 (29)2006年12月 (14)2006年11月 (14)2006年10月 (22)2005年9月 (21)2005年8月 (22)2005年7月 (17)2005年6月 (30)2005年5月 (20)2005年4月 (23)2005年3月 (34)2005年2月 (53)2005年1月 (63)2005年12月 (29)2005年11月 (29)2005年10月 (18)2004年12月 (58)More..