こんにちわ、Geoです。
ブログの顔といっても過言ではない【アイキャッチ画像】。
大抵の人は【ブログタイトル】よりもアイキャッチ画像が先に目に入ってきて、それからタイトルを読む事の方が多いのではないでしょうか？
読まれるブログにする為にはタイトルや記事の内容も重要ですが、アイキャッチ画像もとても重要です。
そんなアイキャッチ画像、皆さんはどのようにして作っていますか？
先日このようなツイートをしました。
少しづつですが、ブログのアイキャッチ画像を【Canva（キャンバ）】で作成し変更してます。
— Geo gram＠ジオグラム (@a_type727) 2019年7月2日
☑️これからブログを始める方は
アイキャッチ画像を作成するなら、無料で自由度が高い【Canva】がオススメ✨
例えばこんな感じのアイキャッチが作れますよ😁 pic.twitter.com/YioTvhRorn
僕のブログのアイキャッチ画像は【Canva】（キャンバ）というグラフィックデザインツールで作成しています。
僕が以前に作ったアイキャッチを少し紹介します。
今回はアイキャッチ画像の作り方を【Geo流】で紹介したいと思います！
Geo流ですので、使い方や機能の説明が間違ってるかも知れませんが大目に見てやってください笑
ですがある程度、参考にはなると思いますので是非Geo流のやり方をここで覚えて、後は自分で応用してください。
では早速作り方の説明にはいりたいと思います。
【Canva】初心者にオススメ、無料のアイキャッチ画像の作り方【Geo流】
まずはCanvaというサイトにアクセスすると、このようなページが表示されます。
次にCanvaを使うにあたっての無料登録をします。※無料ですので安心してください！
FacebookやGoogleのアカウントを持っている方はそちらで登録する事が出来ます。どちらも持ってない方はメールアドレスで登録してください。
以前に登録されている方は一番下のログインボタンからログインしてください。
僕の場合はGoogleのアカウントで登録をしました。アカウントを複数所持している方は自分の使いたいアカウントを選択して登録してください。
Canvaで使用するアカウントを選択するとログイン状態になり、左上にアカウント名が記載されたページになります。アカウントを作る事で以前に作った画像などを【あなたのデザイン】として保存してくれます。
一度保存されると、自分で削除しない限り保存された状態になります。再編集したい場合もこちらから出来ますので是非、活用してみて下さい。
ブログのアイキャッチ画像の大きさを調べよう！
Canvaではブログのアイキャッチ画像以外にも作れる物が沢山あります。
- Instagraｍの投稿画像
- Facebookの投稿画像
- twitterの投稿画像
- twitterのヘッダー画像 など
他にもいろんな種類の画像を作る事ができますのでいろいろ試してみてください。
参考程度に僕はWordpress（ワードプレス）のCocoon（コクーン）というテーマを使っています。
他のブログを使われている方はアイキャッチ画像に最適な大きさを事前に調べておくといいと思います。
大半のブログは比較的どのサイズでもアイキャッチ画像として使えますが、元の画像が大きすぎたり、小さすぎると上手く表示できない場合があるので注意してください。
僕の場合はというと・・・
で作っています。このサイズが今のところいい感じに出来上がる気がします。
右端真ん中あたりの【カスタムサイズ】をクリック。
先ほどの数値、幅960×高さ640で自分好みの大きさの画像が作れるようになります。ここの数値は自分のブログのアイキャッチ画像に適したサイズをいれるといいかもです。僕の場合は960×640がベスト。
数字を入れると【新しいデザインを作成】のボタンが水色に変わるのでそこをクリック。
次にこのような画面になります。
恐らく最初にこのページに来ると右下に【チュートリアル】が表示されると思います。色々な操作方法や機能の説明が書いてありますので、もし使っていて分からなくなった場合は右下の【ヘルプ】を押してみて下さい。
右側の白い部分がカスタムサイズ（960×640px）のサイズになっています。
では最初に写真選びから始めましょう！
Geo流アイキャッチ画像の作り方
ここからはGeo流の画像作成になりますので【アイキャッチ画像を作る一つの方法】だと思って参考にしてみて下さい。いろいろ作っていくうちに自分にあった方法が見つかると思いますので、まずは僕のやり方を【マネ】をしてやり方を覚えてください。
左端の上から二つ目の【写真】をクリック。
検索欄に自分が探したい写真の【キーワード】を入れる。今回は【ブログ】のアイキャッチ画像を作成する為、検索欄に「ブログ」と入れる。
もし検索欄にキーワードを入力して、自分の好みの写真が無い場合はフリー画像サイトから探す方法もあります。
↓以下がフリー画像のオススメサイトになります↓
そうすると、このような【ブログ】に関する画像が出てくるので、自分の気に入った画像を選択する。
ここで注意ポイント
選んだ写真をリサイズしよう！
今回はこの画像に決定！自分の気に入った画像をクリックすると右側に大きく表示されます。このままでは選択した写真がカスタムした大きさ（960×640px）になっていないので白い部分まで拡大します。
少し見づらいですが、写真の四隅の白い〇の部分をクリックしたまま青いところまでドラックする。まずは左上の白い〇からスタート
選ぶ写真の大きさによって写真の角がカスタムサイズの角までいかない場合があるので、その時は左端に写真を合わせる。
反対側は対角線の右下の白い〇をクリックして青いところまでドラックする。先ほど同様、青いところまでいかない場合は右の端に写真を合わせる。
少し見づらいですが、横幅は合っていますが上下がまだ余白がある為、真ん中の白い〇をクリックしたまま赤い線のところまでドラックして下さい。そうする事でカスタムサイズにピッタリ合わせることが出来ます。
これで写真のリサイズ作業は終了です。次にブログのタイトルを打ち込んでいきましょう！
ブログのタイトルを入れてみよう！
写真のリサイズ作業が終わったら次は、ブログのタイトルを写真の上に入れていきます。写真の上にテキストをただ貼り付けるだけではなんだか味気ない感じになってしまいます。
一応【画像とタイトル】のみだとこんな風になりますよ、みたいな感じでやってみます。
テキストを入れる時は、左上から4つ目の【テキスト】ボタンをクリックします。
そうするとこのような画面になりますので、【テキストボックスの追加】をクリックします。
テキストボックスの追加をクリックする事で、画像の上にテキストボックスが追加されます。次にブログのメインタイトルやサブタイトルを入力していきましょう。
テキストボックスをダブルクリックする事で最初のテキストを編集する事が出来ます。今回はメインタイトルの【アイキャッチ画像作成ツール】と入力。このままでは書体もしょぼいし、大きさも小さすぎるのでカスタムしていきます。
書体を変更しよう！
書体などをカスタムする場合は画面上の真ん中辺りのこの部分で書体などをカスタムできます。
左上の【Arimo】の部分をクリックするとこのように下にズラーっと書体が出てきます。
この中から好きな書体を選んでクリックすると右側の書体が変わります。僕の現在のお気に入りの書体は【チェックポイント】という書体が今は気に入って使っています。次に文字のサイズを変更しましょう！
文字のサイズを変更しよう！
書体の隣の数字の部分をクリックする事で文字の大きさを変更する事が出来ます。お好みのサイズを選びましょう。
文字のポジションを変更しよう！
文字のサイズが決まったら次は【文字のポジション】を変更しましょう。やり方は簡単で、文字をクリックしたまま自分の好きなポジションまでドラックするだけ。以上！
この時役立つ機能として文字の中心が画像の中心になるように【ピンク色のガイドライン】が出てきます。このガイドラインをあわせる事でバランスが良くなり、見栄えが綺麗になります。
以上が画像とタイトルのみの場合です。次はちょっと手を加えて先輩ブロガーさん達が作ってるようなアイキャッチ画像にしていきたいと思います。
【素材】を活用しワンランク上のアイキャッチ画像を作ろう！
このままじゃ味気ないアイキャッチ画像で終わってしまうので、【素材】を使ってワンランク上のアイキャッチ画像にしていきたいと思います！
左側の【素材】をクリックするとこのような素材が出てきます。
今回は【グラデーション】の素材を使っていきたいと思います。グラデーションの【すべて】の部分をクリックします。
次にこの画面になりますので、自分のお好みのものを選んでください。今回はシンプルにこのグラデーションに決めました。写真を選ぶ時と同様に【有料】と【無料】がありますので、注意してください！
クリックすると右側の画像の上に貼り付けることが出来ます。
選んだ素材をカスタマイズしよう！
次に行う作業は、素材のカスタマイズをしていきます。そのままでも使えないことは無いのですが、カスタマイズする事でグッとクオリティーが高まります！
透明度を調整できるボタンをクリックします。すると画像のような調整バーが出てきますので、黒い●の部分をドラックするか、数値を入力する事で素材の透明度を調整する事ができます。
今回は50％の透明度を選択しました。次に素材のサイズをカスタマイズしましょう！
素材のサイズを変更しよう！
次に素材の大きさを変更してタイトルの幅に合わせたいと思います。写真の時と同じように左上の角からだラックしてタイトル左側（左側の赤線）までドラックします。次にその対角線（右下）の角も同じようにタイトル右側の赤線までドラックします。
この時素材はこのように画像一杯に大きくなりますが問題ありません。ここからもう人手間加えてサイズを変更していきます。
切り抜き作業をやってみよう！
まずは【切り抜き】のボタンをクリックします。
このように半透明ではなくなってしまいますがご安心を。
赤い丸の部分を緑の点線（タイトル上部）のところまでドラックします。
ドラックする時は真っ直ぐ下にドラックするようにします。
するとこのように【透明じゃない部分】と【透明な部分】の素材を切り抜く事が出来ます。
下の部分も同じように切り抜きしたら、【完了】のボタンをクリックする事で切り抜きの作業を終了することが出来ます。
切り抜き作業を完了するとこんな感じ。このままではタイトルが素材の下になってしまっているので修正します。
配置変換をやってみよう！
まずは素材をクリックして選択します。（選択されると上の画像のように四隅に白い〇が付きます。）
この状態で右上にある【配置】ボタンをクリックします。次に【背面へ】というボタンを押す事で、下にあるもの（タイトル）の下に素材を移動する事が出来ます。
配置変換した後の画像はこんな感じ。先輩ブロガー達の様なアイキャッチ画像になってきましたね。
次に文字の色を変更したいと思います。
文字の色を変更してみよう！
文字のいろは赤〇の部分で変更する事ができます。
以上で一通りの使い方は説明したので後は仕上げに入っていきたいと思います。
仕上げ作業をしよう！
ざっとこんな感じでアイキャッチ画像を仕上げてみました。最終的にはこんな感じに。かかった時間は30分程だと思います。
まとめ
アイキャッチ画像はブログの顔とも言われる程とても重要な役割をはたいています。その為アイキャッチ画像の作成を怠ると読まれる確立も減ってしまいます。そんな事が無いようにタイトルや記事同様、アイキャッチ画像も時間をかけていいものを作りましょう！
最後まで読んで頂きありがとうございます。
他にも【電子工作から始めるプログラミング】や【ゲーム】、【シルバーアクセサリ】についても書いていますので、是非あわせて読んでみて下さい。
コメント