のっぺりしていたブログの見た目をターミナル風に変えた

このブログの見た目を変えた。配色を深緑と黄緑にし、サイト名や見出しにターミナルのような記号を付けた。ヘッダーにはアクセスカウンターを置き、アイコンと OGP 画像も新しい配色にそろえた。変えた理由と、どう選んだかを記録しておく。

印象に残らなかった

ブログを開設して数日たって、自分のブログがなんとなく印象に残らないと感じた。のっぺりしていて、オリジナリティに欠ける。ただ、どこがどうのっぺりしているのかは、自分では言葉にできなかった。

この感覚をうまく言葉にできないことは、今の自分の課題だと思っている。

オリジナリティを出したかった

このブログには、アクセスカウンターや 88×31 のバナーのような、2000 年代のブログの要素をもともと入れていた。ただ、どれもサイドバーの下のほうにあり、ブログを開いたときの画面には見えていなかった。見た目そのものは今どきのすっきりしたもので、レトロな雰囲気はほとんど伝わっていなかった。

そこで、アクセスカウンターやレトロな雰囲気をもっと前面に出すことにした。このブログにしかない見た目にして、アクセスした人の印象に少しでも残るようにしたかった。

どんな見た目にするかは、言葉で決めるのをいったん後回しにして、実物を見比べて決めることにした。

3 つの試作を並べて選んだ

方向の違う 3 つの案を試作し、ライトとダークの画面を並べて比べた。

案	配色	飾り
A	生成りと朱色	サイト名の頭に ★、日付の頭に ■
B	深緑と黄緑（ターミナル風）	サイト名の末尾で点滅するカーソル、日付を `[ ]` で囲む、見出しの頭に `$`
C	紫とピンク（2000 年代の個人サイト風）	ドット文字、☆彡、二重線の枠

選んだのは B だ。テッキーな見た目にしたかったし、単純に 3 案の中で B の見た目が一番よかった。

変えたところ

変更前と変更後のトップページを並べる。

変更後のトップページ（ライト）。緑がかった背景に緑のアクセント。サイト名の頭に「>」、日付を角括弧で囲み、右上にアクセスカウンター

変更後のトップページ（ダーク）。深緑の背景に黄緑のアクセント。サイト名は「> Itsuking Blog_」

配色：白と黒に青だった配色を、緑がかった背景と緑のアクセントに変えた。背景で動いている点と線も緑にした
サイト名：> Itsuking Blog_ と、コマンドを打つ画面のような形にした。末尾の _ は点滅する
日付の見出し：[ 2026.11.10 (火) ] のように角括弧で囲み、下線を点線にした
サイドバーの見出し：$ SEARCH のように頭に $ を付けた
アクセスカウンター：サイドバーの下のほうにしかなかったものを、ヘッダーの右上にも出した。ブログを開いてすぐ目に入る

飾りが読む邪魔にならないように

今回付けた記号や点滅は見た目のための飾りなので、人によっては読む邪魔になる。そうならないように、2 つの工夫をした。

1 つ目は点滅だ。Mac や iPhone、Windows には、画面の動きを減らす設定がある。動くものがあると気分が悪くなる人や、読むのに集中できない人が使う。この設定にしている人には、サイト名の末尾の _ を点滅させずに表示する。

2 つ目は記号だ。画面の文字を声で読み上げるソフトは、画面にある文字をそのまま読む。何もしなければ、サイト名は「大なり Itsuking Blog アンダースコア」のように読まれてしまう。>、_、[ ]、$ は飾りで意味はないので、読み上げソフトには読ませないようにした。サイト名は「Itsuking Blog」とだけ読まれる。