かなり久しぶりに企業サイトの情報設計をしていて、イマドキのサイト文章ってどんなサイズ感なのかよく分からなかったので調べてみた。
｢確か読みやすかった気がする｣｢なんかUI頑張ってる印象がある｣と思いついたサイト(PCビュー)を対象に、以下の数値を拾ってみた。
- 文字領域の横幅:width (px)
- 文字サイズ:font-size (px)
- 行間:line-height (px or %)
- 1行あたりの全角文字数
ホントはかっちょいい英語サイトも事例収集したいのですが、日本語と根本的に文字の扱いが異なるので除外。対象は日本語のみ。
あと個人的に読みやすいと感じなかったウェブサイトは省きました。
文字サイズが大きい順に紹介。
Medium
- 文字領域の横幅:680px
- 文字サイズ:21px
- 行間:32px (1.523)
- 1行あたりの全角文字数:だいたい32文字
自分はこれくらい大味な感じが好きです。最近は。
調査対象ページ：
デザイン・プロセスの話はもうやめよう. d.schoolのディレクターが語る「プロセス」の無意味さ | by Ray Yamazaki | Medium Japan | Medium
マッキンゼー・アンド・カンパニー
- 文字領域の横幅:787px
- 文字サイズ:20px
- 行間:1.657
- 1行あたりの全角文字数:だいたい42文字
ウェブサイトに限らず、最近のマッキンゼーのアウトプットむっちゃ綺麗ですよねぇ。どんな統制敷いたらこうなるのかマジで興味ある。
調査対象ページ：
COVID-19 ビジネスへの意味合い | McKinsey
imasashi.net(このサイト)
- 文字領域の横幅:720px
- 文字サイズ:19.2px
- 行間:2.000
- 1行あたりの全角文字数:だいたい37文字
文字サイズが整数になっていない事を今始めて知りました。
Note
- 文字領域の横幅:620px
- 文字サイズ:18px
- 行間:36px (2.000)
- 1行あたりの全角文字数:だいたい34文字
調査対象ページ：
-数字でみる- スタートアップ広報１年間振り返り（CADDi） #PRLT｜浅野 麻妃｜note
Google Japan Blog
- 文字領域の横幅:660px
- 文字サイズ:17px
- 行間:32px
- 1行あたりの全角文字数:だいたい38文字
調査対象ページ：
Google Japan Blog: 日本の変化する経済に備えて
Business Insider Japan
- 文字領域の横幅:730px
- 文字サイズ:17px
- 行間:1.8
- 1行あたりの全角文字数:だいたい43文字
調査対象ページ：
日本の｢デザイン思考｣の誤解を解きたい。2020年代のイノベーションを作る思考法とは | Business Insider Japan
Wantedly
- 文字領域の横幅:720px
- 文字サイズ:15px
- 行間:1.9
- 1行あたりの全角文字数:だいたい48文字
15pxだと俺にはちょっと文字小さいなぁと思っちゃいます。
調査対象ページ：
「情報設計」から「認知科学」まで。rootが選ぶ、UIデザイナーとしての視点を養うオススメ本 | 株式会社root
以上です。
調査日：2020年8月21日
気が向いたら事例追加するかも。
というか、同じような事を調べている人は他にも絶対いる気がする。
CONVERSATION