今回は、非デザイナーがいつも頭を悩ますアイキャッチ画像に関して。「イメージは頭の中にあるのだけど、上手くできない…！」そんな悩みを現役デザイナーのOMGさんに「お洒落に作るポイント」と「オススメ無料ツールの使い方」を含め、解説してもらいました！
アイキャッチは第一印象を決める
ブログを書いていると必ず必要になってくるのがアイキャッチです。「タイトル画像」とか「扉絵」とか色々呼び方はありますが、ブログの記事の内容を視覚的に伝達する重要なものになります。
人間関係でもそうですが、第一印象ってすごく大事じゃないですか。初見でポジティブな印象を与える事ができれば、その後の話はスムーズに進みます。
ブログのアイキャッチも同様ですね。「なるべく格好良くしたい」多くの方がそう思っているのではないでしょうか。
デザイナーならそういったものを作るアプリケーションだったりノウハウは持っていると思うのですが、今回は非デザイナーの方向けに無料で使えるツールの紹介と、デザインする際に気をつけるべき点や、かっこいいアイキャッチを作るためのテクニックをご紹介します。
デザインセンスに自身のない方でも基本的な部分を抑えるだけでバリエーションが広がり、満足感の高いものが作れるようになるはずです。
見やすく読みやすいがセオリー
最初に「良いデザインとは何か」について確認しておきます。
“デザイン”というと難しそうとか専門的でよく分からないと感じる方が居ますが、難しいものではありません。
【良いデザイン＝見やすく読みやすいもの】です。
答えはいつもシンプル。
よって無理に凝ったデザインを作る必要はありません。
特にブログのアイキャッチの場合、デザインはあくまで副次的なものであり、重要なのは記事の中身ですから、まずは【見やすく読みやすいデザイン】を目指すと良いかと思います。デザインの現場でもそうですが、初心者の人ほど、過剰に手を加えてしまい失敗するみたいなパターンはよく見かけます。
やりすぎないことが重要です！
その上で以下の2点はぜひ抑えておきたいポイントです。
色使い
目立たせたいという理由から派手な原色を多用してはいけません。チカチカしますし。
基本的には好きな色（ブログのイメージカラーなど）で構いませんが、色から連想されるイメージと記事の内容をマッチさせるようにするとさらに良いです。
例えば「海に行きました」という記事のアイキャッチならブルー系でまとめる、「紅葉を見に行きました」なら赤やオレンジといった具合です。このあたりはデザインの知識がなくても感覚的に実践している方が多いかと思います。
また、使う色の数も3色くらいに抑えるとまとまりが良くなります。同系色を「濃い・中間・薄い」の3色を使うのも短調にならずに良いアクセントになります。
文字の可読性
写真に文字を重ねる場合に意識したいのが「可読性」です。文字の読みやすさですね。これにはいくつかの要素があります。
書体選び
使用する画像にもよりますが、画像に負けないような書体を選択するようにしてください。特に細い書体を使う場合は取扱に注意が必要。文字が読めなくなってしまっては意味がありません。
また、目立たせたいからといって太いフチをつけてしまうのも個人的にはあまりおすすめできません。書体（フォント）というのはほとんどの場合”装飾せずそのままで使う事”を想定して作られているので、なるべく文字の形自体をいじらない方が美しいです。
そして、アイキャッチとして読ませることが目的なので、過度にデザイン性の高い書体も使いどころが難しく、最悪「なんて書いてあるか読めない」といった事も起こります。
ここでも意識すべきは【見やすく読みやすいこと】です。
配置する場所
画像に応じて「どこに文字を配置するのが効果的なのか」も重要なポイントです。文章で説明するより実際にやってみましょう。
サンプルとして用意したのはこの写真。
この画像の場合は空の部分に空間がありますね。文字を置くならここです。
基本的には「主役を邪魔しない場所」に置くのがベストです。人物にはなるべく重ねないほうが良いでしょう。
- どこに文字を置くか→空間が開いている空の部分
- しっかりと読めるか→背景の色に溶け込んでしまわない色で
- 目立たせたい要素は何か→並んで歩く二人
このような点に配慮すると上手くいきます。
オススメの無料ツール
ぼくは自分のブログのアイキャッチを作る際はPhotoshopというソフトを使っています。名前くらいは聞いた事がある方もおられるかと思いますが、これは画像編集をする為のソフトで、プロのデザイナー向けの多機能なものですが有料のソフトになってます。
今回は非デザイナー向けの記事ですのでPhotoshopを使わずに無料で使えるツールを紹介します。
PIXLR EDITOR
Online Photo Editor | Pixlr Editor
PIXLR EDITORは疑似的にPhotoshopの機能を再現できるツールです。
使った感じはPhotoshopに非常に似ています。またブラウザ上で動くツールですのでソフトをPCにダウンロードする必要もありません。ネット環境さえあればどこでも画像編集を行う事ができます。便利ですね！
例としてアイキャッチ画像の処理でよく用いられる半透明の帯を重ねる方法を紹介します。
使う画像はこちらです。
①画像を開く
サイトを開きメニューバーの【ファイル】→【画像を開く】を選択、使用する画像を開きます
②レイヤーを追加する
右側の【レイヤー】と書かれたウインドウの下部【新しいレイヤー】をクリックして追加（名前は「レイヤー1」になります）
③選択ツールで帯を重ねたい範囲を決定
左側に並んでいるツールバーから【選択ツール】をクリック→帯を重ねたい範囲をドラッグして選択します。選ばれた範囲が点線で囲まれます。
④ペイントバケツツールで任意の色に塗りつぶす
左側のツールバーから【ペイントバケツツール】を選択して下のカラーパレットから好きな色を選びます。そして、点線の中をクリックすると選んだ色で塗りつぶされます。
⑤半透明にする
塗りつぶされたレイヤー1を選択した状態で下の[toggle layer settings]をクリックすると【不透明度】のスライダーが出てくるので、任意の透明度までスライド（0％で完全に透明になります）
これで半透明の帯を重ねることができました。
あとはこれをPC内に保存します。
Photoshopを少しでも触った事がある方は、操作性が似ているのですんなりと使う事ができると思います。
この他にも様々な機能が搭載されていますので、色々試してみてください。
Canva
Canvaもブロガーに人気のツールです。こちらもPIXLR EDITORと同様、ブラウザ上で動く画像編集ツールです。PIXLR EDITORに比べて操作性はシンプルなので少し触ったら扱いには慣れるかと思います。
無料のイラストやグラフ素材なんかもたくさん用意されているのでかなり重宝すると思います。
もちろんPIXLR EDITORと同様半透明の帯を重ねたりもできますしフォントの種類も豊富なのでオシャレなアイキャッチを簡単に作る事ができます。
しかし個人的に写真自体の編集はPIXLR EDITORの方が扱いやすいです（Photoshopに似ている点で）
なので画像自体の編集はPIXLR EDITOR。できた画像をCanvaにアップロードしてエフェクトや文字を載せるみたいに使い分けるのが良いかなと思いました。先程PIXLR EDITORで作成した画像を使い文字を重ねてみました。
どちらかお好みでどうぞ！操作性はCanvaの方が簡単です。
Unsplash
Beautiful Free Images | Unsplash
ぼくがいつも写真を拝借しているのが海外のフリー素材サイトUnsplashです。
圧倒的に数が多く、高画質、そしてセンスの良い写真が多いです。これが無料で使えるというありがたさ。素晴らしいサイトですね。
もうフリーの写真素材に関してはUnsplashが断トツで使い勝手がいいですね。（今回作例に使った素材は全てこのサイトから使わせていただいています）
最後に細部を整える
「神は細部に宿る」という言葉がありますが、出来上がったアイキャッチを最後に細かい部分を調整してあげるとさらに見栄えを良くする事ができます。本当に細かい部分ですが、やるとやらないでは大きく差が出ます。せっかく作った素材ですから、仕上げをしっかりと！
各要素は揃っているか
行頭が微妙にズレていたりするとそれだけで見た目が悪いので、キッチリと揃えましょう。
またセンター揃えがズレているのも違和感を感じてしまいます。
行間は適切か
詰まりすぎ、広すぎもダメです。【見やすく読みやすい行間】が必ずあります。場数をこなすと「いい感じの行間」が分かってくると思います。
”引き”で見る
パソコンに向かって作業していると気づいたら前のめりになって細かい所にしか目がいかず全体のバランスが崩れていた。なんて事は結構起こりがちです。
そんな時は一度画面から離れて見ると違和感を見つける事ができます。また、一回作業を止めて、時間を空けて見直すとフラットな目線で見ることができるのでおすすめです。のめり込んだら一旦離れて引の目線で見直してみましょう。
第三者から見て【見やすく読みやすいか】
最終的にできあがったアイキャッチは客観的に見ることが最も重要です。自分では良い出来だと思っていても他人から見るとそうでもなかったりとか。この辺りは本当に場数がモノを言う世界だと思いますので、自分なりの正解を見つけ出して欲しいと思います。
冒頭でもお話ししましたが、アイキャッチはあくまで副次的なものです。しかし視覚的に目を引くものであるにこしたことがないのもまた事実。ブログと同様、アイキャッチ作成も楽しみながらやって行くのが上達への近道ではないでしょうか。他の方のアイキャッチはどうなっているのか、目を引くデザインは何がポイントなのか。意識しながら観察すると次第に見る目が養われてきます。
かっこいいアイキャッチ作ってくださいね！
その際にこの記事が参考になれば幸いです。
▶︎OMGさんの他の記事を読む
