【3分で完成】テンプレート化可能なブログ用無料アイキャッチの作り方

今回は、30枚以上のスクショや写真を使って「アイキャッチ」の作り方をご紹介します。

完全に全てが無料で、かつ再現性が果てしなく高いのでもちろんブログ全体に統一感を出すことも可能です。

挨拶遅れました、わくみ(@misanwakui)です。

Twitterの方でも毎日ブログの話をしているのでよかったらフォローしてください。その際、和久井大学からきましたと言ってもらえるとかなり喜びます。

では、アイキャッチの作り方見ていきましょう。

Keynoteで作る再現性が高いおしゃれなアイキャッチ

まずは和久井大学でよく使われているアイキャッチをいくつか載せますので、今からこれを作るんだというイメージを持ってください。

ちなみに、色とか、細かなデザイン、画像やフォントは全てご自身の好みによって変えていただくことも可能ですし、その変え方もあとで解説します。

オリジナルアイキャッチタイプ1

こんな感じです。もう一度言いますが、色やフォントなどはご自身で勝手に変えることが出来ますからね。

オリジナルアイキャッチタイプ2

オリジナルアイキャッチタイプ3

オリジナルアイキャッチタイプ4

以上が、実際に僕が使っているオリジナルアイキャッチのテンプレです。

ちなみに、全てKeynoteと以下同じ素材で作っているものですから、基本的に知っておくべきは

くらいになります。

早速、見ていきましょう。

実際にオリジナルアイキャッチタイプ1を作ってみよう

ここからは可能であれば一緒にKeynoteを開いて作ってみましょう。

これまでKeynoteなんて使ったことないよ！

って方でも恐らくですが、同じ成果物ができると思いますよ。

STEP01・図形を回転して位置を決める

まずはKeynoteを開いて、スライドを追加、無地を選んでください。

次に、上にいくつか並んでいるボタンの中から【図形】を選択します。

今回オリジナルアイキャッチタイプ1で使う図形は、正方形のものです。

正方形をクリックします。

そうしますと、デフォルトで水色の図形がポンと白紙の上に出てきます。

それを伸ばして長方形にして、

右側【配置】をクリックして、一番下にある【回転】をクリックしてください。

図形の角度が変わっていくのがわかると思います。

そうしましたら、ドラッグアンドドロップで大体の位置へずらします。

STEP02・テキストを入れていく

図形の配置が終わりましたら、次はテキストを入れていきましょう。

右側【フォント】でサイズを拡大していきます。

大体100~150pxくらいで問題ないと思いますが、ご自分のお好きな感じで良いと思います。

実写版浦鉄

感想文

というテキストの入力が完成しました。

STEP03・フリー素材をダウンロード

今回使用したフリー素材のサイトはPixabayというサイトです。

そのほか、僕が普段使っているフリー素材のサイトは以下です。

これらのサイトでダウンロードした画像を、Keynoteに挿入します。

真ん中上のメニューに【メディア】というのがあります。そこをクリック、選択でダウンロードフォルダで自分がダウンロードした画像を選択してください。

全体的に伸ばしていき、テキストの位置などと相性の良い感じの位置に持っていきます。

STEP04・最後の仕上げでカラーリング

デフォルトだと図形は水色ですが、ひよこの写真とは合わないということで、色を変えていきます。

右側のメニュー、【スタイル】の塗りつぶしで色を選択肢、その下の不透明度で図形の透明度を50%程度にしましょう。

フォントも変更し、

文字にシャドーを入れます。

ちなみにやり方は簡単で、

です。

STEP05・書き出してサイズを変更

全工程が終わりましたら、左上の【ファイル】から書き出すを選択し、イメージを選んでください。

画像にしたいページNoだけを選択して次へ、で、ダウンロードフォルダに保存して終了です。

終了ですが、そのまま使うとファイル容量が大きくサーバーに負荷をかけ、ページの読み込み速度が下がる場合があります。

ということで、画像は基本的にブログの記事幅に合わせてカットするのがおすすめです。

僕は記事内の画像は700px、アイキャッチは少し大きめの800pxにしています。

で、完成品がこちらです。

どうですか？皆さんも、これっぽいアイキャッチが出来ましたか？

以上で、基本的なKenynoteを使ったアイキャッチの作り方は終了となります。

それでこれからはより発展的な、アイキャッチデザインの参考だったり、画像サイズ、フォントのインストール方法などを紹介していきます。

アイキャッチのデザインはPinterestで見つける

僕は基本的に、ピンタレストで調べて参考にしています。

アイキャッチのサイズについて

例えばTCDだとアイキャッチのサイズは720 x 500などと書いてある場合がありますが、そのほかのブログテーマではあまりサイズに制限はないような気がします。

JINは16:9ですね。760×428がベストであると言われています。

そのほか、SNSでシェアした時に見切れるようだとあまり良くないのかもしれ前せんが、そんなにテキストをエキセントリックに出力する人はいないと思います。

理想的なアイキャッチのサイズの調べ方

自分のブログ記事のページをChromeで開いてください。

で、左上のメニュー【表示】の一番下、【開発/管理】で「デベロッパーツール」を選択してください。

そうしますと、右のようなすごいぶああああというのが出てきます。

これを読む必要は一切ないんですが、この中からコマンドFで「content」を調べてください。

で、右側の「content」部分にカーソルを当てると、記事の部分だけがこのように青くなります。

このアルバトロスのサイズは横494pxということです。

なので、理想的なアイキャッチのサイズは約500pxということになります。

※ただし、容量にもよるが解像度も重要

しかし、画像は小さくすればするほど解像度が低くなります。

特にテキストを使う場合は尚更です。1枚のアイキャッチが2MBとか、超巨大なものでなければ解像度を考えて700~800pxにしても挙動が変になることはないです。

あくまで、事実は494pxですが、それに絶対に合わせるべきというわけではありません。

フォントのインストール方法

Finder でフォントをダブルクリックすると、フォントのプレビューウインドウが開くので、「フォントをインストール」をクリックします。Mac でフォントが検証され、Font Book App が開いたら、フォントがインストールされ、使えるようになります。

Apple 公式

フォントまとめサイト

フォントは特に気にしたことがないので、こちらのまとめサイトをご参考にしてみてください。

ちなみに、僕がアイキャッチで使っているフォントはチェック&U-foというものです。

以上、Keynoteを使ったアイキャッチの作り方でした。

全てのビジネスに言えることですが、ビジネスは再現性が全てです。特にブログのように数を量産しなければならない場合、アイキャッチのデザインに1時間もかける暇もありません。

というか、価値がありません。

アイキャッチに1時間かける価値がないんです。

SEOで流入を取れないサイトは存在する意味もないですし、そうなった場合、アイキャッチはあまり重要ではなくなります。ただ、SNSでのシェアもあるのでつけておいた方がCTRは上がるという話です。

【追伸】CanvaやPhotoshopはどうなのか？

不要だと思います。