障害情報 登録する

思わずサイトを見たくなる!背景画像の活かし方

今日は、背景画像に関するおすすめの機能を紹介します。

 

先日、ファーストビューを改善する方法をアップしましたが、背景画像はファーストビューのなかでも大きな役割を占める、重要な要素です。

 

サイトに訪れたとき、自分の興味を引くものやきれいな画像が目に入ると、それだけでぐっと興味が湧きませんか? ファーストビューがきれいだと離脱が防げるだけでなく、サービスや商品への期待値をあげる効果もあります。

 

焦点を合わせて画像を生かしきる機能「フォーカルポイント」を中心に、これまで追加されてきた便利機能を振り返ります。この記事を読んで背景画像を見直し、お客さまを惹きつけるウェブサイトを目指してくださいね。

INDEX


抑えておくべき3つのルール

これだ、と思って設定した背景画像が、ユーザーには不自然に見えていたり、野暮な印象を与えていることがよくあります。

飲食店のサイトを例に、抑えておくべき3つのルールをまとめました。

※画像をクリックすると拡大して見ることができます。

1.サービスや商品を正しくイメージさせるもの

背景画像:サイトの内容に合ったものを使う

これだと、ぱっと見て連想されるのはハワイなどの南国やビーチです。

サーフショップや旅行会社、ハワイアンカフェに見えるかもしれません。

 

商品・サービスを表すものや、ブランドのイメージに近い画像を使ってください。


2.サイズは 2000×1500 ピクセル以上!

背景画像:適切なサイズを使う

Jimdoでは、2000×1500 ピクセル以上のサイズ(10MB以内)の使用を推奨しています。

 

この画像は 1280×1920 ピクセルの縦の画像を使用した例ですが、一部分しか見えていません。縦横、小さすぎ・大きすぎに注意です。


3.コンテンツの邪魔になる色や物に注意

背景画像:派手すぎないものを使う

ティッシュやパソコンなど、机に溢れるたくさんの物、赤く目立つパーカー……なんだかごちゃごちゃしていて、内容やメインコンテンツに目がいきません。飲食店らしさや、お店の魅力も損なわれてしまいます。

 

派手すぎる色や関係のない要素は極力避け、中身のコンテンツを邪魔しないようにしましょう。


すぐにきれいな画像が用意できないときは、フリー素材サイトをつかうのがおすすめです。写真素材提供サービスはこちらで紹介しています。

フォーカルポイントで、焦点を合わせる

いざ設定してみると「画像の重要な部分が見えていない!」「ページタイトルが見づらくなってしまった」と感じたことはありませんか? そんなときは、画像のなかで焦点を合わせる場所を調整できるフォーカルポイントの機能がおすすめです。

・使いかた

  1. 管理メニューのデザインから「背景」を選択
  2. 使いたい画像を選択した状態で「設定」アイコンをクリック
  3. 白い丸をドラッグで動かし、焦点を合わせる
  4. 一度プレビューで確認し、保存をする

・便利な活用の仕方

フォーカルポイント:中央

カップの白と被ってすこし見づらい・・・

フォーカルポイント:上部

見やすく、画像内のバランスもいい

フォーカルポイント:下部

文字は見づらくないけれど、注いでる絵が目立つ


このように表示領域を変えることで、視認性を良くしたり、好みのレイアウトで見せることができます。

※スマートフォンで表示したときも焦点の位置は同じように合わせられますが、レイアウトや背景固定機能の使用状況によって反映されないものもあります。

こんなこともできる!おすすめ背景機能

他にも、便利な背景画像の機能を紹介します。

ガラっと雰囲気が変えたり、個性やこだわりが伝わるサイトに近づけるかもしれませんよ。ぜひ、楽しみながら試してみてください。

・ページによって背景を変える

Jimdoではすべてのページで、違う画像を使うことができます。サイトのイメージとページの内容に合うものを選べば、内容だけでなく世界観も伝わりやすくなります。

個別ページに背景画像を設定する

・背景を固定して、フルスクリーンで見せる

「背景固定」の機能は、Rome や Amsterdam のように画像がヘッダー部分に表示されるレイアウトで使うことができます。スタイルの機能と合わせて使うことでサイト全体を透過させたり、背景をスクロールさせないように固定することができます。

背景固定:オフ

背景固定:オフ

スクロール時、画像がメインコンテンツと一緒に動く

背景固定:オン

背景固定:オン

全体を透けさせられ、スクロール時はメインコンテンツだけが動く


背景を固定してメインコンテンツ部分を透過すれば、ちょっと奥行きのあるおしゃれな雰囲気に。この場合、派手な色や模様の画像を使うと、文章が見えづらくなるので注意です。


背景画像を変えると、サイトの印象はがらりと変わります。

ウェブサイトの内容や与えたい印象を考え、いろいろ試してみてくださいね。

 

また、Jimdoのお知らせでは取り上げてほしい活用法やテーマを募集しています!

すべてにお応えできるわけではありませんが、気軽にコメントで教えてくださいね。

 

※機能の要望やバグに関しては、サポートへお問い合わせください。

関連記事まとめ



コメント: 5 (ディスカッションは終了しました。)
  • #1

    コブラ (金曜日, 03 2月 2017 12:59)

    こんな機能があったんですね!早速試してみます!!

  • #2

    kimura (土曜日, 04 2月 2017 15:28)

    ユーチューブ見た後は次の番組のユーチューブに移動しない方法はありますか?

  • #3

    Jimdoサポート (月曜日, 06 2月 2017 14:47)

    ありがとうございます。ぜひ試してみてください!

    >>kimuraさま
    Jimdoのサイト上で動画を見た場合は、次の動画は再生されません。
    YouTubeを開いて動画を見た場合は、YouTubeの仕様上、動画が再生されてしまいます。
    (見る人自身が、YouTube上で自動再生をオフにすることは可能なようです)

  • #4

    画像販売ドットコム (月曜日, 06 2月 2017 15:32)

    背景画像は、重要ですね。

  • #5

    Goroutetsu (水曜日, 08 2月 2017 13:52)

    貴社公式サイトで使用されている画像もさることながら、見出しフォントの見映えも良いですね。宜しければ見出しに使っている日本語フォント名?も教えて頂けたら嬉しいです。