砂漠の旅人(たびと)

UNIX / MS-DOS 時代から電脳砂漠を旅しています

【はてブ】ブログのデザインを見直して、読み易さを追求する

こんにちは、たびとです。

当ブログのデザインを見直す記事を書いてから、毎日のようにデザインについて、 何かしらを見直してきましたが、思ったより大変な作業で妥協との戦いの連続です。 まだ完成形には至ってませんが、何が大変なのかを備忘録として記録したいと思います。

前回のデザインに関する記事はこちらです。

sabakunotabito.hatenablog.com

この記事の対象者

  • はてなブログのデザイン変更に興味のある方
  • レスポンシブデザインに興味のある方
  • 読み易いサイトについて興味のある方

ブログのデザイン

前回紹介した デザイン入門教室 を参考に試行錯誤を重ねています。

更に、前回紹介できなかった レイアウト・デザインの教科書 も読みました。

この本は、レイアウトに特化した本で、デザイン入門教室を読んだ後に読むといいと思います。 サンプルが豊富で観ているだけでも楽しく、デザイン入門教室が基礎編、 レイアウト・デザインの教科書が実践編のような感じです。

どちらか一冊なら、迷わず デザイン入門教室 ですね。

読み易さとは

今回は、読み易さの定義を以下に絞って考えます。

  • ブログを長時間読んでも目が疲れないようにトーンを抑えること。
  • レイアウトを考察し、見やすくなるように工夫をすること。
  • 画面や行間に適度な空白を作り、目にストレスを感じさせないこと。

配色とトーン

結局、ここに一番時間が掛かっています。 使っている色によっては、眩しくてダークモードにしたいこともあるため、 ここにストレスを感じさせないように配色を試行錯誤しています。

配色サイトを参考に、できるだけ艶消しに見える色を選び、 同じトーンの色を選択しながら、何度も調整を繰り返しています。

例えば、以下のようなことを考慮しながら試行錯誤を繰り返しています。

  • できるだけ、色は少なくし、明度で調整する。
  • 背景は真っ白ではなく、柔らかい色味になるように調整する。
  • 文字も真っ黒ではなく、乾いた墨汁のように少しグレー寄りに調整する。
  • プライマリとセカンダリの色を色相環を参考にトーンを揃えて調整する。
  • 目次、見出し、フッターなどの背景色もグレー系の同じトーンで調整する。
  • マーカーの色 も明度を暗くして眩しさを低減させる。
  • 枠線の色もプライマリとセカンダリやグレー系の色で調整する。

ソースコード

ソースコードについても、Windows コンソールの黒い背景ではなく、 グレー基調で統一しました。 シンタックスハイライトも明度を抑えた色で調整しています。

#if TRUE
  define SAMPLE 1
#else
  define SAMPLE 0
#endif
int main(string[] argv)
{
    if (argv.Length == 0) return -1;
    int x = (argv[0] == '?')? -1 : 1;
    printf("Hello world.\n");  /* コメントです */
    return 0;
}

後日談。 全体の配色も見直したので、ソースコードの背景も統一感がでるように調整しました。

引用

引用もソースコードと同じように、全体のバランスを考えて、 セカンダリカラーをアクセントにしています。

セカンダリカラーをアクセントに統一感のある引用にしました。

後日談。 最終版ではプライマリカラーを使ったため、デザインが変更されました。

フォント

以前は、17px が最適と思っていましたが、フォントを変更すると 16px でも見やすくなったこと、17px だとブログのデザインと バランスが悪くなることを考えて 16px にしました。

サイドバーを表示するため、本文エリアのフォントサイズの 大きさを考慮しないと、1 行の文字数が少なくなってしまいます。 また、行間の空白も 1.5 から 2 倍が読み易いとされています。

デザイン入門によると、英数字と漢字のバランスも考慮して、 英数字の大きさや位置を調整するように記載されていますが、 流石に Web サイトでは現実的に困難なので、 できるだけ同じファミリーが選択されるように調整します。

画面のデザイン

画面サイズを 1,200px とし、余白は 48px と余裕を持たせ、 本文のエリアは 700px、サイドバーは 350px と、 2:1 になるように調整しています。 写真の構図もそうですが、3 分割で考えるのは基本のようです。 サイズに関しては、また見直すかもしれません。

後日談。 最終的に 1,142px に落ち着きました。 それに合わせて、全体を縮小しています。

レスポンシブデザイン

レスポンシブデザインは、単純にデバイスの大きさで考えると苦労します。 画面デザインを元に調整する方がうまくできると思います。 今回であれば、タブレットサイズを 1200px とした方が、 サイドバーの折り返しがキレイに調整されました。

例えば、タブレットのブレイクポイントが 960px だからといって、 960px で折り返すと、サイドバーを折り返したいタイミングで折れ曲がってくれません。

結局、画面設計をベースに考える必要があるため、今回の場合は 1200px か 余白と本文の合計値 748px がキリの良い数値ですが、タブレットのブレイクポイントが 960px なので、ブレイクポイント以上の 1200px を設定する必要があります。

まとめ

今回も自作テーマの話題でしたが、やり始めるとキリがないです。 デザインの本を読み進めると、ここまで考えてデザインしているのかと、 驚きの連続です。きっと神々は細部に宿るモノなのでしょう。

今後は、上記のことに加えて、以下のことも考慮したいと考えています。

  • ナビゲーションバーを追加して、もっと使い勝手を良くしたい。
  • SNS アイコンの位置やサイズがバラバラなので、揃えて統一感を出したい。
  • 不要な記述や画像サイズを見直して、少しでも軽く(高速化)したい。

最後に続きと参考サイトを掲載しておきます。 では、皆さん、よい旅を。

続き

この記事の続きをアップしました。興味がある方は続きをどうぞ。

sabakunotabito.hatenablog.com

参考サイト