とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

深津さんの note の段落の余白(間隔)が見やすいので測ってみた

深津さんの note の段落の余白(間隔)が見やすいので測ってみた

piece of cake CXOで、

THE GUILD代表でもある深津さんの

note の段落の余白のとり方が

めちゃくちゃ見やすい、

という話です。

 

note.mu

 

 

深津さんは note では

UI/UXデザインに関しての記事や、

noteの新機能、機能改善についての

記事などなどを書かれています。

 

いつも記事を読んでいて、

「見やすいな」と思います。

文体もそうですが、段落の余白を

大きくあけていて、それが見やすい。

 

note を書いているほかのユーザより

意識して多めに余白を設けていると

思います。

 

たとえばこちらの記事。

note.mu

 

記事の一部をスクショしてみると

こんなかんじです。

 

--- ✂ ---

f:id:ntoaru:20190803131125p:plain

段落ごとの余白が多めにとってある

 

段落の余白を多めにとっているのが

わかるとおもいます。

見やすい...。

 

note の記事ページのデザインは

ページ幅やフォントなどなど

読みやすさを考慮したデザイン設計

になっているので、

記事系のページのWebデザインする上で

とても参考になるし、参考にしたい。

 

では深津さんのこの記事では

どのくらい余白とっているか

気になりますよね。

というわけで測りました。

 

 

--- ✂ ---

 

PC版の note だと、

「文章(pタグ)」には上下 36px の margin が設定されています。

上下 36px の margin が設定

上下 36px の margin が設定

 

そしてその文章の下に p タグで囲まれた br タグがあります。

これも上下 36px の margin が設定。

p タグで囲まれた br タグ

p タグで囲まれた br タグ

 

文章は p タグで

上下 36pxというわけですね。

margin は 要素と要素が

隣接した場合、上下の値を

相殺するので、36pxが基本余白。

 

そして 見出しの h3 タグは、

margin-top が 50px で、

margin-bottom が -18px と

なっています。

ちなみにフォントサイズは24px。

見出しは上50px、下-18px

 

文章は、

行間(line-height)が36pxで、

フォントサイズが18px。

しっかり計算されていてさすがです。

文章は行間が36pxで文字サイズが18px。

文章は行間が36pxで文字サイズが18px。

 

 

つまり深津さんの

文章ごとの段落の間隔は、

もろもろの margin の相殺を考慮して 122px でした。

122pxの余白

122pxの余白

 

ただ、上記図を見ると、

122px に文字の行間分の余白が

少しプラスされるので、

きっちりフォントの字面枠まで

余白をはかると 140px でした。

きっちり余白をはかると140px

きっちり余白をはかると140px

(※定規ルーラーアプリで はかりました。 )

www.toaru.jp

 

ちなみにスマホサイズでは

微妙にサイズや余白が変わっていました。

PCも含め、以下にまとめます。

 

 

--- ✂ ---- 

 

サイズまとめ

note PCサイト

文章(pタグ)は上下余白36px、行間36px、フォントサイズ18px

見出し(h3タグ)は上余白50px、下余白-18px、行間1.75(42px)、フォントサイズ24px

 

note スマホサイト

文章(pタグ)は上下余白30px、行間30px、フォントサイズ16px

見出し(h3タグ)は上余白36px、下余白-20px、行間1.75(35px)、フォントサイズ20px

 

 

--- ✂ ----

 

 

というわけで

余白は大きめにとると見やすく、

深津さんの余白は 122px(字面枠からだと140px)

でした。

 

この数値の余白を空ければ見やすい、

ということではなくフォントサイズや

行間などしっかり設計されて

バランスがいいということがわかりました。

 

深津さんの note は勉強になるという記事を

以前書きましたので、そちらもどうぞ。

www.toaru.jp