これまでフリー素材をペッ！と貼って終わりにしていたなみンゴですが、バナー制作の依頼を受けるようにもなったついでに、アイキャッチにも時間をかけるようになりました！
なみンゴ
まずはデザインやイラストよりも中身やろ！と記事作成を優先させてきましたが、最近 飽きてきた 余裕ができてきたのでね！
せっかくなのでどうやってアイキャッチを作っているのか、そのメイキングをご紹介します！
ちなみデザイナーさんやイラストレーターさんによって作り方って全然違うと思うので、あー、こういうパターンもあるのね！という感じで鼻をほじりながらご覧くださいね！
この記事の目次
自分のサイトの場合はラフはなし！
自分のサイトに使用するアイキャッチ、バナーの場合はラフは描きませんが、お客さんがいるクライアントワークの場合は認識の違いをなくすためにラフを作ります。
クライアントワークでのラフを公開
アイキャッチではありませんが、ちょうど最近納品したバナーがあるのでご紹介します。
なみンゴ
ちなみになみンゴのラフの汚さには定評があります。笑
例えば、この前バナーを制作させていただいたはまちゃん（@wakuwakukeigo）に提出した下書きはこんな感じ。
なみンゴ
これで汲み取ってくれるんだからすごいよね
旦那ンゴ
おい
（しかもスポンサーがスポンサになってる…）
基本的にはデザイン後の修正は微調整のみしか承っていないので、修正がある場合はこの時点でもらうようにしています。
で、先ほどのラフをベースにご要望をいただき、最終的に出来上がったのがこちら。
なみンゴの場合、写真ありきのデザインをよくするので写真の選定はとても大事。
できるだけ色のパッキリしているものを選びます。
なみンゴ
写真はできるだけ目に留まりやすいものを選びます。
気づいてもらわなきゃ意味ないからね、埋もれてしまうデザインはその時点で失敗してる！！！
旦那ンゴ
（今回は珍しく真面目だな…）
なみンゴ
あとは文字とか情報を載せすぎないことだね。
掲載する情報をあえて中途半端にすることで人が気になってしまう心理を利用するってのもある。
その心理は「ツァイガルニック効果」と言ったりします
詳細はこちらにて紹介しているのでよかったら読んでみてくださいね！「Webサイト制作時に役立つ行動心理学。特に効果的な5つの心理効果」
https://hareru.site/shinri/
ワンポイントとしてイラストを描く
なみンゴのブログっぽさをどの記事にも出していきたいので、アイキャッチにはワンポイントでイラストを入れるようにしています。
なみンゴ
ただ時間が少々かかるため、どうにか短縮できないか模索中です
イラストはCLIP STUDIO PAINT PRO 
というペイントソフトを使用していますし、ワコムのA4サイズのペンタブを利用しています。
https://hareru.site/photoshop/
なみンゴ
今から頭の中のイメージを実際のアイキャッチに落とし込んでいくよ！お楽しみに！楽しみじゃなくてもお楽しみに！
まず線で描いていきます〜。
こんぐらいのイラストなら下書きなしでイケちゃう！！
次に色塗りな。
さりげなく影とかもつけちゃうのな。
ほいでイラスト全体に白いフチをつけてあげる。
背景を透明にしてみましたが、イラスト全体に白いフチが付いているのがわかりますかね？
なみンゴ
こうするとアイキャッチに入れた時にいい感じにワンポイントになってくれるんだす
そしたらこのイラストはpngに書き出して終わり。
なみンゴ
次いくよ、次！！
写真選びをするなり〜
アイキャッチの肝となる写真選びです。
フリー素材が手に入る素材サイトは色々ありますが、私がよく使っているのは「unsplash」ですね。
キーワードで画像検索が簡単、どの写真も高品質でストーリー性のある素敵なものばかりでテンションが上がります。
なみンゴ
右上の女性に目がいきましかたね？
unsplashのライセンスに関してはCC0から独自ライセンスに変更されましたが、ブログのアイキャッチとしては問題なく使用できます。
（この辺誰か解説してください！めんどくさいのでバトンタッチ！）
今回は「Webデザイナーだからって金髪にしてみたけど後悔した話」という記事のアイキャッチだったので、落ち込んでる女性のイメージがほしいな！と思い「sad」で検索しています。
なみンゴ
海外のサイトなんで英語で検索してますよん
で、見つけたのがこの画像ですね。
なみンゴ
いい感じに落ち込んでる女性がいるし、背景のピンクがかった赤も素敵なのでこれに決定
adobeのソフト「イラストレーター」でデザインしていきます
アイキャッチとかバナーとか、無料ソフトだったり他に便利なソフトやツールはたくさんあると思うんですけどね。
私は扱いに慣れているadobeのソフトillustrator（イラストレーター）を使用してデザインをしていきます。
なみンゴ
ここから面白くなるゼェえええええ！
写真と文字をとりあえず用意
※黒の線から内側部分が実際の画像になる部分です。
先ほどダウンロードした画像と文字を配置します。
写真は左右を反転させて使用することにしました。
文字に関してはタイトルをそのまま入れるのではなく、パッと見た時に目に留まるような表現を考えます。
記事のタイトルはどっちかというと検索流入を狙ってキーワードを入れているところもあるので…
写真をトリミング
ちょっとわかりづらくて申し訳ないのですが、写真に写っている女の人の位置をずらしつつ、拡大させています。
私の場合は、写真は背景として使用するのではなく、モチーフとして使用することが多いです。
こちらの女性もモチーフとして使用するので、文字とは被らない位置に配置させます。
先ほど描いたイラストを配置、文字にも強弱をつける
クリップスタジオというソフトでペンタブを使用して描いたイラストを読み込んで配置させます。
また、文字は強弱をつける。
なみンゴ
デザイナー風に言うと「ジャンプ率を高めた」ですかね
Before
After
「社会人」「金髪」「リスキー」が大きくなっているのに対し、「で」「は」は小さくなってますよね。
こうすることでインパクトを出したり、訴求したい内容が目に留まりやすいようにできます。
なみンゴ
文字間の調整も行うんですけど、なみンゴはこの辺りはてきとーにささっと終わらせちゃいます！詰めが甘いので！
文字の扱いは本当に大事で、プロとアマの差はこの文字の扱いにでるって言われてたりします。
なみンゴ
文字の話になると避けて通れないのがタイポグラフィーですが今回はもちろん避けて通ります
イラストとタイトル文字の調整
イラストとタイトル文字の調整を行い、全体的なバランスをここだ！という場所に持っていきます。
「経験談」という文字も補足として入れました。
装飾を追加、整えて完成
なみンゴ
なんか色々追加して調整しました
旦那ンゴ
説明が雑だなぁ、おい！
完成
そして完成したアイキャッチ画像がこちらです！
Before
After
なみンゴ
前は画像1枚貼ってただけだったので、これでアイがキャッチされる画像ができました！
元画像と比較して見ても面白いですね。
元画像
完成したアイキャッチ
実際の記事はこちらで読んでみてくださいね！「Webデザイナーだからって金髪にしてみたけど後悔した話」
本当は写真の調整をphotoshop（フォトショップ）でしたりするのですが、完成度の高い素材サイトの写真を使用することでその工程を省くことができています。
なみンゴ
自分で撮影した写真を使用する場合は間違いなくフォトショップでの調整が必要になりますね、だいたい汚いし暗いから
ちなみにこんなアイキャッチを作ってきました。
なみンゴ
ね？写真って大事でしょ
ちょっとデザインが決まらんわーみたいな時は写真がまずってるのかもしれないので、変えてみるといいかもしれません。
なみンゴ
あと大事なのはフォントな！フォントでだいぶ雰囲気変わる！
なみンゴは「新ゴ」というモリサワフォントを使用してます。
なみンゴ
なぜかって？そりゃ好きだからだね！
新ゴはウエイト（太さ）が豊富なのも好きな理由の一つです。
ウエイトを細くすればおしゃれで都会的に、太くすればインパクトを与えたり勢いを出せたりするのでウエイトが充実しているフォントって重宝しちゃいます。
まとめ
なみンゴはクリップスタジオとイラストレーターを使用してアイキャッチを作っていますが、中にはクリップスタジオだけで完結している方、イラストレーターだけで完結している方など様々だと思います。
なんならフォトショップはcanvaなど違うソフトやアプリを使用して作っている方もいらっしゃるかもしれませんね。
なみンゴ
なんにせよ大事なのはあんまり時間や労力をかけすぎないで作ることだと思います
気合が入るのはいいですが、アイキャッチを作るのが億劫になって記事作成が進まないなんてことになったらもったいないですからね。ほどほどがいいかもしれません。
アイキャッチを自作すると、よりブログへの愛着が湧きますから、なみンゴとしては毎回作ることをオススメしますけどね！
終わり！
[…] いずれは晴れる 2 users【プロのメイキング】アイキャッチやバナーの作り方｜いずれは晴れるhttps://hareru.site/making/ […]