アイキャッチのデザインをおしゃれにしたいけど上手くいかない…
頑張って作ったデザインが何故かダサくなってしまう原因を具体例とともに解説します。
うさぎなんかデザインがダサい…なぜなのか…？
ダサいデザインサンプル
よく見かけるCanvaなどの無料ソフトで作ったアイキャッチデザイン。
上記のデザインがなぜダサいのかわかりますか？
原因がわからなくても大丈夫。この記事を見るだけで簡単にダサいデザインを回避できるようになりますよ！
デザインに余白がない
デザインで最も重要なのは余白です。
余白を意識することでデザインの質が圧倒的に向上します。
窮屈かなと思ったらスペースを確保
文字の周りの間隔を広げてやるだけですっきりしたデザインになります。
少しでも窮屈かな？って思ったらスペースを開けましょう。
- 文字枠
- ボタン
- ふきだし
これらのようにくっきりと枠で囲まれているものはわかりやすいですね。
上下左右、しっかり余白をとりましょう。
文字にも余白を
文字を格納しているボックスだけでなく、文字の間隔も意識しましょう。
文字が詰まっていると視認性も落ち、窮屈な印象を与える事になります。
文章のリスト枠も余白が大事
余白は文章ベースのデザインにおいても非常に重要。
上記の参考図（左）のように窮屈な枠になっている人がいます。
- 枠の余白
- 文字間
- 文字の行間
これらの余白をしっかりと確保するようにしましょう。
情報量が多すぎるデザイン
よくある見にくくなっているアイキャッチで多いのが情報量が多く文字だらけになっているデザイン。
情報量が増えれば増えるほど読まれにくくなります。
文字が多すぎると読まれない
上記の画像、左に目が行きましたよね。
書いてある内容は同じにも関わらず不要な文字が多すぎるんです。
文字数多くしたところでどうせ読まれないから削りましょう。
目線を捉える事を重視
アイキャッチは内容を理解してもらうというよりは『目を引く』事を目的にしています。
SNSにシェアされた際もアイキャッチの文字までは読まれず、パッと見のインパクトだけで見るかどうか瞬間的に判断されます。
内容を伝える事ではなく、目に留まる事を意識してアイキャッチデザインしてみてください。
SEO的にも文字は必須ではない
アイキャッチに無理に情報を詰め込む必要はありません。
アイキャッチに文字を詰め込んだところで読まれないので削ったほうが効果的。
詳しくは下記のアイキャッチ解説記事をご覧ください。
過剰装飾がダサい
過剰装飾は超ダサいのでやめましょう。
ダサくなりがちな装飾
よく使われる定番の便利装飾ですが注意が必要です。
- 背景枠
- 境界線
- グラデーション
- ドロップシャドウ
これらはさり気なく使いましょう。
装飾が過度になるとダサいデザインになりがちなので”目立たせたい箇所”だけピンポイントで少しだけ使うくらいにすると良いですよ！
デフォルトの装飾機能はダサい
グラフィックソフト使うといろいろな機能が付いているからついつい色々使いたくなっちゃいますよね。
でもそれ、変化が大きくて楽しいですがダサくなります。
- 光沢
- 3D化
- 奥行き
こういったデフォルト機能は初心者には向きません。
ダサくなるので使うのやめましょう。
編集ソフトはフォトショかイラレ
アイキャッチ作成はどんなソフトでも可能ですが、無料ソフトに不満があるって場合はPhotoshopかIllustratorを使いましょう。
どっちが良いの？ってなるかもですが、どっち使ってもOK
- 写真を多く使う：Photoshop
- テキストを多く使う：Illustrator
単純にこんな感じで使い分けてもOK。ちなみに私は両方使ってます。
PhotoshopやIllustratorを安く買う方法もありますので参考にしてみてください。
色がダサい
色の選択や組み合わせは非常に重要です。
使うのを控えるべき色
特にダサくなるのは下記の3つ
- 原色
- 蛍光色
- カラフル
原色や蛍光色はひたすらダサくなります。
でもこのダサい色、デフォルトのカラーパレットに入っていたりするので使ってる人多いんですよね…要注意。
グラデーションは2色が使いやすい
同系色で濃さを変えるのが初心者向け。上記サンプルは左から右にかけて薄くなってます。
カラフルなグラデーションはダサさが際立つので迷ったらグラデーションは2色までにしておくのがオススメ。
グラデーションは便利ですがコテコテにならないように気をつけましょう。
カラーバランスがダサい
うさぎう…見るだけできつい…
こんな色使っちゃってる人は自分で色を選ぶのをやめましょう。
どれだけ良いデザインでも色味が悪ければすべて台無しになります。
プロ御用達のAdobe Colorを使えばダサい色や組み合わせになるのを簡単に防げます。
配色はAdobe Colorを使え（無料）
初心者が最適な配色でデザインするのは非常に困難なので色合わせツールを使いましょう。
一発でいい感じになります。
- 補色
- 類似色
- トライアド
- モノクロマティック
配色法則はいくつもありますが、Adobe Colorでは上記を含め9つのテーマから自由に最適なカラーバランスを作成することが可能です。
画像から色をピックアップしたりグラデーション化することも可能な神ツールなので初心者はこれを使って色を決めましょう！
使う色を少なく
使う色は3色、または4色くらいに抑えましょう。
あまりに多くの色を使うと『強調』が機能しません。
色による強調は周りの色が主張していないからこそ有効になります。
文字の配置がダサい
文字は揃えましょう。
- 左右の幅
- 上下の幅
- 文字と文字の間
これらのバランスをとることによって不自然なデザインになるのを避けることが出来ます。
文字が揃っていないとダサくなる
これは極端な例ですが、少しのズレが全体のバランスに影響してくることも多々あります。
中央揃えにするならしっかりと揃えましょう。
文字の揃えはどれでもOK
文字の揃えは下記の3つ
- 左揃え
- 右揃え
- 中央揃え
アイキャッチなどのデザインにおいてはどれを利用してもOK
ただし、文章の場合は左揃えでないと凄く読みにくくなるので注意しましょう。
写真の使い方がダサい
写真の使い方でよくあるNG例
- 文字で写真が全然見えない
- 写真の明度で視認性が落ちる
- 写真の品質が悪い
この辺が特に多い印象です。
写真の上に文字やシェイプをかぶせる
イメージ写真を用意しているにも関わらず写真の上に文字をドーンとのせちゃってる人がいます。
…もうそれ、写真ある意味ないよね？
写真を活かしつつ文字をのせましょう。
アイキャッチ用の写真を撮る際は文字を入れる事を考慮して撮影するといいですよ。
写真を加工してない
写真は奥が深く、加工する項目も多いです。
- 色調
- 明るさ
- コントラスト
- ホワイトバランス
中でもアイキャッチに使う場合に注意するのは明るさ。
明るい写真の上に明るい文字だと文字の視認性が下がります。
写真を加工するか、写真の明るさや色に合わせた文字色を選択するかしましょう。
写真の品質が悪い
写真そのものがダサい場合も多いです。
タイポグラフィではなく写真が目立つ構成の場合は写真が重要。
質の良い写真が欲しい場合はAdobe Stock等の高品質素材を利用しましょう。
デザインがダサくなる原因まとめ
ダサくなる原因は下記の7つ
- 余白が無い
- 情報量多すぎ
- 装飾がダサい
- 色味がダサい
- カラーバランスがダサい
- 文字の配置がダサい
- 写真の使い方がダサい
逆に言えばこれだけ注意しておけばあからさまにダサいデザインになるのを避けられます。
ダサくなる原因を取り除いておしゃれなデザインを目指しましょう！
初心者でも簡単におしゃれなデザインにする方法
今回ご紹介した注意点を避けながら簡単に取り入れられるアイディアを取り入れてみてください。
ダサくならないように視認性を上げるとそれだけでおしゃれなデザインになりますよ！
デザインの効果を高める心理学
デザインにおいて重視すべき『広告効果』これを高めるために有効な心理テクがいくつもあります。
デザインの質が上がる心理学を利用する方法についてまとめましたのでこちらも合わせてご覧ください。
デザインするならAdobeccが最強
デザインソフトは多々ありますがどうせ学ぶならAdobe ccが一番。
PhotoshopやIllustratorが使えるというスキルは資産になりますよ。
今なら安く買う方法もありますので是非。
アイキャッチをブログに設定するとはしがきれてしまうんですがどのようにデザインすればよいのでしょうか？使ってるのはcocoonです。よろしくお願いいたします。