こんにちはあるです！
今回はツイッターの皆さんに協力してもらい実際に使用している
「サムネイル」「アイキャッチ」を添削しながらデザインのポイントを紹介していきます！
サムネイルつくったけどなぜか綺麗にならない・・・
どうしたら上手く作れるの？
こんな悩みがある方はこのポイントを押さえておけば、あなたのサムネイルもデザインが一つアップするかもですよ！
今回は添削なので「元のイメージ」を残しつつデザインをしていきたいと思います！
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
どんぐり所長のおすすめツール
どこでも、どんなデバイスでも順位チェック
ブログ記事の順位を確認していますか？どんなキーワードが上下しているのか知る事はブロガーでは必須と言えます。
ほとんどの方がダウンロード型の順位チェックツールを使用されていますが、私はコレ。「Nobilista」。クラウド型のチェックツールです。
クラウド型とは、ネット上にあるサーバーにデータが保存されている順位チェックツールです。従って、お家のパソコン以外でも情報にアクセスできちゃうんです。これが想像以上に快適で、一度体験すると戻れなくなっちゃう。詳しい記事を書いていますので是非読んでみてください。
実は私、Nobilistaの公式アンバサダーをさせて頂いています。使いだしたら超気に入ってしまって、気づいたらアンバサダーになっていました。そんな私が、おすすめする「Nobilista」。今なら7日間無料でお試しができます。クレジットカードなどの情報を入れなくても試せるので、ぜひあなたにも試してほしい。
＼場所を選ばない快適さを体験して／
Nobilista公式サイト
当サイト推奨 デザインツール
当サイトでは、ブログ初心者でも簡単・無料で美麗なデザインが作成できる、オンライン画像作成フォーム「Canva」を推奨しています。数万点の素材やフォントが用意されていて、選ぶだけで簡単にプロ並みのデザインを作成する事ができます。これから先、会社員の仕事でも使用する事になるかもしれないほど普及が広まっています。覚えるなら早い方がいいですよ！
当サイトのデザインは、SWELLで再現可能
私はSWELLを2年使用してきました。現在４つのサイトでSWELLを使用しています。
SWELLを使用する理由は、簡単・綺麗・速い。
実際このトップページも、SWELLの標準機能だけでデザイン。
お洒落なブログを作りたいあなたにピッタリのWordPressテーマです。
私が実際に使用して実感したSWELLの特徴は以下。
- 完全ブロックエディタ対応
- 直感で使える操作性
- 便利な専用ブロックを多数用意
- お洒落なトップページが簡単に作れる
- 最速レベルのページスピード
- 一度購入すれば複数サイトに何度でも使用可能
- ユーザーの利便性を考える熱意の運営者
- SWELLを紹介すればアフィリエイト報酬が貰える（購入者のみ参加可）
- 販売価格 ￥17,600（税込）
唯一の欠点は価格の高さ。しかしそれは、SWELLがハイクオリティだから。
そして、運営者がとびきりの対応をしてくれる必要経費。
SWELLにはアフィリエイトプログラムがあり、紹介すれば利益を得ることもできます。
よく、「アフィリエイトがあるから紹介しているんでしょ。」と言われますがこれは違います。
惚れ込んだWordPressテーマに、たまたまアフィリエイトがあっただけ。
あなたもSWELLを体験すれば、きっと紹介したくなります。
＼圧倒的な操作性を体験せよ／
あなたも今日からSWELLER！
お気軽にコメントください