文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き

[kurechon]

これ系の論文は数多あるけど、日本語ベースかつ巨大サービスで実験して公開してくれるのありがたすぎる

[securecat]

17だと…　しかし、これはインパクトのある実証実験結果だな。すごい。

[daruyanagi]

“17px × 1.6を中心とした周辺の組み合わせが視覚的にバランスが良く、心理的負荷を下げたい場合はそれより文字をやや大きく、もしくは行間をやや広くすると効果的”

[taou]

“17px × 1.6を中心とした周辺の組み合わせが視覚的にバランスが良く、心理的負荷を下げたい場合はそれより文字をやや大きく、もしくは行間をやや広くすると効果的”

[ginpei]

日本語の文章に関する実験。スマホ向けには文字の大きさ17pxと高さ1.6を中心に考えると良いそう。

[sea295x2]

“17px × 1.6を中心とした周辺の組み合わせが視覚的にバランスが良く”

[nonception]

]

[uraito]

これは興味深い、調査の元データみていろいろ考えたいなぁ。

[field_combat]

17px × 1.6

[nonono-notch]

ui、ux、フォントサイズ、行間、font-size

[alfe1025]

すごくいい記事

[rgfx]

ありがとうございますありがとうございます

[fujii_yuji]

ここまで徹底的に、しかもヤフーニュースのスマートフォン版Webという日本国内でも代表的な大型サービスで検証されたデータを公開してくれるの凄い!!!

[ttt_asada]

17px × 1.6を中心とした周辺の組み合わせが視覚的にバランスが良く、心理的負荷を下げたい場合はそれより文字をやや大きく、もしくは行間をやや広くすると効果的

[kikiora2000]

“文字17pxと行間1.6”

[abiruy]

これは有用すぎる…！即採用。

[yyamano]

“行間の広さは、文字が小さい時は行間が広い方がちょうど良く、文字が大きい時は行間が狭い方がちょうど良いと評価”

[Imamura]

大規模なリサーチの結果、iPhone SEサイズのスマートフォンにおいては文字サイズ17ピクセル、行間1.6程度が読みやすそうという話

[smbd]

おもしろ～～

[yarumato]

“読みやすさ計測は、実験対象端末をiPhone SE系端末（解像度375×667px）に限定（普及率を考慮）。文字17pxと行間1.6を中心に、16px × 1.8 ～ 19px × 1.4 の範囲が、良い大きさの組み合わせ”

[kns_1234]

文字17pxと行間1.6 付近が読みやすいと感じる方が多いようです。

[sezemi]

めっちゃ参考になる

[hirokiky]

これ本当に最高の知見なのでありがとう

[isshyman]

ビッグデータで具体的で素晴らしい

[hotmilkcocoa]

へー意外だ。16 px じゃなくて 17 px のほうが良いのか