3-8.ヘッダー画像の登録方法

このページではヘッダー画像について説明していきます。

ヘッダー画像は、Webサイトの入り口になるトップページにある画像です。目立つ場所にあるので、サイトの印象が決まってきます。

しかし、トップページに関しては、ある程度アクセスが集まってから作ってもいいでしょう。記事を先に書き集め、サイトを充実させてから作っても遅くはありません。

それでは、ヘッダー画像について解説していきます。

ヘッダー画像はどのような効果を持つのか

「ヘッダー画像」とは、トップページにあるイメージ画像のことで、そのサイトの雰囲気やどんなことがわかるのかが決まる場所です。特に女性向けの集客サイトを作る場合は、とても大切な部分になります。

一般的に男性は「目的脳」を持ち、女性は「共感脳」を持っていると言われています。共感脳とは、論理性よりも感情を重視する脳のことです。

これをホームページの訪問者に当てはめてみましょう。

女性の場合、まずは全体の雰囲気を目で見て感じ取ります。自分の好みだなと共感したら、プロフィールや内容などをチェックします。さらに共感すれば、講座やサロンに申し込みをするということです。

男性の場合は、ホームページに共感しなくても(共感などは初めから興味がない)、とにかく目的の情報をGETしにきます。よって、デザインなどはさほど気になりません。

また、女性は共感するとそのホームページを巡回します。逆に、男性は目的が達成できたら離脱します。

よって、女性向けのホームページを作る場合、興味がありそうな記事を写真付きで載せたり、トップページのバナーなどを使って、視覚的に心を掴むことが効果的です。

男性向けのホームページを作る場合は、その人に必要な情報を提供することが大事になります。

「ホームページは内容がきちんとしていれば、デザインは関係ない」と言われる方もいますが、それは男性の意見であり、顧客も男性が多いですね。女性向けのホームページを作るのであれば、やはりデザインにも気を遣うことが必要になります。

よって、ヘッダー画像は、視覚に直接インパクトを与える大切なアイテムといえるでしょう。

スライダーとは

ホームページのトップページを訪問したときに、画像が次々と変わるヘッダーが設置されているのを見たことがあると思います。

順に異なったヘッダー画像が表示される機能のことを「スライダー」といいます

このサイトで使用している「SKIN」というテーマでは、5枚までヘッダー画像を入れることが可能です。これはテーマによって枚数は変わってきますし、スライダー機能がないテーマもあります。

このヘッダーには、リンクをつけることもできます。「リンク」とは、その画像やテキストをクリックすると、設定したURLに飛ばすことができる機能です。

例えば、何かのワークショップの宣伝をしたい場合には、宣伝用のヘッダー画像と、詳細が書かれた記事を作成します。出来上がったヘッダー画像をトップに設置し、そのヘッダー画像に、ワークショップの記事URLを貼り付けるのです。

その広告を見て興味を持ったお客様が、ヘッダー画像をクリックします。するとワークショップについて書かれた記事に飛び、詳細を確認できるというわけです。

ヘッダーは大変目立ちますので、宣伝効果は抜群です。ここを利用して上手にイベントなどを伝えるようにしましょう。

ヘッダー画像作成を外注する

ヘッダー画像は、自分で作成することもできますし、プロに頼むことも可能です。

自分で作成する場合は、画像の処理をするソフトが必要になります。無料のソフト「PhotoScapeX」が使いやすくてオススメです。

また、macユーザーでしたら「Affinity Photo」という有料ソフトがいいと思います。Photoshop並みの機能があると評判で私も使っています。

しかし、なかなかヘッダー画像を最初から作成するのは難しいかもしれません。これから記事も書いていかなければならないので、新たなソフトの使い方を勉強する時間もあまりないですよね。

そこで、プロに頼むことも視野に入れてみましょう。

しかし、本当のプロに頼むと大変高額になってしまいますので、ここはセミプロに頼む方法をご紹介します。

また、このサイトで使っている「SKIN」というテーマでは、画像さえあれば、カッコいいヘッダーを作ることができます。

chacoroのトップページに戻ってみてください。画像が薄っすらと表示されて、文字が下から流れてきますよね。SKINのテーマでは、簡単な設定でここまで作ることができます。後ほど、作り方を解説します。

スキルのマーケット「ココナラ」を使う

ヘッダーを作ってもらいたいと思っている方に、お勧めの方法があります。それはセミプロにお願いするという方法です。

ココナラ」というサイトがあります。これは「スキルのマーケット」という、得意な技術や知識を売買できる場所です。

ここには、これからデザイナーとして活動したい人や、サイドビジネスでデザインの仕事をされている方もいます。こちらのサイトにアクセスして「ヘッダー」で検索すると、作ってくれる方が一覧で表示されます。

安ければ3,000円くらいから作成してくれる方もいますので、探してみましょう。

ココナラのサイトはこちらからアクセスしてみてください。

ヘッダー画像を作成する

ヘッダー画像を自分で作る場合でも、人に頼む場合でも、まずは最初に「ヘッダー画像の大きさ」を調べることが必要になります。

ここでは、ヘッダーを大きさを調べる方法を説明していきます。

「Precious」を使っている場合の確認方法

1.ダッシュボードから「外観」にマウスポインターを合わせ「テーマオプション」をクリック

3.「TCDテーマオプション」画面が出てきますので「トップページ」をクリック

3.「ヘッダースライダーの設定」画面が出てくるので「スライダー1の設定」タブをクリック

4.スライダー1の詳細が出てくる。このテーマのヘッダー画像の推奨サイズは「横幅1150px、縦幅650px」ということが確認できます。

5.その下にスマホ用の画像推奨サイズも表示されていますので、メモしておきましょう。

このように、テーマにはヘッダー画像の推奨サイズがあり、テーマによって数値が変わります。

よって、まずはヘッダー設定画面でサイズを確認することが必要です。

サイズが決まったら、そのサイズに合わせて自分で作ることもできますし、オーダーも可能です。少しくらいの誤差は調整してくれるので大丈夫ですが、綺麗に表示させるためには、推奨サイズで作成するようにしましょう。

ヘッダー画像を挿入する

ヘッダー画像が準備できたら、画像を入れていきます。

1.先ほどの「ヘッダースライダーの設定」→「スライダー1の設定」を開きましょう。

2.「スライダーに表示するコンテンツの種類」では「静止画」を選択(「SKIN」では動画やYoutube画像もヘッダーに設定することが可能です)

2.「スライダーの画像」の「画像を選択する」をクリック

3.「画像を選択してください」の「ファイルをアップロード」をクリック

4.「アップロードするファイルをドロップ」または「ファイルを選択」(今回はファイルを選択で解説します)

5.作成したヘッダー画像をダブルクリック

6.メディアライブラリに追加されました。右下の「この画像を利用する」をクリック

7.画像が設置されました!

8.スマホ用のヘッダー画像を登録することもできます。

9.ヘッダーの細かい設定が続きます。「画像に重ねる色の設定」ができます。オーバーレイとは、画像の上に色を重ねることをいいます。下記の設定では、白(FFFFFF)を透過率:0.5の薄さでヘッダーに被せています。するとすこしぼんやりとした雰囲気になります。

10.「リンク先のURL」は、クリックしたら飛ぶページを設定することができます。その下の「リンク先のURLを新しいウィンドウで表示する」にチェックを入れておきます。

11.次に「キャッチフレーズの設定」を行います。このchacoroのサイトを例にして解説します。トップの画面が出ると、ヘッダー画像の上にキャッチフレーズ(How to Make a WordPress Website」という文字が下から流れます。トップ画面をみる

これはこの場所で設定します。色やフォントサイズ、ドロップシャドウ(文字に影をつけること)も設定することができます。

12.さらに、下から説明文が流れます。ここで細かく設定することができます。

13.リンクボタンをつけることができます。ボタンの色や透明度、ボタンにカーソルを合わせたときのフォントの色や背景色など、細かく設定することが可能です。最後に「設定を保存」をクリック

これで、スライダーが設定されました。トップページを表示して確認してみましょう。SKINでは5枚までスライダーを設置できます。

まとめ

以上、ヘッダー画像について説明してきました。ヘッダー画像が設定されると、ホームページっぽくなるのでテンションが上がりますよね。

ヘッダー画像は、サイトのトップにある画像なので目立ちます。印象がここで決まると言っても過言ではありません。ヘッダー画像のイメージと、サイトのイメージが一致するようにすることが大切です。

また、リンクを貼ったりした場合は、ちゃんと指示したURLに飛ぶかチェックしましょう。細かい作業ですが、こういうところをしっかりすることで、良いサイトになっていきますよ。

◇この記事はいかがでしたか?◇

© 2021 にゃんずぶろぐ