サムネイル画像作成についてのメモ

ウェブサイト制作の仕事をしてると、サムネイルを扱うことがよくあります。
画像のサイズが全部揃っていれば問題ないのですが、縦長だったり横長だったり、様々なパターンがあるということがほとんどです。

基本的にはimgタグのwidth、heightや、cssを使って調整するのですが、きれいに見せるのはなかなか手間がかかります。

で、今回たまたまamazonを見ているときに気がついたのですが、amazonは全部縦揃え、つまりサムネイルの高さを揃えてるんですね。



まあ考えてみれば当たり前なんですが、高さが揃っていると全体的にすっきりまとまった印象を受けます。
ちなみにこれは画像を横並べにした場合です。

じゃあ縦並べの場合は、逆に横、幅を揃えてやればいいのかな、と思いますが、



画像サイズがわかりやすいように選択状態でスクリーンショットを取っています。
こちらも高さで揃えてますが、左右に余白を入れて画像サイズを揃え、中央寄せにしています。なるほど。

では楽天ではどうなのか。



細長い商品のサムネがどうなってるのか見たかったので、ラケットで検索してみました。
長辺を96pxにして縮小しているようです。

サイトの構成によって最適なサムネイルサイズは変ってくると思いますが、縦揃え・横揃え、余白ありなど、あらかじめ何種類か作っておけば完璧だと思いますが、とりあえず最低でも高さを揃えたものは作っておいたほうが良さそうな気がします。