こんにちは、しろまる(@akitashiromaru)です。
ブログを始めて、「内部リンクを張ることでユーザーさんに関連の記事を見てもらう」っていうユーザーさんへのご案内の方法を聞き、「ありゃ、そういえばWEBサイト作るときもそうしてるじゃん」ってハッとさせられた今日この頃です。
そこで、今回は内部リンクのテクニック・・・は教えられないんですが、「自分でバナーを作って、そこに自分のおすすめ記事のリンクを張る」というテーマにして、WEBデザイナー目線から「こういうポイントを守るとクリックされやすい、と私たちは考えて作ってるよ!」ということを書いてみたいと思います。
もちろん、このポイントは、ブロガーさんもですし、WEBデザイナー始めたばかりの人にもお役に立てるかもしれません。
1.「この画像は押せます」ということが分かるバナーにする
まず、下にあるこの二つの画像を見比べてください。違いがいかがでしょうか?
ご覧の通りなんですが、この二つの画像のうち一つは「イラスト+文字」だけの作りとなっています。
もう一方は「イラスト+文字+(右下に)矢印」という作りです。
私たちWEBデザイナーがバナーを作るときって、「この画像は押せますよ!」というのを何かしらアピールして作る必要があります。
ですので、「矢印」だったり、「詳細はこちらのボタン」、または下に帯を引いて注目度を立たせ、ただの画像ではないことをアピールするのです。
(ここでは、既にバナー内でクリック先の簡易説明をしているため、「こちら」などのこそあど言葉でボタンを作っても伝わるので大丈夫です。)
また、矢印やボタンを配置する場合は、右下が良いと言われます。理由はズバリ、ほとんどの人が右手でマウスを持ち、目線が左から右にいくからです。
Yahoo!のトップページなども、純広告(じゅんこうこく)と呼ばれるバナー※が右上あたりに配置されていますが、理由は同じで、ユーザーさんは左から右へ、そのあとアルファベットのZ型に目線を落としていくからその位置にバナーを配置すると言われています。
※純広告・・・簡単にいうと、広告を出したい会社が直接Yahooにお金を払ってあの場所だけに出してもらう広告のこと。
2.クリックしてもらいたいからと言って、情報過多のバナーにしない
次に注意したいのは、情報過多のバナーにしないということです。
つまり、必要なのは「情報を詰め込んだバナー」ではなく、「この先どんなことが書いてあるんだろう?と気になるバナー」なんです。
バナーに情報がもりもりと入ってしまっていると、結局何が言いたいバナーなんだろう・・・?と思われてしまいます。
バナーは、本当に必要なことを入れるだけでいいんです。「なんだろう?」って思わせるくらいがちょうどいいですよ^^
3.クリック先の記事と、バナーに書いてあることの整合性を守る
これは、本当に大事です。
私たちが、例えば「ランディングページ※」をデザインしたり、バナーをデザインしたりするときは、必ず「バナーと、その先にあるページの整合性がとれているか」ということを注意して作ります。
※ランディングページとは、一般的にはバナーをクリックしたその先にあるページのことを指します。
真っ赤でシマシマの派手なバナーを作ってしまって、クリックした先がお仏壇のページ、だったりしたらおかしいですよね。ブログでも言えることで、例えばバナーに「初心者むけのWEBデザインレシピ!」とか書いておいて、リンク先が「プロレスのページ」だったらどうでしょう。
多分、ユーザーさんはそのブログに対してちぐはぐな印象を持ち、ブログ内を見て回ろうとも思わないかもしれません。
なので、バナーと、その先のページの整合性を守るということは、当たり前のことなのですがとても大切なことなんです。
みなさんが世の中に出ているバナーをクリックしてみて、その先が思っていたようなページであれば、おそらくそのバナーと先のページは整合性を守って作られているということになりますね^^
ちなみに、ソフトを持ってない方は「GIMP(ギンプ)」がオススメ
ここまで3つのアドバイスとして書いてみましたが、「そもそも私、バナーを作るようなソフトがないし!」と思われる方もいらっしゃるかもしれません。
でも、安心してください!調べました。
無料で、Photoshopと同じような使い方ができるソフト、GIMP(ギンプ)です。パソコンにインストールして使用するタイプのソフトです。
この記事では書きませんが、インストールの仕方などについては別途記事を追加し、更新していきます。
▼追記しました!
無料で、あのphotoshopに引けをとらないソフト!GIMPダウンロード&インストール確認の方法
まとめ
ここまで書いてきたことを、まとめてみます。
- ただの画像は、押されない。ここ、押せますよ!ということを示しましょう
- バナーのキャッチは、多すぎず、少なすぎず
- バナーと、クリック先の整合性をたいせつに
いかがでしたでしょうか。
基本的なことですが、WEBデザイナーさんがバナーを作る際にも、またブロガーさんが自作バナー作ってみたい!というときにも、少しは参考になれば幸いです^^