１００種類８００円のアイキャッチテンプレートで誰でも簡単にオシャレなアイキャッチを作成できる！
スポンサーリンク
最近までパソコンのペイントを使って自作していたアイキャッチ画像ですが、作成までに時間もかかるし個性的すぎて万人受けしなさそう…
↑以前使用していた自作アイキャッチ画像
それなら商用利用無料の画像をそのままアイキャッチに利用すれば良いのだが、他のブログとかぶってしまう可能性が高いのでそれも何か嫌だ。
そんな時にふと目に飛び込んできたのが下のツイート
ブロガーのみんな～☆
— ぐりお@グラフィックデザイナー (@gurio318) 2019年2月16日
アイキャッチテンプレート100種類、今なら800円で売り出し中！
100種類あるから、好みのものをずっと使うもよし、色々使ってみるもよし、改変するもよしだよ！
便利なCanva版もあるので希望の方は購入後申請してね。https://t.co/zWNy0IK8DR
商用利用無料の画像にこのアイキャッチテンプレートを使えば、センスの無い私でもオシャレなアイキャッチ画像が作れのではないかと期待して即購入！
使用にはフォトショップやイラストレーターなどのソフト必要そうでしたが、無い場合はCanvaという無料ツールで作ることが出来ます。
実際に使ってみると簡単にオシャレなアイキャッチ画像が作成できたので詳しく紹介していきます。
アイキャッチ作成に使用した物
今回はCanvaを使いぐりおさんのアイキャッチテンプレートを使用しアイキャッチを作成していきます。
Canvaは無料で使えるデザインツール上のリンクは英語ですが、サイト内は日本語化されていますので言語で悩む事はありません。
簡単な利用登録を済ませればすぐ利用する事が出来ます。
・Pixabay(商用無料画像)
↑商用無料画像を利用できるサイト、私のブログアイキャッチはほとんどがPixabayを使用しています。
・ぐりおさんの販売しているアイキャッチテンプレート
↑１００種類のテンプレートが８００円で利用できる。
※Canva版を利用する際には個別で申請が必要なので購入直後に使う事が出来ませんので注意が必要です。(データの共有を行うためにぐりおさんによる手作業が必要なため)
アイキャッチの作成
↑Pixabayから画像をダウンロード今回はこの画像を使ってアイキャッチの作成を行っていきます。
Canvaでデザインを作成をクリックし用途に合ったものを選択していきます。
私はツイッターで記事の更新のお知らせをしますのでツイッターの投稿に合わせたサイズでアイキャッチを作成しています。
現在アドセンス合格目指して
— カン@ブログ初心者 (@kimagure_kan) 2019年2月20日
リライト中の合間に1ヶ月経ってしまったので報告を兼ねて書きました🐥
お暇があればお読み下さい🎵
雑記ブログ(ＳＮＳで宣伝あり)運営報告１ヶ月目！
ＳＮＳ宣伝無しブログとの比較も
- ブログマネタイズ戦記 / https://t.co/9nivQnJKCw
↑このようにツイッター上で綺麗に表示されます。
・画像をアップロードしてキャンパスに画像を表示
画像はマウスのドラッグで簡単に引き延ばしたり出来ますのでキャンパスいっぱいに延ばしていきます。
・画像を引き延ばしたら保存したテンプレートコピーして貼り付け
画像をキャンパスいっぱいに引き延ばしたら、共有データから保存したテンプレートを
選んでコピーします。
テンプレートをコピーする際は別タブでCanvaを開いてテンプレートをコピーした方が便利です。
今回はこのテンプレートを使用します。
マウスでドラッグしてテンプレートを囲みショートカットキー(Ctrl+C)でコピーします。
・ショートカットキーで貼り付け(Ctrl+V)
貼りつけたら好みの位置にマウスのドラッグで調整していきます。
テキスト入力でタイトルを入力していきます。
↑文字の大きさや色などの変更も簡単に行う事ができます。
・ 完成したらダウンロード
以上のように簡単にオシャレなアイキャッチを作成することが出来ました。
文字の大きさや色だけでは無く、テンプレ自体の色だったり大きさも自由に調整することも出来ます。
はてなブログで使用時の注意点
・トリミングされたアイキャッチ
↑はてなブログでのアイキャッチ画像は1：1の正方形でトリミングされた状態で表示されてしまいます。
・元画像
元画像と比べてみると画像から正方形にトリミングされているのが分かります。
このように正方形でアイキャッチを表示する際は文字が見切れてしまう可能性がありますので、事前にトリミングを考慮した文字の挿入が必要になります。
・正方形の図形を目安に文字の大きさを調整
素材→図形から表示できる正方形を活用することで文字がトリミングの際に収まるかどうかの目安にすることが出来ます。
表示した正方形は画像の中心に表示されているので動かさないようにしましょう。
正方形の中に文字が収まるようであれば、トリミング後も見切れることはございません。
実際には正方形よりも外までトリミングされているため多少はみ出ても大丈夫です。
正直この辺は感覚になってしまいますが、使わずに調整するよりも確実に調整がしやすいので活用してみて下さい。
調整が終わったら正方形を削除するのを忘れないように気をつけましょう。
当ブログで使用しているテーマUnderShirtで綺麗表示するために
レスポンシブ対応のテーマで、ブログカード型のデザインのブログにすることが出来ます。
このテーマの変更だけですとアイキャッチが引き延ばされて見栄えがよくありませんので、アイキャッチの画像をオリジナル画像で変えることで綺麗に表示することが出来ます。
・カテゴリの画像は見切れてしまう…
↑上の記事で紹介している方法で対策を行ってもカテゴリページでは見切れてしまいますが、はてなブログ用に文字を調整しておけば文字は見切れません。
カテゴリページの画像もオリジナルの画像に変える方法があれば良いのですが、解決方法が分かりませんので知っている方は是非ご一報ください！
・ツイッターの投稿
現在アドセンス合格目指して
— カン@ブログ初心者 (@kimagure_kan) 2019年2月20日
リライト中の合間に1ヶ月経ってしまったので報告を兼ねて書きました🐥
お暇があればお読み下さい🎵
雑記ブログ(ＳＮＳで宣伝あり)運営報告１ヶ月目！
ＳＮＳ宣伝無しブログとの比較も
- ブログマネタイズ戦記 / https://t.co/9nivQnJKCw
↑もともとツイッター用画像サイズで作成しているため問題なく表示されています。
・ツイッターカードのテストが出来る
↑上のリンクにブログ記事などのＵＲＬを入力すればツイッターカードの確認を行うことが出来ます。
タイムライン上には表示されませんのでフォロワーを気にせずテストを行うことができますので、表示がうまくいかない方はこちらを使ってみて下さい。
最後に
今までアイキャッチは自作するか商用利用無料の画像をそのまま使っていましたが、自作では時間がかかりすぎるし、商用利用無料の画像では他の方とかぶってしまうことも少なくありません。
今回ぐりおさんの販売するアイキャッチテンプレートとCanvaを使用することにより、簡単にオシャレなアイキャッチが作成することが出来ましたので是非利用してみて下さい。
note.mu
