アフィリエイト ブログのヘッダーデザイン(メイン画像)を作るコツ

アフィリエイト ブログのヘッダーデザイン(メイン画像)を作るコツ

こんにちは、ゆずりはです。

アフィリエイト ブログのヘッダーデザイン(メイン画像)を作るコツについてご紹介いたいと思います。

ブログやサイトを立ち上げたときに、できればかえたいのが「ヘッダー(header)」デザインですね。

アフィリエイトの講座でも、「ヘッダーを画像にしましょう」と指導する人も多いようです。

ヘッダー部分は「ブログの顔」であり、すごく重要なパーツなんですね。

ブログのテーマに合わせた素材やカラーを選ぶコツ

ブログやサイトのヘッダー部分はページの一番上のエリアです。

アフィリエイト ブログのヘッダーデザイン(メイン画像)を作るコツ

ここは、ページを訪れてくれた読者さんが、一番最初に目に入る部分でもあります。

ここがキャッチーであるかどうかで、その下の記事を読んでくれるかどうか、がかかってくると言っても過言ではありません。

ヘッダーの基本は

・魅力的な「ブログタイトル」
・タイトルに合った目を引く写真画像

このパーツのセットです。

その他「サブコピー(説明分)」を入れてもいいですが、基本はこの2つで十分ですね。

迷うのはカラーと使用する写真画像だと思います。

タイトル名に自信があれば、白地に黒文字とシンプルでもいいですが、あまり差別化はできません。

まずしてもらうことは、ブログのテーマによって色を選んでください。

美容や料理など、女性の読者さんが多いブログであれば、暖色系を。

植物や自然に関することなら、緑や青色を。

転職やビジネス系なら、紺色か黒、グレーにポイントとして赤色を。

色で迷う場合は、同じジャンルの他の方のブログデザインを参考にするといいですね。

この色は、背景色か文字色に取り入れてください。

写真画像については、本当にテーマやブログタイトルによりますが、共通して言えることがあります。

「テーマを想像できる何かの写真を選ぶ」
「目線が合った人物の写真(笑顔)を使う」

テーマを想像できる何かとは、例えば化粧品ならコスメのアイテムの写真や、メイクしている写真などです。

ビジネス系や転職系ならパソコンや、スーツ姿の写真もいいですね。

また、目線が合った人物の写真(笑顔)を使うのが良い理由は、すぐにページを離れる人が少なくなることです。

ブログに来てくれた読者さんは、この写真の人物と目が合ってしまいます。

すると、なかなか離れにくくなるんですよね。

記事を信頼して欲しければ、やさしい女性の写真を使用したり、スーツ姿の男性写真を使用すれば、ぐっと「真面目さ」がでてきます。

ただ、人物写真はイメージが強くついてしまいますので、それが嫌な場合は、何かインパクトのある画像でもOKです。

きれいな景色の写真画像を背景に使っているサイトをよく見かけますが、イメージが曖昧になるので、もっと「ブログタイトル」の意味にあった写真を選ぶ方ことをおすすめします。

ブログのヘッダーを設定する方法

無料ブログサービスのヘッダーをカスタマイズ(変更)する方法は何通りかあります。

・タイトル文はそのままにする+背景画像を挿入する
・タイトルとイメージ写真をセットにして、画像にしたものを挿入する

大きくはこの2パターンですね。

無料ブログサービスでは、ほとんどが「デザイン・カスタマイズ」できる設定があります。

デザイン設定タブの「ヘッダー画像を登録する」などで、設定できます。

アフィリエイト ブログのヘッダーデザイン(メイン画像)を作るコツ

編集ソフトで、ブログタイトルと写真画像を加工した、一枚の画像が必要になります。

登録する前に、推奨する画像のサイズもあらかじめ知っておく必要があります。

例えば「はてなブログ」だと、テーマにもよりますが、幅1200ピクセルは必要になります。

また、ブログサービスによっては、PC版ブログのヘッダーとスマホ版のヘッダーを、それぞれ設定しないといけません。

というのも、PC版では横に広くデザインされていますが、スマホの画面はとても小さく縦長です。

両方を同じに設定すると、スマホで見たときのヘッダーの文字が、必要以上に小さくなってしまいますので、個別に設定できるならしておきましょう。

アフィリエイト ブログのヘッダーデザイン(メイン画像)を作るコツ

今は、スマホでの閲覧数が、圧倒的に多い時代です。

ヘッダー画像を設定するなら、むしろスマホ優先にしたほうが良いということを、必ず気にしておいてください。

スマホ版のヘッダー画像は、タイトルの文字を大きくし、幅640ピクセル×高さ300~400ピクセルほどの画像にします。

今は、PC版とスマホ版でそれぞれ見やすくデザインした「レスポンシブ・デザイン」が主流です。

しかしこの設定は、正直なところ、WEBサイトを作る知識がかなり必要になってきます。

そういった部分があるので、WEBデザインのスキルは少なからず持っていた方がいいと私は思います。

ヘッダーを画像にしたときのSEOへの影響

ヘッダー部分はSEOにとって非常に重要な部分です。

トップページのブログタイトルは普通は<H1>という見出しタグに設定されています。

この見出しをテキストではなく画像にしてしまってもいいの?という疑問を持つかと思います。

その疑問についてお答えする前に、<H1>という見出しタグの設定方法についてお話します。

<H1>を画像にする方法は2種類あります。

1)CSSで背景画像にする方法
2)画像そのままを使用する(html記述する)方法

1)のCSSで背景画像にする場合は、ページのソース(html部分)では

<H1>(ブログタイトル)</H1>

と、そのままテキストになります。

2)の画像そのままを使用する(html記述する)場合は、この<H1>がテキストではなく画像に差し替わります。

そのため必ず<alt=”(ブログタイトル)”>を記述してください。

それで、ヘッダーを画像にしたときのSEOへの影響についてなのですが、1)の場合はテキストですし、2)の場合でもaltタグをきちんと記述していれば、どちらでも問題ありません。

なお、無料ブログサービスの場合は、ほとんどが、1)の背景画像のパターンです。

そのため、SEOについては、基本的に気にする必要がないと言えますね。

プロ級のヘッダー画像を作るには

最後に、ヘッダー画像もデザインによっては、イマイチな印象になりかねない、とても重要な部分です。

ヘッダー画像の一番のポイントは、シンプルでOKということです。

デザインはシンプルで良い代わりに、使用する写真画像にこだわってみましょう。

ブログの顔となる部分に使う写真画像です。

時間をかけて探して、これだというものを選んでください。

デザインレイアウトは、このようなシンプルなもので良いです。

アフィリエイト ブログのヘッダーデザイン(メイン画像)を作るコツ

ブログ説明文はいれなくても良いですし、入れる場合は「読める程度」の文字サイズでOKです。

あくまで「ブログタイトル」を引き立てるものに意識しましょう。

画像の位置は、左右どちらでもOKですが、「文字は左上から読む」ため、左にブログタイトル文字がある方が、すんなりと頭に入ってきますね。

ブログタイトルの部分は、ロゴ化してしまうと、さらにプロっぽくなる効果があります。

ロゴ化してセンター揃えにすると、しゃれた感じになりますね。

なお私が、ヘッダー・デザインをするときは、Adobe社のPhotoshop(フォトショップ)を使用しています。

そういったデザインソフトを持っていない場合は、「バナープラス」という便利なツールもあるので、ぜひ参考にしてください。

※「バナープラス」については、実際に使って検証し、レビューで紹介できればと思います。

※Photoshop(フォトショップ)は専門性の高いデザインソフトなので、もっと気軽に使えるフリーソフトも、追々紹介できればと思います。

アフィリエイト初心者さんへ

アフィリエイトで一番稼げると思うのが「美容系」なんですが、レビューが書けない、売れないなどの悩みも多いです。そこで初心者向けに私が「美容系アフィリエイト」の教科書を作りました!良ければチェックしてみてくださいね♪⇒美容系アフィリエイトで売れるブログの作り方教えます(ココナラです)

この記事が参考になったら応援よろしくお願いします!

次におすすめな関連記事はこちら

コメントを残す

メールアドレスが公開されることはありません。