あなたのサイトに最適な背景を選ぶには

    あなたのサイトに最適な背景を選ぼう!

    サイトの背景は、訪問者にサイトをスクロールさせるか否かを左右するものです。

    優良な背景は、サイトに掲載されているコンテンツの中身からかけはなれることなく、サイトのトーンを決定づけます。背景は常に見えているものですが、目立つものではありません。読者の注意を惹きつつも、事業内容やブログについてより知りたいという気にさせるような背景とはどのようなものでしょうか。

    様々なタイプの背景の中からサイトにあった背景の選び方と、その設定方法を紹介していきます。

    ジンドゥー(Jimdo)では、写真背景、背景色、動画の3つの選択肢から背景を選ぶことができます。

     

    • 写真背景:この古典的な選択肢は、訪問者に様々な感情を想起させることができますが、やや訪問者の注意がそれる場合もあります。
    • 動画背景:動画で注意を惹き、短時間で多くのことを伝えることができます。
    • 背景色:ブランドの個性に合致させやすく、訪問者の注意をコンテンツに集中させます。

    写真背景

    適しているブロック:カバー、バナー、予約、画像

    使用ファイル:JPEG, PNG, GIF

    注意点:コンテンツより強い印象を与えないように色を明るくしすぎないように。

    設定方法:「背景の設定」を参照

    あなたのサイトに最適な背景を選ぶには
    写真背景

    感情を想起させる

    2018年度版のAdweeksトップ25にランクされている広告(英語記事)を見てみると、ある共通点に気がつきます。

    それは”感情を呼び覚ます”ということです。感情的なブランディングは見る人にアピールするためマーケティングの世界で使われることが多いですが、ウェブサイトの背景としても使えるのです。

     

    画像背景を選ぶ際には、事業に関連しているものを選びましょう。サイト訪問者に好感触を残したり、ブランドと感情的なつながりを作ることができるでしょう。

    例えば、チームビルディングについてのサービスを提供しているとして、人々が楽しそうに仕事をしているような動きのある写真を使うでしょう。綺麗な夕日の写真は、写真としては素敵でも、それを見た人は、そのサイトの事業について何の感情も持ちません。動きや、人々、もしくは興味深い視点が描かれた画像は、背景を実に際立たせるのです。

    これは、商品や、場所、あなた自身のもっとも良い部分をアピールする機会となります。

     

    もし、画像背景を決めかねるようなら、代わりに、べた色の背景や、スライドショーでいくつか写真を見せるようにしましょう。

    適正な画像サイズ

    見過ごされがちな要素ですが、適正なサイズの画像を使うことは、専門的なサイトに見えるという意味において、大きな意味をうみます。商品や人、見せたいと思っている旅行先などが強調されるように、画像の余分な部分は切り取ってしまいましょう。

     

    今時のPCモニターには、人物画像より風景画像の方が効果的です。StarCounter(英語記事)によると、一般的なPC画面の解像度は1366×768ピクセル(2019年3月時点)で、次いで1920×1080ピクセルだそうです。ジンドゥーでは、2000ピクセル幅を画像背景として推奨しています。最低解像度以下の画像をアップロードすると、結果的に80年代のピクセル化された画像のようになってしまいます。

    画像背景としてはJPEGかPNGの画像を使えます。動きのある背景にするためGIFも使えます。とはいえ、動きのある背景は、見る人の気を散らしてしまうことをお忘れなく。

     

    あなたのサイトに最適な背景を選ぶには
    適正な画像サイズ

    プロの裏技:ピクセルサイズがわからないときは、画像ファイルを右クリックし、”プロパティ”から”詳細設定”を選ぶと調べられます。Macの場合は画像ファイルを右クリックして”情報をみる”を選びさらに”詳細情報”をクリックしてください。

    オンラインで高画質な画像を探す

    高画質な画像は、ホームページを洒落た雰囲気にしてくれます。また、その画像を用意するためにプロのカメラマンは必要ありません。AI ビルダー では画像ライブラリでプロの写真をいくらでも見つけることができるからです。ジンドゥーサイトになくても、高画質のストック写真を提供しているサイトはネット上にたくさんあります。

    商品写真を画像背景にしたいと思った際には、プロのカメラマンを雇う必要はなく、DIYのライトボックスを使ってプロ並みの写真を撮る方法を読んで撮ってみましょう。

    動画背景

    適しているブロック:カバー、バナー、予約、画像

    使用可能ファイル:YouTubeやVimeoにアップロードされた動画

    注意:スローモーションのビデオが動画背景にはふさわしいです。

    設定方法サイトへの動画投稿の方法を参照してください。

     

    出典:ジンドゥー事例紹介[エンドレスプール]

    動画背景はかなり印象が強いですが、これは息を飲むような背景であることと、サイトの邪魔にならないということの間でバランスをとる方策の一つです。ページ上では動くものに注意が行くので、ビデオは訪問者に重要な情報に気づかせる良策です。

    ビデオクリップを表示させる

    ジンドゥー AI ビルダー でサイトに動画を追加するには、YouTubeかVimeoからビデオクリップを選ぶ必要があります。

     

    AI ビルダーでは、カバー、バナー、予約、画像枠のいずれででも、スクリーン幅いっぱいに動画を表示でき、携帯やタブレットにはとてもフィットします。

    ジンドゥーでは大きなスクリーンでも鮮明に見えるので HD画質のビデオを推奨しています。

    サウンドトラックを流す

    サイトのブロックに動画を追加したら自動的に再生されます。
    サイトを訪れるやいなや、音が大音量でガーンと鳴るホームページは、時によっては訪問者をイライラさせる場合があります。サイトの運営者はその音・音楽を気に入っているかもしれませんが、訪問者に強制的に音を聞かせることは、サイトを閉じさせる理由になります。

    それだけではなく、動画の上に文章を被せていると、読みづらいこともありますが、ジンドゥーでは動画背景に文章やボタンを乗せると、自動的に動画の上に半透明のフィルターが敷かれるようになりました。

    これで、動画も見られるし、文章も読みやすくなります。

     

    プロの裏ザワ:動画の尺は短めにしましょう。ジンドゥーでは自動的に動画が初めからループ(繰り返し再生)されるので、終わることがありません。

    べた色の背景

    写真がサイトのテイストでない場合でも、背景に使える選択肢は多数あります。楽しく、活気のあるようなメッセージにするため、くっきりした色を使うようにしましょう。ただ、その色が業界のイメージや、事業についてユーザーに与えたい印象と合っているかどうかはきちんと考えてください。

     

    適しているブロック:ジンドゥーウェブサイトの全てのブロック

    使える色:カラースキームにある全ての色

    注意:明るい色は強すぎることもあるので、背景には微妙な色合いを選びましょう。

    設定方法ブロックの色の変更方法 を参照してください。

    あなたのサイトに最適な背景を選ぶには
    べた色の背景

    ブランドイメージを保つ

    背景色を選ぶ時は、必ずブランディングに使用している色を選ぶようにしてください。

     

    まだ色を特に決めていない場合は、会社に合った配色パレットを選ぶことから始めましょう。人というのは、感覚や感情を様々な色合いと結びつけるものです。あらゆるところで一貫して同じ色を使っていれば、ブランドを認識してもらいやすくなります。

     

    ほとんどのブランドは色を組み合わせて使っています。背景色には明るすぎない色を選びましょう。もしブランドに見合った色がない場合は、白を背景色として使用します。白は、清潔、新鮮、中庸であり、サイトのコンテンツを邪魔しません。

     

    対照的な色はブロックをより目を引くようにできます。例えば、全体の背景が白で、ブロックの色がピンクや緑、黒であれば、それらはよく目立ちます。これは、特に目立たせたい行動喚起(Call to Action)を促すような表現に効果的です。

    物事は明確に

    背景は文章の可視性にも影響があるため、本当に注目てしてほしいコンテンツには、真っ白な背景が無難です。余白は、サイトを簡潔かつ上品に見せるので、昔ながらの事業や、お堅い事業にはイメージとしてぴったりです。

     

    プロの裏技:より素朴なものを探しているなら、木目やテキスタイルといったテクスチャー背景を試してみましょう。

    背景が与える効果を過大評価しないでください。想像力を働かせて背景を使えば、サイト訪問者はサイトを離れる時には、好意的な印象を持ってくれているでしょう。

    そのためにもいろいろな選択肢を試してみてください。