さかめも

株とブログとプログラミングで生活している東京在住のフリーランス。このブログには毎月15万人くらい訪れます。田舎で生まれ、上京して7年。大手SIer → ウェブ系ベンチャー → スタートアップ創業期を経験したのちフリーランスに。お金持ちにならなくていいから好きなことをしたい。好きなことを続けるためにお金が欲しい。

5分で効果的なアイキャッチ画像を作る方法! ブログに使う画像の編集ソフトと編集方法を紹介する

f:id:sakagami5:20170624122841j:plain

 

この上にあるアイキャッチ画像

ブログを書いていると、

「アイキャッチ画像はどういうソフトでどうやって編集してるんですか?」

っていうのをたまに聞かれることがあります。

 

記事を書くのも大事だけど、アイキャッチ画像があるとアクセントとなってブログの色取りが変わるのでぜひやっておきたいところ。

しかし毎回 画像を編集するのはめんどくさいという方のために、ここではお手軽で効果的な、さかがみ流 ブログのアイキャッチ画像の作り方をご紹介します!

 

アイキャッチ画像とは?

アイキャッチ画像は、記事の概要を表すアクセントとなる画像のことで、記事の一覧や、SNSなどでシェアしたときにも使われます

※ 設定の仕方は各ブログサービスのマニュアルを参照してみてください。

 

例えばこのブログでも以下のように記事の一覧に使っています。

f:id:sakagami5:20170624110533p:plain

 

また Twitter だったらこんな感じで使われます。

f:id:sakagami5:20170624110700p:plain

 

Facebook ならこんな感じです。

f:id:sakagami5:20170624110741p:plain

 

こんなふうにシェアされると記事のタイトルと一緒にアイキャッチ画像も合わせて表示されるので、読者が見て印象深い画像を作っておいたほうがクリックされやすくなり、効果的に記事へと誘導させることができるようになります

なので意外と大事。

 

簡単で効果的なアイキャッチ画像の作り方

大事だとは言っても毎回記事を書くたびに画像を編集するのは大変です。

とはいいつつ手抜きはしたくない。

以下は簡単にそれらしいアイキャッチ画像が作れる自己流の作成方法です。

 

ちなみに僕はMacのPCを使っているので、ここではあらかじめデフォルトで入っている「プレビュー」というソフトを使っている例になりますが、Windowsでも付属のソフトで同じようなことは可能だと思います。

 

まず画像を用意

自分でとった写真なんかがあればそれを使います。

なければ無料で使える画像素材サイトで探してみてください。

 

例えば以下のサイトは写真の種類が豊富で使いやすいです。

 

画像が用意できたら、ファイルをダブルクリックして開きます

今回はこんな画像を用意してみました。

f:id:sakagami5:20170624114434p:plain

 

画像に黒いフィルターをかける

Mac であればおそらくデフォルトで「プレビュー」というソフトが立ち上がっているかと思うので、メニューにある「表示」をクリックして、「マークアップツールバーを表示」をクリック

f:id:sakagami5:20170624114705p:plain

 

画像編集用のツールバーが現れるので、四角のアイコンをクリックします。

すると、画像の上に四角い画像が現れます。

f:id:sakagami5:20170624115157p:plain

 

今度は表示された四角を選択し、背景色を黒色の不透明度50%に調整します。

f:id:sakagami5:20170624120302p:plain

 

それを全体に広げるとこんな感じになります。

f:id:sakagami5:20170624120601p:plain

 

テキストを追加

今度は、画像の上にテキストを追加します。

フォントの種類は「ヒラギノ角ゴ StdN」、色は白がオススメ。

サイズはお好みで調整します。

f:id:sakagami5:20170624121154p:plain

 

せっかくなので画像をパッと見て記事の内容が理解できたり、印象に残ったりするようなキャッチフレーズを考えてみましょう。

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

f:id:sakagami5:20170624121953p:plain

 

ちょっと物足りないので強調したい文字を黄色にしてみます。

いろんな色を重ねると目がチカチカして見づらくなるので、通常の文字色とアクセントにもう1色の合わせて2色を決めておくと良いと思います

さかがみ流だと、だいたい白と黄色しか使いません。

f:id:sakagami5:20170624122333p:plain

 

細かい文字サイズや位置を調整したら、メニューにある「ファイル」を選択し、「保存」をクリックします。

 

最終的に以下のように完成しました。

f:id:sakagami5:20170624122841j:plain

 

まとめ

簡単でしょ?!

慣れたら所要時間5分で、手間をかけなくてもそれらしいものが作れてしまいます。

これができたら今度はもっと手間をかけてみるのもよし、あとは自分のブログ流にアレンジして、しっくりくるフォーマットをぜひ探してみてください!

 

関連記事

ブログ5ヶ月目で月間10万PVを突破してわかったアクセスアップに必要な方法8項目を全てまとめる