読みやすさのデザイン備忘録

noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。

本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。

まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。

以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です（現時点では個人の見解です）。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。

書体をサンセリフ系に変えるべきか？

デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも優れています。これは解像度の低いディスプレイでは、繊細なラインがアンチエイリアスで潰れてしまうためです。このため、基本的には長文はサンセリフ体が推奨となります。これは、出版業界の常識とは逆の事象です。

ただし、「慣れ」については注意が必要です。視認性は慣れの影響を受けるため、MSゴシックで育ったユーザーにとっては、MSゴシックが最も可読性の良い書体となります。現在のnoteでは明朝体が使われているため、短期的には、一部のユーザーはゴシック体に違和感や読みにくさを覚えるかもしれません。ただしネット全体の整合性を考えれば、ゴシック体を使いやすく感じるユーザーの方がはるかに多いはずです。

Webフォントは使わない

Webフォントについては、現在のところ導入は検討しません。日本語Webフォントはロードに時間がかかるため、アルファベットのWebフォントとは根本的に使用体験が異なります。多くの場合、ダウンロード待ちによる離脱率の上昇が、Webフォントのメリットを打ち消してしまいます。

ジャンプ率

見出しと本文の大きさの比率、ジャンプ率はどれくらいの値が適切でしょうか。一般的には100%〜200%の範囲と考えられます。noteのジャンプ率は現在のままでも大きな問題は無いように見えます。

ただし、H2見出しと本文の間の隙間は大きすぎると思われるので、もう少し詰めたいところです。またジャンプ率を仮想グリッドに合わせることで、汎用性を出したいとは考えています。

濃淡

明朝だとそれほどでもありませんが、ゴシックにした場合は黒みが強いように思えます。本文テキストは#333〜#666のレンジで複数パターンを検証する予定となります。

行間

ウェブの長文記事のライン高は、150%〜200%が良いと思います。。グリッド的なデザインの整合性を考えた場合、150%あるいは200%での設計がもっとも汎用性があるのではないかと考えています。

左右マージン

これについては、モバイル版は特に詰まりすぎていたため、noteチームにお願いして、即座にスペースをあけてもらいました。だいぶ読みやすくなったと思う。細かいチューニングは後日に行う予定です。

これらの各種要素については、行間、マージンなどを1ptづつ変えたものを全列挙して検討をしています。当面はヒューリスティック(職人の勘)による調整ですが、最終的にはA/Bテストとの併用による多角的なジャッジをしていきたいと思います。

全角約物の半角詰め

約物（カギカッコ等）の詰めは、文章の品質を大きく左右します。取り急ぎ、全角約物は詰める方向で、チームにお願いしたいと思います。暫定的にyakuhanフォントの導入を提言予定です。yakuhanフォントはWebフォントではありますが、極めて軽いため、これぐらいの分量ならダウンインパクトはないと考えます。

CSSによる書体のプロポーショナル化

iOSのsafari他、いくつかのブラウザでまだバグがあるため、しばらくは検討と実験が続く予定です。本来ならば、見出しなどには導入したいところです。

note全体での利用フォントサイズの定義

全体の精査が終わり、必要とされる文字要素が定まってからの検討となります。整理がつくのは、もうちょっと後になるのではないかと思います。

リンク色について

コンテンツを読むときには、没入性が高いほど望ましいものです。そこに「回遊性やPVを上げるため」などという理由で、無理にグロースを仕込むべきではありません。文中での回遊は、短期的には確かにPVを上昇させますが、逆に読了率を下げることが想定されます。中長期のnoteのあり方を考えるならば、これは望ましく無いと考えています。

マークダウン

マークダウンに関しては正直エンジニアリソースが足りません。マークダウンエディタ、ビューワを作れるエンジニアも絶賛で大募集です。

以上、諸々。備忘録まで。
順番にnoteチームに相談をしていこうかなと思います。