ブログのアイキャッチ画像の作り方【イラストレーターで時短&簡単】

イラレで簡単ブログのアイキャッチの作り方

Adobeの(イラストレーター)で簡単に作るアイキャッチ画像の制作手順を紹介します。

実際に当ブログで公開しているアイキャッチを5つピックアップして、作り方のプロセスをまとめてみました。

デザインのポイントやおすすめ素材も紹介しますので、イラレを使わない方もぜひ参考にしてみてください。

つきみ

素材をどう変化させてアイキャッチが出来あがるのか?工程を分かりやすく解説します。

ワードプレスのテーマはを使用しています。

目次

アイキャッチ画像の作成ツール【Adobe Illutrator】

イラレで作るアイキャッチ

当ブログのアイキャッチや挿絵の画像は、Adobeの(イラストレーター:通称イラレ)で作成しています。

Illustrator(イラストレーター)とは

イラストやロゴ、図形などを自由自在に作成&編集できるグラフィックデザインツールです。

イラレは自由度が高く、なんでも作れる万能ツール!私はAdobe製品を長年使っているため、アイキャッチだけでなくトップページのデザインでもフル活用しています。

詳しくはサイト型トップページの作り方を合わせてご覧ください↓

\デザイン作成におすすめ/

Illutratorの他に、PhotoshopやPremiere Proなども活用したい場合はコンプリートプランがおすすめです。


アイキャッチ作成の手順【実践編】

実際に公開しているアイキャッチの作成手順を解説します。

つきみ

今回紹介するアイキャッチで使用しているフリー素材は「ライナストック」さんです。後ほど、おすすめ素材についても紹介します。

まず始めにベース作り

アイキャッチ背景ベース

ある程度ベースのテンプレートを決めておくことで、作業時間を短縮&統一感を出すことができます。私はジャンルごとに背景ベースを作って、使い分けるようにしています。

流体シェイプはペンツールで作成

ペンツール

イラレ初心者の方が苦手とするペンツールですが、自転車を漕ぐ感覚で慣れていくと自在に形を描けるようになります。

つきみ

以前(ブログ型時代)は丸型の背景にしていましたが、あまりにもよく見かけるのでオリジナル感を出すことにしました。

では早速、5つのアイキャッチの作成プロセスを順番に解説していきます!

【アイキャッチ作り①】グッズ散財やめた記事

グッズを買わなくなった理由

グッズ厨を卒業した理由を綴った記事です。失ったお金に途方に暮れる感を出してみました。

STEP
だらだら女性のイラストを加工
女性イラストを加工
ライナストック「だらだらだらだら 01」使用

ブログのイメージにあわせてシンプルな色数&色調に変更しました。

STEP
札束のイラストを加工
お札のイラスト加工
ライナストック「お札・札束」使用

上のお札だけを使用します。内側の線を取って色を変更。

くっついたお札の切り分け方

お札の切り分け方

ダイレクト選択ツールで下のお札を選択→削除します。

STEP
お札をばらまいてタイトルを入れたら完成!
グッズを買わなくなった理由

たったこれだけの加工ですが、お金使いすぎてヤバイ感を出すことができました。

【アイキャッチ作り②】思い出の物の手放し方の記事

思い出の物の手放し方

思い出の物を連想させるイラストを使って、手放す切なさと感謝の気持ちを表現しました。

STEP
女子高生のイラストを加工
女子高生のイラスト加工
ライナストック「第二ボタンをもらう」使用

元のイラストは男の子から第二ボタンをもらうイラストですが、今回は女の子だけを使用→淡い色に変更しました。

つきみ

こんな時代もあったなぁ・・・(遠い目)

STEP
桜の花びらを散らす
桜を散らす
ライナストック「外で宴」使用

ボタンではなく桜の花びらを手にとるイメージにしたかったので、別の素材を組み合わせて周りに散らします。

STEP
女の子のイラストを写真化
女の子のイラストを写真に入れる
ライナストック「ピカピカの1年生 01」使用

女の子をセピア調の色に変更して、写真の中におさめます。

クリッピングマスクを使用

クリッピングマスク

長方形ツールで作った写真の内側の枠と女の子を選択して、クリッピングマスクを作成します。

削除したわけではなく隠れているだけなので、後から再編集が可能です。

STEP
カメラを作成
カメラを作成

カメラの作り方はとても簡単。

長方形ツール楕円形ツールで四角や丸の形を作り、組み合わせるだけで完成。

STEP
レイアウトしてタイトルを入れたら完成!
思い出の物の手放し方

素材が多くても余白を残すことで落ち着いた雰囲気に仕上がりました。

「第二ボタンをもらう」→「花びらを手にとる」、視点を切り替えた素材選びがポイント。表現の幅が広がります。

【アイキャッチ作り③】アイナナ沼落ちの記事

アイナナ沼落ちブログ

アイナナ(アイドリッシュセブン)沼に転がり落ちた記事です。アイナナ感を出すためにこだわったのは背景!詳しく解説していきます。

STEP
女性を沼落ちさせる
沼にドボンさせる
ライナストック「サポーター 02」と「水たまりを蹴る子供」使用

女性と水たまりのイラストを組み合わせることで沼落ちぶりを表現しました。

別の素材を使う時は、線の幅を統一させるのがポイント。太さが異なると合成感が出てしまいます。

STEP
作品のタイトルっぽい背景を作る
サークル背景作り

アイナナ感を出すために、ゲームやアニメに出てくる背景画面を再現しました。アイナナマネージャー(ファン)なら分かってくれるはず…!

楕円形ツールで丸の形を作り、クリッピングマスクでアイキャッチサイズにおさめます。

ドットのパターンはスウォッチで作成

ドットの作り方

細かいこだわりですが、実際のタイトル画面に合わせてドットのパターンを重ねました。

正方形(色なし)と正円(白色)を作って、スウォッチパレットにドラッグ。水色の上に塗り色として適用します。

STEP
センターに配置してタイトルを入れたら完成!
アイナナ沼落ちブログ

\もう沼から抜け出せません/
そんな声が聞こえてきそうなアイキャッチになりました。

自分が作った型にとらわれすぎず、記事内容に合わせて臨機応変にデザインするのがおすすめです。

【アイキャッチ作り④】リンツ食べ比べした記事

リンツリンドール食べ比べレビュー

リンツのを全て割って食べ比べ!
記事を書くよりチョコを割るのに苦労した記事です。写真を入れてカラフルな印象に仕上げました。

STEP
もぐもぐ女性にチョコを食べてもらう
女性のイラストを加工
ライナストック「もぐもぐタイム(カーリング)」使用

線の色はチョコに合わせて茶色にしました。元のイラストはイチゴをもぐもぐしていたので、チョコに変更

イチゴを削除→楕円形ツールで作った丸型のチョコを最背面に配置。

STEP
チョコを切り抜いて文字やあしらいを入れる
チョコと文字を組み合わせる

切り抜いたチョコの上に文字を乗せ、3本線のあしらいを入れました。

つきみ

包丁で一つ一つ切った苦労の証、どうしてもアイキャッチに入れたかったんです…笑

STEP
漫画風のコマ割りを作る
漫画のコマ割り

チョコを割って食べる流れを分かりやすく表現するために、漫画風にアレンジしました。

長方形の上にアウトライン化した線を乗せて、パスファインダー→前面オブジェクトで型抜き。

STEP
画像とタイトルを入れたら完成!
リンツリンドール食べ比べレビュー

美味しさが伝われば成功!レビュー記事は写真があった方が分かりやすいですね。

イラスト素材の一部を変えることで、表現の幅が広がります。

\美味しくいただきました/

【アイキャッチ作り⑤】コナン応援上映楽しすぎた記事

コナン応援上映ゼロの執行人レポ

「ゼロの執行人」応援上映レポ。執行うちわやペンラ、コナン風のイラストがポイント!加工手順を解説します。

STEP
うちわのイラストを執行バージョンに加工
うちわイラストを加工
ライナストック「うちわ」使用

応援上映といえばうちわ。元のうちわの骨組みを取って単純化。文字を入れて執行バージョンにしました。

STEP
ペンライトを持った腕を作る
ペンライトを持たせる
ライナストック「ほこり取り」使用

ペンライトは長方形ツールペンツールで作成。

ほこり取りを持った女性の腕を切り離して、ペンライトを持たせます。

STEP
女性イラストにうちわとペンライトを合体
女性イラストを加工
ライナストック「いいね!ボタンを押す人 01」使用

女性の片腕を削除。うちわと、先ほどのペンライトを持った腕を組み合わせます。

世を狂わせた「安室の女」完成!

違和感が出ないよう、全ての線幅を揃えます。

STEP
コナンくんのメガネと蝶ネクタイを組み合わせる
メガネ加工
ライナストック「変装メガネ 01」使用

主役のコナンくんを忘れてはいけません。メガネは素材から拝借。蝶ネクタイはペンツールで作成しました。

STEP
映画チックな背景作成
映画背景作成

長方形ツールを複数組み合わせて映画フレームを作成。ゴールまであと少し!

STEP
タイトルを入れたら完成!
コナン応援上映ゼロの執行人レポ

コナンくん要素も安室さん要素も取り入れつつ、シンプルに仕上げました。応援上映の楽しさが伝われば幸いです。

アニメの版権絵やロゴの画像を使うことは禁止されています。必ずオリジナルで作るようにしましょう。

アイキャッチ作成におすすめのフリー素材サイト

ブログ作業が楽しくなる、おすすめの素材サイトを紹介します。

商用利用が可能なサイトですが、詳細は各リンク先の規約をご確認ください。

ライナストック

ライナストック
ライナストック

私が一番活用している素材サイトです。シンプルで使いやすく、ユーモア溢れるテイストがたまりません。

イラレで編集可能なEPSの他に、PNGもダウンロード可能。イラレで加工する場合は、線の太さも編集することができます。

イラストAC

イラストAC

検索すればなんでも出てくる、素材の豊富さが魅力のサイトです。毎日新しい素材が投稿されるため、季節や時事ネタの素材を使いたい時も便利!

つきみ

私はライナストックさんをメインに活用しつつ、イラストACの素材も組み合わせて使っています。

shigureni

shigureni
shigureni

女の子にありがちな場面を素朴で可愛く表現されていて、配色センスもツボ!見ているだけで楽しめるサイトです。

ソコスト

ソコスト
ソコスト

生活やビジネス、医療など、ブログに使いやすい素材が盛りだくさん。サイトのイメージを統一したい人におすすめの素材サイトです。

つきみ

他にも魅力的なサイトはたくさんあるので、自分のブログに合った素材を探して活用してみてください♪

アイキャッチを作る際に気をつけたいポイント

いくつか注意しておきたいポイントをまとめました。

  1. 無理な加工はしない
  2. 記事の内容に合わせる
  3. 余白を意識する
  4. 版権画像は使用しない
  5. パクらない
  • 無理な加工はしない

明らかにイラストがおかしくなってしまう改変や、素材のイメージを損なう加工は避けるのがベター。作者へのリスペクトを大事にしましょう。

  • 記事の内容に合わせる

イラストが可愛い!オシャレ!使ってみたい!
このような理由だけで素材を取り入れてしまうと、チグハグな印象になってしまいます。
読者ファーストを忘れずに。

  • 余白を意識する

見やすいデザインに余白は必要不可欠です。
脱・余白恐怖症!

  • 版権画像を使用しない

アニメや本、漫画の画像や、アーティスト写真の無断使用は禁止されています。

  • パクらない

参考にするのは良くてもパクリはNG。その差は何なのか?次の章でちょっとした実験をしてみました。

好きなアイキャッチ紹介&実験的に真似してみた

私が好きなサイトを紹介するとともに、試しにアイキャッチを真似したらどうなる?
ということを実験的にやってみました。

さらば、思うだけ

yokoさん(@_yoko51_

yokoさんアイキャッチ
さらば、思うだけ アイキャッチ画像

私がブログを始めた頃からずっと好きで訪れているサイトです。余白、文字のバランス、色味すべてが美しいyokoさんのオリジナルデザイン。

アイキャッチデザインの経緯もまとめられていて、ブログ関連の記事は大変お世話になりました。

\恐れ多くもアイキャッチ真似してみた/

yokoさんのアイキャッチ真似

オシャレ!応援上映レポがこんなに素敵でオシャレなアイキャッチになるなんて・・・フォントや素材は違うのに、真似するとyokoさん風のデザインになりました。

POINT OF VIEW

鰥夫さん(@yamowo_claude

鰥夫さんアイキャッチ
POINT OF VIEW アイキャッチ画像

なんだろうこのシンプルで面白いサイトは・・・PCで見るとマウスが目になっている!不思議&衝撃を受けたサイトデザイン。

鰥夫さんもライナストック愛用者ですが、私とは全く活用方法が異なります。

\恐れ多くもアイキャッチ真似してみた/

鰥夫さんのアイキャッチ真似

恐ろしくシュールで面白い仕上がりに!勝手にすみません。

しかしこれ、もはや完コピと言ってもいいでしょう。同じ素材で同じデザインにしたらこうなっちゃいますよね。

つきみ

お二方の素敵なアイキャッチ、真似できて楽しかったです!

今回作った画像はもちろん実際には使用しません。

デザインの丸パクリはNGです。思考や意図、工夫したプロセスなどを参考にする程度にして、オリジナリティを工夫していくことが大事。

鰥夫さんのブログでは、ライナストックを使ったサイトをアーカイブした特設コンテンツが公開されています↓

つきみ

当ブログも紹介していただきありがとうございます!

アイキャッチ作りは楽しい

紹介した5点(クリックすると各ページに飛びます)

苦労して立ち上げたブログ。サイトデザインも記事の更新も、楽しんで続けていきたいですね。

最後まで読んでいただきありがとうございました!

\イラレで楽しくアイキャッチ作り/

SWELLサイト型デザインの作り方を紹介しています↓

\よろしければポチッと応援お願いします/

つきみにまる。 - にほんブログ村
よかったらシェアしてね!
  • URLをコピーしました!
目次
閉じる