EmDashブログのデザインを作り直した記録｜黒から白へ、文字だけから「絵と部品」へ

最初のデザインは「黒っぽくて、文字ばかり」だった

このブログを立ち上げた直後、最初のデザインは「技術メモ風」でした。落ち着いた緑を使い、余計な飾りのない見た目です。

ところが、自分で何日か眺めてみると気になる点が出てきました。

• Macでは画面が黒っぽく表示される
• 記事が文字ばかりで、読む前に疲れる
• トップページは全部の部品が同じ強さで並び、どこを押せばよいか分からない

私もそう思っていました。でも調べてみると、ブログのように「長い文章を読む」場面では白の方が有利でした。

黒から白へ：決め手になった3つの理由

理由1：白地に黒文字の方が、読み取りやすい

使いやすさの研究で知られるNielsen Norman Groupが、明るい画面と暗い画面を比べた研究をまとめています。視力に問題のない人は、白地に黒文字の方が読み取りの成績がよく、文字が小さいほど差が大きくなるそうです。

参考：Dark Mode vs. Light Mode（Nielsen Norman Group・英語）

理由2：黒く見えていたのは「端末の設定に合わせていた」から

デザインを黒にしたつもりはありませんでした。最初のひな形が「見る人の端末の設定（ダークモード）」に自動で合わせる作りだったため、ダークモードのMacでは黒く表示されていたのです。

理由3：参考にしたブログが、ほぼ白だった

「WordPressでブログを作る方法」を教える日本のブログを5つ調べると、5つとも背景は白か、ごく薄い色でした。読者が見慣れた形に合わせる方が、迷わせません。

スマホで読みやすくするために、数字を測った

「なんとなく読みにくい」を直すために、実際に数字を測りました。

シェアボタンの数字は「文字と背景の明るさの差」です。4.5より小さいと、人によっては読みにくくなります。色の付いたボタンに白い文字をのせていたため、「はてブ」や「LINE」が基準に届いていませんでした。

短すぎると、目が何度も行を折り返して疲れます。原因は「画面の外側の余白」と「カードの内側の余白」を両方とっていたこと。片方を詰めるだけで広がりました。

本文の書体を「端末の標準」にした

本文の書体は、最初は見出しと同じ日本語フォント（IBM Plex Sans JP）を読み込んでいました。これを、Macならヒラギノ、Windowsなら游ゴシックという「端末に最初から入っている書体」に切り替えました。

• 良い点：見慣れた書体で読みやすい。本文のフォントを読み込まない分、表示が軽くなる
• 気になる点：端末によって、本文の見た目が少し変わる

見出しには今もIBM Plex Sans JPを使い、ブログらしさを残しています。

「全部が同じに見える」トップページを変えた

白にして読みやすくなっても、まだ物足りなさが残りました。トップページのどの部品も同じ強さで並んでいて、目が止まる場所がなかったのです。

そこで、参考にしたブログの「トップの型」を取り入れました。

入口は「初めての人」と「困っている人」の2つだけに絞りました。初めての人は完全ガイドへ、エラーで困っている人はQ&A集へ進めます。

一番効いたのは、アイキャッチ画像です。画像がないと、カードが全部同じ「文字の箱」に見えてしまいます。

記事ページは「文章だけ」をやめた

記事も、文章が続くだけだと読む気がなくなります。そこで、場面ごとに見せ方を決めました。

この吹き出しや箱は、EmDashの「プラグイン」という仕組みで自作しました。管理画面から記事を書くときに、部品として選んで入れられます。作り方は別の記事で紹介します。

作り直しの順番（真似するなら）

1. まず数字を測る（文字の大きさ・1行の文字数・色の見やすさ）
2. 白か黒かを決める（ブログなら白がおすすめ）
3. 参考ブログを3〜5個選び、「トップ」と「記事ページ」の共通点を書き出す
4. アイキャッチの型を1つ決め、全記事に付ける
5. 直したら、PCとスマホの両方で見比べる

まとめ

• ブログのように長い文章を読むなら、白基調が基本。黒は切り替えで選べるようにした
• 「読みにくい」は数字で測ると、直す場所がはっきりする
• トップは目的別の入口と、アイキャッチ画像で印象が大きく変わる
• 記事は、場面ごとに見せ方（箱・吹き出し・番号）を決めておくと迷わない

次に読むなら

• EmDash入門 完全ガイド
• EmDashでブログをゼロから立ち上げた記録