WEBデザイン

初めての人でも作れる!サイト内に自作のバナーで内部リンクを張りたい方へのアドバイス3つ

更新日:

サイトに掲載するバナー例




こんにちは、しろまる(@akitashiromaru)です。

ブログを始めて、「内部リンクを張ることでユーザーさんに関連の記事を見てもらう」っていうユーザーさんへのご案内の方法を聞き、「ありゃ、そういえばWEBサイト作るときもそうしてるじゃん」ってハッとさせられた今日この頃です。

 

そこで、今回は内部リンクのテクニック・・・は教えられないんですが、「自分でバナーを作って、そこに自分のおすすめ記事のリンクを張る」というテーマにして、WEBデザイナー目線から「こういうポイントを守るとクリックされやすい、と私たちは考えて作ってるよ!」ということを書いてみたいと思います。

 

もちろん、このポイントは、ブロガーさんもですし、WEBデザイナー始めたばかりの人にもお役に立てるかもしれません。



 

1.「この画像は押せます」ということが分かるバナーにする

まず、下にあるこの二つの画像を見比べてください。違いがいかがでしょうか?

ご覧の通りなんですが、この二つの画像のうち一つは「イラスト+文字」だけの作りとなっています。

もう一方は「イラスト+文字+(右下に)矢印」という作りです。

 

私たちWEBデザイナーがバナーを作るときって、「この画像は押せますよ!」というのを何かしらアピールして作る必要があります。

ですので、「矢印」だったり、「詳細はこちらのボタン」、または下に帯を引いて注目度を立たせ、ただの画像ではないことをアピールするのです。

(ここでは、既にバナー内でクリック先の簡易説明をしているため、「こちら」などのこそあど言葉でボタンを作っても伝わるので大丈夫です。)

また、矢印やボタンを配置する場合は、右下が良いと言われます。理由はズバリ、ほとんどの人が右手でマウスを持ち、目線が左から右にいくからです。

Yahoo!のトップページなども、純広告(じゅんこうこく)と呼ばれるバナーが右上あたりに配置されていますが、理由は同じで、ユーザーさんは左から右へ、そのあとアルファベットのZ型に目線を落としていくからその位置にバナーを配置すると言われています。

※純広告・・・簡単にいうと、広告を出したい会社が直接Yahooにお金を払ってあの場所だけに出してもらう広告のこと。

 

 

2.クリックしてもらいたいからと言って、情報過多のバナーにしない

次に注意したいのは、情報過多のバナーにしないということです。

つまり、必要なのは「情報を詰め込んだバナー」ではなく、「この先どんなことが書いてあるんだろう?と気になるバナー」なんです。

バナーに情報がもりもりと入ってしまっていると、結局何が言いたいバナーなんだろう・・・?と思われてしまいます。

バナーは、本当に必要なことを入れるだけでいいんです。「なんだろう?」って思わせるくらいがちょうどいいですよ^^

 

 

3.クリック先の記事と、バナーに書いてあることの整合性を守る

これは、本当に大事です。

私たちが、例えば「ランディングページ」をデザインしたり、バナーをデザインしたりするときは、必ず「バナーと、その先にあるページの整合性がとれているか」ということを注意して作ります。

※ランディングページとは、一般的にはバナーをクリックしたその先にあるページのことを指します。

 

真っ赤でシマシマの派手なバナーを作ってしまって、クリックした先がお仏壇のページ、だったりしたらおかしいですよね。ブログでも言えることで、例えばバナーに「初心者むけのWEBデザインレシピ!」とか書いておいて、リンク先が「プロレスのページ」だったらどうでしょう。

多分、ユーザーさんはそのブログに対してちぐはぐな印象を持ち、ブログ内を見て回ろうとも思わないかもしれません。

 

なので、バナーと、その先のページの整合性を守るということは、当たり前のことなのですがとても大切なことなんです。

みなさんが世の中に出ているバナーをクリックしてみて、その先が思っていたようなページであれば、おそらくそのバナーと先のページは整合性を守って作られているということになりますね^^

 

 

ちなみに、ソフトを持ってない方は「GIMP(ギンプ)」がオススメ

ここまで3つのアドバイスとして書いてみましたが、「そもそも私、バナーを作るようなソフトがないし!」と思われる方もいらっしゃるかもしれません。

でも、安心してください!調べました。

無料で、Photoshopと同じような使い方ができるソフト、GIMP(ギンプ)です。パソコンにインストールして使用するタイプのソフトです。

この記事では書きませんが、インストールの仕方などについては別途記事を追加し、更新していきます。

▼追記しました!

無料で、あのphotoshopに引けをとらないソフト!GIMPダウンロード&インストール確認の方法

 

 

まとめ

ここまで書いてきたことを、まとめてみます。

  1. ただの画像は、押されない。ここ、押せますよ!ということを示しましょう
  2. バナーのキャッチは、多すぎず、少なすぎず
  3. バナーと、クリック先の整合性をたいせつに

いかがでしたでしょうか。

基本的なことですが、WEBデザイナーさんがバナーを作る際にも、またブロガーさんが自作バナー作ってみたい!というときにも、少しは参考になれば幸いです^^







  • この記事を書いた人
akitashiromaru_A7RKcJhZpnPE

あきた しろまる

20代前半までは教職を目指し中高の数学免許を取得するも、「もっと世の中知ってみたい」という気持ちから、世界一周の船旅へ。帰ってからは派遣社員しながらお金をためて、WEBの勉強をし、WEBデザイナーへ。20代後半からでもWEBデザイナーは目指せる!楽しい!ってことを伝えたい、という気持ちで記事を書いています。

おすすめ記事はこちら

1

前回、スプレッドシートを使った方法で、ブログが30記事を超えたところで、現状把握・改善点メモを行うと、リライトすべきポイントがわかってきた!というブログを書かせていただきましたが、記事の一覧を出力でき ...

-WEBデザイン

Copyright© しろまるカフェ , 2018 All Rights Reserved.