スマートフォンサイトを表示する

  1. TOP
  2. 集客を考える、ホームページかんたん改善ポイント講座 : 第6回 パッと見で印象づける。メイン画像のコツ2

エキスパートコラム

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

第6回:パッと見で印象づける。メイン画像のコツ2

執筆:原 がじろう&赤井 菜津美(株式会社Gazi工房)

2018年3月19日更新

  • このエントリーをはてなブックマークに追加

閲覧数1,364views

このコラムをPDF形式でダウンロードする

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

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

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

がじろう

さぁ、続きだっ!続き!

なっちゃん

なんのことですか?

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

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

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

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

なっちゃん

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

がじろう

そうだったね。

なっちゃん

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

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

なっちゃん

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

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

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

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

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

画像の背景を透過?

なっちゃん

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

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

がじろう

ああ、こういうことか。

なっちゃん

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

がじろう

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

なっちゃん

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

集客のためのメイン画像

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

はい。できました!

がじろう

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

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

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

たしかに。

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

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

がじろう

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

なっちゃん

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

がじろう

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

なっちゃん

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

がじろう

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

まとめ

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

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

原 一宣。(はら・かずのり)a.k.a がじろう(がじろう)

原 一宣。(はら・かずのり)a.k.a がじろう(がじろう)

株式会社Gazi工房 代表取締役/JimdoExpert
http://gazikobo.co.jp/

1974年、福島県福島市生まれ。東北福祉大学社会福祉学部社会福祉学科卒業。山形県川西町在住。食品加工会社、電子基板製造会社を経て、フリーランスでWeb制作活動を開始。
2007年に株式会社Gazi工房を設立。Webサイトの企画・設計、制作業務に従事。
学生時代からのニックネーム『がじろう』と本名よりも呼ばれることが多く、屋号の『Gazi工房』もそれに由来する。
元東北芸術工科大学 非常勤講師。クリエイティブユニット「gabs」メンバー。
CSS Nite in FUKUSHIMA実行委員。

著書『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、エムディエヌコーポレーション)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』、『Webデザイン基礎トレーニング 現場で使うテクニックをひとつずつ、しっかり。〈HTML、CSS、jQuery、SVG、Webフォント〉』、『プロとして恥ずかしくない 新・WEBデザインの大原則』(同)。

赤井 菜津美(あかい・なつみ)

赤井 菜津美(あかい・なつみ)

株式会社Gazi工房 Webクリエイター/JimdoExpert
http://gazikobo.co.jp/

福島県伊達市生まれ。山形県高畠町在住。
仙台の専門学校(グラフィックデザイン専攻)を卒業後、福島の広告代理店へ入社。2007年株式会社Gazi工房に入社し、Webサイト制作を中心に、DTPやロゴデザイン、イラスト制作、車のステッカーデザインなども行う。

  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2018/7/1~2018/7/7]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ