（はてな）ブログのブレイクポイントはひとつでいいのではないかという話

Webサイトをレスポンシブデザインで作る場合、はてなブログで言えば、「レスポンシブデザインのテーマを作成する」場合は、メディアクエリ（Media queries）を使って、デバイスの表示幅（解像度）により異なったCSSを適用させます。

で、そのCSSを切り替えるデバイスの表示幅をブレイクポイントといい、多くの場合、３つか４つのポイントが設定されています。

今回、新しくテーマを作る上でいろいろやっていましたら、結局、ブログのブレイクポイントはひとつでいけるのではないかと思い始めました。

• デバイスの解像度によるブレイクポイント
• ブログの本文の読みやすさからのブレイクポイント
  • ブログ本文の表示幅は最大 620px
  • サイドバーの表示幅は最大 300px
  • 本文とサイドバーの間隔、デバイスの両端からのマージン
  • ブレイクポイントを決める
• ブレイクポイントは、767pxか 800pxあたり
• ブレイクポイントひとつのCSS

01デバイスの解像度によるブレイクポイント

現在主流のブレイクポイントが何なのか、多くの情報があって定かではありませんが、Bootstrap でみてみますと、

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }


// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }


// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }


// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

となっています。

要は、スマートフォンの縦、横、タブレット、デスクトップというデバイスの解像度を基準にしているということです。タブレットの 768pxは iPadからきている数値でしょうが、デスクトップの 992px は何からきた数値なんでしょう？ よくわかりません。

もうひとつ、はてなが公開しているサンプルテーマ「Boilerplate」をみてみます。

// Media Queries
$mq-xs: "(max-width: 480px)";
$mq-sm: "(min-width: 768px)";
$mq-md: "(min-width: 800px)";
$mq-lg: "(min-width: 1200px)";

実際に使うかどうかは別にして４つのブレイクポイントが設定されています。

細かく分ければ分けるほどそれぞれのデバイスに対してより美しいデザインになることは間違いありませんが、当然それに対する作業は増えて煩雑になります。

02ブログの本文の読みやすさからのブレイクポイント

Webサイトは何かをアピールする、あるいは何かを伝えるためのものですから、その何かが何かによって見せ方も変わります。ですから、ブレイクポイントを４つに分けて細かくCSSを適用させることが必要なサイトもあるとは思います。

で、ブログの場合の何かは当然本文なわけですから、その本文をどう読みやすく見せるかによってブレイクポイントを考えればいいということになります。

なお、読みやすさや美しさは個人の感覚ですので、以下の数値はあくまでも個人の感覚からのものです。

ブログ本文の表示幅は最大 620px

ブログは基本的に文字が主体になりますから、どんな表示方法が読みやすいかを考えるところから始めます。

読みやすいか読みにくいかを左右する文字要素には、

• フォントの種類
• 文字サイズ
• 文字色
• 行間
• 表示幅
• デバイスの表示幅や他の要素からのマージン

などが考えられます。上の４つについては、当然ブレイクポイントを考える上でも影響してくる要素ではありますが、ここではごく一般的に、

• ゴシックまたは明朝
• 15〜18px
• #000000〜#444444（背景の反対色）
• 1.6〜1.8em

として考えていくことにします。

ということで、ブレイクポイントを考える上で重要なのは本文の表示幅とデバイスの表示幅からのマージンのバランスということになると考えられます。表示幅は、目線を左右に振らせることになりますから、あまり広くても狭くても意識の集中を切らせてしまいます。いろいろ文字主体のサイトを見てみますと 600〜660pxに集中していますので、このあたりの数値が最も読みやすい表示幅ということになるのでしょう。

ということで、まず本文の表示幅の最大値を 620pxとします。

サイドバーの表示幅は最大 300px

ブログは多くの場合、メインコンテンツ（本文）とサイドコンテンツ（サイドバー）で構成され、デスクトップでは２カラム、スマートフォンでは１カラム、タブレットではそのどちらかにする場合がほとんどです。

メインコンテンツの最大幅を 620pxとしましたので、次はサイドコンテンツですが、これもいろいろ見てみますと、ほぼ最大で 300pxとなっているようです。

サイドバーの表示幅は最大で 300pxとします。

本文とサイドバーの間隔、デバイスの両端からのマージン

仮にデバイスの表示幅が 920pxあったとして、620pxの本文と 300pxのサイドバーを２カラムで表示するということはありえませんので、その２つの要素の間にどれくらいの間隔を取るか、そしてまた、デバイスの表示幅いっぱいに文字を表示することもありえませんから、デバイスの両端からどれくらいのマージンを取るかが重要になります。

それらすべて見た目のバランスですのでいろいろやってみて決めるしかありませんが、結論として、本文とサイドバーの間隔を最大で 40px、デバイスの両端からのマージンを最小で 13pxとし、デバイスの表示幅による可変とすることにします。

これにより、本文＋サイドバーの最大値は 960pxということになります。

ブレイクポイントを決める

以上により、ブレイクポイントは１カラムから２カラムに切り替える数値ひとつでいけるのではないかというのが結論です。

これをモバイルファーストの徐々に表示幅を広くしていくイメージで整理しますと、

• まずは、デバイス両端からのマージンを最小値 13pxとした1カラムからスタートする
• デバイスの表示幅が広くなるにつれ、コンテンツと両端からのマージンをともに可変とする
  これは、コンテンツ幅も広くなるが両端からのマージンも広くなるということ
• コンテンツの表示幅は、最大値 620pxで固定とし、それ以降は両端からのマージンのみ可変とする
• ブレイクポイントに達したら、２カラムに切り替える
  その比率は、両端からのマージンは最小 13pxとし、コンテンツは、本文 620/960、サイドバー 300/960、２つの要素の間隔 40/960の比率とする
• デバイスの表示幅が広くなるにつれ、両端からのマージンを含めすべて可変とする
• コンテンツの表示幅は、最大値 960pxで固定とし、それ以降は両端からのマージンのみ可変とする

ということになり、後はどこで２カラムに切り替えるかを決めるだけです。

03ブレイクポイントは、767pxか 800pxあたり

おそらくタブレットでそれなりのシェアを持っていると思われる iPadの表示を１カラムにするか２カラムにするかでブレイクポイントは決まると思います。

実際にやってみた結果を画像で示しますと、

ブレイクポイント 768pxの場合の表示幅 768pxのデバイス表示は、本文 約 473px、サイドバー約 229px

ブレイクポイント 800pxの場合の表示幅 768pxのデバイス表示は、本文 620px

ブレイクポイント 800pxの場合の表示幅 800pxのデバイス表示は、本文約 490px、サイドバー約 237px

ということで、後は個人の感覚で判断するしかないのですが、私は現時点では 800pxを選択しています。

04ブレイクポイントひとつのCSS

で、はてなブログのCSSはこうなりました。

#blog-title,
#content {
    padding: 0 calc((100vw - 320px) * 0.1 + 13px);
}


@media (min-width: 800px) {
    #blog-title,
    #content {
        padding: 0 calc((100vw - 800px) * 0.1 + 13px);
    }
}


#blog-title-inner,
#content-inner {
    margin: 0 auto;
    max-width: 620px;
}


@media (min-width: 800px) {
    #blog-title-inner,
    #content-inner {
        max-width: 960px;
    }
}


#content-inner {
    display: flex;
    flex-direction: column;
}


@media (min-width: 800px) {
    #content-inner {
        flex-direction: row;
        justify-content: space-between;
    }
}


#wrapper {
    width: 100%;
}


@media (min-width: 800px) {
    #wrapper {
        max-width: 620px;
        width: calc(100% * 620 / 960);
    }
}


#box2 {
    width: 100%;
}


@media (min-width: 800px) {
    #box2 {
        max-width: 300px;
        width: calc(100% * 300 / 960);
    }
}

サンプルを示せるといいのですが、また次回ということで。