5分でおしゃれなアイキャッチ画像を作る手順|Canvaなら簡単

当サイトはアフィリエイト広告による収益を得ています。

先日、こんなことを思いました。

アイキャッチ画像を作ったけれど、なんかダサいなぁ、、

少しずつ、おしゃれになってきたけれど、毎回作るのは時間がかかって大変、、

アイキャッチ画像がバラバラで、サイトに統一感がないんだよな、、

本記事では、5分で作成可能な、おしゃれなアイキャッチ画像の作り方をお伝えいたします。

作り方を統一することで、サイトに統一感も出てきます。

この記事の内容

【簡単】おしゃれなアイキャッチ画像の作り方│5分で完成

【簡単】おしゃれなアイキャッチ画像の作り方│5分で完成
【簡単】おしゃれなアイキャッチ画像の作り方│5分で完成

早速作っていきましょう。

慣れると5分かからずに作成できるかと思います。

Canvaを使ってみよう

今回は無料で利用することができる、Canvaというサイトを利用して、アイキャッチ画像を作成します。

Google等の検索サイトで「Canva」と入力して、検索をします。

canvaで検索
canvaで検索

「デザイン作成を無料で簡単に!| Canva(キャンバ)」をクリックします。

「デザイン作成を無料で簡単に!| Canva(キャンバ)」をクリック
「デザイン作成を無料で簡単に!| Canva(キャンバ)」をクリック

Canvaのサイトに移動します。

「デザインを作成」をクリックします。

「デザインを作成」をクリック
「デザインを作成」をクリック

サイズは1200×630がおすすめ

アイキャッチ画像のサイズを決めるため、「カスタムサイズ」をクリックします。

「カスタムサイズ」をクリック
「カスタムサイズ」をクリック

幅 1200  高さ 630 と入力します。

pxが選択されていることを確認します。

「新しいデザインを作成」をクリックします。

幅1200、高さ630
幅1200、高さ630

サイズを1200×630にする理由

✅Cocoonを利用したサイトに載せたとき
✅Twitterに記事を載せたとき
✅Facebookに記事を載せたとき

1200×630にしておくと、見切れたりせずに綺麗だからです。

また、画像が重くなりすぎず、画質も確保

することができます。

背景は写真がおすすめ

背景は写真がおすすめです。

嫁さん
嫁さん

何でー??

写真がおすすめな理由

背景に写真を挿入します。

背景に写真を利用する理由は、複雑さを生み出し、装飾の効果があるためです。

単色の背景を使うと淡泊な印象になります。

手軽におしゃれさを出すためには、写真を利用することをおすすめします。

嫁さん
嫁さん

装飾の効果があるって言うけど、ごちゃごちゃして見づらくならないの?

ニック
ニック

確かに写真はごちゃごちゃになりやすいね。

文字を入れるときに、すっきり見せるポイントがあるよ。

後から背景を差し替えることもできるよ。

背景の設定

それでは、背景を設定していきましょう。

画面左の「写真」をクリックします。

「写真」をクリック
「写真」をクリック

お好みの写真をクリックします。

検索ボックスに、ほしいイメージを打ち込むと便利です。

今回はプロフィールについての記事に使うアイキャッチ画像を作りたいので、”プロフィール”と入力しています。

「プロフィール」と入力
「プロフィール」と入力

王冠マークがついているものは有料です。

無料で使う場合は透かしが入ります。

王冠マークは有料
王冠マークは有料

真ん中の”Canva”、斜めに入っている線が透かしです。

透かしを削除するためには、お金がかかりますので、最初は王冠マークがついていない画像がおすすめです。

無料だと透かしが入る
無料だと透かしが入る

まだ利用されたことがない方は、無料トライアルもおすすめ

7500万点の素材が無料

今回は、この画像を選びました。

写真の選択
写真の選択

画面右側に、選んだ写真が表示されます。

画面右側
画面右側

写真をサイズいっぱいまで広げます。

写真を広げる
写真を広げる

これで背景は完成です。

見やすい文字を入れるポイント

文字を入れる枠を作ろう

ここが最大のポイントです。

文字を入れるための枠を作ります。

左側の「素材」をクリックします。

「素材」をクリック
「素材」をクリック

「線と図形」よりをクリックします。

「線と図形」より□をクリック
「線と図形」より□をクリック

四角が表示されました。

四角が表示される
四角が表示される

□を選択した状態で、右上のチェック模様(透明度)をクリックします。

「透明度」をクリック
「透明度」をクリック

透明度を「50」にします。(透明度は、お好みで変更してください。

「透明度」50
「透明度」50

文字を入れる枠の位置と大きさを決めます。

例えば、、

枠を広げる
枠を広げる

↑一番簡単にできるので、手軽さを重視する方におすすめです。

例えば、、

枠を広げる(ツートン)
枠を広げる(ツートン)

↑僕はこのように左右に分けることが多いです。

文字を入れる枠の大きさ、位置などは、後から変更することも可能です。

文字を入れよう

作成した枠の中に文字を入れていきます。

画面左より、「テキスト」をクリックします。

「テキスト」をクリック
「テキスト」をクリック

「見出しを追加」をクリックします。

見出しを追加
見出しを追加

「見出しを追加」が表示されます。

テキスト内容を変えたり、大きさを変えたりします。

テキストの大きさを変える
テキストの大きさを変える

二段にしたい場合はキーボードのSHIFTENTERで改行したり、

「見出しを追加」をクリックすることで、2つの見出しを二段にすることもできます。

テキストを二段に
テキストを二段に

フォント・大きさ・色・書体などを変更して、お好みの文字を作りましょう。

①フォント
②大きさ
③色
④太文字
テキストの設定
テキストの設定

例えば

✅ 文字の枠を中央に細長く
✅ タイトルを2段で表示
✅ 文字色は白
✅ フォントは源柔ゴシック Black

にすると、下のような出来上がりになります。

テキスト設定後
テキスト設定後

ダウンロードしよう

完成したら、右上の「ダウンロード」をクリックします。

ダウンロード
ダウンロード

「ダウンロード」をクリックします。

「ダウンロード」をクリック
「ダウンロード」をクリック

画面左下をクリックし、ダウンロードした画像を開きます。

画像を開く
画像を開く

画像を確認してみましょう。

アイキャッチ画像の確認
アイキャッチ画像の確認

アイキャッチ画像が完成したら、サイトに設置します。

↓設置の方法を紹介している記事はこちらから↓

あわせて読みたい
【Cocoon】アイキャッチ画像の設定方法|全手順画像つきで解説 ブログ記事を書いたけれど、確認したらタイトルの横が「NO IMAGE」になってしまった。 画像を設置したいなぁ、、 本記事では、このような悩みを解決します。 【【Cocoon...

アイキャッチ画像作成のルールを決めておくと、サイトに統一感がでる

作り方を決めておくと、時間をかけずにおしゃれなアイキャッチ画像を作ることができます。

また、アイキャッチ画像のサイズや・文字枠の色、文字の色やフォントを統一すると、サイト全体に統一感が出ます

統一前後を比べてみよう

アイキャッチ画像の作り方を統一する前と後で、サイトの印象を比べてみます。

BEFORE

BEFORE
BEFORE

AFTER

AFTER
AFTER

まだまだ改善の余地がありますが、統一感が出て印象が違いますね。

サイト全体の統一感は、自分らしいサイト ≒ ブランドに繋がっていきます。

ぜひお試しください。

オリジナルキャラを入れたい場合

アイキャッチ画像に、オリジナルのキャラクターを入れたい場合は、↓の記事が参考になると思います。

【スマホでOK】SNSアイコンを無料で作る方法

あわせて読みたい
【スマホでOK】SNSアイコンを無料で作る方法│自分だけのアイコン こんなことを思ったことはありませんか? ブログをはじめてみたのは良いけれど、アイコン画像をどうしよう。。 ココナラが良いと聞くけれど、、できれば無料で作りたい...

アイキャッチ画像の作り方を決めると一石四鳥

嫁さん
嫁さん

簡単に作れて、おしゃれになって、サイトに統一感も出てくるなんて、一石三鳥だね!!

ニック
ニック

アイキャッチ画像の作り方の型が見つかると、作成が苦にならないから継続にも繋がるよ。

一石四鳥、、かな?

追伸:

アイキャッチ画像をもっと早く作れるようになりたい、と思いませんか?

画像や素材を選ぶのは意外と時間がかかりますよね。

そんなときは、すべての工程をCanva内で完結できるCanva Proを使ってみてください。

7500万点以上の写真や素材をCanva内で使えるので、アイキャッチ画像をより短時間で作れます。

30日間無料で使えるので、使わないと損なレベル

いつでもキャンセル可能ですので、お気軽に試してみてください。

Canva Pro

くわしく知りたい方は、こちらの記事をご覧ください。

ブログ初心者がCanva Proを30日間無料で試してみた

あわせて読みたい
Canva Pro 無料トライアルのレビューと利用・解約方法 こんにちは、ニックです。今回のテーマは次の通りです。 正直、Canva Pro ってどうなの? この記事の内容 無料プランと何が違うのかブログで便利なCanvaProの機能3つCa...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

    • みけねこ屋さん、嬉しいコメントをどうもありがとうございます!感激です!!

コメントする

CAPTCHA


この記事の内容