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

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

ホームページの顔とも言うべきメイン画像の作成のポイントを、前回に続いて、ご紹介いたします
※「はじめてWEB」は2020年10月13日をもってサービスを終了しました。

「集客を考える、ホームページかんたん改善ポイント講座」では、「はじめてWEB(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」は
    サービスを終了しました

がじろう

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

なっちゃん

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

がじろう

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

参考ページ
  • 写真撮影入門※「はじめてWEB」は
    サービスを終了しました
  • 今すぐ実践できる写真講座※「はじめてWEB」は
    サービスを終了しました

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

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

まとめ

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

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

※「はじめてWEB」のオリジナル版は掲載を終了しました

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

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

今日の用語

Python
「Python」(パイソン)は、プログラミング言語の1つ。プログラマのグイド・ヴ ...→用語集へ

インフォメーション

RSSフィード


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