MENU
カテゴリー
アーカイブ
くうか
整理収納・ゲーム・プログラミングが好きな40代専業主婦。小学生兄妹と夫の4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているゆるミニマリストでもあります。
SWELLでこんなトップページを作る!解説記事→ CLICK!

簡単おしゃれなブログのアイキャッチ画像の作り方

簡単おしゃれなアイキャッチ
URLをコピーする
URLをコピーしました!

こんにちは、ゆるミニマリスト主婦のくうかです。

ブログ記事の表紙のような「アイキャッチ画像」。

アイキャッチとは「目を引く」という意味なので、記事を読んでもらうためにも設定した方が良いとされています。

SNSやピンタレストにシェアする場合にも適用され、私自身も素敵なアイキャッチに惹かれて読みに行くことがあります。

目を引くことで記事を読んでもらえたら嬉しいですし、私も必ず設定するようにしています。

くうか

今回は、私のおすすめ加工ツールと、いつもどうやってアイキャッチ画像を作っているかをご紹介していきます!

Contents

画像加工におすすめのツールは無料で使えるCanva

以前から私は画像の加工にCanvaを利用しています。

無料で利用することができ(一部は有料)、素材やテンプレートがフリーのものだけでも豊富に揃っていて、なおかつおしゃれに仕上がるのでたくさんのブロガーさん御用達!私もおすすめのツールです。

私のような初心者には『自分で描く・デザインする』ということが難しいので、このようなツールは非常に心強い存在。

くうか

ブログのヘッダー画像もCanvaで作成しています!

Canvaを使ったアイキャッチ画像は大体2通りの方法で作成しているので、以下紹介していきたいと思います。

アイキャッチ画像のサイズ

まずアイキャッチ画像の適正サイズは紹介されているサイトによって様々。
ご自分のサイトのテーマに適したサイズにしてください。

CANVAのキャンバス

どのサイズが適しているのか、私も実はよくわかっていないのです。笑

WordPressの無料テーマCocoon、SWELLを使ってきましたが、

  1. 「800×450px」
  2. 「700×400px」

で作ることが多いです。

1. テンプレートで簡単におしゃれなアイキャッチの作成方法

テンプレートを使ってサクッと簡単に仕上がる方法です。

テンプレートを使うともともとおしゃれなデザインが既に完成しているので、テキストや色味を少し変えるだけでアイキャッチの完成…!?

STEP
テンプレートを選択

【テンプレート】から好みの素材を選ぶ。
沢山あるのでアイキャッチ(記事の内容)のテーマが決まっていれば検索して絞り込みます。

テンプレートから選択

今回の場合はブログ関係のアイキャッチを作るので、【パソコン】で検索してみました。
イメージする【色】で検索する場合もあります。

いくつか出てきたので、無料かつ好みのテンプレートが見つかったら選択します。

STEP
写真を変更する

テンプレートの写真は、少々クール過ぎるな…と思い削除し、他のパソコンの写真を検索して変更しました。

写真を変更する

何となく女性らしい、優しいイメージの写真を選びました。

素材には無料で使えるものと有料のものがあるので注意。

くうか

面倒でなければフリー素材サイトからダウンロードしてCanvaにアップロードもできます。

STEP
写真のサイズを調整し、配置を下にする
写真のサイズを調整する

写真をお好きなサイズに変更し、上のバー内にある【配置】で文字部分より下にします。

STEP
文字周りを調整する

吹き出しの色・大きさ、透明度、フォントの種類・色を自分好みに変更しました

素材の設定

透明化すると背景の写真が透けて見えて、何となくおしゃれな気がしますがどうでしょう!?

目立たせたい文字の色を変えると、目を引きますね。今回は「アイキャッチ」だけ色を変えました。

さらにテキストや素材も追加しました

素材追加

「\ 初心者でもできる /」というテキストを追加。
「メガネ」の素材を追加。

ということで、完成!

簡単おしゃれなアイキャッチ
この記事のアイキャッチです

ほんの少しいじるだけでだいぶ変わりますよね?

くうか

テンプレートを利用するとかなり簡単に仕上げることができますね!

2. 自分でイチから作るオリジナルなアイキャッチ作成方法

シンプルに、記事で使う写真やフリー素材をアップロードして文字を入れる方法です。 

STEP
写真をアップロードする

【アップロード】から該当の画像を選択し、アップロードします。

写真をアップロード

キャンバスとサイズが合っていなければ手動で微調整してください。

写真は入れても入れなくてもOKです。
Canvaでは【背景】も選ぶことができます。

STEP
文字を目立たせるための四角を入れる

【素材】からお好きな素材を選択。
今回はただの四角を入れます。

文字を目立たせるための素材を入れる

あとで文字を乗せるので目立つところに配置し、こちらもサイズを微調整。

STEP
四角を透明化する

右上に透明度を調節できるボタンがあるので調節します。

素材を透明化する

透明化が必要なければここは飛ばしてOK。

STEP
文字を入れる

【テキスト】からテキストボックスを追加します。
今回はテンプレートから良さそうな物を追加しました。

文字を入れる

テキストの内容を変えたり、色を変えたりします。

STEP
装飾を追加する

4番まででも十分ですが、ちょっと物足りないなぁと思ってしまったので装飾を追加してしまいました。笑
【素材】から星を追加し、【テキスト】からテキストも追加。

装飾を追加する

星をちょっと斜めに動かしたりしてみる。

これで一応完成です!!
だいぶ目立つ感じになりました。笑

アイキャッチのダウンロードはPNG?JPG?

アイキャッチの作成が終わったら、その画像をダウンロードするわけですが、保存する形式を選ぶことができます。

基準としては、写真入りの画像はJPG写真がなければPNGで大丈夫。
JPGの方がサイズが小さくなります。
でも、PNGだと圧縮でかなり小さくなる…のでお好みかな(*’ω’*)私はPNGが多いです。

圧縮はこちらのサイトがおすすめ。ドラッグするだけ♪

アイキャッチを作る際に気を付けていること

だいぶアイキャッチ作りにも慣れてきて、改めて気を付けていることを書き留めておきます。

記事の内容と合っていること

当たり前のことのようですが、出来てない記事もあったので修正するようにしています。

何となく、「可愛いからいいか」なんて思っちゃってたかも…。

少しだけ統一感を持たせる

以前はとにかくぱっと見が良ければいいと思っていましたが、いざトップページにアイキャッチが並ぶと、何だか統一感がないな…という印象。

ただ統一しすぎてしまうのも面白みに欠けるので、「色の雰囲気を合わせる」ことと「フォントを統一する」ことを目標に新しいアイキャッチを作り始めています。

私の場合は、色は淡い色、フォントは読みやすい字体にしてみてます。

3例ご紹介!

アイキャッチ作成に利用しているフリー素材サイト

素材の豊富さでイラストACが1番利用していますね。

特に当ブログのアイコンを制作していただいたSai.さんのフリーイラストはよく使わせていただいています。
サイクラシさんのフリーイラスト
Sai.さんのブログ

その他に利用しているサイト

ブログのアイキャッチの作り方まとめ

私が実際に行っているアイキャッチ画像の作り方を2通りご紹介しました。

  1. テンプレートを利用する
  2. 自分でイチから作る

最近はどちらかという1番の、テンプレートを利用した方法で作成することが多いです。

検索では探しきれない、素敵な素材を簡単に見つけられるから。

「アイキャッチ画像を作りたいけど、自分では描けない」という方に、おしゃれなテンプレで簡単に作れるCanvaはとてもおススメです!

私もセンスがいまいちなので、簡単におしゃれな画像が作れるツールは神的存在!お世話になっています( *´艸`)

くうか

サイズを変えてファビコンなども作れますよ♪

\ 有料版にするとすべての素材が使えてストレスフリーに /

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

フォロー待ってます

くうかんしんぷるライフ - にほんブログ村

楽天ROOMに愛用品を登録しています

楽天ROOM

ライフスタイルまとめメディアへ

簡単おしゃれなアイキャッチ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

関連キーワード #SWELL #ワードプレス #はてなブログ

コメント

コメントする

CAPTCHA


Contents
閉じる