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