Published on

読みやすいサイトにするために行間を意識してみよう

目次

デザインの知識がなくても簡単に見やすいデザインにする方法って「余白」なんじゃないかなと思ってます。

ふと余白について考えると、古いサイトは余白がない。
比較的新しいサイトは余白が多いって印象です。

とまあこれはなぜかって見やすいから自然とそうなっていったんだなとわかります。

サイトの行間をみてみる

サイトやブログの場合、文章ごとにどれぐらい余白をとればいいのか気になったので、少し調べました。
実際、根拠となる数字がはっきりしていないので有名なサイトの行間をみてみます。

読みやすいことが求められるニュースサイト・記事をいくつかみてみます。

Yahoo!JAPAN

基本的にbr（改行）2つ挟んでますね。それとCSSでの行間調整で以下の記述がありました。

.article .ynDetailText {
    line-height: 1.8em;
}

朝日新聞

PCの場合

marginとpaddingで20pxの余白をとってます。

#Main #MainInner .ArticleBody p {
    margin: 0 0 20px;
    padding: 0 20px 0 0;
    font-size: 100%;
    line-height: 1.6;
    letter-spacing: 0;
    background: #fff;
}

スマホの場合

.ArticleText p {
    padding: 10px 10px 0 0;
    line-height: 150%;
}

読売新聞

PCの場合

margin30pxでの余白。

.p-main-contents p {
    margin: 30px 0;
    line-height: 1.7;
    letter-spacing: 0;
}

スマホの場合

margin15pxでの余白。

.p-main-contents p {
    clear: both;
    margin: 15px 0;
    line-height: 1.8;
}

日本経済新聞

1.3remと1.8emでの余白。

.content--narrow .article__content>:not(:last-child), .content--narrow .article__snippet>:not(:last-child) {
    margin-bottom: 1.35068rem;
}

.content--narrow .content__main {
    font-size: 1.125rem;
    line-height: 1.8;
}

スマホ

margin-bottom1.2remとline-height1.8での余白。

.content--narrow .article__content>:not(:last-child) {
    margin-bottom: 1.2006rem;
}
.content--narrow .content__main {
    font: -apple-system-body;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",Helvetica,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    line-height: 1.8;
}

グノシー

PCの場合

margin30pxとline-height1.9での余白。

.article p {
    margin: 30px 0 0 0;
    font-size: 98%;
    line-height: 1.9;
    word-break: break-all;
    word-wrap: break-word;
}

スマホの場合

marginで25pxで余白。

.article_body p {
    font-size: 0.97rem;
    margin: 25px 0 0 0;
    line-height: 1.7;
}

PCとスマホで行と文章ごとに余白を若干調整しています。

最後に

調べたサイトが少ないですが、簡単にまとめます。

  • line-heightは1.6から1.9
  • marginもしくはpaddingは20pxから30px

スマホの場合

  • line-heightは1.7から1.8
  • marginもしくはpaddingは10pxから30px

となりました。

今回はニュースサイトだけなので他にも見やすいサイトを参考にして、調整してみるのもいいかもしれないですね。

行間などのCSSの調べ方は、ブラウザのデベロッパーコンソールなどで簡単に確認できます。