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

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

エキスパートコラム

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

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

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

2018年2月19日更新

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

閲覧数290,552views

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

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

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

今回のテーマは、ホームページの顔とも言うべきメイン画像。メイン画像は集客にとっても無縁ではありません。多くの人の目を惹くメイン画像。そんなメイン画像の役割や作成のポイントを更新していけるのかを一緒に考えてみましょう。

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

がじろう

うむむむ。ぐむむむ。ぐぅ・・・・ハァ・・・・。

なっちゃん

・・・・・・・・・・うるさい。

がじろう

あ、うるさかった?いやぁ~ごめんごめん。じつは困ったことがあってさぁ。

なっちゃん

そういうことなら普通に話しかけてください。

がじろう

ごめんごめん。で、困ったことなんだけど・・・。

なっちゃん

(まったく動じてないないな。。。)

がじろう

はじめてWEB(Jimdo)を使ったメイン画像ってさ、以外にしっくりこないことが多くて。自身でホームページを作成されているお客様に、メイン画像を説明する際に毎回、困るんだよね。なっちゃんは、実際に作成する側じゃない?

なっちゃん

そうですね。

がじろう

メイン画像と一口に言うけど、どんなパターンがあって、どのように作成するべきか。その部分を教えて欲しいなぁ。

なっちゃん

ふっふっふ!遂に私が主役となる場面がやってきましたか!!

がじろう

よっ!デザイナー!頼むぞ!(ここは、おだてておこう。)

なっちゃん

実はですね。はじめてWEB(Jimdo)にはメイン画像を表示する方法が以下の3つがあるんです。

がじろう

へー。3つの方法。言われてみれば、たしかにその通りだ。

なっちゃん

じゃあ、1つひとつ説明していきますね。

「背景」を利用したメイン画像

なっちゃん

「背景」を利用してメイン画像を作成する場合、以下の利点があります。

「背景」を利用したメイン画像の利点
  • 流行のデザインを再現しやすい
  • 写真をそのまま直接的に使えるので、印象的になる
  • 「スライド表示」機能をかんたんに使える
  • ページ毎に画像を変更できる
使い方

[管理メニュー]>[デザイン]>[背景] から操作

なっちゃん

画像を用意して、何回かクリックするだけでできちゃいます。

がじろう

改めて、便利なもんだなぁ。Jimdoって。

なっちゃん

サクッと「背景」を利用したメイン画像のサンプルを作ってみました。

Jimdoの機能である「背景」を利用すれば、印象的なメイン画像を作ることができる。サンプルは「Tokyo(トーキョー)」レイアウト使用。

がじろう

おお!やるな!

なっちゃん

ちなみに「背景」を利用するのにおすすめのレイアウトがあるので、まとめてみました。

「背景」を利用する場合におすすめのJimdoレイアウト
  • Amsterdam
  • Bordeaux
  • Cairo
  • Chicago
  • Florence
  • Hamburg
  • Madrid
  • Melbourne
  • Maiami
  • Rio de Janeiro
  • Rome
  • Stockholm
  • Tokyo
  • Zurich

「ロゴエリア」を利用したメイン画像

なっちゃん

さぁ次行きますよー!次は「ロゴエリア」を利用したメイン画像です。

がじろう

ロゴエリア?

なっちゃん

下の図のような場所です。初めてJimdoでホームページを作る時に、レイアウト名のロゴが挿入されている部分になります。

「Cape Town(ケープタウン)」レイアウトでは、赤枠で囲まれた部分が「ロゴエリア」となる。

がじろう

へー!ここ、普通に画像を入れることができるんだ。

なっちゃん

Jimdoの場合、ロゴは基本的に画像ですよね。

がじろう

なるほど。

なっちゃん

利点とおすすめレイアウトは以下です!

「ロゴエリア」を利用したメイン画像の利点
  • 全ページ共通のメイン画像を配置できる
  • 「背景」を利用した場合と違い、思わぬところで画像が切れない
使い方

[ロゴエリア]に直接、画像を挿入する。

「ロゴエリア」を利用する場合におすすめのJimdoレイアウト
  • Amsterdam
  • Barcelona
  • Berlin
  • Bordeaux
  • Cape Town
  • Florence
  • Lille
  • Madrid
  • Miami
  • Riga
  • San Francisco
  • Sydney
  • Verona

なっちゃん

これもサンプルを作りましたよ!

がじろう

おおお!

「ロゴエリア」をメイン画像で利用することで、全ページ共通で表示できる。サンプルは「Berlin(ベルリン)」レイアウト使用。

がじろう

なるほど。バシッとメイン画像を決めたい場合には、この方法が良さそうだなぁ。
ところで、「思わぬところで画像が切れてしまう」ってどういうことよ?

なっちゃん

メイン画像を「背景」で利用する際に、起こりやすいんですよ。
ある程度、見せたい部分や被写体がハッキリしている画像だと、「背景」での調整は難しいんですよね。例えばこんな感じです。

先ほどと同じ画像を「Tokyo(トーキョー)」レイアウトの「背景」で表示すると、意図しない部分で画像が切れてしまう。

がじろう

確かに、変な部分でせっかくの画像が切れてしまうね。そうか、こういうことか。

なっちゃん

メイン画像に文字を入力した画像や、人物をハッキリ打ち出したい画像は、「背景」での利用はおすすめしません。

がじろう

ちょっと、気になることがあるんだけど・・・。

なっちゃん

なんでしょ?

がじろう

Jimdoの各レイアウトで、「ロゴエリア」を見比べるとさ、大きさが色々あるんだよね。単純にメイン画像だということで、挿入してしまうにはサイズはどうなんだろうか?

なっちゃん

おーさすがですね。そうなんです。
各レイアウトによって「ロゴエリア」に挿入できる画像の最大値が決まっているんですよ。これ、意外に知られていないんです。

がじろう

ふっふっふ。さすがオレ様。

なっちゃん

はいはい。
それでですね、上記に挙げた『おすすめのJimdoレイアウト』は、ある程度の大きさで画像を挿入できるものをピックアップしたんです。

がじろう

おお、そこまで考えていたのか!

なっちゃん

もちろん『おすすめのJimdoレイアウト』に掲載していないレイアウトでも、「ロゴエリア」に画像は挿入できます。
各レイアウトのロゴエリアに掲載できる最大サイズは、以下を参考にしてください。

Jimdoサポートセンターでは、図のように「ロゴサイズの最大値」を公表しているので、活用してください。

メイン画像を「コンテンツを追加」で「画像」を挿入する方法

がじろう

あと1つの方法があったね。それは、普通に「画像」として掲載する方法ってこと?

なっちゃん

はい。そのまんまです。

メイン画像を「コンテンツを追加」で「画像」を挿入する方法の利点
  • ページ毎にメイン画像としての表現を変更できる
  • 「背景」を利用した場合と違い、思わぬところで画像が切れない
使い方

編集画面で[コンテンツを追加]から[画像]選択し、メイン画像として使用したい画像を挿入する。

「コンテンツを追加」で「画像」を挿入する方法で、おすすめのJimdoレイアウト
  • すべてのJimdoレイアウト

「コンテンツを追加」で「画像」を挿入する方法のサンプル。「Barcelon(バルセロナ)」レイアウト使用。

メイン画像の表示におすすめシチュエーション

なっちゃん

以上がメイン画像を表示させる3つの方法です。

がじろう

ふむふむ。なるほどねー。見えてきたぞ。

なっちゃん

なんですかっ!「きえぇえいっ!どの方法でメイン画像を表示すれば良いのか、わからん~!!」ってならないんですか?

がじろう

・・・一体、どんなキャラを求めているんだ?

なっちゃん

ちぇっ。

がじろう

つまり、メイン画像をどの方法で表示するかは、こんな感じかな?

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

なっちゃん

おー!そうですね。これだとスムーズですね。

がじろう

ここまでのなっちゃんの説明があったからこそだよ。(ここは褒めておこう。)

なっちゃん

でへへへ。

がじろう

あくまで、この方法だといいよ。ってことで、上記のように「しなければならない。」ってことでは無いよね。

なっちゃん

そうです。そこは重要ですね。

がじろう

うんうん。じゃ、ここまでJimdoでメイン画像の表示方法について説明してもらったね。

なっちゃん

おっ!じゃ本題ですか!さぁ説明しますよー!

がじろう

待て待て。続きは次回にしようよ。

なっちゃん

集客のために、メイン画像をどう作れば良いのか!
はやくお話したい~!

がじろう

やる気出てるところで、申し訳ないが次回、次回。

まとめ

ホームページの印象を決めるメイン画像。Jimdoを使っての表示方法について説明しました。次回は、実際にメイン画像をどのように考えて作れば良いのかをお伝えします。

  • このエントリーをはてなブックマークに追加
このコラムを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/10/7~2018/10/13]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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