Astroブログのサムネイル余白を目立たせないメモ
記事カードの画像をobject-containで見切れないようにしたあと、余白の背景色が目立ちすぎたため、白系の面と薄い境界線に戻した短いUI調整メモ。
ブログの記事カードで、横長のサムネイルが見切れる問題を直すために object-cover から object-contain 寄りの表示へ調整しました。画像全体が見えるようになった一方で、今度は画像の上下または左右に出る余白が妙に目立つようになりました。
最初は余白に少し色を付ければ、カードのデザインとしてまとまると思っていました。ただ、記事一覧で並べて見ると、余白の色が画像よりも先に目に入ります。特に淡い水色系の背景は、情報を整理するための面というより、装飾として主張してしまいました。
結局、サムネイル枠の背景は白系に寄せ、区切りは薄い border だけにしました。見切れ防止は object-contain で維持しつつ、余白はできるだけ存在感を消す方針です。
この調整で学んだのは、contain 表示の余白は「デザインの余白」ではなく「画像比率の差分」として扱った方がよいということです。そこに色を付けると、画像の一部ではない領域がカード内で別の情報のように見えてしまいます。
小さな変更ですが、記事一覧の印象はかなり変わります。ブログのカードUIでは、画像を全部見せることと、余白を装飾しすぎないことをセットで考えた方がよさそうです。