コメントにレスするシリーズ②

お疲れ様です。かさたたです。
コメントにレスするシリーズ2本目です。今回はこちら、コメントありがとうございます。

https://kasatata.com/article/019da55d-062d-76f2-8fb9-2ba2cd2c9657

リンクのCMS？見てみました。どちらもデザイン系の方のブログみたいですね。結構真似するのが難しい系のデザインでとても勉強になりました。
このブログを構築した当初、TOPページちょっとがまだダサいな...と思っていたのですが、ここでこだわりすぎると何も進まない気がしたのでデザインの調整を後回しにしていました。
今回このコメントをいただいて、デザインにこだわりたい欲がでてしまったので、少しだけデザインをいじってみました。コメントにレスする趣旨からは逸れますが、紹介します。

Before

After

まず一番大きなところは、バナーの追加です。いろいろなサイトを見てみたのですが、ヘッダーの下にデカいバナーがあるとそれっぽくなりそうだなと思い、置いてみました。
実際トップページに行ってもらうとわかるのですが、画像、動いています。これをCSSで実装しようとすると結構面倒なのですが、Claude Codeにめっちゃざっくりな指示を投げたらいい感じに仕上げてくれました。
実装に関しては適当ですが、（ちゃんとコードはきれいな形にした）色は頑張って調整しました。なるべく色の数は少ない方がいいと思っているので、青、黒、白の系統から外れない範囲でグレーにしてみました。カラーコードを細かくいじって、いい塩梅の濃さに仕上げました。

あとは、余白を少しいじりました。

画像の黒い四角で印をつけた部分の余白、画面幅がスマホを想定した時とパソコンを想定した時で若干変えています。パソコンで見た時は気持ちいいんだけど、スマホで見たときにちょっと間が空きすぎて気持ちよくないな...などと考えながら細かい調整をしてみました。（ほとんどの人がスマホで見てるので自己満にはなってしまいますが笑）
デザインって結構気合だと思っていて、ストイックに細かい修正をするのが大事だと思っています。

趣旨と離れてしまいましたが、以上です。コメント、ありがとうございました。