杏杏

自分でバナーって作れるのかな？そんな疑問をお持ちの方に向けて、
オリジナルリンクバナーを無料で作れるやり方を解説していきます。

画像やアニメーションによってインターネットで広告を出すことを「バナー広告」といいます。

アフィリエイトでは、よく見かけますよね。

バナーは設置場所によって、
大きさを使い分けることができます。

また、バナーデザインのインパクトが強ければ、
クリックされる確率も高くなります。

バナーの役割は、

  • 広告バナーリンク
  • 他のブログやホームページ紹介リンク

    外部へ誘導するリンクとして使われています。

    当ブログでも、オリジナルバナーを使っていますので参考にしていただけたらと思います。

    効果的なバナー作成のコツ

    バナーを作る時は、ユーザーにどのような行動をしてもらいたいかを考える必要があります。

    例えば、

    • お問い合わせ
    • 商品の購入
    • メールマガジン登録
    • 資料請求

    このように、バナーのアクションを誘導するためにも、
    それぞれに見合ったデザインや、文字の配列など意識して作成していきます。

    コツは「伝えたいことを強調」しながら作成していくとインパクトが強くなります。

    デザインカラーを統一する

    バナー作りで大事なことは、ブログやサイトのカラーに合わせることです。

    ブログのイメージカラーが暖色系ならば、暖色系を使ってバナーを作成する。

    寒色系ならば、寒色系を使う。

    といった感じです。

    目立たせるために、色を使いすぎてしまうとブログやサイトに統一感がなくなり、
    逆にみにくいバナーになってしまうことがあります。

    画質の良い写真を使う

    自分で撮影した画像を使う時は、画質の良いものを選択してください。

    画質が悪いと見栄えも悪くなるので、
    これではバナーの役割が半減してしまいます。

    バナーはクオリティーが高いほど目につきやすくなるので、
    画像を使う時はブレていないかチェックしてみましょう。

    インパクトの強い画像は使わない

    画像やイラストを使うとき、見た目のインパクトが強い画像ですと、
    そこだけに目がいきがちになるのでバナーの役割としては半減してしまう可能性もあります。

    こちらの画像は、見た目にはインパクトありますが、
    画像が主張しすぎているのでバナーには不向きになります。

    使用する画像やイラストは、なるべくシンプルなものを選ぶことをオススメします。

    オリジナルリンクバナーを作るおすすめツール

    写真やイラストを使って、画像編集をすればオリジナルバナーが作成できます。

    画像の編集は、無料で使える「canva」を使っていきます。

    「canva」は、誰でも簡単にできるのでチャレンジしてみて下さい。

    自分で撮影した画像や、テンプレートから選択したもので作っていきます。

    canva画像編集

    「canva」は、ブログを作る上で必要な”無料で作成できる便利な画像編集”です。

    こちらを使って、バナー画像の編集をしていきます。

    トップページから、「写真編集のコツ」をクリックすると
    やり方の説明をみることができます。

    自分で撮影した画像を使用したい場合は、上記画像の左側の「アップロード」を選択して、
    写真をダウンロード    していきます。

    画像に、文字や素材を使って編集していくことができます。

    画像のサイズも自由に決めることができるので、
    他とは違う差別化もアピールできる点もメリットですよね。

    バナーサイズがよく分からない方は、こちらから参考にしてみて下さい。

    オリジナルバナーとURLのリンク方法

    オリジナル画像ができあがったら、画像のURLを確認します。

    ワードプレスのメディアを利用すると
    簡単に画像URLができるので試してみて下さい。

    • 編集した画像をワードプレスメディアに取り込む
    • 取り込んだ画像を選びクリック
    • 添付ファイル詳細の右側部分にある「ファイルのURL」をコピー

      赤枠の部分が画像ULRになります。

      こちらをコピーします。

      バナーhtmlテンプレートを使って簡単作成

      バナーリンクの作り方は、2通りあるのですが好きな方で試してください。

      同じウィンドウで新しいリンク先を開く場合

      <a href=”リンク先URL“><img src=”画像URL” alt=”” border=”0″ /></a>

      別ウィンドウで新しいリンク先を開く場合

      <a href=”リンク先URL” target=”_blank”><img src=”画像URL” alt=”” border=”0″ /></a>

      赤文字のところに、リンクしたいURL先と、画像URLを入力します。

      入力したらコピーして、ブログや、ホームページのテキスト画面（HTML）に貼り付けます。

      プレビューで確認して、バナーが表示されていれば完了となります。

      同じページで開く場合

      オリジナルバナーを、二通りのパターンを作ってみました。

      バナーをクリックして確認してみて下さい。
      （＊こちらのバナーをクリックするとトップページに移動します）

      こちらは、同じページで開くパターンです。

      \同じページでリンク先を開く場合/

      別のページで開く場合

      こちらは、別のページで開くパターンになります。

       \別のページでリンク先を開く場合/

      ブログに使う場合は、こちらの別のページで開くバナーパターンの方がオススメです。

      まとめ

      今回は、オリジナルリンクバナーの簡単作成を解説しました。

      オリジナルバナーは、サイトにインパクトを与えることができるので、
      クリック率を上げるためにも試してみてはいかがでしょうか。

      他には無いオリジナルバナーとなるので、サイト運営にも活躍できるものとなります。