ブログのアイキャッチ制作は、ブログの記事作りで大事な要素のひとつです。
記事のイメージを簡略的に伝えることが出来るので、なるべくならチカラを入れておきたい要素ですが。ブログ記事を書くのも大変なのに、さらにアイキャッチの画像を探して、加工作業までするとなると、地味にきついですよね。
アイキャッチ制作で、有名な「Photoshop」や「Illstrator」などはお値段もお手軽ではありません。その手のレベルのデザインツールは、パソコンに入れるとわりと容量も食いますし、大変です。
そこで、僕がよくアイキャッチ制作で使っている「Canva」というデザインツールを紹介したいと思います。
この「Canva」は無料な上にインストールいらず、ウェブ上で画像編集ができるので、僕みたいにパソコンの容量がギリギリな方でも安心です。
今回、「Canvaの使い方」と、僕の「アイキャッチ制作過程３つ」をあわせながら、Canvaをマスターしていきましょう！
目次
Canva（キャンバ）とは
Canvaは、無料で使えるデザインツールです。
ブログなどのアイキャッチ画像を制作する上で、よく使われるのは「Photoshop」や「Illustrator」といった有料デザインツールですが、今回は、無料で手軽にアイキャッチ画像を作れる「Canva」を紹介していきます。
ちなみに、僕のブログは「Canva」でアイキャッチ画像を作っています。具体例をあげるとこういったアイキャッチ画像を作ることができます。
左の部分が「アイキャッチ画像」になっています。
そして、CanvaはWeb上の中で、アイキャッチ画像を制作することができます。
「Photoshop」や「Illstrator」などのデザインツールは、パソコンにインストールしなくてはいけませんですが、CanvaはWeb上で「アイキャッチ制作」を完了できるので、パソコンの容量を気にしなくてもいい。というところが、嬉しいポイントです。
スマートフォンにアプリもあるので、同じアカウントでログインすれば、データの共有もできます。
それでは、「Canva」の使い方を見ていきましょう！
「Canva」の使い方
まず、「Canva」にアクセスして、「Facebookアカウント」または「Googleアカウント」をお持ちの方は、そのアカウントでログインします。それらのアカウント以外で登録したい方も「メールアドレスで登録」で、Canvaを利用できます。
fa-arrow-circle-right「Canva」にアクセス
「Canva」にログインすると、このような画面が表示されます。
- カスタムサイズ：希望のサイズで、デザイン作成ができます。
- デザイン検索：検索欄に制作したいデザインを入力すると、「Canva」のデザインテンプレートを検索できます。
- 矢印をクリックして、「Blogバナー」をクリック
矢印をクリックすると、上記の「Blogバナー」が出てきますので、こちらをクリックしてください。
「Blogバナー」をクリックすると上記の作業画面に入ります。
①の項目から説明します。
- 「テンプレート」 - アイキャッチのデザインテンプレートを選択できます。
- 「素材」 - 写真や、イラスト、アイコンなどデザイン制作に使える素材を使用できます。
- 「テキスト」 - 文字を入れたり、文字テンプレが使えます。
- 「アップロード」 - 写真のアップロードができます。
- 「フォルダ」 - 専用の写真フォルダや、自作のテンプレフォルダを作れます（有料）
- 「アプリ」 - Canvaが提供してるアプリサービスを利用できます。（←有料）フェイスブックやインスタのアカウントと連携して、デザイン制作ができます。（←無料）
①の項目から選んだメニューを、②の欄に表示されるようになっています。そして、②の欄で選ばれたテンプレや素材だったりが、作業スペースの③の表示されるようになっています。
たぶん、これだけだとわかりにくいと思うので、僕のアイキャッチ制作の作り方を３つ、例にして説明します。
ブログのアイキャッチ制作過程【３つの例】
アイキャッチの制作過程は、この３本の記事で使われているアイキャッチの制作過程をシェアしますので、そこで学んでいただければ、と思っています。
制作過程①｜グリッドと写真を活かしたアイキャッチ制作
アイキャッチ画像記事：【加計呂麻島】私の中でのナンバーワン！実久海岸！ミクビーチ（愛称）
では、制作過程①では、上記のアイキャッチを作っていこうと思います。
素材「グリッド」を選択
「素材」をクリックしたら、「グリッド」を選択します。
「グリッド」とは、上記の「山のイラスト」の部分に写真や画像を埋め込むための土台です。今回は、３枚の写真を使いたいので、「グリッド」が３個に分かれているものを選びます。
「画像」をアップロード
次に、写真や画像を「Canva」上にアップロードします。「アップロード」をクリックして、「画像をアップロード」で、写真や画像をアップロードします。上記の画面にアップロードする写真などをドラッグして、アップロードすることもできます。
アップロードした「画像」を「グリッド」にドラッグ
画像を「ダブルクリック」して、ポジションを変える
「グリッド」に画像を埋め込むだけでは、イメージしてる仕上がりにならないので、「グリッド」の中の画像のポジションを変えます。
このように、画像を「ダブルクリック」すると、「グリッド」に映し出されるポジションを変更できます。好みのポジションに移動したら、「完了」をクリック。
こちらが、ポジション変更後の写真です。海の青さと島の風景がしっかり、見えますね！
「テキスト」を入力する
次に、画像に文字を入れる作業です。「テキスト」をクリックしたら、「テキストボックスの追加」をクリック。そうすると、「テキストプレースホルダ」が出てきますので、そこに入力したい文字を入れていきます。
文字設定
文字入力が完了したら、あとはイメージに沿って「文字設定」をしていきます。今回は僕がメインに使用してる「文字設定」を説明します。
- フォントの種類 - 英語から日本語まで様々なフォントの種類を選ぶことができます
- 文字サイズ - 文字のサイズを選びます
- フォントカラー - 文字の色を選びます
- 間隔 - 文字の間隔や行の高さを調節できます
- 配置 - 文字の配置を指定できます
- グラデーション - 文字にグラデーションをかけられます
「フィルター」を使う
「写真」などをアイキャッチで使用する場合は、加工なしで使うのよいですが。フィルターを使って、写真の明度や輝度を調節すると、入力した「テキスト」が見やすくなったりします。
ですので、今回はCanvaの「Cali」フィルターを使って、写真全体をやや白めに加工して、文字を見やすくしました。
こちらの「写真」が、フィルターをかけた写真になっています。少しの違いですが、刺激を抑えたマイルドなアイキャッチになっていると思います。
これで、制作過程①は完了です。あなたも自分の写真を使って遊んでみてください。
作った「アイキャッチ画像」をダウンロード
作った「アイキャッチ画像」をダウンロードする場合は、右上の「ダウンロード」をクリック。保存するファイルの種類を選んで、ダウンロードします。
僕は、あまり容量取られない「jpg」で保存してます。アイキャッチ画像でした、「jpg」で十分な画質を保てます。
制作過程②｜テンプレートを使ってみよう！
アイキャッチ画像記事：GoProユーザーが知っておきたい｜シュノーケリングのQ&A【初心者】
（＊上記の記事のアイキャッチは、Canvaのバージョンが古い時に使ったので、今回、最新バージョンのCanvaで作ったアイキャッチの画像が多少違うのはご了承ください）
制作過程②では、Canvaのテンプレートを使用して作るアイキャッチ制作です。
Canvaのテンプレートは、有料なものと無料なものが存在しますが。実は有料を、ある種、無料で使える方法があります。それも後述に詳しく書いているので参考にしてください。
では、制作に取りかかりましょう！
「テンプレート」を選ぶ
Canvaには、始めから「アイキャッチ制作」にうってつけのテンプレートがたくさん揃っています。しかし、よくみると「無料」と表記されているものと、ないものがあると気づくと思います。
これは「無料」と表記されていないものは、「有料」ということなのです。
こちらのテンプレを選んでもらうとわかるように、有料のテンプレートには「透かし」というものが入っています。
しかし、実はこれ「写真自体」が有料なだけであって、テンプレ自体は無料なのです。
つまり、どういうことかと言うと、まずこの有料画像を消しますので、「ゴミ箱」ボタンをクリックします。
「画像」を削除し、「グリッド」を埋め込む
「画像」を削除すると上記のようになります。この時点で、有料テンプレは、無料で使える状態になります。
次にしてもらいたいことは、「素材」で「グリッド」を選択します。そして、１番始めの「グリッド」をクリックします。
大丈夫です。間違ってません。
「えっ！」って、一瞬驚いた人もいるかもしれませんが、大丈夫です。これは、先ほどの「テンプレ」の上に「グリッド」というレイヤーが上にきている状態なだけなので、「グリッド」に上書きされたわけではありません。
「配置」でレイヤーの入れ替え
この状態で、「配置」→「背面へ」とクリックします。
「画像」をグリッドに貼り付ける。「文字」を入力する。
そうすると、先ほどの「テンプレ」が前面に出てきます。
あとは、制作過程①同様に「画像貼り付け→文字入力」をしていきます。
「グラデーション」と「フィルター」で調整。
あとは、「グラデーション」で透明度をつけて、「フィルター」で雰囲気を作って完成です。
- グラデーション：透明度８０
- フィルター：Selfie
制作過程③｜フリーアイコンを使って、アイキャッチを作ってみよう！
制作過程③は、本記事のアイキャッチの作り方をシェアしようと思います。
今までの、①②は写真を使ってきましたが、今回は「フリーアイコン」を使用して、アイキャッチを作っていこうと思います。わりと可愛いアイキャッチができると思いますので、こちらもおすすめです。
その前にオススメの「フリーアイコン」サイトをご紹介します。
おすすめ「フリーアイコン」サイト
今回のアイキャッチ制作では、「Flat icon design」を使っています。
では、サクッと作っていきましょう！
「Flat icon design」でアイコン素材をダウンロード
「Flat icon design」でまず、必要なアイコン素材をダウンロードします。透過できる「PNG」でダウンロードします。
「背景なし」を選択します。
「表示中の画像をダウンロード」をクリックで、ダウンロードを開始します。
ダウンロードした「アイコン素材」をCanvaにアップロード
先ほど、ダウンロードした「アイコン素材」をCanvaにアップロードします。
「素材」の「I love Canva」で、アイコン素材をピックアップします
「素材」から「Canva」のアイコン素材を選びます。
背景カラーを選んで、配置ポジションを整える
背景カラーを選びます。そのあと、「文字」入力をすませ、配置ポジションを整えます。
好みのサイズに、整え、バランスが取れれば完成です
アイコン素材は、写真系アイキャッチと比べ、アイコンと文字のバランスを取るのが少し難しいかもしれませんが、たくさん作って慣れていきましょう！
まとめ
アイキャッチ制作は、必ず「文字」を入れないといけない決まりはありません。文字なしで、あとは「タイトル」で魅せるというやり方もあります。それは人それぞれです。
僕のブログは、まだ「アイキャッチ制作」は模索段階なので、ひとつひとつの記事アイキャッチは、バラバラですが。サイトデザインのブランディングをお考えの方は、決まった「アイキャッチ制作法」があれば、それで統一するのもありだと思います。
アイキャッチでは、写真、画像選びがとても大事になってくるので、僕のオススメの「写真素材」サイトも合わせて読んでいただければ、「アイキャッチ制作」の幅が広がると思います。
》ブログのアイキャッチ制作に使える｜おすすめ写真素材サイトのまとめ【無料＆有料】
