今まで知らなかった!メイン画像の正しい使い方

ホームページを見に来た人は、アクセスした数秒間でページを閉じるか、読み続けるかの判断をします。このコラムをご覧になっている方も普段ホームページを見るとき、こういった判断をしているかと思います。その判断はどういった要素で決まるのでしょうか?サイト全体の雰囲気(デザイン)、リード文章や本文がキャッチーで分かりやすいなど理由は様々ですが、メイン画像も重要な要素の一つです。

今回は、「とりあえずHP」のメイン画像を使ってホームページに来てくれた人に良い印象を持ってもらい、読み続けてもらえる小技をいくつかご紹介します。

 

「ちょうどいいサイズ」のメイン画像を入れてみよう

まずは「とりあえずHP」のメイン画像の特徴を確認しましょう。「とりあえずHP」のメイン画像は1つのサイトに1枚だけ設定でき、トップページの上部に表示されます。横幅の最大値が365pxに固定されているので、横に長過ぎる画像は小さくなってしまいます。縦3:横4くらいの比率がちょうど良くはまるように設計されています。

mainimg

 

外観や内装の写真で、会社(お店)の雰囲気を伝える

実際のお店であれば、インテリアや売られている商品などがお店に入った瞬間に目に入ってきます。しかしホームページの場合は実際のお店と違い、お店(ホームページ)に入った瞬間に目に入る情報は限られてきます。メイン画像は、お店の看板やエントランスのようなもの。 ホームページをパッと見た時に、お店の雰囲気が伝えられるよう、メイン画像をお店の内装や建物の写真などにするのも一案です。特に、オシャレなお店や内装にこだわったお店ではなおさらPRになるでしょう。写真を通じて、言葉では伝わらない「リアルな雰囲気」を伝えることができます。

 

スタッフの写真で、人柄を伝える

会社やお店の”売り”がスタッフの人柄である場合は、実際に働いている人の写真をメイン画像にするといいです。この場合、全スタッフを写真に収めたいところですが、修学旅行の集合写真のようになってしまうと、いったい何のホームページなのか分かりづらくなるので注意が必要です。例えば、ケーキ屋さんのホームページの場合、真剣な表情でケーキを見つめ、デコレーションしているシェフの横顔を掲載するなど、「あえてカメラ目線ではない写真」を掲載するのも手。雑誌や、ほかのホームページなどを見て「かっこいいな」と感じた写真の構図をまねしてみても良いでしょう。

 

イメージ写真で、サービスのイメージや洗練された雰囲気を伝える

「自分で撮った写真だと素人っぽくて嫌・・・」という方は、フリーのイメージ写真を使って見るのはいかがでしょうか?プロの撮影したイメージを使うことで洗練された雰囲気を伝えることができます。ここで注意したいのは、イメージ写真は洗練されていて扱いやすいですが、使い方によっては上でお話しした会社やお店の「リアルな雰囲気」がなくなってしまいます。会社やサービスのイメージとマッチする写真を選び、「ホームページ説明文」や記事本文の文章で補足するとより完成度の高いホームページにすることができます。

写真素材 足成
フリー写真 ソザイング

 

テンプレートのデザインに合わせてメイン画像をつくる

「とりあえずHP」には様々なデザインテンプレートが用意されています。中にはメイン画像をデザインの一部に組み込んだテンプレートあります。アイデア次第ではおもしろい雰囲気のホームページを作ることができます。

スクリーンショット 2014-07-04 23.55.29
△黒板がデザインされているテンプレートをうまく使っている例

 

あえてメイン画像は使わない

「とりあえずHP」のテンプレートのなかには、メイン画像がなくても見栄えを損なわないデザインのものがあります。あえてメイン画像を使わないことで、テンプレートのデザインを全面に押し出すことができます。 この場合もテンプレートの雰囲気が会社やお店の雰囲気に合っているかというのが重要になります。

green_tree  city_blue

 

まとめ

いかがでしたでしょうか? 「とりあえずHP」のメイン画像はホームページの“顔”です。会社やお店の“売り”や“強み”を表した写真やイメージをメイン画像にすることで、ホームページを見に来る人により的確に、直接的に伝えることができます。

気軽につくれる、素敵なホームページ「とりあえずHP」

とりあえずHPは、素敵なホームページを気軽につくることができるホームページ作成サービスです。
「メールを送る」程度のパソコンスキルがあれば、驚くほど簡単にホームページを作成することができます。
業種ごとに作り込まれたテンプレートデザインや文章のサンプルもあるので、ホームページづくりにあまり時間が割けない人にもおすすめ。大切な時間をホームページ作成に費やすのではなく、本業に集中させることができます。

無料オンラインサポート実施中

\ホームページを作る前に知っておきたい/

ホームページの作り方 動画講座

動画URLを無料で入手

\ホームページ制作のプロに個別相談/

とりあえずHP無料個別レッスン

個別レッスンの詳細

簡単に自分で作れるホームページ作成ソフト「とりあえずHP」

簡単HP作成ソフト「とりあえずHP」

無料お試しはこちら