今日も元気に個人商店を営んでいる40代「ヨフカシ（@yofukashi-kirin）」です。
この記事は、かつて使用していたWordPressテーマ「THE THOR」の時代に公開した記事を再編集したものです。
「アイキャッチ」とは「目をひきとめる」ことです。
ブログをはじめた当初は、アイキャッチの役割を意識しておらず、記事の最初に表示される画像という程度の認識でした。
そのため記事のタイトルをそのまま文章にしただけの画像を平然と使っていました。
これではブログが文字だらけの画面になってしまいます。
ブログをはじめて一年ほど経った頃「アイキャッチ画像」を作りかえました。
Twitterに「before / after」の画像を載せたところ「わかりやすくなった」とコメントをいただきました。
このツイートはインプレッションが1000を超える反響でした
「アイキャッチ画像」は、やはりブロガーには興味の高い話題のようですね。
そこで、私も長い間悩んでいた「アイキャッチ画像の作り方」について、改善したポイントをまとめました！
- アイキャッチを自分で作りたい
- 適切なサイズや比率はどれ？
- 「見切れる」のが悩み
ブログのアイキャッチ画像を作るときに気になるポイント
- サイズ
- 縦横の比率
- 保存するファイル形式
サイズは大きい方が、きれいで高品質な画像になりますが、比例してデータ量が大きくなるデメリットがあります。
縦横の比率は、「16：9」「4：3」「1：1（正方形）」など数種類あり迷います。
保存するファイル形式も「png」「jpeg」のどちらが適切なのか？
迷ってしまうポイントはいろいろあるでしょう。
ひとつずつ説明していきます。
さまざまなデザインにおいて「比率」は重要なポイントです。「黄金比」や「白銀比」なんて言葉を聞いたこともあるでしょう。
ブログのアイキャッチ画像の最適な「横縦の比率」を決めるうえで、一番重要なのは「使用しているテーマに合わせる」ことです。
最近は「16：9」の比率がポピュラーです。
ブログに焦点を絞って「画像サイズ」を考えます。
表示されるデバイス（端末）は「PC / タブレット / スマホ」のいずれかになります。一番大きく表示されるのが「PC」になり、一番小さい表示が「スマホ」ですね。
大きい画像を小さく表示する方がトラブルが少ないと予想して、ここでは一番大きい「PC」のサイズを決めます。
それぞれ使用しているWordPressのテーマによりますが、記事コンテンツ部分の横幅は、2カラムで800pxぐらい、1カラムだとしても1000pxぐらいまでが最大値でしょう。
そこで画像の「横幅を1200px」で設定します。その基準で「16：9」の比率に当てはめると「高さ（縦）は675px」のサイズになります。
横幅を1200にすると、分割するときに便利だからです。
- 2分割なら「600px」
- 2分割なら「400px」
- 4分割なら「300px」
- 5分割なら「240px」
- 6分割なら「200px」
など、対応しやすい数字です。
1200pxだと何かと便利ってだけです
後ほど紹介しますが、Canvaというネット上で画像を作成できるサービスを使って「アイキャッチ画像」を作ります。
作って完成したデザインはダウンロードすることができます。その際、保存するファイル形式を選びます。画像系で代表的なファイル形式と言えば「jpeg」と「png」です。（Canvaでは他の形式も選択できます）
どちらもデータを圧縮することで「軽いデータ」になり扱いやすくなる利点があります。しかし、圧縮方法に違いがあり使い分けが必要です。
- イラスト系の画像なら「pngファイル」
- 写真などの画像なら「jpegファイル」
当ブログ「夜ふかしキリン」のアイキャッチは「イラスト系の画像」なので「pngファイル」で保存しています。
「pngファイル」は、色のデータを保持したまま保存できます。これが「png」と「jpeg」の圧縮方法の大きな違いです。「pngファイル」は、繰り返し保存しても、元のデータ（オリジナルの画像）が損なわれず再現できます。
また輪郭がはっきりしているので、境界がぼやけたりする「ノイズ」が起きません。
他には「透過処理」ができるのも「pngファイル」ならではの特徴です。
「jpeg」は、表現対応色数が「1677万色」あり、グラデーションなどもきれいに表現できるので、写真の保存などに適しています。画像を圧縮する（保存する）ときには「不要になったデータ」を削除しているので、データ量としては軽くなります。
しかし注意しなければいけないのは、圧縮（保存）を繰り返すたびに、「不要なデータ」が削除されていくので、画像が劣化していきます。画質が荒くなってしまいます。
さらに「jpegファイル」がイラスト系画像の保存に不向きな理由として、色の表現力の高さが仇となってしまうことがあります。境界部分の色が細分化されて、逆に輪郭がぼやける「ノイズ」が発生してしまう現象がおきます。
繰り返しになりますが、画像のタイプによって、保存するファイルタイプを使い分けていきましょう！
- イラスト系の画像なら「pngファイル」
- 写真などの画像なら「jpegファイル」
では、ここからは「Canva」でアイキャッチ画像を作る「コツ」を紹介していきます！
画像引用元：Canva
Canvaはネット上（ブラウザ）で画像の作成や編集ができるサービスです。
Twitter、Instagram、ブログ、Youtubeなどのアイキャッチに適したサイズのテンプレート（雛型）がたくさん用意されています。
好きなテンプレートを選んで、テキストを書き換えたり、写真を差し替えるだけで、誰でもオシャレなデザインがつくれちゃいます！
会員登録すれば無料で使えます。（有料プランもあります。）
Canvaの公式サイト
前章でアイキャッチ画像の「全体サイズ」が「横幅1200px」「高さ675px」と決まりました。
まずは作成する画像の「サイズ」を「カスタムサイズ」から「横：1200px 」「縦：675px」と設定しましょう。
サイズを入力すると、真っ白な「キャンバス」が表示されます。「キャンバス」に自分でデザインするもよし、画面の左側にテンプレートからデザインを選んでアレンジして「アイキャッチ画像」も作る方法があります。
今回は自作する例として、この記事のアイキャッチで解説していきます。
↓
できあがったアイキャッチ
THE THORでは、マウスポインタがアイキャッチ画像の上に乗ると「画像が拡大される」機能があります。
「アイキャッチ画像」が変化する機能は「拡大」以外に、「回転」「色が変わる」などがあります。「何も変化しない設定も選択できます。
標準で設定されているのは「拡大」です。
おもしろい機能ですが、ひとつ困った問題があります。
アイキャッチ画像が拡大されると、せっかく作った画像が見切れてしまいます。WordPressテーマによっても拡大率はさまざまですが、「THE THOR」はかなり拡大されるので、見切れる部分が多くなってしまいます。
そこで、拡大されても「見切れない範囲内」にデザインをしていきましょう！
Cnavaには、自動で表示される「ガイド線」の機能があります。（ピンク色の線や点線で表示されます）
このガイド機能を便利と感じるか位置を整えるのに役立ちます。
（ちょっと煩わしいと感じる人もいるかと思いますが）
見切れない範囲にデザインするのに役立ったのが、全体から2割程度内側に表示された「ガイド線」です。具体的な数値は「横：1065px」「縦：540px」ですね。
この赤い部分の中に納まっていると「拡大」になっても「見切れない」で表示されるようになりました。これでブログ用は心配ないです。
↓
そして、もう一つ気になる「見切れたくないポイント」があります。
それは、SNSでシェアする際の表示です。
SNSに投稿すると「自分が意図していない表示」になってしまった経験ありませんか？
自分ではどうすることもできないのですが、私はなんとなく「中央」に置いとけばOKかな？みたいに考えてます。
画像の青の部分は、ど真ん中に「675pxの正方形」を設置しています。
そして、2つを合わせた「見切れないでデザインする範囲」がこのようになるわけです。
↓
ど真ん中の正方形に対して、目一杯にテキストや図形を詰め込んでしまうと窮屈な感じになってしまいます。
なので、私はこの「675pxの正方形」の中に「630pxの正方形」を設置して、文字やパーツを揃えています。
この「ちょっとした余白」は手間がかかりますが、あるとないでは印象が変わるので大事です。
私が画像を作るとき（デザインするとき）に、意識していることは2つ。
- 見る人の視線の動き
- 色使い
人間には慣れている視線の動きがあります。
その流れに沿って情報を配置するだけで、情報を認識しやすくなります。
縦のスタイルにアレンジしてみました。
サイト全体を統一感のあるまとまった雰囲気にしたいなら、使う色を限定するといいです。
色の使い方について、使う3色を選び「メインの色：6～7割」「サブの色：3～2割」「アクセントの色：1割」にする法則があります。
- メインカラー：6～7割
- サブカラー：3～2割
- アクセントカラー：1割
この法則を使うとデザインがまとまりやすく、印象が良い仕上がりになります。
だからといって、3色に限定する必要はありません。
当ブログの場合は、メインキャラクターの「キリン」をモチーフにしています。
こだわりは茶色の使い方です。
濃い茶色、薄い茶色を合わせて使うことで「にぎやかだけど統一感のある雰囲気」を目指しています。
使わない色を決めておくのもセンスよく仕上がる方法です
自分で作るアイキャッチ画像にお悩みの方に、おすすめのブロガーを紹介します。
「ブログデザインラボ」を運営されている「どんぐり所長（@donguriweb）」さんです。
私がアイキャッチ画像のデザインを作り直したのは、「ブログデザインラボ」の「アイキャッチ添削」の記事が、きっかけです。
どんぐり所長の「アイキャッチ添削」が素晴らしいのは、元の画像をまるっきり変えてしまうのではなく、「あとちょっとこうしたら、もっとよくなるよ！」というアドバイスをしてくれるところです。
一生懸命作ったアイキャッチ画像が「良いのか / 悪いのか」自分では判断しにくいですよね？
誰かに見てもらいたいけど「自信がない…」「本当のこと言ってくれてるのかな？」という不安がある人もいるでしょう。
しかし安心してください。
どんぐり所長は優しく褒め伸ばしてくれる人です。
「スキルアップ」できるアドバイスが見つかります。
「ブログデザインラボ」では、これまでの添削企画に参加した人の記事が掲載されています。
私のように企画には参加してないけど「勉強したい」と思っている人は、「アイキャッチ添削」のコーナーを訪問しましょう！
アイキャッチの作り方は人それぞれですが、どこか似た構図のものがあったり、自分が悩んでいるポイントと同じ悩みを添削してもらった記事など、参考になる情報を見つけられるかもしれません。
そこからアイディアを取り入れて、アイキャッチ画像のスキルを上げていきましょう！
＼ ここから添削コーナーに直行できます ／
今回はブログの「適切」なアイキャッチ画像を作るポイントを紹介しました。
使用しているWordPressテーマが推奨する比率を使いましょう。
サイズの数値は細かく分かれるが、「16：9」の比率が定番。
サイズ（縦横の長さ）も使用しているWordPressテーマを参考にしましょう。
それが一番最適です。
イラスト系の画像なら「pngファイル」
写真を使った画像なら「jpegファイル」
インターネットのブラウザ上で画像の作成ができる「Canva」がおすすめ。
無料だけど割と自由に使えるツール。
テンプレートを編集するだけでセンスのよい画像が作れます。
「人間の視線の動き」に合わせた位置に情報を配置しよう。
色を使いすぎないようにましょう。
「デザインのやり方がわからない」
「センスよいデザインにしたい」
「自分の発想の殻をやぶりたい」
などブログのデザインに関する悩みを抱えている人は、どんぐり所長が運営するBlogDesignLab.（ブログデザインラボ）を参考にするといいです。
私も、まだまだ勉強していきます！
一緒に「スキルアップ」を目指しましょう！
