トップページ画像の作り方

恐らくほとんどの会社HPのトップに、ドン！と会社・商品・サービスのイメージを表現した画像が掲載されているかと思います。

メイン画像とかメインビジュアルバナーとかメインイメージとか、トップメインイメージとか言い方はいろいろあります。この画像は考えれば考えるほど難しいものなのです。

僕も今まで自社のホームページを10年以上運営してきて、何度このトップページのメイン画像を変えたか分かりません。

例えばあなたが観光地で自家製の手作りお菓子を販売しているとしましょう。ホームページのメイン画像にどのようなイメージ写真を掲載しますか？少し考えてみてください。

トップページに関しては動画でも解説しています

ホームページに期待する目的によって大きく変わってきますよね。
目的と照らし合わせてみましょう。例えば、下記3つの目的例考えてみます。

お店で買って食べ歩きをして欲しい場合　→　カップルや女性のグループ・家族連れがそのお菓子をその観光地で食べ歩きしている写真を配置する。

お土産物として買って欲しい場合　→　折箱に入ったお菓子、包装紙、包み紙を開けて笑顔になっている人の写真を配置する。

店舗内のカフェで食べて欲しい場合　→　カフェの外観や内装、実際にカフェで提供されるお菓子をカフェ内で食べている写真を配置する。

同じ商品を売るにしても、目的に応じてイメージ写真はこのように変える必要があります。

また、目的に応じて見せ方を変えた方が、訪問者にわかりやすく訴求できるとことも理解していただけると思います。これは目的がはっきりしていて分かりやすい例なのですが、自社が伝えたいイメージと訪問者が知りたい内容がピタッと一致していることは意外と少ないのではないでしょうか？

目的と合致した、しっくりくるメイン画像のイメージに行きつかず、何度も試行錯誤を繰り返しながら、成果が出そうなイメージに手探りの中で修正していく方法になっていると思います。

ここで弊社の場合、どのように考えているかを書いてみます。弊社ホームページのメイン画像も、大きく分けて過去10年で3つのパターンに分けられます。

運営初期の頃・・・メインの画像に風景を使い、その風景にキャッチコピーとしてサービス内容を列記。

運営5年頃・・・お客様の許可を得てお客様と一緒に撮った写真をたくさんメインビジュアル画像に配置。お客様と良好な関係が築けていることが一目でわかるように、またそんなイメージを訪問者の方に持って欲しいという思い。

運営10年頃・・・自分の顔写真を大きく掲載。近年、商品やサービスを「誰から買うのか」が重視される中、人を全面的に出すことで信用を獲得していきたいという狙い。個別対応で親身になってあなたのお手伝いをしますというイメージを持ってもらいたい、と考えるに至った。

もちろん画像の上に乗せているキャッチコピーも試行錯誤し続けています。最近までは「ホームページ」と謳っていたのですが、最近ではホームページを「WordPress」で作ることが多くなってきているので、より目的を絞り込むために、WordPressという表現に変えました。今はWordPressという言葉に変えたことによる影響を数字で計測中です。

メインビジュアルバナーは、画像とキャッチコピーが1セットで表現できる部分ですが、ここは本当に色々考えた方が良いです。作ってしまうとそのままずっと放置状態になりがちですが、社会や業界環境は常に進化し動いています。本当に自社で達成したい目標を、的確に分かりやすく表現できているかどうか、もう一度検証し直しましょう。

ホームページの第一印象となるトップページのメインビジュアル画像はどんどん試行錯誤し、修正し変えていけばいいのです。一時的に改悪になっても良いので、とにかく良いと思うものに修正変更していく、ホームページ運営ではその行動力を持ち続けて欲しいと思っています。

こちらが最新情報です

投稿者プロフィール

山口 敦

2004年頃の会社員時代からブログ作成を始める。ブログ作成が楽しくなり、そのまま趣味が高じて2006年にホームページ制作で起業、2008年に株式会社ウェブロードを設立。現在は、個人・中小事業者のWordPressサイト制作・改善を中心に、Web業界18年の知識と経験を生かして、大型案件のWebディレクターとしても活動中。　プロフィールはこちら

最新の投稿

• お知らせ2025年8月12日【WordPress専用】PHPバージョンアップ対応サービスを開始しました
• お知らせ2025年8月6日「記事を作成し公開しても情報がAIに吸収されるのでムダ」は本当か？
• ご質問に対する回答2025年8月2日個人事業主の方からのSEOとホームページ制作のご相談事例
• ご質問に対する回答2025年8月2日宿泊施設サイトのSEO運用提案とHTMLへの対応について