Maple

備忘録として。せっかくなので誰かの何かのお役に立てればと思います。

ブログアイキャッチの作り方。Canvaを使って初心者でも簡単に

f:id:nskw20canada:20191021032143p:plain

こんにちは、にしけん(@maple_nscanada)です。

 

当記事を読むことで次のようなお悩み が解決します。

 

こんなお悩みを解決!!
  • アイキャッチの作り方は?
  • おしゃれなブログにしたい
  • 作ってみたけど納得いかない

 

少し前にツイートで僕のCanvaのデザインボックス を紹介しました。

 

今日はそのアイキャッチ画像の作り方 について紹介していこうと思います。

 

デザインの知識ゼロ の僕でもこれだけのデザインをとても簡単に作成できたので、絶対誰でもできます 。読みながら1つ作ってみるのも良いかもしれませんね。

 

アイキャッチ画像とは?

アイキャッチ画像とは文字通り、人の目を引きつける ためにある画像です。

 

SNSで記事を拡散するときに表示される画像ですね。

 

以前に書いた記事を拡散したときのツイートがこちら。

 

SNSは流し見 をする人が多いので、ユーザーに「おっ?」と思わせる 画像を作ることが大切です。

 

アイキャッチの大切さ

なぜアイキャッチがブログを運営するにあたって大切なのか?

 

まだ始めたての検索流入などがない時期に、ブログへ読者を連れてくるツールがSNS です。

 

SNS
  • Twitter
  • Instagram
  • Facebook... etc 

 

そしてそのSNSからの流入に一役買うのがアイキャッチ画像

 

視覚的に ユーザーを捕まえて、あなたのウェブサイトに連れてくる手助け をするのです。

 

みんなのアイキャッチ

重要性はわかっても、どんなアイキャッチが人の目を引くのかわからないとどうしようもないですよね。

 

ブログで大成功を収めている方たちのアイキャッチ画像をいくつか見て、頭の中にイメージを作ってみましょう。

 

Tsuzukiさん

Tsuzuki Blog

f:id:nskw20canada:20191023075303p:plain

 

イラストや画像へ文字を入れて編集されています。

 

シンプル かつおしゃれ で内容も伝わりやすいアイキャッチ画像になってますね。

マナブさん

マナブログ

f:id:nskw20canada:20191023075409p:plain

記事のアイキャッチには写真やイラストを多く利用されている印象です。

上の画像にもあるようなイラストなどもシンプル なものもいいですね。

クニトミさん

副業コンパス

f:id:nskw20canada:20191023075433p:plain

イラスト がメインで少し記事に関するポイント が入っているのがクニトミさんのアイキャッチ。

 

シンプルかつ文章でポイントを伝えるという合わせ技です。

 

共通点

上記3つのブログを見て、みなさんに感じてほしいこと。

 

それはどのブログにもアイキャッチに関して、そのブログオリジナルのテイスト を持っているということです。

 

記事ごとのアイキャッチがばらばらにならない程度の一貫性 は大事にしていきたいところですね。

アイキャッチの作り方

アイキャッチ画像を作るときに考えたいポイントはたったの3つ だけ。

 

ポイント
  • 自分のブログ全体のイメージ
  • 記事との関連性をつける
  • 読者に持ってもらいたい理想のイメージ

 これらを頭に浮かべる/書き出したらあとはそのイメージを目標に作成に取りかかりましょう。

 

当記事のアイキャッチ画像を使って、具体的に説明していきます。

 

ちなみに、今回の僕が考えたポイントはこちら。

 

ポイント
  • 他の記事のアイキャッチとの相性やTOP画面の見栄えにマッチするもの
  • Canvaに関する記事なのでCanvaの主張を少し強める
  • デザインHOW TO記事なのでデザインが上手だと思ってもらえるもの

背景を決める

背景は主に色で塗りつぶし か写真を貼り付け ですね。

 

今回のアイキャッチは色で塗りつぶしていく方針で進めました。

 

背景色

色の選択は画像の左下の「背景」から行います。

 

必要であれば真ん中上部の四角から色の微妙な調節 をしてみましょう。

f:id:nskw20canada:20191023144259p:plain


今回は他の記事のアイキャッチとの相性を考えて柔らかめの色を選びました。

 

写真

例では写真背景は扱いませんが、写真を背景にすることのメリットはこれ。

 

上手に選べばそれだけでインパクト を十分に与えられること。

 

f:id:nskw20canada:20191023145229p:plain

 

マナブさんのブログは結構写真だけのアイキャッチも多いかと思います。

 

この方法は楽なのですが、やはりアイキャッチ初心者の方は次に説明する記事タイトルの挿入 は確実にしたいところです。

 

記事タイトルを挿入する

記事タイトルをアイキャッチ画像の中に入れてあげるメリット。

 

読者に一目で記事の内容がわからせてあげることができる。

 

内容のわからない記事よりも内容のわかる記事の方が読みたくなるのは当たり前です。 

f:id:nskw20canada:20191023150356p:plain

テキストを挿入するにはまずテキストボックスを追加しましょう。

 

大きさはあとで変更できるので見出し・小見出し・本文のどれかを選択してください。

 

大きさ

真ん中上部の42という数字が表示されている箇所で大きさを変更します。

 

画面いっぱいにテキストを入れてしまうとまれにテーマの仕様で端が切れてしまうことがありますのでご注意を。

 

カラー

カラーも背景写真や色に合わせて変更、もしくはブログ全体で統一したいところです。

 

やはり統一感 があると、雰囲気もまとまりが出て見やすくなります。

 

変え方はこちらも同じく真ん中上部のAとなっている部分から。

 

フォント

フォントも同じく真ん中上部のボタンから変更します。

 

フォントだけでもだいぶんイメージが変わりますのでいくつか試してみて一番しっくりくるモノを選びましょう。

 

ちなみに僕はコーポレートロゴ丸 というフォントを使用しています。

 

配置

最後に配置です。僕は基本的に中心に置くことが多いですが、これも自分の好みに合わせて一番お気に入りの箇所に配置したいですね。

 

重要ポイント

すべての要素において、SNSでこのアイキャッチを見るユーザーの気持ちになって考えること。何事もユーザーファーストです。

 

f:id:nskw20canada:20191023152217p:plain

ここまでで下地とメインポイントが完成しましたね。

 

まだ少し質素なので、少しデザインに工夫 をしておしゃれにしていきます。

デコレーションで仕上げ

アイキャッチを少しおしゃれにするには、アイコンイラスト を活用します。

 

種類がすごく豊富なので、テーマに沿うものがないなんてことにはならないはず。

f:id:nskw20canada:20191023152827p:plain

色々なセクションがありますが、メインで使うのはアイコンとイラスト。

 

図形や線 などもうまく活用できると他人に差をつけられます。 

 

今回のメインポイントはCanvaなので検索窓に「Canva」 と入れて検索。

f:id:nskw20canada:20191023153310p:plain

ぺたぺたと思うがままに貼り付けて削除してを繰り返し、しっくりくるアイコンを探しましょう。

 

色の変更透過の機能 も活用できると便利ですね。

 

透過の使い時としてはアイコンやイラストの色の主張が激しい と感じたとき。色をおさえて全体に馴染ませてくれます。

f:id:nskw20canada:20191023153916p:plain

何かが物足りないなあと感じたので図形を1つ加えて見たところ良い感じに。

 

この図形もアイコンと同じく、色の変更と透過が可能です。

 

アイコンや図形が記事タイトルを邪魔しないように背面に移動 させるのも忘れずに。

 

ポイント
  • 数は多すぎず少なすぎずを意識
  • 色の相性は見た目を激変させる
  • 透過でアイコンやイラストの色の主張を少し抑える
  • 最背面に移動してタイトルを一番前に

 

まとめ

Canvaを使ったアイキャッチ画像の作り方を説明してきましたが、お役に立てたでしょうか。

 

Canvaは直感的に使えてとても高性能な無料ツール なのでどんどん活用していきましょう。

 

最初はうまくいかなくても、続けていれば必ず読者の目を引く画像が作れるようになります。

 

はじめから完璧な人なんていませんからね。

 

では、皆さん一緒に頑張りましょう☻