アイキャッチ画像をオシャレにするテクニック

スポンサーリンク

The following two tabs change content below.

ゆーすけ

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム

こんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

ブログ記事を書く時に重要視されるアイキャッチ画像。
タイトルと一緒に読者の注意をひく大切な要素で、クリック率にも影響があるといわれています。

ほとんどの人はアイキャッチ画像をつけて投稿していると思いますが、画像を載せるだけじゃなく一手間かけることで見た目にもオシャレで多くの人の関心を引くアイキャッチ画像を作ることが出来ます。

今回はそんなテクニックをご紹介します。

スポンサーリンク

どうしてアイキャッチ画像が大事なのか

記事を読んでもらうためには様々な工夫が大事。
タイトルの付け方は多くのメディアでコツが紹介されていて、アイキャッチもその1つ。

まずはこちらを御覧ください。

アイキャッチあり

2

アイキャッチなし

1

上の画像はアイキャッチありとなしのバージョンを比べたもの。
やっぱりアイキャッチがあるほうが見た目にもキレイだし、タイトルだけが並んでいる時と比べてもクリックしたくなりますよね。

 

アイキャッチ画像の選び方

アイキャッチを選ぶ時は次の点に気をつけるようにします。

記事と関連のあるアイキャッチにしよう

アイキャッチを設定する時は記事の内容に関連のある画像にしましょう。

それがSEOに関係するというわけではありませんが、読んでくれる方への配慮として画像を見た時に関連性があるほうが親切ですね。

容量は小さくてOK

アイキャッチ画像はブログ設定次第ではさきほどの投稿画面一覧に表示されるだけの役割がほとんど。

そのため1つの画像ファイルの大きさは20KBとか30KBでも十分にキレイに見えます。

オリジナル画像?配布画像?

ブログで使う写真はできるだけオリジナル画像が好ましいといわれています。

ぱくたそを始めとするフリー素材サイトではオシャレな画像がたくさんありますが、多くのwebコンテンツで使われている可能性が高く、どうしても既視感が出てしまいます。

ゆーすけさん
あれ、この写真みたことある。じゃあ前にこの記事読んだことあるんだな、別のサイトにいくか

なんて勘違いされる可能性もあります。

そうならないためにも、そしてブログにオリジナリティを出すためにも出来るだけ自分で撮影した写真を使うようにしましょう。

写真の撮り方を工夫する

同じものを撮影しても角度を変えたりアプリのフィルターを使うことで見た目が全く変わります。

例えば次の写真は同じコーヒーを撮影したものを比べたものです。

普通バージョン
Coffee1

 

斜め・フィルターON
Coffee2

どうでしょう、雰囲気がまったく違いますよね。片方は普通に撮影しただけ、もう片方は斜めから撮影してアプリでフィルターをかけたもの。

どちらの写真をクリックしたくなるかは一目瞭然。 

一手間かける工夫

撮影した画像をそのまま使ってもいいですが、どうせならさらに一手間かけることでオシャレ感がアップします。
それを次で紹介します。

 

画像に文字を載せる

アイキャッチ画像をオシャレにするために文字を載せてみましょう。

そのためには画像編集ソフトが必要になります。
僕が使っているのは安価でも高機能なことでしられる “Pixelmator”です。

Pixelmator

3,600円
(2017.03.20時点)
posted with ポチレバ

その他にも無料で使える “GIMP” も有名ですね。
自分が使いやすいものを選びましょう。

今回は Pixelmator を使い、先ほどのコーヒー画像を使ったテクニックです。

Coffee2

 

Pixelmatorで編集する

まず編集したい画像を Pixelmator で読み込みます。

Pix1

次にハートマークのボタン「シェイプ」を選択します。

Pix2

シェイプでは様々な形の図形を使うことができます。
今回は長方形を使います。

選んだ長方形の端っこをドラッグ&ドロップしてビーッと横長いっぱいに変形させます。 

Pix3

長方形の色はここで自由に変えることができます。

Pix4

色の選び方はその人の感性ですが、今回は同系色を選びます。
右側にあるシャドウにチェックをいれると画像の下側に影ができてオシャレです。

こんな感じになりました。

Pix5

次にレイヤー画面下に表示されている「不透明度」のバーをスライドさせます。

もしレイヤー画面が表示されてないよーって人がいたら Command+2 でレイヤーが表示されます。

不透明度を変更するとこんな感じで長方形の色が薄くなり、後ろのコーヒーが見えるようになりました。

Pix7

今回は不透明度を50%まで下げました。

薄くなった長方形の上で2本指タップ、もしくは長方形を選択した状態から Command+F を入力すると「変形」の項目があるので、そこからさらに変形を選択します。

Pix8

ここでは図形の角度を変更することができます。

斜めにしてもしなくてもどちらでもいいですが、今回はオシャレ感をアップさせるために斜め配置にしました。

Pix9

斜めに変更したら右上の「OK」を忘れずにクリックしておきましょう。

次に文字を入力します。
Tマークを選択して編集画面上でクリックすると文字を入力することができます。

Pix10

 文字を入力するとこんな風になります。

Pix11

だいぶ仕上がってきました。

「おすすめ10選!」と「コーヒー飲むならここ!」はあえて分けて入力しました。この方が微妙な文字配置を変更するときに便利です。

さて、これで完成にしてもいいのですが最後にもう一工夫加えます。

さきほどの文字を選択した状態で2本指タップすると下のほうに「シェイプに変換」という項目があるのでそれをクリックします。

Pix12

こうすることで文字に装飾を加えることができます。
見た目には変化はないように見えますがそれでOKです。

メニューバーの[表示]から「シェイプのスタイルを表示」を選択します。
もしくは Command+7 でも同じことができます。

Pix13

 すると装飾の画面が出てきました。

Pix14

今回はシャドウの項目だけ変更を加えました。

Pix15

これで見た目がさらによくなり、一応これで完成です。

 

スポンサーリンク

まとめ

すこし手間と時間をかけることで見た目の雰囲気が大きく変わりました。

画像加工前
Coffee1

 

画像加工後
Pix15

ずいぶんと印象が変わりました。

ブログは中身が一番大事ですが、見た目がキレイならなおさら興味を引きつけることができます。

時間は多少かかるかもしれませんが、ぜひ挑戦してみてください。

スポンサーリンク

スタイリッシュなサイン、作ります!

世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に応じて作ります。

サービス開始から半年たらずで100件以上のオーダーをいただいています。

サインは1件3000円。納品時には書き方のコツ資料、書き順動画、サイン練習帳もお送りします。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!