飽き性な男のムダ話

飽き性な男のムダ話

飽き性な男のムダ話

日常お返事スタンプ

デザイン・Illustrator

2020/06/15

【Illustrator】イラレで簡単!色々な記事で使えるオリジナルアイキャッチの作り方

こんにちは~Taku(@takumuda_1093)です。
今回はブログのオリジナリティを上げるための方法をご紹介します。

早速だけど、「アイキャッチ画像」ってブログデザインで重要な要素になると思わない?
Taku
Taku
リツキ
リツキ
あいきゃっち?なにそれ〜?
アイキャッチ画像は以下の内容のことだよ!
Taku
Taku
  1. アイキャッチ画像とは、アイ(目)をキャッチ(捕らえる)する画像のことをいいます。
  2. 一目で記事の内容がイメージできるため、集客の重要な要素になります。
リツキ
リツキ
あ〜よくサイトで見る記事のイメージ画像のことか〜!アイキャッチに目を引かれてページを見ることもあるから、確かに重要だね〜!
だよね!今回はそのアイキャッチ画像を簡単かつ汎用的に作る方法を紹介していくよ!
Taku
Taku

極力フリー画像を使わず自分で作ろう

よくブログの記事を見ていると、フリー画像を使用したアイキャッチを多く見かけます。
カッコイイものから可愛いものまで、魅力的な画像が沢山あるので、ついつい使いがちです。
もちろんフリーなので、著作権を侵害しているわけでもなく、規約さえ守れば使用しても全く問題はないです。

しかし、同じフリー画像を使用している人も多く、どうしてもオリジナリティに欠けてしまいます。
はじめから自分でアイキャッチ画像を作ることによって、オリジナリティが出るため、ブログ集客にも良い影響が出せます。

 

せっかく、面白い内容の記事でも、アイキャッチが他サイトと同じものだと、それだけでイメージダウンすることもあるよ…
Taku
Taku
リツキ
リツキ
結構アイキャッチ画像も見るからね〜。極力自力で作っていきたいね〜!

時間がないし、作るのも大変ってときは

実際、アイキャッチ画像を1から作ろうと思っても、作業が大変で時間がかかるかと思います。
背景用の写真を撮ったり、イラストを描くのはとにかく手間がかかります。
特に、時間に余裕ががない人にはかなりきついです。
記事も頻繁に更新しないと集客に影響してしまう中、アイキャッチも初めから作るとなると、負担も大きいです。

自分も、平日は仕事が忙しく、なかなか作業時間を取ることができないんだよね…
Taku
Taku

そんな場合は、文字だけでアイキャッチ画像を作ってみましょう。
文字と簡単な装飾だけでも、素敵なアイキャッチ画像は作れます。

今回は数分ですぐにできるアイキャッチデザインを2つ紹介します。
どんな内容の記事でも使える、汎用性のあるシンプルなデザインです。
デザインが苦手という方でも、Illustratorさえあれば簡単に作ることができるので、ぜひ作ってみて下さい。

アイキャッチデザインその1「重ね技」

①長方形を作る

まず、サイトのアイキャッチサイズに合わせたアートボードを作成します。
次に[長方形ツール]で任意の大きさの長方形を2つ作成します。
このとき、2つの色を作成してください。
長方形が2つできたら、不透明度を70%にしてください。

後で重ねて混色するから、事前に不透明度を下げておこう!
Taku
Taku

②直角三角形に変える

[ダイレクト選択ツール(白の矢印)]で右下の角を選択して、キーボードの[delete(デリート)]で削除します。

すると以下のような直角三角形ができます。

いちいちペンツールで直角三角形を作らなくても簡単に作れるよ!覚えておこう!
Taku
Taku

③四方の角に配置

作成した直角三角形を複製し、四方の角に並べます。

図形の向きを変えるときは、[オブジェクト]→[変形]→[リフレクト]で行います。

④右上&左下にも配置

③と同様、図形の向きを変えながら、右上と左下にも直角三角形を配置します。

この時、重ね順が後ろの方が綺麗だったので、[右クリック]→[重ね順]→[最背面]で背面に移動させています。

⑤文字を配置する

まずは適当にフォントサイズを変えて、記事のタイトルをベタ打ちしましょう。

配置ができたら文字に「縁取り」を加えます。やり方は以下の通りです。
[ウィンドウ]→[アピアランス]で[アピアランスウィンドウ]を開きます。
右上の3本線をクリックし、[新規線を追加]で文字の周りを囲う線を追加します。
任意で線の太さを変更します。(ここでは10pxにしています。)

すると、塗りの上に線が被ってしまい、うまく縁取りができません。
なので、新規作成した線をドラッグしながら、塗りの下に移動させます。

これで、綺麗な縁取りができました。

[ウィンドウ]→[線]で線のウィンドウを開き、[角の形状]を[ラウンド接合]に変えると、縁取りの角が丸くなり、柔らかい印象を与えることができます。

⑥全体を整えて完成

最後に、全体を整えて完成です。
それぞれの文字の間隔も必ず詰めて下さい。文字の間隔については後ほど詳しく説明します。

リツキ
リツキ
おぉカラフルでいい感じのアイキャッチ画像ができたね〜!
うん!簡単にできるから、デザインが苦手な人でもすぐにできるよね!
Taku
Taku

アイキャッチデザインその2「斜線×2本技」

①斜線の背景を作る

まず、サイトのアイキャッチサイズに合わせたアートボードを作成し、同じサイズの図形を一つ作ります。
次に「スウォッチのパターン」を作るための模様を作成します。

作成した模様を[スウォッチ]に追加して、パターン化を行います。
アートボードに合わせて作成した図形の塗りに、[スウォッチ]で追加したパターンを反映させます。
次に、パターンだけを回転させて斜線を作ります。

スウォッチでパターンを作る方法は以下の記事で詳しく紹介しているよ!
Taku
Taku

②二本の横線を作る

アートボードの中心よりもやや下辺りに、[長方形ツール]で2本横線を作ります。
一本は細く、もう一本は太くして配置して下さい。

③上下・左上・右下にも装飾する

上下に細い横線を配置します。
次に「直角三角形」と「斜めの線」を左上と右下の角に配置します。

④文字を配置する

こちらも、先ほどのデザインと同様、文字をベタ打ちしてください。
ベタ打ちができたら、文字に「縁取り」を加えます。やり方は一つ目のデザインで書いてあるので、ここでは割愛します。

⑤全体を整えて完成

最後に見た目を調整したら完成です。
こちらも文字の間隔を必ず整えて下さい。

 

リツキ
リツキ
こっちのデザインはおしゃれな感じがするね〜!
そうだね!太さの違う2本の線を引くだけでもそれっぽくなるからおすすめ!
Taku
Taku

文字のデザインについて

ここからは文字配置のコツや注意点について書いていきます。

①文字の間隔は必ず詰めて揃えよう

1つ目のデザインの最後にも書いた通り、文字の間隔を揃えることはとても重要です。
文字はそれぞれ形や大きさが違います。なので、そのまま打った状態だと、余白がバラバラで不恰好に見えます。
特に、カタカナや、アルファベットは、形の差が大きいので、注意してください。
なので以下の操作で文字の間隔を変えていきます。

  1. Macの場合 option + 矢印キー(左右)
  2. Windowsの場合 alt+ 矢印キー(左右)

文字を変えるか変えないかだけで、見た目に大きく差が出ます。以下の画像を見れば一目瞭然だと思います。

リツキ
リツキ
へぇ〜。文字の間隔なんて気にしたことがなかったよ〜。
専門学生だった頃、担当の先生からいつも口すっぱく言われていたよ。
デザインをする上で文字の間隔はそれだけ重要ってことだよ!
Taku
Taku

②文字の幅もきっちり揃えよう

複数の列で文字を組む時、文字数によって横幅にばらつきが出ることがあります。
横幅が揃っておらず、ガタガタと段差があると、見栄えが悪くなります。
なので、先ほどの文字詰めと同様の作業で、横幅はきっちり揃えていきましょう。

リツキ
リツキ
あ〜!確かに幅を揃えた方がまとまりがあるね〜!
横幅を綺麗に揃えれば、無駄な余白もできないから綺麗に見えるよ!
Taku
Taku



③文字に強弱をつけよう

文字に強弱をつけてメリハリを出すことも大切です。
重要な言葉だけを大きくすると、そこだけが強調されてキーワードをアピールできます。
ひらがなだけを小さくすると、バランスが良くなり、見栄えが良くなります。

リツキ
リツキ
文字だけでも細かい調整は必要なんだね〜!覚えておこ〜っと!
そうだね!時間がなくても、文字だけはしっかりデザインしていこう!
Taku
Taku

最後に

今回はデザインが苦手な人や、時間がない人でもすぐに作れるアイキャッチ画像のデザインを紹介しました。
紹介したデザインにアレンジを加えたり、他ブログのアイキャッチ画像を参考にしたりして、より良いものにしていってくださいね。

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


SEARCH

検索

SPONSOR LINK

スポンサーリンク

PROFILE

プロフィール

プロフィール画像

Taku

新米のWeb兼グラフィックデザイナー

専門学校でWebやグラフィックの技術を2年間学び、
印刷会社のデザイナーとして就職。

しかし、Web媒体のスキルアップを目指して
半年で転職。現在はWeb制作会社に勤務。

保育園児の頃からイラストを描くことが大好き。
オリジナルキャラクターのイラストを描いている。

ハマって得た「ムダ知識」も、
誰かの役に立つはずだと信じてブログを開設。

好きになると誰よりも詳しくなるタイプだが、
冷めるのも凄まじく早いのが難点。