どうも鳥やんです。ブログを更新するのが日課になってきました。アクセスも伸びている方向ではあるので、どんどんサイトのクオリティは上げていきたいと考えています。
記事を書いてSNSでシェアしたとしても、クリックして読んでもらわなければ書いた意味がない。このサイトがいい記事をかけているかはさておき、どんなにいい記事を書いていても入り口がボロボロだったら読んでもらえるものも読まれないわけです。
そこでサイトのコンディションを左右するのが、ページ表示スピードやブログデザインです。
このサイトではSNSでシェアした記事をより読んでもらいやすくするべく、アイキャッチ画像にこだわってみることにしました。
アイキャッチ画像とは？
アイキャッチ画像というのはブログや記事の一番上や導入の後に挿入する、目を引く（アイキャッチする）ための画像です。このサイトで言うならばこれ。
このサイトではとりあえず作業負担の軽減を目的として、基本的に背景は気に入ってる画像を使いまわし、真ん中の文字だけ変えています。
SNSで記事をシェアした時にツイートに表示される画像もアイキャッチ画像を自動的に切り抜いたものになるので、アクセスアップにはかなり大事な要素かな、と思います。
ブログアイキャッチ画像の効率的な作り方
当サイトではCanvaという無料サイトを活用し、毎回文字を変えるだけでアイキャッチ画像を作れるように仕組み化しています。（多分毎回吟味して画像設定したほうがいいんだろうけどね。ブログ更新継続するためだから仕方ない。）
ではその方法をCanvaの使い方を交えて解説していきます。
まず、ブログのアイキャッチ画像として適切なサイズは？
このサイトの記事を見てもらえば分かりますが、最初の方の記事はアイキャッチ画像が荒く見えていたり、歪んでしまっていたりします。
これは、サイズを適当に作っていたからです。
靴のサイズと同じくらい繊細に決めないとブログロードはあるけまへんで。
結論から言うと、適切なサイズはこれ。
1200×630ピクセル
この大きさの画像をベースに、アイキャッチ画像を作成していきます。
まずは好きな画像をペイントで1200×630にカット！
まずは好きな画像をWindows付属のペイントで開きましょう。Macの人はとりあえず画像を切り貼り出来るアプリを使ってくれ。
そして右上の『サイズ変更』をクリック。
『ピクセル』のボタンを押してピクセル単位で指定出来るようにする。
『縦横比を維持する』のチェックは外して下さい。
そしてここに水平方向1200, 垂直方向630を入力する。そうするとサイズが変更されます。
ちょっと縦横比が変わるため画像が荒くなるかも知れないですが、正直そこまでアイキャッチの画質がいい必要も無いのかな、と。
それより僕みたいにギラギラした背景選ぶほうがダサくなります！
これでベースの準備は終了。
Canvaでさっきの画像を開く（下準備終了）
そしたらCanvaにアクセスし、登録しましょう。無料。
右上の『デザインを作成』から新しいキャンバスを作成しましょう。
出てくるメニューから『カスタムサイズ』を選択してください。
そしたら画像サイズに1200,630を入力。
入力が出来たら、左側の『アップロード』からさっき作成した画像を貼り付けます。
貼り付けたら、なぜかキャンバスの真ん中に小さめに画像が表示されるので、画像の四隅をドラッグしてサイズを合わせましょう。こんな感じになるように。
ここから文字を入れていきます。
アイキャッチ画像に文字を入れる位置は真ん中！
ここで気をつけるべきなのは、文字を入れるのは真ん中にするべきだということ。
この理由は、SNSなどに記事を投稿した時に、アイキャッチ画像が勝手に切り取られて投稿されるからです。その時に、うまい具合に文字が入るのが真ん中の600×600の正方形の中だけだから。
いい感じのデザインで枠を画像に入れ込むことができれば一番編集は楽なのですが、僕は技術がない＆めんどくさいという理由で違う方法を取っています。
ブログタイトルとサブタイトルを上下に入れると範囲がわかりやすい。
僕はこの600×600の四角の上下にブログタイトルとサブタイトルを入れた画像をテンプレートとして保存してあります。
こんな感じ。この上下のタイトルたちがそのまま文字入れスペースを示す役割にもなるわけです。
つまり、このタイトルとサブタイトルの間に記事のタイトルを入れることで、ちょうどいい画像になるというわけ。
Canvaでの文字の入れ方は適当にいじってたら分かると思うけど、左側の「テキスト」ってところ押したら追加できる。
で、今後ブログ記事を書いて、アイキャッチ画像を作るときにはCanvaを開いてこの真中のスペースに好きな文章を入れてダウンロード→ブログにアップしてアイキャッチ画像として使用しています。
準備さえしておけばずっと作業を単純化出来る
確かに画像を切り抜いてあらかじめ文字を入れて・・・という工程は最初ちょっとめんどくさかったのですが、この準備をすることでアイキャッチ画像の作成に割く時間が１記事当たり１分にも満たない程度。
変なところで労力を使ってしまって更新するのが辛くなると本末転倒だと思うので、当分このサイトではアイキャッチ画像の背景は使いまわしていくと思う。
みなさんも、このやり方をやればいいものが出来るわけではないけど、ぜひ時短につなげて記事を書く時間を増やせればいいんじゃないでしょうか。
完成形はこんな感じ。記事の埋め込みやTwitterでのシェアでも綺麗
さっきも貼ったけどこんな感じ。
パソコンで見た場合
スマホで見た場合
記事を引用した場合のブログカード表示
今見たらしたちょっときれてるやんけ。次の記事からは修正する。
ちなみにブログカードをこんな感じで表示するプラグインは以下でご紹介。
こんな感じです、とりあえずブログ始めたてならこんなところに労力を割くべきでは無いのかなと思っているので、極力単純作業化してみたということで！また！
コメント