プロがアイキャッチを添削！３つの実例を紹介
こんにちはあるです！
今回はツイッターの皆さんに協力してもらい実際に使用している
「サムネイル」「アイキャッチ」を添削しながらデザインのポイントを紹介していきます！
サムネイルつくったけどなぜか綺麗にならない・・・
どうしたら上手く作れるの？
こんな悩みがある方はこのポイントを押さえておけば、あなたのサムネイルもデザインが一つアップするかもですよ！
今回は添削なので「元のイメージ」を残しつつデザインをしていきたいと思います！
case.1
@lupaton4649さんの場合
まずはオリジナルを見ていきましょう！
今回はこのアイキャッチを添削していきたいと思います！
最初に完成デザインを見ていきます！
読みやすさ・華やかさ・目視で伝わりやすくを念頭に添削させてもらいました！
ではこれを段階的に説明していきます！
まずは色味を変更します！
ここでのポイントは「文字を白抜きに」です。
白など明るい色以外に黒を乗せてしまうと全体的に暗いイメージになってしまいます。
黒が強いので周りの色が引っ張られてしまうんですよね。
なので背景を少し濃くしてもいいので白い文字が見えるように調整しています。
こちらにも少し色に関して書いているので参考にしてみてください！
次に文字のバランスを整えていきます。
最初のうちはオーソドックスなセンター揃えをお勧めします！
実は文字を一つ一つずらしてバランスを撮るのは結構難しくてプロでもできない人がたまにいるくらいです。
今回は文字を整えると同時に、ブログ記事の内容を補足する文字も追加しています。
「ダイエット効果も抜群！」と迷ったんですが今回はこちらで。。。
次は書体を変更していきます！
勝手なイメージなのですがバレエが入っているので少しスッキリしたイメージがいいのかなと思い明兆にしました。
明兆ってなに？というかたはこちらをご覧ください！
文字のバランスが整ったので右側に移ります！
バレトンってなんだろう？という目の引き方もありますが今回はぱっと見でわかるような工夫をしています。
「＋」を足すだけでぐっとわかりやすくなりますね！
なんとなくバレトンってこういうものなんだ！というのが分かれば成功です！
最後に色味を足して楽しそうなイメージを足していきます！
この模様は「丸」だけでつくっているのでCanvaでも作れちゃいますね！
Canvaについてもこちらで書いているので見てみてください！
では最後にビフォーアフターをどうぞ！
視認性もあがり、デザイン性も上がっていますね！
Case.2
次は@donguriweb どんぐり所長＠建築ブロガー/米国ETFさんです！
正直なところデザインセンスがあり添削もいらないんじゃないかなというレベルですが
やっていきます！
このアイキャッチのブログは↑から見れます！
まずは元のデザイン
もう完成でもいいかなという完成度です！
ではこれを添削していきたいと思います！
ではまず完成デザインから見ていきましょう！
デザインに意味や流れを追加し、さらに目立たせたいところや全体の色味を調整しています！
まずは写真のトリミングを変更していきます！
ぱっと見上手にトリミングされているんですが、タイトルの余白が均等になるように
もう少しだけトリミングをします。
写真の上手な使い方はこちら！
次にタイトルを入れていきます！
買ってはいけない→投資信託の流れをより強めるために吹き出しを使用しました。
また、デザインが大味になってしまうので英語表記も入れています！
ここでのポイントですが、文字を白抜きにする際に細すぎるフォントだと少し遠くから見ると見えなくなってしまうので太すぎず、細すぎない太さにしましょう！
次に「4選」を入れていきます。ベースデザインをそのまま周到し、「４」を大きく配置します！
文字のだんだんが気になるので、線を二本入れていきます！
これで文字が安定しました！
最後にどんぐり所長さんの「どんぐり」と「葉っぱ」を散らしてバランスを整えてあげれば完成です！
最後にビフォーアフターをどうぞ！
気づいた方もいるかと思いますが今回使用いた色味は全て写真からとっています！
なので全体的にまとまった色味になっています。色味もパキッとして見やすくなっています！
case.3
@bonjin_yusha アダムとイブ@凡人勇者さん！
ではベースのデザインを見ていきます！
これを添削していきたいと思います！こちらのデザインは少しアイテムが多くごちゃっとして見づらいイメージがあるので削っていく形で進めていこうと思います！
まずは完成デザインから！
可読性に気をつけてスッキリ纏めています！
では早速やっていきます！
まず初めに内容を精査します！
タイトルは長くてもいいのですが、アイキャッチに使う場合はできるだけで一目でわかるように精査していきます。
このタイトルの重要なところは「クリック率があがる」というワードが重要と感じたのでそこをさらに簡単に「クリック率UP!」に変更しました。また、「方法」もとっています。
次は優先順位をつけて文字の大小や太さを決定していきます。
Twitterのアイコンは皆さん認知があるので小さくてもしっかり認知されます。
今回の重要なワード「クリック率UP！」が目立つようにセンター揃えでしっかり揃えています。
先ほども書きましたが、慣れないうちはセンター揃えや右揃えがおすすめです！
ここでベースデザインにあった黒板を入れていきます！
今回はクオリティUPを考えて写真の黒板を持ってきています。
ここでのポイントは黒い色の上には明るい文字を持ってくる！です。
ベースデザインは白い半透明のを引いていますが色のコントラストがあまりなく視認性が薄れているので今回は白と薄い黄色で抜いています！
写真はいつものPIXABAYから持ってきています！
最後にベースデザインにもあったブログカードのスクショをいれてお終いです！
ではビフォーアフターを見てみましょう！
視認性もあがり、デザイン性も上がっていますね！
内容も使っているものも同じなんですが、色味や伝えたい優先順位などでデザインはガラッと変わります。
さいごに
今回ご協力いただいたみなさんありがとうございました！
みなさんもこのポイントを押さえてよいアイキャッチをデザインしてください！
ではでは良いデザインライフを！
この記事はARU氏の運営していた「ARULOG」より2021年8月に移管された記事です。
ARU
デザイナー歴11年
ブロガーに寄り添うプロデザイナー
Kindleでブロガーデザイン本発売中
フォロワーが伸びるヘッダーをココナラで販売中
twitterでデザインのヒントを発信 ＠awdesign6
推奨デザインツール
当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。
コメント