タイトル通りなのですが、アイキャッチ画像をデザインするワークショップをWordBench奈良におじゃまして開催してきました。
きっかけは、WordBench奈良のFacebookグループで、デザイン関係をやりたいという話が上がっていて、それに登壇させてもらえないか？と打診したのがきっかけです。
WordBenchはWordPressが好きな人が集まるコミュニティで、WordPressに関する物事を勉強したり、話しあったり、何かを作ったりするんですが、WordPressでテーマを作るにしても、ブログを書くにしてもデザインは切っても切れない関係ないので、こうやって話題に上がってきます。
今回は時間が2時間という事だったので、デザインの話をするでも十分時間的にはちょうどいいんですが、前でしゃべって話を聞いてもらうだけより、手を動かしてもらったほうが確実に身につくし、何より楽しいと思うのでワークショップという形を取らせていただきました。
セッションの内容
前置きが長くなりましたが、実際のセッションの内容を説明すると、下記の流れで行いました。
- スライドを使ってアイキャッチのデザインと、アイキャッチを表示する方法を説明
- ワークショップ
- 発表
当日話したことと、話しきれなかったことをまとめて記事にしますので、ご参加いただいた方も復習の意味も込めて読んでいただければ、より理解が深まるかと思います。
スライドを使った「アイキャッチ画像を作るときに考えること」の話
今回、事前に用意したこのスライドを使い、実際に何を考えてアイキャッチを作るのか？をお話しました。
話の内容を大きく分けると、以下の通りです。
- 広告用バナーとアイキャッチの持っている目的の違いと、それぞれの特徴
- アイキャッチを作る上で考える事
- レイアウトで考える事
- 配色で考えること
- 一手間くわえる
広告用バナーとアイキャッチの持っている目的の違いと、それぞれの特徴
バナーに求められるのは、見たユーザーの関心をひきつけ、バナーをクリックしてもらうことです。
特に広告バナーは、ABテストやトラフィックの計測などといった、コンバージョンをあげるための施策を多数行うほどで、バナー一枚でいかにユーザーの意識を引き付けてクリックさせられるか？が考えられています。
一方、ブログのアイキャッチですが、こちらもユーザーの興味を引き付ける事は同じですが、広告バナーのようにユーザーの意識をそこまでひっぱらなくても、興味を持って訪問しているサイトの記事に対して、よりわかりやすく誘導してあげる事が目的ですので、そこまで強調した施策は必要ありません。むしろ、広告バナーと同様の施策を行うと、アイキャッチの与えるイメージが強くなりすぎてしまい、ユーザーを疲れさせてしまいます。
例えば、他の広告より目立たせるためにアニメーションを入れるとしましょう。
バナー広告では効果的に目立つため、ユーザーの視線を効果的に奪うことが出来ます。しかし、読みたい記事を探しているユーザーからすれば、そこまでしていまうと、押し付け感を強く感じてしまうので、かえって不快感を与えてしまいます。
それでは、アイキャッチとしては効果的ではありません。
大切なのは、その記事に何が書かれているか？をイメージを使って視覚的に伝えることです。
アイキャッチを作る上で考える事
大切なことを３つに絞りました。
- 記事の内容に関連性のあるものを入れる
- 記事の中で一番伝えたいものを入れる
- ターゲットを選定する
前述のとおりですが、アイキャッチの目的は、文章だけでは想像しづらい物事を、イメージを使って視覚的に伝えることです。
記事のタイトルや本文の冒頭部分を読むだけではイメージしづらいものが多々有ります。それを伝えるために存在させるので、やはりアイキャッチには、記事に関連したもので表現したほうが、ユーザーの興味に訴えかけられます。
特に、筆者が一番伝えたい事を先に見せることで、ユーザーは欲しいと思う記事とマッチしているものを見つけやすくなります。
あとは筆者の伝えたいことを、読んで欲しいターゲットに合わせたデザインを考えましょう。
レイアウトで考える事
バナーは限られたスペースに対して必要な情報を盛り込まないといけないので、とにかく情報の整理が需要になります。詰め込む情報量が多くなればなるほど、それを文章で入れるには難しくなります。詰め込み過ぎると仰々しくなってしまい、わかりづらいという印象を与えてしまうので、文章をイラストや写真に置き換えることで、より視覚的に訴えられるようにしていきます。
レイアウトのときに大事なのは、何をどこに置くか？どうすれば見やすくなるか？を考えることです。
特に視線誘導を考えずに、視線がちらつくようなレイアウトを作ってしまうと、ユーザーは見づらいと感じてしまってストレスになりますので、そうならないように上手くバランスを考える事が大切です。
配色で考えること
色の組み合わせは非常に多く、いざ作る！となると凄く悩みます。
これは、選択肢が多すぎるのと選ぶのが難しくなるという問題なので、配色の際は何らかのルールを儲けて色を選ぶようにしましょう。
例えば、今回のワークショップ用に作ったアイキャッチ画像は、東大寺をテーマにバナーを作成しました。
このバナーでは、選定した写真から茶色を選択し、それに合う色として赤茶色、濃い赤、それに対して補色の緑という形で選択しています。
色を多く使い過ぎるとバランスをとるのが難しくなってきますので、使う色をなるべく抑えるようにし、３〜４色ぐらいで配色すると綺麗に整えやすくなります。
色を選択するにはメインカラー、ベースカラー、サブカラー、アクセントカラーをどうするか？を考えていくと選びやすいので、色相環などを使うと、色が決めやすくなります。色相環を使う方法は、過去記事の 配色を考えやすくするための様々なルール を参照していただければと思います。
また、文字の背景に文字と同系の背景色を敷いたりすると、視認性・可読性が悪くなってしまうので、コントラストには注意が必要です。
一手間くわえる
配色とレイアウトをしっかり考えてデザインしていくことでバナーは完成に近づいていきますが、そこからさらに一手間加えていく事でクオリティが上がることが多いので、まだ出来ることはないか？を考えていくことが大事です。
今回のサンプルでは、写真のコントラストや色合いがまだ甘いと感じたので、コントラストをあげ、Photoshopのトーンカーブを使って全体のトーンを合わせました。
最後に
デザインは見る人が見やすいか？ を考えるところにあるので、自分のこうしたい、ああしたいよりもまず、 これをして見づらくならないか？ を考えながら進めると良くなります。
それを踏まえた上で、どういう装飾が良いのか？配色はどうするのか？レイアウトは？を突き詰めていくことが、バナー画像に限らず、デザインをする上で大切なことだと言えます。
今回ご参加くださった方々、ありがとうございました。
お役に立てたらお願いします🙇
Comments