ブログのアイキャッチを真鍮×アイボリに寄せた話

先日、ホームページをリニューアル（4ヶ月で3回目）したので、同時にブログのアイキャッチのテイストを、まるっと入れ替えました。これまでのStripeやLinear、Notionみたいなフラット系デザインから、真鍮×アイボリのnpcらしい色味へ。「なんとなく違うんだよなあ」を、やっと言葉にして手を動かした一日です。

なぜ違和感があったのか

これまでのホームページとアイキャッチは、SaaS系のプロダクトブログでよく見るテイストでした。明るい背景に、はっきりした色のイラストや図形、余白は広め、フォントは細めのサンセリフ。StripeやLinear、Notionのブログを開くと、あの空気感がぱっと浮かぶと思います。

※「サンセリフ」とは、飾りのない直線的な書体のこと。ゴシック体の仲間で、モダンで洗練された印象を出しやすいので、SaaS系のサイトで好まれます。

たしかにきれいだし、読みやすい。デザインそのものは良いです。

でも、自分のブログに並べてみると、ちょっと違うというか違和感があるというか。。。。npcのブランドの核にあるのは「錬金術・書斎・RPGの道具屋」。深い色味の木の棚、真鍮の金具、羊皮紙の質感、そういう世界観です。そこに明るい水色や薄いピンクのフラットイラストも好きだけど、本当に好きなのはこっちかな。

古いテイストと新しいテイストを並べてみる

何を、どうやって変えていったか

つまずき①：色を変えるだけでは寄り切らなかった

最初は「背景色をアイボリに、アクセントを真鍮の金色に置き換えるだけでいいや」と思って手を動かしました。でも、差し替えたはずのアイキャッチを並べてみると、まだSaaSっぽさが残っている気がしたのでやってみたこと４つ。

つまずき②：真鍮を面塗りにするとチープになった

金色をベタっと面で塗ると、途端に安いオモチャみたいな見た目になりました。cssで色をつけるのでまぁ、仕方がないよね。これは以前、ロゴまわりでも同じことがあって、やっぱりそうなるよなって思いながら調整を重ねます。

真鍮は「線」で使うだけで雰囲気が出てきます。文字の縁取り、四隅の装飾、細い罫線。面で使いたい時は、ハイライトとシャドウを丁寧に置いて金属の光沢を表現しないとっぽさが出てきません。この整理をClaudeに頼んで、「渋い金色の使い方の型」を10パターンほど集めてもらったら、ちょっとずつ方向性が定まってきました。判断は自分、参考例の収集と分類はClaudeに任せる、といういつもの分業です。

気づき：変えるなら全部いっぺんに！

僕の場合、ホームページのテイストが錬金術師のような中世RPGのような雰囲気なのに、アイキャッチだけがSaaS系の空気で置かれていました。お店の雰囲気似合わない商品が置かれてる、みたいな状態です。
まぁそれでも許される場合もありますけどね。回転寿司のラーメンみたいに。

同じところで「なんとなく違和感はあるけれど、どこがちぐはぐか分からない」と足踏みしている人がいたら、色も構図もモチーフも、マクロの視点でみてみると良いかもしれません。色の置き換えは分かりやすいけれど、骨格がずれていたり、なんとなく置いてる物が違和感があったり、穴が開いてたり。
時間もかかるし、労力もかかるけど、やる時はいっぺんに、全部取り替えるのが良いのだなと思いました。
ただ僕の場合は、そんなに知名度もないし、予算の関係もあるので、新しいものからアイキャッチを変更する方向に決めました。