こんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。
ブログ記事を書く時に重要視されるアイキャッチ画像。
タイトルと一緒に読者の注意をひく大切な要素で、クリック率にも影響があるといわれています。
ほとんどの人はアイキャッチ画像をつけて投稿していると思いますが、画像を載せるだけじゃなく一手間かけることで見た目にもオシャレで多くの人の関心を引くアイキャッチ画像を作ることが出来ます。
今回はそんなテクニックをご紹介します。
この記事の目次一覧
どうしてアイキャッチ画像が大事なのか
記事を読んでもらうためには様々な工夫が大事。
タイトルの付け方は多くのメディアでコツが紹介されていて、アイキャッチもその1つ。
まずはこちらを御覧ください。
上の画像はアイキャッチありとなしのバージョンを比べたもの。
やっぱりアイキャッチがあるほうが見た目にもキレイだし、タイトルだけが並んでいる時と比べてもクリックしたくなりますよね。
アイキャッチ画像の選び方
アイキャッチを選ぶ時は次の点に気をつけるようにします。
記事と関連のあるアイキャッチにしよう
アイキャッチを設定する時は記事の内容に関連のある画像にしましょう。
それがSEOに関係するというわけではありませんが、読んでくれる方への配慮として画像を見た時に関連性があるほうが親切ですね。
容量は小さくてOK
アイキャッチ画像はブログ設定次第ではさきほどの投稿画面一覧に表示されるだけの役割がほとんど。
そのため1つの画像ファイルの大きさは20KBとか30KBでも十分にキレイに見えます。
オリジナル画像？配布画像？
ブログで使う写真はできるだけオリジナル画像が好ましいといわれています。
ぱくたそを始めとするフリー素材サイトではオシャレな画像がたくさんありますが、多くのwebコンテンツで使われている可能性が高く、どうしても既視感が出てしまいます。
[speech_bubble type=”ln” subtype=”L1″ icon=”yusuke1.jpg” name=”ゆーすけさん”] あれ、この写真みたことある。じゃあ前にこの記事読んだことあるんだな、別のサイトにいくか [/speech_bubble]なんて勘違いされる可能性もあります。
そうならないためにも、そしてブログにオリジナリティを出すためにも出来るだけ自分で撮影した写真を使うようにしましょう。
写真の撮り方を工夫する
同じものを撮影しても角度を変えたりアプリのフィルターを使うことで見た目が全く変わります。
例えば次の写真は同じコーヒーを撮影したものを比べたものです。
どちらの写真をクリックしたくなるかは一目瞭然。
一手間かける工夫
撮影した画像をそのまま使ってもいいですが、どうせならさらに一手間かけることでオシャレ感がアップします。
それを次で紹介します。
画像に文字を載せる
アイキャッチ画像をオシャレにするために文字を載せてみましょう。
そのためには画像編集ソフトが必要になります。
僕が使っているのは安価でも高機能なことでしられる “Pixelmator”です。
その他にも無料で使える “GIMP” も有名ですね。
自分が使いやすいものを選びましょう。
今回は Pixelmator を使い、先ほどのコーヒー画像を使ったテクニックです。
Pixelmatorで編集する
まず編集したい画像を Pixelmator で読み込みます。
次にハートマークのボタン「シェイプ」を選択します。
シェイプでは様々な形の図形を使うことができます。
今回は長方形を使います。
選んだ長方形の端っこをドラッグ＆ドロップしてビーッと横長いっぱいに変形させます。
長方形の色はここで自由に変えることができます。
色の選び方はその人の感性ですが、今回は同系色を選びます。
右側にあるシャドウにチェックをいれると画像の下側に影ができてオシャレです。
こんな感じになりました。
次にレイヤー画面下に表示されている「不透明度」のバーをスライドさせます。
もしレイヤー画面が表示されてないよーって人がいたら Command+2 でレイヤーが表示されます。
不透明度を変更するとこんな感じで長方形の色が薄くなり、後ろのコーヒーが見えるようになりました。
今回は不透明度を50%まで下げました。
薄くなった長方形の上で2本指タップ、もしくは長方形を選択した状態から Command+F を入力すると「変形」の項目があるので、そこからさらに変形を選択します。
ここでは図形の角度を変更することができます。
斜めにしてもしなくてもどちらでもいいですが、今回はオシャレ感をアップさせるために斜め配置にしました。
斜めに変更したら右上の「OK」を忘れずにクリックしておきましょう。
次に文字を入力します。
Tマークを選択して編集画面上でクリックすると文字を入力することができます。
文字を入力するとこんな風になります。
だいぶ仕上がってきました。
「おすすめ10選！」と「コーヒー飲むならここ！」はあえて分けて入力しました。この方が微妙な文字配置を変更するときに便利です。
さて、これで完成にしてもいいのですが最後にもう一工夫加えます。
さきほどの文字を選択した状態で2本指タップすると下のほうに「シェイプに変換」という項目があるのでそれをクリックします。
こうすることで文字に装飾を加えることができます。
見た目には変化はないように見えますがそれでOKです。
メニューバーの[表示]から「シェイプのスタイルを表示」を選択します。
もしくは Command+7 でも同じことができます。
すると装飾の画面が出てきました。
今回はシャドウの項目だけ変更を加えました。
これで見た目がさらによくなり、一応これで完成です。
まとめ
すこし手間と時間をかけることで見た目の雰囲気が大きく変わりました。
ブログは中身が一番大事ですが、見た目がキレイならなおさら興味を引きつけることができます。
時間は多少かかるかもしれませんが、ぜひ挑戦してみてください。
