株式会社 MIX CONCEPT ABOUT WORKS BLOG
2020/01/21

ブログのサムネイル写真を選ぶ時の注意点【MiXの場合】

こんにちはデザイナーのカワノです。
突然ですが、 皆さんはブログなどを書く際サムネイル選びはどうやって選んでいますか?

一生懸命選んだり撮影したサムネイルなのに
「実際掲載してみるとイメージと違った」「見せたい部分が見切れてる」

と言った経験はございませんか? イメージ通りにいかない原因の一つにサムネイルの縦横幅を計算せず写真を選んでしまっていることがあげられます。

例えば横長のサムネイルサイズに対し縦長の写真を選んでしまっていたりすると大事な部分が隠れたり変な空白ができたりします。

そう言った事の無いようデザイン提案する際にルールや仕様をつける場合があります。今回は弊社のWEBサイトMiXより、ウェブデザイナーが制作したサムネイルのルール仕様が分かりやすかったのでご紹介したいと思います。

基本的には中心点を考えた選択を

サムネイルの基本となるのは注目させたい人物・物を目立たせる事が第一だと思います。もちろんサイトによっては余白を持たせたり、印象的にするために要素をあえて小さくしたり、凝ったレイアウトを行う場合もありますが、そういった場合においても中心点を意識しつつどこまでの範囲が掲載されるのかを計算したサムネイル画像の選定が重要になってきます。さらに、クリックした後の別ページでの表示やスマホでの表示まで考えた選定をすると、どの場面においても崩れないアイキャッチの効いた良いサムネイルになります。詳しくは以下の通りです。

一覧ページ、詳細ページ、携帯ページなど写真が使われる場面を想定してイメージを選択・撮影する。

サムネイルはサイトによっては複数のページで表示される場合があります。MiXの場合一覧ページと詳細ページに表示され、どちらも画像の表示サイズが異なっています。さらにはスマホでの表示もあり、下画像のように分かりやすい指標をつけてそれぞれの表示画面でも大事なところが隠れないような写真選定をするよう気を付けています。

スマホ表示などでは別画像にしたり、手動でトリミングしアップすることは可能ですが そうするとブログアップ時に手間がかかるうえお客様に提案するのにもハードルが上がってしまいます。

なかなか違うサイズの表示を考えつつサムネイルを選定するのは大変ですが、上記のような仕様書があると選ぶ段階で確認でき大変便利です! 中心点だけでも意識してサムネイルを選定するとサイトのデザインを活かした良いサムネイルができると思います。

いかがでしたでしょうか? せっかく良いwebデザインでもサムネイルの見切れやトリミングが変だと魅力が薄れてしまいます。

サムネイルはアイキャッチなどの重要な役割をもっていますので是非いろんな場面で表示されることを意識して選びたいですね。

MiXではこう言ったHPを作った後の更新説明なども丁寧に行っております。HPをお考えの方は是非お問い合わせだけでもご検討くださいませ。

お問い合わせはこちらから