デザインを微妙に変えた、とは言ってもCSSは全面的に書き直しているのですが、変更した見た目はおおよそ次のような感じになります。
デザイン
変更前
変更後
何が変わったのか
基本的な見た目は前回のデザインを踏襲しつつ、今回は、
の要素を取り入れました。
具体的には、
- カラーパレットにデジタル庁デザインシステムのものを採用
- フォーム要素（検索欄）へデザインシステムの要素を取り入れる
- リンクの状態を明白にし、視覚的アクセシビリティの要素を取り入れる
といったような感じです。
まぁ配色とリンクの状態の変更、あとはフォームを改修した、と言った辺りですが、それ以外の部分は基本的に変えておらず、残りはインラインマークアップ要素へのスタイリングの整理といった変更が主です。
何故変えたのか
なんとなく気が向いたから……と言ってしまえばそれまでですが、
- 以前からデジタル庁のデザインシステムには興味があった
- インラインマークアップ要素へのスタイリングに微妙感があった
- 年が明けるのだから心機一転にデザインを変えるか！
といったようなことが理由です。まぁ思い付きと言えば思い付きですね。
こだわりポイント
1. 配色
今回の変更ではカラーパレットもデジタル庁のものを採用したのですが、そのカラーパレットを採用した状態であっても今までの配色からはズラさない、という点がこだわった所ですね。
少なくとも、今のようなデザインに落ち着いた時点でカラーパレットの大まかな色（青とか赤とか）は変えてないのですが、今回もそれを維持したままデザインシステムのカラーパレットを採用する、などをしていました。
2. パンくずリストやマークアップの差異で見た目が崩れないようにする
2026年1月現在に使っているはてなブログでは、パンくずリストの有無がページによって分かれるほか、同じようなページでもマークアップが微妙に異なる（これは歴史的経緯とかありそう）のですが、そういったマークアップのゆれによるデザインの崩れは出ないようにしました。
特に要素の高さや開始位置がずれないようには気を配っていて、パンくずリストが表示されてもタイトルからメインコンテンツまでの高さは変わらないようにしていますし、ページによって欠落するHTML要素があったとしても、大きな見た目の変化は起きない、というような事をやっています。
3. タイポグラフィの統一などの視覚的アクセシビリティの調整
今までタイポグラフィとリンク系要素の配色、フォーム系要素の見た目などは完全に雰囲気だけで決めていたのですが、今回はこれをデザインシステムのものを出来る限り再現するようにしました。
個人的に、文章を書く人間として段落の幅や文字の高さ（CSSにおける line-height など）にはこだわって来たのですが、今回のデザインシステム採用でもそこへのこだわりを捨てず、デザインシステムで定義された要素を拡張するなどしています。
また過去のデザインでは視覚的なデザインを行なうために、display: flex; を使って要素順序の入れ替えなども行なっていたのですが、これはアクセシビリティ的によろしくない、ということもあって、一部を除き、この辺りの撤廃も今回の変更に加えています。
4. 今までのデザインの流れを大きく変更しない
最期のこだわりはこれです。
過去に何度も繰り返してきたデザイン変更では一夜にして見た目がガラっと変わる、みたいな事もたびたび行なっていたのですが、現行のデザインは気に入っているのだから、CSSは書き直すにしてもデザインの方向性は変えないでおこう、みたいな事にはこだわりました。
特に丸みのある境界線とグレーの背景色、コンテンツ境界の縁取り、コンテンツ領域の白、といった辺りは自分なりに気に入っているので、ここは変えずに行こう、という感じでCSSをゴリゴリ書いてましたね。
5. 最新のモダンなCSS構文の取り入れ
これについては、
を参考に積極的に取り入れてゴリゴリと書いていたのですが、結果として最新の書き方の部分は消えていった……と言うような流れになったので、こだわってはいたけど、成果物には残らなかった感じですね。
以上
という感じでデザインを変えたという話でした。
他にも広告の位置を変えた、とかもあるんですが、この辺りは些事であることと、本質的にはあまり関係の無い話なので省略します。
まぁ今回の変更ではデジタル庁のデザインシステムを取り入れたワケなんですが、こう、デザインシステムを導入してみると思っていた以上にブログが使いやすくなったので、やはりきちんと練って作られたデザインって凄いんだなぁ……と感じました。
あとはデジタル庁のデザインシステムはデザインなんも分からん
という自分でも結構いいかんじに実装できたのと、他にも、自分で実装してみて効力を実感できたので、今後何かしらのWebサービスなどを作る際にもこのデザインシステムを使って行きたいなーと思います。
