【エンジニア向け】簡単ブログサムネイル/アイキャッチ画像の作り方
こんにちは、中谷です。
最近チームメンバーにサムネイルのデザインを教えているのですが、その中でどんなポイントを押えるといいデザインが作れるのかが分わかってきました。
デザインには実は「ルール」が存在していて、知っていれば誰でもそれなりに魅せるデザインを作ることができます。
そこで今回はサムネイルデザイン制作のコツをブログにまとめることにしました。
※サムネイル、アイキャッチとも言いますがここではサムネイルと呼ばせていただきます。
サムネイルの制作規格や方向性の決め方
制作する枠が決まらないとレイアウトもなにもできません。
今回は弊社ブログのサムネイル規格サイズ1074 × 602pxにて考えていきます。
（ブログ一覧でサムネイル画像が切れないサイズ比になります。）
サムネイルのアイデアを練る
ブログ記事内容を読み返してどんなサムネイルにしたらいいかアイデアを考えましょう。
良いサムネに共通することはサムネイルとブログ内容がリンクしていることです。
Dockerを使用した記事であれば「コンテナ・海・クジラ・システム的な写真」などのイメージが連想できます。
ECショップであれば「ショッピングカート・洋服・食べ物・お金」などが連想できます。
※たまたま訪れた人に伝わらない内輪ネタや時間が経って見たときに伝わらない時事ネタはあまり良くないので避けましょう。
「バナーが見られた瞬間」をイメージをする
どういう経路でクリックされるかをイメージします。
ブログ一覧に表示
Twitterで投稿した時
こういった目的に合わせて、
バナーが見られた時にクリックしたくなるか？
記事内容がひと目見て分かりやすいか？
どんな人にクリックしてほしいか？ （エンジニア / 採用募集の方 / 一般の方など）
を意識して作ります。
※ブログを書いたら積極的にTwitterに投稿しましょう！
レイアウトは要素を分解して考えることが大事
レイアウトは「何をどう配置するか」を考えることで、それは「見る人にどう解釈してほしいか」に直結します。
今回はわかりやすくするために白黒と四角で考えましょう。
実際にワイヤーフレームを作成する際には色を使わず白黒で構成を考えます。
先程考えたアイデアを以下のレイアウトの中に当てはめて、どれが一番適しているかを想像してみてください。
※以下、黒が文字の想定です。
中央揃え
左右に画像と文字を分ける
上下に文字と画像を分ける
左右に画像を分ける
３つの画像を並べる
４つの画像を並べる
余白を揃える
左右、上下の余白をそれぞれ揃えるとデザインが綺麗に見えます。
CSSでいう「padding」「margin」「gap」などにあたります。
もし完璧な揃えを実践するとこうなります。
これは極端な例で、実際は揃えすぎると変になることもあるので見た感覚での調整も大事です。
（カチカチに硬いデザインになってしまう）
分かった上であえて崩すことも大事です。
社内のサムネイルを見る
弊社のサムネイルはメンバーの皆さんにこの法則を参考に作ってもらいそれにアドバイスして完成させることが多いです。
その中でいいサムネイル例をご紹介します！
困ったらとにかくシンプルにする
サムネとタイトル合わせて内容が理解できればOK。
ロゴだけでも大丈夫。
イベント系なら、楽しそうな写真ならそれだけでいい雰囲気になります。
使用する色を制限する
このようにロゴと同じ青色を用いると綺麗になります。
「使っていい色は３色まで」と決めると整います。
サムネイル内の文章はできるだけ少なめに
サムネの下のタイトルと同じことを書くとうるさくなるので、端的に内容を想像させる感じがいいです。
吹き出しをつかう（角丸長方形＋三角）など遊び心があると良し。
コントラストをはっきりさせる
背景を暗くして、白いイラストと文字を置く。
文字には影をつけているのでクッキリ見えるようになります。
わかりやすさが大事
パット見で内容がすぐわかると、SNSでの拡散などで有利。
内容に合ったイラストをフリーで持ってきて使うことで、伝えたい内容が強調されます。
赤と紺で統一された色合いもポイント。
レイアウトは「中央揃え」か「左揃え」
困ったら上下左右中央揃えにしましょう。
このようにロゴと文字の左右の端を揃えると綺麗に見えます。
「爽やかな青色で統一」「木の板と文字のレイアウトの区分けがはっきりしている」のもポイント。
〇〇風は面白さアップ
これはドラゴンボールっぽいイメージで作ってます。
オラワクワクすっぞ！（実際こんなデザインかは知らない）
これからテレビ番組が始まりそうな感じです。
背景がぼやけていて、人物と文字が横に並んでかぶらないのがポイント。
（文字の後ろにごちゃごちゃした背景は避けたい）
フリー素材を活用
無料で使えるフリー写真やアイコンなどをガンガン活用していきましょう！
フリー素材サイトは沢山あって紹介しきれないため、その中のオススメサイトをピックアップします。
Pixabay
無料でかっこいい写真を探すならまずはここでしょう。
サムネイルでの写真の使い方はコツが要ります。
初めての方はなるべく主張の少ない「背景っぽい写真」や、文字を余白に入れやすい「余白の多い写真」を選ぶのがおすすめです。
Simple color icon Jr
シンプルなサムネイルにちょっとしたイラストを挿入するとアクセントになって可愛くできます。
unDraw
イラストのメインカラーを変更してSVGとしてダウンロードできます。
システム系イラストが豊富なのでエンジニアにオススメです。
ソコスト
やさしい雰囲気のあるイラストサイトです。
こちらは何にでも使えそうな万能感がありますね♪
イラストAC
「イラストならここ」というくらい使いやすいサイトです。
無料版ではダウンロード制限がありますが、クオリティが高いイラストが多いのでガンガン制作するなら有料会員になってもいいくらいです。
この写真版のphotoACもブログに使用しやすいようないい写真が揃っているのでそちらもチェックしてみてください！
これ以外にも沢山のフリー素材サイトがあるのでご自身で使いやすいサイトを探してみてください！
著作権について
上記リンクのフリー素材は商用利用可なものをピックアップしていますが、素材をダウンロードするときは常に権利関係を確認する癖をつけましょう。
- 「商用利用可」の表示やそれを意味する記述を確認する。
（ブログレベルならだいたい怒られないとは思うけど念の為） - 素材元URLを画像の近くに記載する必要があるケースも。
そうなるとサムネイルには利用しにくいですよね。
shopifyやDockerなどのサービスロゴはブログのサムネであれば大丈夫だと思います。
（多くのブログで使用しているため、個別に訴える可能性がほとんどないと予想）
ロゴはsvg画像が使いやすいです。
人物が写っている場合はモデル自体の肖像権があるため、そこもクリアしているかどうか確認が必要です。
実際にサムネイルを作ってみる
では実際にサムネイルを作る流れをお教えします！
今回はこの記事のサムネイルを作った流れを解説していきます。
1. 使用するテキストを考える
記事タイトルは「【エンジニア向け】簡単ブログサムネイル/アイキャッチ画像の作り方」
なので、それに近くてサムネイル用にアレンジしたテキストを入れました。
メインのテキストは大きくして、「の」の字を小さくする小技を使っています。
2. テキストを中央寄せにする
今回は簡単講座ということでテキストを王道の中央寄せにしてみました。
「エンジニア向け簡単講座」の両脇に/の装飾を追加して小さい文字でも強調して見えるようにしています。
3. 背景に写真を追加
写真を使用すると簡単にそれっぽい見た目になるので背景に写真を追加しました。
今回はなるべく特定の意味合いを持たないような空やビルの写真を探してきました。
中央寄せテキストに合う中心から広がる構図もポイントです。
4. 文字が見やすいように工夫する
このままでは文字が読みにくいので思い切って白背景を追加しました。
不透明度80%の四角も間に挟んで透明感も演出しています。
5. 空いた部分に隠し味を追加する
サムネイル下部の左右に隙間があり寂しいのでそれっぽいイラストを追加しました。
そうなるとテキストより強くなってしまいました。
そこで「ブログサムネイル」に黄色いマーカーを追加してテキストも強調します。
全体のバランスがとれたのでこれで完成です！
ちなみに投稿時にはページ表示速度改善のため画像圧縮をしてからアップロードしましょう。
画像圧縮にはTinyPNGがオススメです！
まとめ
紹介しきれないコツはまだまだ沢山ありますが、このようなコツを知っておくだけでもいい感じのデザインになります。
いろいろ気をつけるべきことが多いと思われる方もいるかもしれませんが、まずは作らないと始まりません。
下手でもいいのでとにかく手を動かして作り始めましょう！
クリエイターなら制作ツールが豊富なAdobe Creative Cloudの契約をするのがオススメですが、無料で使えるFigmaでもデザイン制作は可能なのでこちらで作ってみるのもいいですね。
あなたの一生懸命考えたデザインが見れることを楽しみにしています！
