はじめてWEBエキスパート(専門家)コラム 集客を考える、ホームページかんたん改善ポイント講座(全12回)

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

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

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

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

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

がじろう

さぁ、続きだっ!続き!

なっちゃん

なんのことですか?

がじろう

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

なっちゃん

ん?・・・・・・あーはいはい。

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

(なんだこの変わり身は。。。)

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

商品やサービスなど想起できるようなイメージ写真をメイン画像にする場合
文字や写真を加工したメイン画像を使用し、全ページに表示させたい場合
文字や写真を加工したメイン画像を複数使用し、各ページで表示を変えたい場合

なっちゃん

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

がじろう

そうだったね。

なっちゃん

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

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

なっちゃん

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

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

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

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

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

画像の背景を透過?

なっちゃん

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

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

がじろう

ああ、こういうことか。

なっちゃん

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

がじろう

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

なっちゃん

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

集客のためのメイン画像

なっちゃん

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

がじろう

お。なに?(急にびっくりしたー。)

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

はい。できました!

がじろう

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

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

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

たしかに。

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

無理やりな展開だけど、過去のコラムを紹介してくれたので、許すよ。

なっちゃん

それはさておき、メイン画像においてご自身のご商売を表現するために、写真は重要な役割を担います。素材では見つからない、オリジナリティを出したい場合に、自分で撮影されることもオススメしたいです。
はじめてWEBでは、写真撮影に関してとても参考になるコラムもありますので、こちらもお役立てください。

がじろう

(ぐぅ・・・まるで無視。。。)

がじろう

写真は、本当に重要な要素だね。自分で撮影するのも良いけれど、予算を捻出できるのであればプロに撮影してもらうことも選択肢に入れておいて欲しいね。

なっちゃん

写真は、奥が深いですからねー。

がじろう

せめてメイン画像で使用する写真だけでもプロにお願いすると良いね。

なっちゃん

1枚の画像が与える影響は大きいですからねー。

がじろう

そうだね。総じて、ホームページのメイン画像の役割を理解してもらえたら、何よりです。

まとめ

ホームページの印象を決めるメイン画像。ホームページを訪れる人にどのような印象を与えたいのか、何を思って欲しいのかを大きく左右する部分です。なぜ、この写真を使うのか。なぜ、この画像なのか。このような部分をしっかりと考えて、メイン画像を工夫して作成してみましょう。

このコーナーのコンテンツは、KDDI提供の情報サイト「はじめてWEB」掲載の「エキスパート(専門家)コラム」の情報を、許諾を得てWeb担の読者向けにお届けしているものです。

「はじめてWEB」掲載のオリジナル版はこちら:
集客を考える、ホームページかんたん改善ポイント講座(全12回)「第6回:パッと見で印象づける。メイン画像のコツ2」(2018/03/19)

この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

人気記事トップ10(過去7日間)

今日の用語

nonofo
rel="nofoolow"ではないリンク、つまり通常のリンクのこと。 P ...→用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]