※現役IT担当者がAIを活用して調査・執筆しています。
先日、運用しているもう一つのブログ「ふところブログ（futokoro.me）」のデザインを見直しました。
Hugoで静的サイト化してVercelで公開しているんですが、テンプレートをほぼそのまま使っていたら、投資ブログなのに配色がグレーだけで、正直ちょっと味気ない感じになっていて。
記事のサムネイルも、内容とは関係ないストックフォトが並んでいるだけで、パッと見て何の記事かわかりにくいのも気になっていました。
今回やったのはこんな感じです。
- 配色をネイビー×ゴールドに変更
- カテゴリ（外国株・日本株・投資信託・暗号通貨）ごとに、色とアイコンを分けたサムネイルに統一
- 見出しにアクセントラインを入れてメリハリをつける
写真素材を使わずに、CSSとSVGアイコンだけでサムネイルを作ったのがポイントです。
ストックフォトをやめてアイコンにした理由
WordPressから移行した記事には、Unsplashなどのフリー素材写真がアイキャッチとして設定されていました。
ただ、内容と写真の関連性が薄いものも多くて。「日本株の記事」に「砂漠のオアシスの空撮写真」が使われていたりして、見た瞬間「これ何の記事だっけ？」となる感じでした。
なので今回は思い切って写真をやめて、カテゴリごとに固定のアイコン＋カラーを割り当てる方式に変更しました。
- 外国株：地球儀アイコン（ゴールド系）
- 投資信託：上昇線アイコン（グリーン系）
- 日本株：ローソク足アイコン（レッド系）
- 暗号通貨：コインアイコン（ティール系）
これなら新しい記事を書くたびに「合う画像を探す」作業がいらなくなりますし、一覧を見たときに色でなんとなく内容がわかるようになった気がします。
実装はテンプレートとCSSだけ
やったことは、Hugoのpartial（テンプレートの部品）を1つ作って、記事のカテゴリ情報からアイコンと色を出し分けるようにしただけです。
画像ファイルを一切使わないので、サーバー容量が増えることもないし、記事を書くたびにアイキャッチ画像を用意する手間もなくなりました。
やってみた感想
正直、配色を変えるだけでこんなに印象が変わるとは思っていませんでした。
同じ内容でも、見た目が整うと「ちゃんと運用されているサイト」に見えるんだなと実感しました。
Web制作を仕事にしていても、自分のサイトは意外と後回しになりがちなので、たまにこういう棚卸しは大事だなと思います。