ダサいアイキャッチ・デザインにならないためのポイント11選

・ アイキャッチがダサくなる
・デザインをする際の注意点を知りたい

アイキャッチなどのデザインをする際、なにも知識がない状態でデザインをすると、あまり見栄えの良くない、いわゆる「ダサい」デザインになりがちです。

いいデザインを作るためには、天性のセンスではなく知識が必要です。

ハリネ
ハリネ
「センスがない」と諦めたらダメ!

この記事ではブログにおけるアイキャッチ・図解などのデザインをする際の注意点を紹介しています。

正しいデザインの知識を身につければ、アイキャッチ以外にもサイトデザインなどにも活かすことができます。
あなたのブログのクオリティを高めるためにぜひ実践しましょう。

目次

原色を使わない【色を「ずらし」て使う】

赤や青などの原色を、他の色と混ぜたり、明度(明るい・暗い)を調整せずにそのまま使うと安っぽさが強くなります。

例えば、同じ赤でも淡くすればおしゃれさが、濃くすれば上品さを出すことができます。求めるデザインのイメージで調整しましょう。

基本困ったときは、全体的に淡くして、ポイントを濃くするとバランスの取れた色合いになります。

また文字色などは、ブログの本文中の色(赤字・マーカーなど)にも使うことができます。ブログのイメージにあった色を使用してみましょう。

色を使いすぎない【基本の3色に絞る】

デザインを作る際には色をが多すぎると、賑やかすぎる印象になってしまいます。
基本の色を三色くらいに抑えて、それぞれの比率を意識すると、まとまりのある印象に仕上がります。

ベース色:6割
メイン色:3割
アクセント色:1割

※クリックで拡大

 

アクセント色はベース・メイン色と違った印象の色を使用し、文字通り画像にアクセントを加える色になります。

この3色というのは厳密なものでありませんが、デザインを作る際に色の比率などを意識しながら作成すると、抽象的な感覚だけでなく、再現性のある綺麗な仕上がりを意識的にできるようになります。

イメージに合った色を使用する【色にはイメージがある】

※画像はクリックで拡大

色にはそれぞれ与える印象があります。例えば淡い色は柔らかな印象、濃い色を厳格、明るい色は軽く、暗い色は重いなどです。

色が与える印象の一例
赤:派手、辛い
ピンク:かわいい、甘い
茶色:落ち着き、苦み
黄色:明るい、酸っぱい
黒:上品、重い
白:シンプル、軽い

自身の記事に内容やテーマに合った色を使用することで、記事をイメージしやすくなり、記事に興味を持ってもらえる可能性が上昇します。
サイト全体の雰囲気にも影響するので色の選択は丁寧に行いましょう。

素材・配置

線を使いすぎない【余白を取る】

※画像はクリックで拡大

線を多用すると、全体としてごちゃごちゃとした、余裕のない印象に仕上がります。

線は最小限に抑え、

・背景画像で区切る
・余白を空けて区切る

などの工夫で区切りを作り、枠は最小限に抑えることですっきりとしたデザインを作ることができます。

綺麗な画像・イラストを使用する【画質の問題ではない】

※画像はクリックで拡大

 

アイキャッチなどに使う画像は、印象を大きく左右する重要な要素です。
できる限り綺麗な画像を使用するようにしましょう。

綺麗といっても、画質がいいとはではなく、見たときの印象が大事になります。
例えば上の2つの画像は、両方とも雨をイメージした画像になりますが、左の方がすっきりとしており、真ん中の水滴に目が行きやすくテーマ性を感じられる画像です。一方右の画像はごちゃごちゃしており、どこを見たらいいか分からない印象を受けます。

画像を探すおすすめのサイトは別の記事で紹介しています。
(参考:【商用フリー】無料素材サイトまとめ【画像・イラスト・フォント】

画像の主役を隠さない【避けて文字を配置する】

使っている写真などの画像に、メインとなる主役がいる場合、文字などで隠すことは厳禁です。
例えば下の写真では記事のメインとなる猫の画像せっかく使ってあるのに文字を上に被せてほとんど猫が見えなくなっています。

※画像はクリックで拡大

画像の主役は隠さずはっきり見えるようにすると、記事の内容に興味を持ってもらえる可能性が上がります。
この猫の写真は文字の位置をずらし、画像の足りない部分を背景で補うことで解決しています。

猫の画像

※画像はクリックで拡大

フォント

フォントにこだわる【書体で印象が変わる】

※画像はクリックで拡大

アイキャッチなどでフォントの書体は、アイキャッチ全体の印象を大きく左右します。
例えば真面目な内容なのに書体が軽薄な印象与えるものならば、その内容も疑われるかもしれませんし、一方で娯楽記事が硬すぎる印象を与えることもあるかもしれません。

または使い過ぎはNGですが、メインのタイトルとサブ文章で書体を変えるといった方法もあります。(例:メインタイトルは太字ゴシック、サブタイトルは細字丸ゴシックなど)

フォントを探すおすすめのサイトは別の記事で紹介しています。
(参考:【商用フリー】無料素材サイトまとめ【画像・イラスト・フォント】

文字を見やすくする【文字の後ろはごちゃごちゃしない】

斜め四角

※クリックで拡大

文字の背景が柄の入った模様などを置くと、文字が見にくくなる場合があります。
何が書いてあるかが分かりにくと、アイキャッチの目的である目をとめてもらうことが難しくなり、見栄え的にもあまりよくありません。

・文字を置く場所は画像の中でもシンプルな部分を使う
・図形などをで背景をつくって文字を見やすくする

などの文字を見やすくする工夫が必要です。

余白を付ける【ぎゅうぎゅうの文字はNG】

文字の周りに余白を取る

※画像はクリックで拡大

文字の周りに十分な余白がないと窮屈な印象を与えます。

特に枠などで文字を囲む場合、デザインに慣れていない方は、枠線にきっちり文字をくっつけがちです。
また行間・字間の間隔を調整するだけでも印象を大きく変わります。

余裕をもった配置を心がけましょう。

文字を伸ばさない【縦横比は固定】

※画像はクリックで拡大

文字を特定の場所に合わせたい場合、ついやってしまいがちなのが文字を縦や横に伸ばす加工です。
縦横を変えると文字は途端に違和感を感じるようになります。

特定の場所にフィットさせたい場合は、文字の縦横比は変えずに、

・文字全体のサイズを変える

・特定の文字(ひらがななど)を小さくする

などして調整しましょう。

文字を揃える

※画像はクリックで拡大

文字を左側、上側あるいは両側でそろえることによって統一感がでます。
逆にこれができてないと画像を見た方に揃っていない気持ち悪さを与えしまう可能性があります。

注意したいのは「中央揃え」は、文字数に差があるときなどは、見栄えが良くないときがあるので注意しましょう。

文字にしろ画像にしろ、どこかの基準を設けてそこに合わせるとすっきりして見えます。作るときは意識してみましょう。

センスは学習で改善できる

デザインにおける「センス」とは、天性のもの、いわゆる「才能」によるところが大きいと思われがちですが、実際のところ学習による影響が大きく関わってきます。

芸術家などを目指すのであれば話は別ですが、アイキャッチやブログデザインなどのデザインにおいては大事なのは「学ぶ」ことです。

この記事ではアイキャッチなどのデザインを行う際の注意点を紹介しました。これらを意識するだけで、なにも知らない状態で作っていたときより格段に見栄えのいいアイキャッチが作れるかと思います。

今までただ漠然と「なんかイマイチ、、、」だと思っていたことも、言葉で「ここがイマイチ」だと分かるようになれば、直す点が明確になるので修正する際にも大幅に時間の節約になります。

アイキャッチ作成にはCanvaがおすすめ

アイキャッチの作成には、ブラウザ上で起動するグラフィックツールCanvaをおすすめします。

Canvaは簡単にきれいなデザインを作るのに最適なツールです。

Canva Pro

(関連:【無料・有料】アイキャッチ作成ツールまとめ【お手軽・こだわり】

あわせて読みたい
【無料・有料】アイキャッチ作成ツールまとめ【お手軽・こだわり】 ・簡単におしゃれなアイキャッチを作りたい ・こだわりのあるアイキャッチが作りたい  ・オリジナルイラストでアイキャッチを作りたい アイキャッチ画像はタイトルと共...

またアイキャッチの作成には、色々なアイキャッチを見てみることも重要です。様々なアイキャッチを作ってみてお気に入りをパターンを見つけましょう。

(関連:アイキャッチ作成のアイデア13選【困ったときはコレ!】

あわせて読みたい
アイキャッチ作成のアイデア13選【困ったときはコレ!】 ブログのアイキャッチを作ってみたけど、なんかダサい、、、 どんなアイキャッチをつくったらいいか分からない アイキャッチとは、ブログの記事タイトルと一緒に表示さ...

 

 

 

 

ハリネはモーションエレメンツを使っています

モーションエレメンツは写真・CG画像・映像・音楽・テンプレートなど、デザインや動画づくりに役立つ素材を定額で使い放題。無料のコンテンツもありますのでおすすめのサービスです。

MotionElements - ロイヤリティフリー 動画素材マーケット、音楽、アフターエフェクト テンプレート

Adobe CCを安く購入・更新するには

After Effects、Illustratorなどを安く購入・更新する方法をこちらの記事で解説。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる