あなたのデザインがダサい7の理由 ダサくなる原因と改善するコツ

アイキャッチのデザインをおしゃれにしたいけど上手くいかない…

頑張って作ったデザインが何故かダサくなってしまう原因を具体例とともに解説します。

うさぎのアイコン画像うさぎ

なんかデザインがダサい…なぜなのか…?

ダサいデザインサンプル

よく見かけるCanvaなどの無料ソフトで作ったアイキャッチデザイン。

初心者がやりがちなダサいデザインのサンプル

上記のデザインがなぜダサいのかわかりますか?

原因がわからなくても大丈夫。この記事を見るだけで簡単にダサいデザインを回避できるようになりますよ!

目次

デザインに余白がない

余白のデザイン(余白は必須)

デザインで最も重要なのは余白です。

余白を意識することでデザインの質が圧倒的に向上します。

窮屈かなと思ったらスペースを確保

余白デザイン

文字の周りの間隔を広げてやるだけですっきりしたデザインになります。

少しでも窮屈かな?って思ったらスペースを開けましょう。

  • 文字枠
  • ボタン
  • ふきだし

これらのようにくっきりと枠で囲まれているものはわかりやすいですね。

上下左右、しっかり余白をとりましょう。

文字にも余白を

文字の余白例(文字間)

文字を格納しているボックスだけでなく、文字の間隔も意識しましょう。

文字が詰まっていると視認性も落ち、窮屈な印象を与える事になります。

文章のリスト枠も余白が大事

文章の余白デザイン リストも余白が大事

余白は文章ベースのデザインにおいても非常に重要。

上記の参考図(左)のように窮屈な枠になっている人がいます。

  • 枠の余白
  • 文字間
  • 文字の行間

これらの余白をしっかりと確保するようにしましょう。

情報量が多すぎるデザイン

情報量の多いデザイン

よくある見にくくなっているアイキャッチで多いのが情報量が多く文字だらけになっているデザイン。

情報量が増えれば増えるほど読まれにくくなります。

文字が多すぎると読まれない

アイキャッチデザインは情報量を削る(比較)

上記の画像、左に目が行きましたよね。

書いてある内容は同じにも関わらず不要な文字が多すぎるんです。

文字数多くしたところでどうせ読まれないから削りましょう。

目線を捉える事を重視

アイキャッチは内容を理解してもらうというよりは『目を引く』事を目的にしています。

SNSにシェアされた際もアイキャッチの文字までは読まれず、パッと見のインパクトだけで見るかどうか瞬間的に判断されます。

内容を伝える事ではなく、目に留まる事を意識してアイキャッチデザインしてみてください。

SEO的にも文字は必須ではない

アイキャッチに無理に情報を詰め込む必要はありません。

アイキャッチに文字を詰め込んだところで読まれないので削ったほうが効果的。

詳しくは下記のアイキャッチ解説記事をご覧ください。

あわせて読みたい
ブログのアイキャッチ画像は必要?作成方法やSEO効果を解説
ブログのアイキャッチ画像は必要?作成方法やSEO効果を解説結論から言いますとブログにアイキャッチは必ずしも必須ではありません。しかしアイキャッチを利用することで大幅にアクセスが向上しますので、間接的なSEO効果が期待で...

過剰装飾がダサい

過剰装飾のダサいデザイン

過剰装飾は超ダサいのでやめましょう。

ダサくなりがちな装飾

よく使われる定番の便利装飾ですが注意が必要です。

  • 背景枠
  • 境界線
  • グラデーション
  • ドロップシャドウ

これらはさり気なく使いましょう。

装飾が過度になるとダサいデザインになりがちなので”目立たせたい箇所”だけピンポイントで少しだけ使うくらいにすると良いですよ!

デフォルトの装飾機能はダサい

グラフィックソフト使うといろいろな機能が付いているからついつい色々使いたくなっちゃいますよね。

でもそれ、変化が大きくて楽しいですがダサくなります。

  • 光沢
  • 3D化
  • 奥行き

こういったデフォルト機能は初心者には向きません。

ダサくなるので使うのやめましょう。

編集ソフトはフォトショかイラレ

フォトショとイラレでデザイン

アイキャッチ作成はどんなソフトでも可能ですが、無料ソフトに不満があるって場合はPhotoshopかIllustratorを使いましょう。

どっちが良いの?ってなるかもですが、どっち使ってもOK

  • 写真を多く使う:Photoshop
  • テキストを多く使う:Illustrator

単純にこんな感じで使い分けてもOK。ちなみに私は両方使ってます。

PhotoshopやIllustratorを安く買う方法もありますので参考にしてみてください。

色がダサい

ダサい色

色の選択や組み合わせは非常に重要です。

使うのを控えるべき色

使うべきでないダサい色

特にダサくなるのは下記の3つ

  • 原色
  • 蛍光色
  • カラフル

原色や蛍光色はひたすらダサくなります。

でもこのダサい色、デフォルトのカラーパレットに入っていたりするので使ってる人多いんですよね…要注意。

グラデーションは2色が使いやすい

シンプルグラデーション

同系色で濃さを変えるのが初心者向け。上記サンプルは左から右にかけて薄くなってます。

カラフルなグラデーションはダサさが際立つので迷ったらグラデーションは2色までにしておくのがオススメ。

グラデーションは便利ですがコテコテにならないように気をつけましょう。

カラーバランスがダサい

ダサい色の組み合わせ
うさぎのアイコン画像うさぎ

う…見るだけできつい…

こんな色使っちゃってる人は自分で色を選ぶのをやめましょう。

どれだけ良いデザインでも色味が悪ければすべて台無しになります。

プロ御用達のAdobe Colorを使えばダサい色や組み合わせになるのを簡単に防げます。

配色はAdobe Colorを使え(無料)

配色ツールはAdobe Colorを使おう

初心者が最適な配色でデザインするのは非常に困難なので色合わせツールを使いましょう。

一発でいい感じになります。

  • 補色
  • 類似色
  • トライアド
  • モノクロマティック

配色法則はいくつもありますが、Adobe Colorでは上記を含め9つのテーマから自由に最適なカラーバランスを作成することが可能です。

画像から色をピックアップしたりグラデーション化することも可能な神ツールなので初心者はこれを使って色を決めましょう!

あわせて読みたい
【無料】Adobe Colorで配色デザインはバッチリ!便利な使い方
【無料】Adobe Colorで配色デザインはバッチリ!便利な使い方配色の悩みはAdobe Colorを使えば一発で解決!配色デザインツールには何種類もありますが私が愛用しているのはAdobe Color。無料ながらも超使いやすくAdobeccとの連携も...

使う色を少なく

使う色は3色、または4色くらいに抑えましょう。

あまりに多くの色を使うと『強調』が機能しません。

色による強調は周りの色が主張していないからこそ有効になります。

文字の配置がダサい

文字の配置が悪い(整列

文字は揃えましょう。

  • 左右の幅
  • 上下の幅
  • 文字と文字の間

これらのバランスをとることによって不自然なデザインになるのを避けることが出来ます。

文字が揃っていないとダサくなる

文字が揃っていない

これは極端な例ですが、少しのズレが全体のバランスに影響してくることも多々あります。

中央揃えにするならしっかりと揃えましょう。

文字の揃えはどれでもOK

文字の揃えは下記の3つ

  • 左揃え
  • 右揃え
  • 中央揃え

アイキャッチなどのデザインにおいてはどれを利用してもOK

ただし、文章の場合は左揃えでないと凄く読みにくくなるので注意しましょう。

写真の使い方がダサい

写真の使い方がダサい

写真の使い方でよくあるNG例

  • 文字で写真が全然見えない
  • 写真の明度で視認性が落ちる
  • 写真の品質が悪い

この辺が特に多い印象です。

写真の上に文字やシェイプをかぶせる

ダサいアイキャッチ

イメージ写真を用意しているにも関わらず写真の上に文字をドーンとのせちゃってる人がいます。

…もうそれ、写真ある意味ないよね?

ホワイトスペース

写真を活かしつつ文字をのせましょう。

アイキャッチ用の写真を撮る際は文字を入れる事を考慮して撮影するといいですよ。

写真を加工してない

写真は奥が深く、加工する項目も多いです。

  • 色調
  • 明るさ
  • コントラスト
  • ホワイトバランス

中でもアイキャッチに使う場合に注意するのは明るさ。

写真の明るさ

明るい写真の上に明るい文字だと文字の視認性が下がります。

写真を加工するか、写真の明るさや色に合わせた文字色を選択するかしましょう。

写真の品質が悪い

写真そのものがダサい場合も多いです。

タイポグラフィではなく写真が目立つ構成の場合は写真が重要。

質の良い写真が欲しい場合はAdobe Stock等の高品質素材を利用しましょう。

あわせて読みたい
【商用利用OK】Adobe Stockとは?特徴と3大メリットを紹介
【商用利用OK】Adobe Stockとは?特徴と3大メリットを紹介AdobeCCを使っている人におすすめなAdobe Stock。どんなものなのか初心者にもわかりやすいようにレビューしていきます。【Adobe Stockとは?料金と無料体験について】Ad...

デザインがダサくなる原因まとめ

デザインがダサくなる7つの理由

ダサくなる原因は下記の7つ

  1. 余白が無い
  2. 情報量多すぎ
  3. 装飾がダサい
  4. 色味がダサい
  5. カラーバランスがダサい
  6. 文字の配置がダサい
  7. 写真の使い方がダサい

逆に言えばこれだけ注意しておけばあからさまにダサいデザインになるのを避けられます。

ダサくなる原因を取り除いておしゃれなデザインを目指しましょう!

初心者でも簡単におしゃれなデザインにする方法

今回ご紹介した注意点を避けながら簡単に取り入れられるアイディアを取り入れてみてください。

ダサくならないように視認性を上げるとそれだけでおしゃれなデザインになりますよ!

あわせて読みたい
【簡単】おしゃれなアイキャッチ画像を作成する7つのコツ
【簡単】おしゃれなアイキャッチ画像を作成する7つのコツブログやYouTubeに使うアイキャッチのデザインがうまくできないという初心者向けに簡単におしゃれに見える方法をご紹介。私がアイキャッチ画像の作成に使用しているのは...

デザインの効果を高める心理学

デザインにおいて重視すべき『広告効果』これを高めるために有効な心理テクがいくつもあります。

デザインの質が上がる心理学を利用する方法についてまとめましたのでこちらも合わせてご覧ください。

デザインするならAdobeccが最強

デザインソフトは多々ありますがどうせ学ぶならAdobe ccが一番。

PhotoshopやIllustratorが使えるというスキルは資産になりますよ。

今なら安く買う方法もありますので是非。

あわせて読みたい
【格安】Adobe CCを安く購入する方法。アカデミック版で最安!
【格安】Adobe CCを安く購入する方法。アカデミック版で最安!知らなきゃ確実に損な裏技。Adobe CCを安く買う方法をご紹介。Creative Cloudが72,336円→39,980円+オンライン講座付きで入手できちゃいます!お得すぎ。

コメント

コメント一覧 (4件)

  • アイキャッチをブログに設定するとはしがきれてしまうんですがどのようにデザインすればよいのでしょうか?使ってるのはcocoonです。よろしくお願いいたします。

    • アイキャッチの比率によってはブログのテンプレートやTwitterなどのSNSにシェアした際に自動でトリミングされてしまいます。

      例えばよく使われるSNSの比率は下記のようになっています。
      Twitterは2:1
      Facebookは1.91:1

      ブログに関してはテーマによって表示する比率が異なっています。
      cocoonに関してはわかりませんが、多くの場合16:9や1:1が利用されている事が多いですね。
      テンプレートの設定やphpをいじることで比率は変更可能ですが若干の知識が必要になります。

      アイキャッチの最適なサイズについては下記に詳しく書いてありますのでこの要領でアイキャッチの途切れない位置に文字がくるようにレイアウトしてみてください。
      https://321web.link/eyecatch-size/

  • とても勉強になりました!
    自分のサムネみてなんか違うなと思っていた原因がはっきりしました。

    この記事ブクマしてサムネの質上げていきたいと思います!
    ありがとうございました!

  • まさに私のサイトです笑
    特に余白、色、写真の上の文字をやらかしてました…、刺さりまくりです

    改善したいと思います。ありがとうございました!

コメントする

目次
閉じる