こんにちは、たびとです。
当ブログのデザインを見直す記事を書いてから、毎日のようにデザインについて、 何かしらを見直してきましたが、思ったより大変な作業で妥協との戦いの連続です。 まだ完成形には至ってませんが、何が大変なのかを備忘録として記録したいと思います。
前回のデザインに関する記事はこちらです。
この記事の対象者
- はてなブログのデザイン変更に興味のある方
- レスポンシブデザインに興味のある方
- 読み易いサイトについて興味のある方
ブログのデザイン
前回紹介した デザイン入門教室 を参考に試行錯誤を重ねています。
更に、前回紹介できなかった レイアウト・デザインの教科書 も読みました。
この本は、レイアウトに特化した本で、デザイン入門教室を読んだ後に読むといいと思います。 サンプルが豊富で観ているだけでも楽しく、デザイン入門教室が基礎編、 レイアウト・デザインの教科書が実践編のような感じです。
どちらか一冊なら、迷わず デザイン入門教室 ですね。
読み易さとは
今回は、読み易さの定義を以下に絞って考えます。
- ブログを長時間読んでも目が疲れないようにトーンを抑えること。
- レイアウトを考察し、見やすくなるように工夫をすること。
- 画面や行間に適度な空白を作り、目にストレスを感じさせないこと。
配色とトーン
結局、ここに一番時間が掛かっています。 使っている色によっては、眩しくてダークモードにしたいこともあるため、 ここにストレスを感じさせないように配色を試行錯誤しています。
配色サイトを参考に、できるだけ艶消しに見える色を選び、 同じトーンの色を選択しながら、何度も調整を繰り返しています。
例えば、以下のようなことを考慮しながら試行錯誤を繰り返しています。
- できるだけ、色は少なくし、明度で調整する。
- 背景は真っ白ではなく、柔らかい色味になるように調整する。
- 文字も真っ黒ではなく、乾いた墨汁のように少しグレー寄りに調整する。
- プライマリとセカンダリの色を色相環を参考にトーンを揃えて調整する。
- 目次、見出し、フッターなどの背景色もグレー系の同じトーンで調整する。
- マーカーの色 も明度を暗くして眩しさを低減させる。
- 枠線の色もプライマリとセカンダリやグレー系の色で調整する。
ソースコード
ソースコードについても、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 アイコンの位置やサイズがバラバラなので、揃えて統一感を出したい。
- 不要な記述や画像サイズを見直して、少しでも軽く(高速化)したい。
最後に続きと参考サイトを掲載しておきます。 では、皆さん、よい旅を。
続き
この記事の続きをアップしました。興味がある方は続きをどうぞ。