ブログを書くことも楽しいのですが、同じくらい楽しいのがアイキャッチ作りです。
デザインに関しては初心者なので手探り状態で進めています。
そのため、私のアイキャッチ画像を見て、他の人がどうゆう印象を抱くのかは疑問なところがあります。
しかし、まずは自分が納得のできるアイキャッチを作ることが大事だと考えます。
自分が納得できるものを作るべく、色々試行錯誤してきました。
まだまだ成長途中の私のアイキャッチ作りを助けてくれるアイテムは、無料デザインツールのCanvaと配色アイデア手帖です。
過去の記事でも一度紹介しています。
私同様、ブログもアイキャッチ作りも初心者の方には、どちらも使いやすいアイテムではないでしょうか。
この記事では、過去に作ったアイキャッチ画像の作成過程を紹介します。
また、初心者なりに気づいた点もお伝えします。
なにか参考になることがあると幸いです。
アイキャッチの製作過程
作り方を紹介するアイキャッチはこちらです。
勉強法がテーマの記事なので、賢そうな、落ち着いた雰囲気を出せるよう考えました。
1.背景の画像を決める
私はブログのアイキャッチ画像を作る際、サイズはCanvaのBlogバナー(560px × 315px)を選択しています。
これを選択すると、画面左側にCanvaのレイアウトという表示が最初から出てきます。
それを下にスクロールしていくと、フレーム画像が出てきます。
写真を背景として使う場合、写真のみをアイキャッチ画像にする場合は、赤線で囲ったものを選びます。
※追記
素材 ⇒ グリッドから選ぶこともできます。この方が早いです。
次に、背景にしたい写真を決めます。
このアイキャッチでは、「本」という単語を検索にかけ、出てきた写真の中から気に入った画像を選びました。
私は無料会員なので、無料の画像のみ使用可能です。
写真をクリックすると右のスペースに写真が表示されます。
その写真をクリックしながら少し動かすと、先にセットされていたフレームの中に写真が入っていき、下の画像のように表示されます。
2.ブログタイトルを導入する
写真の上に直接文字を入力してもいいのですが、背景の写真と文字の重なる場所によっては、文字が見えにくくなる可能性があります。
そのため、文字を入力する部分にプレートになるような図形を挿入します。
私がよく使うのは、シンプルな四角の図形(赤線の囲み)です。
これを２つ重ねています。
(下の画像はすでに色や透明度をいじっていますが、解説は後ほどします。)
図形の大きさは、文字を入力した後に調節しています。
文字を入力する土台ができたら、テキストをクリックし文字を入力します。
このアイキャッチで使用したフォントは、あおぞら明朝Heavyで、フォントサイズは24です。
文字だけだと少し寂しい印象がしたので、イラストを1つ挿入しました。
「勉強」と検索をかけて出てきた、本とスタンドライトのイラストを選びました。
3.配色を決める
ここまでできたら、あとは色を決めるだけです。
実は、配色をあれこれといじるのが一番楽しい瞬間です。
ここで登場するのが、「配色アイディア手帖」です。
この本は、各テーマごとに9色ずつのイメージカラーが紹介されています。
9色の中から配色を選べば、デザイン初心者でも素敵な配色が作れます。
このアイキャッチで選択したテーマは、本の中で62番目に紹介されている「こだわりの万年筆」です。
選んだ理由は、落ち着いた雰囲気がブログ記事のテーマに合っていると感じたことと、背景に選んだ写真の色にも合っていたからです。
「こだわりの万年筆」では、
①ダンディブラウン #4D3614
②イエローブラウン #B69B63
③プラチナホワイト #EDEAEC
④ラムウール #E8D6AE
⑤レッドブラウン #6D4845
⑥ロンドンフォグ #AEA5A0
⑦アンティークレッド #AC291D
⑧インクブルー #00426D
⑨ブルーグリーン #006F5F
この9色が紹介されています。
ここから使いたい色を選びます。
このアイキャッチでは、①～⑤を使用しました。
(色の後ろに書いたコードを入力するだけです。)
差し色になりそうな⑦～⑨は使用せず、似た系統の色で作成しました。
配色を変えると、アイキャッチのイメージはがらりと変わります。
いい例が本とライトスタンドのイラストの色です。
左右見比べるとだいぶ違いますよね。
配色アイディア手帖から色を選択することで、まとまった配色になり、おしゃれに見えます。
4.全体のバランスをチェック
右上に、配置(赤線の囲み)というボタンがあります。
これで、配置を前面、背面と変えることができます。
例えば、文字を文字後ろにある四角い図形の先に挿入した場合、文字が背面に位置してしまい、四角い図形に隠れてしまいます。
この配置をいじることで、文字を四角い図形の前に出すことができるようになります。
そして、配置の隣にあるボタンは透明度を変えることができます(黄色矢印)。
通常は透明度は100で設定されています。
透明度を低くしていくと、文字通り透明感が出て後ろの画像が透けて見えるようになります。
このアイキャッチでは、
以上が、アイキャッチ画像の製作過程です。
写真を背景にしたシンプルなものなので、写真やイラストさえ決まればスムーズに作ることができると思います。
今までに気づいたこと
タイトルは画像の中央がベスト
いろいろとアイキャッチ画像を作ってみて、一番気をつけるべきだと感じたのは、ブログタイトルを中央にもってくるということです。
ブログのトップページで記事一覧が表示されるときに、タイトルが中央にきていないと、文章が見切れてしまうことがあります。
ブログデザインの問題、アイキャッチのサイズの問題もあるかもしれませんが、私のブログのトップページは、アイキャッチ画像の端が切れてしまっています。
タイトルが中央に書かれているアイキャッチはいいのですが、タイトルを右寄せに書いてしまったアイキャッチは見切れてしまっています。
これだとアイキャッチを見ただけでどんな記事かが分かりづらくなります。
タイトルは中央に！
当たり前な感じもしますが、私は失敗しながら気づきました。
タイトル文字が目立つ配色を意識する
写真やイラストで記事のイメージを表現するのも大事ですが、タイトルが背景に埋もれないように配色を考える必要があります。
このアイキャッチで気をつけたことは、商品の写真もしっかり見せつつ、タイトルも目立つようにすることでした。
タイトル背景の四角の色を決めるのに苦戦しました。
最初は濃いめのピンク色や茶色で作ったのですが、しっくりこず。
結局桜の葉をイメージした緑色に落ち着きました。
全体が淡いイメージになったので、タイトルの文字がしっかり目立つようになりました。
背景の色の違いで雰囲気が変わる
私の場合、 アイキャッチを作っていると、背景が占める面積が一番大きくなることが多いです。
そのため、同じデザインでも背景の色によって印象はがらりと変わります。
左側は暗い色を、右側は明るい色を背景に設定しています。
上段に関しては水玉模様の使い方も変えているので、雰囲気がさらに違うと思います。
暗い色の背景も良いかなぁとも思いますが、私が最終的に選んだのはどちらも右側の画像です。
なんとなく明るい方が私自身も好みなのと、記事のイメージも明るい印象を持ってもらえそうだと判断したからです。
使う色によっても雰囲気は変わりますし、どこにどの色を使うかによっても雰囲気は変わります。
配色の奥は深くて面白いですね。
まだまだ勉強していく必要がありそうです。
最後に
アイキャッチ作りについて、現時点での私のやり方を書いてみました。
私自身まだまだ試行錯誤しているところで、私の考え方の記録的な意味もある内容です。
なので、役に立つかは分かりませんが、Canvaと配色アイディア手帖の魅力だけでも伝われば嬉しいです。
アイキャッチ作りが上達したら、また記事を書きたいと思います。
では、最後まで読んでくださって、ありがとうございました♪
アイキャッチ作りに役立つ本を紹介します。
配色アイデア手帖は色の組み合わせを選ぶのに便利です。
配色パターンがとにかく多いのと、イメージの参考になるロゴや絵がのっていて見やすいですよ。
Canvaの使い方を学ぶならこちらの本を。
基本的な使い方がのっているので、初心者には分かりやすいです。
また、独学でCanvaを使い始めた人も新たな発見ができるかもしれません。
