集客を考える、ホームページかんたん改善ポイント講座（全12回）

パッと見で印象づける。Webサイトのメイン画像（キービジュアル）のコツ【その2】

ホームページの顔とも言うべきメイン画像の作成のポイントを、前回に続いて、ご紹介いたします

原がじろう＆赤井菜津美（株式会社Gazi工房） 2018/8/24 7:00 Web担当者／仕事 | 解説／ノウハウ

5 7 0

※「はじめてWEB」は2020年10月13日をもってサービスを終了しました。

「集客を考える、ホームページかんたん改善ポイント講座」では、「はじめてＷＥＢ（Jimdo）」を使ったホームページのちょっとした集客のための「改善のアドバイス」をお送りいたします。多くのホームページは「ここを直すだけでもっと人が来る」というポイントが存在します。

このコラムでは、JimdoExpertの「なっちゃん」と、「がじろう」が実際にあったお客さまの相談や悩みをもとに、ホームページの集客改善をどのように行えば良いのかを、掛け合いでお伝えしていきます。

今回のテーマは、ホームページの顔とも言うべきメイン画像。メイン画像は集客にとっても無縁ではありません。多くの人の目を惹くメイン画像。前回に続いて、メイン画像の作成のポイントをご紹介いたします。

さぁ、続きだっ！続き！

なんのことですか？

ほら前回の続き。メイン画像に関して・・・。

ん？・・・・・・あーはいはい。

なんだよ、あれほど「説明しますよー！」「はやくお話したい～！」とか言ってたのに。

1ヶ月も空いてしまいましたからね。テンションはそんなに持続しませんよ。

いや、そうだけど・・・。

さぁ！いきますかー！！説明しちゃうぞー！
まず、前回のおさらいです。

（なんだこの変わり身は。。。）

メイン画像を表示させる3つの方法

商品やサービスなど想起できるようなイメージ写真をメイン画像にする場合

「背景」を利用する方法^{※「はじめてWEB」は
サービスを終了しました}

文字や写真を加工したメイン画像を使用し、全ページに表示させたい場合

「ロゴエリア」を利用する方法^{※「はじめてWEB」は
サービスを終了しました}

文字や写真を加工したメイン画像を複数使用し、各ページで表示を変えたい場合

「コンテンツを追加」で「画像」を挿入する方法^{※「はじめてWEB」は
サービスを終了しました}

前回、Jimdoには上記のメイン画像を表示する方法を3つ、おすすめのシチュエーションと共にお伝えしました。

そうだったね。

今回は、さらにステップアップしたメイン画像そのものの作成方法をお話しちゃいます！

ステップアップテクニック
メイン画像を「背景」と「ロゴエリア」を組み合わせて表現する

今回お伝えするのは、メイン画像をJimdoの「背景」と「ロゴエリア」を組み合わせて表現する方法です。
これは、ロゴエリアに文字やロゴマークの画像、背景にイメージ画像を配置するものです。まずはサンプルを見てください。

Jimdoの機能である「背景」と「ロゴエリア」を組み合わせたメイン画像サンプル。「Amsterdam（アムステルダム）」レイアウト使用。

なるほどね！この方法を使えば、前回あった「思わぬところで画像が切れてしまう。」なんてことは無いね。

そうなんです。しっかりとイメージを表現して、読ませたい文字も画像として表示できる。そうすることで、メイン画像としても説得を増すことができます。

同じ表現を1枚の画像で表現するよりも合理的でもあるね。

文字画像とイメージ画像を分離すれば、下のサンプルのように、いずれか一方を変更することで作業的に簡単になりますからね。

「ロゴエリア」の画像を変更したもの。同じイメージを踏襲したままで、変更することができる。

見た目と訴求ポイントを分離して、コントロールがしやすくなるということだねー。

ホームページを訪れた方の目を楽しませつつ、伝えるべき情報も表現できるので、この方法はおすすめです。

この「背景」と「ロゴエリア」を使う場面で、気をつけることってある？

「ロゴエリア」に使用する画像は、画像そのものの背景を透過させる必要がありますね。

画像の背景を透過？

そうです。これも見てもらった方が早いですね。

背景を透過していない画像を「ロゴエリア」に使用した例。

ああ、こういうことか。

そうです。意図的に背景を置く場合もありますし、絶対に背景を透過しなければならないという訳ではありませんが、Jimdoの「背景」に使用した画像をスマートに表示したい場合には、画像の背景を透過したものがおすすめです。

画像の背景を透過するには、どうするの？

そこは悩ましいところですが、画像加工・編集ができるソフトがあれば簡単に加工できます。ちなみに背景を透過した画像のファイル形式は、「.png」や「.gif」などがあります。Jimdoではどちらの画像ファイル形式も対応していますよ。

集客のためのメイン画像

ここまで、Jimdoでのメイン画像の表示方法と、ちょっとしたテクニックを紹介したんですが、がじろうさんに質問です！

お。なに？（急にびっくりしたー。）

メイン画像は、「カッコイイとかキレイに作ってください。」とお客様に依頼されますが、そんなことだけを意識して作成しても良いですか？

残念ながら、それでは集客につなげる部分で考えると正解とは言えないなぁ。

それはどういうことですか？

じゃ、今からオレが言った通りに2種類のメイン画像を作ってみて。（ゴニョゴニョ・・・）

はい。できました！

じゃ、並べて見てみよう！

架空のパン屋さんのメイン画像。

パン屋さんのメイン画像を想定して作成してもらったんだけど、1枚めは建物。2枚めはパンの写真。パン屋さんのホームページを訪れる人は、何を求めてやってくるんだろうか？

様々な理由はあると思いますが、パンが欲しい。食べたい。知りたい。と思って訪れる方が多いでしょうね。

そうだよね？そう考えると、建物がメイン画像だと、味は二の次で雰囲気、シチュエーション重視に思えてしまう。何よりも初めてホームページを訪れた人は「パン屋さん・・・だよね？」と一瞬考えてしまう。

たしかに。

何が言いたいかわかってきたと思うけど、『このホームページはパン屋さんのホームページです。』とパッと見て理解できないと、閲覧者に不安というマイナスな感情を与えてしまう。よほど意図的な事が無ければ、避けたいところだね。

それだけメイン画像の役割は大きいんですね。

その通り！
様々な方法で、ホームページに辿り着いた閲覧者に、良い印象・悪い印象を与えるメイン画像はとても重要なんだ。だからこそ、単純にカッコイイ、キレイだけでは無く、何のホームページなのか、どんな印象を与えたいのか、キチンと考えたうえで作成することで結果が違うハズだよ。

さすが！
あ、そうだ。忘れてしまわないように、今回のメイン画像を作成するにあたって、参考にしたコラムを紹介します！

参考ページ

みんビズ制作講座：上手に素材を使いこなそう第2回：写真・イラスト素材を提供しているサイト^{※「はじめてWEB」は
サービスを終了しました}
みんビズ制作講座：上手に素材を使いこなそう第3回：アイコン・フォントを提供しているサイト^{※「はじめてWEB」は
サービスを終了しました}
ホームページのクオリティアップ術：制作編第10回：ホームページ制作に役立つ「無料で使える写真素材サイト30連発」^{※「はじめてWEB」は
サービスを終了しました}
ホームページのクオリティアップ術：制作編第11回：ホームページ制作に役立つ「無料で使えるイラスト素材サイト10連発」^{※「はじめてWEB」は
サービスを終了しました}
みんビズ制作講座：上手に素材を使いこなそう第1回：素材を使うその前に～使用上の注意とルール～^{※「はじめてWEB」は
サービスを終了しました}