ブログ初心者

【ブログ初心者】⑤ヘッダー画像の最適サイズは?

トップページを見たときに、真っ先に目に入ってくるのが『ヘッダー画像』です。

まったく同じ画像を使用する場合でも、そのサイズの違いでイメージやインパクトが大きく変わってきます。

ヘッダー画像そのものが決まっても、いざブログに配置しようとするときに、そのサイズに迷ってしまいます。

「ヘッダー画像の最適サイズ」ってあるんでしょうか?

『ヘッダー』と『ヘッダー画像』の違い

ヘッダーとは

『ヘッダー』とは、Webサイトのどのページを開いても、常に上部に表示される部分を指します。

そのため、多くのサイトは『タイトル』や『ロゴマーク』をスッキリと設置しています。

また、ヘッダー扱いとして『グランドメニュー』を設置して、訪問者の利便性を図っているサイトも多く見かけます。

ヘッダー画像とは

それに対して『ヘッダー画像』は、サイトのトップページ上部の最も目立つ位置に表示させて、サイトのイメージやインパクトを瞬時に決定付ける役割を担いますが、トップページにしか表示されません。

実店舗でいえば、お店の「看板・ネオン」であったり「外観」にあたります。

ヘッダーに含て配置するのが良いのか、ヘッダー画像として配置するのが良いのか

そのため「ヘッダーに含めて配置する」(=どのページでも最上部に表示)のが良いのか、「ヘッダー画像として配置する」(=トップページにしか表示されない)のが良いのかは迷いどころです。

ヘッダーに含めているサイトの特徴は、ヘッダーがどのページにも表示されるという特性を活かしてして、『オリジナルロゴ』や『キャラクター』をヘッダーに配置しています。

そのため、ヘッダーの高さを若干厚く(高く)して、ヘッダーを強調させているのが特徴です。

ただしその場合は、ヘッダーに表示させる画像までも大きくしていまうと、画面全体が「くどい」感じになってしまいますので、ヘッダーに表示させるのは『大きめのロゴ』や『ワンポイントのキャラクター』などに留めたり、ヘッダー画像を設けなくしたり、ヘッダー画像の高さを抑えたりして、ヘッダーが重い印象にならないように注意する必要があります。

ヘッダー画像の横(幅)サイズ

px(ピクセル)について

  • PCの画像サイズは、通常『px(ピクセル)』という単位で表されます。pxは画像を構成する粒の単位です。
  • 日常においては、横✕縦という”サイズ”を表すときに、”センチ”や”インチ”などの単位を利用して紙に表記します。横✕縦のサイズが分かっていれば、誰もが同じ大きさを表現できます。それは、どの紙も同一の性質のものだからです。
  • しかし、PCにおいはそうはいきません。PCで画像サイズを表現する場合、その土壌となるPCの解像度やモニターの大きさが異なるので、それらの違いによって実際に表示されるサイズが異なってしまうからです。
  • 従って、まったく同じ画像を用いても、PCの解像度やモニターの大きさの違いにより、実際に見える画像のサイズが異なってしまうことを念頭においておく必要があります。

横(幅)の最適サイズは?

大手企業ホームページのヘッダー画像横(幅)サイズは、940pxあたりから1,000px前後が主流です。

先にも触れたように、PCの画像表示は、利用者のPC解像度やモニターサイズによって、同一の画像でも異なる表示サイズになってしまいます。

そこで大手企業では、利用者のPC解像度やモニターの大きさの最大公約数を調査したうえでヘッダー画像サイズを決めているので、まずはそれらを参考にするのが良いと思います。

ヘッダー画像の横(幅)サイズ→940px~1,000px前後で試してみる

PCの横幅に合わせる設定もできる

  • 利用者のPC環境に関わらず、ヘッダー画像をPC画面の横幅いっぱいに表示させることもできます。
  • ただし、最近は大型モニターを使用している利用者も多いため、巨大な画像が画面いっぱいに表示されると、インパクトどころかかえって疲れてしまいますので、好みが分かれるところです。

縦(高さ)の最適サイズは?

横(幅)を1,000px前後とした場合、縦(高さ)は250pxでまず試してみて、そこから少しずつサイズ調整することをオススメします。

スマホのヘッダー画像について

スマホ時代のネット環境において、スマホを意識したヘッダー画像サイズも考慮しなければなりません。

スマホ用に転換する機能を備えたテーマも多くありますが、それでもPC用のヘッダー画像をスマホに転換した場合「大き過ぎる」傾向にあります。

スマホ用に別のヘッダー画像を設定できるテーマもありますし、スマホにはヘッダー画像を設置しないのも一考です。

まとめ

ヘッダー画像は、「サイトの顔」となる部分です。

それだけに、画像そのものの選択はもちろんのこと、「画像サイズ」を意識したいものです。

更に、自分以外PCでは違う見え方がすることや、スマホ用サイズを意識した工夫も必要です。

【ブログ初心者】③サイトをカスタマイズする PCやスマホそれにネットにつながる環境を準備して、レンタルサーバーや独自ドメイン更にはブログのテーマ(テンプレート)を用意したな...

ヘッダー画像の最適サイズは?

  • 横(幅)サイズ→940px~1,000px前後
  • 縦(高さ)サイズ→250px前後から試行錯誤
  • ヘッダーに含めるのもアリ→その場合はスッキリと
  • スマホ用には別途作成するorヘッダー画像なし
  • 最終的には、「画像インパクト」と「サイトイメージ」との”バランス”が重要です!