自称ブログアイキャッチ研究家のkana(@kana_gadget)です。
皆さんは自分の作成したアイキャッチを見返して、
「これは作り直さないとな」「ダサすぎるよこれ」
と感じたことはありませんか？
私も以前からブログアイキャッチをリメイクし始め、この記事もシリーズ化しているところです。
今回も私が過去に作ったブログアイキャッチを修正していきます。
ぜひこの記事を参考にしていただいて、ご自身のアイキャッチを作成してみてください！
修正するブログアイキャッチ
今回修正するアイキャッチはこちらです。
この記事は、ブログアイキャッチは長方形で作るべきか、正方形で作るべきかを持論を用いて紹介する内容になっています。
このアイキャッチを作成した時に意識したことは以下の3点です。
- 太いフォントを使い四角感を出す
- シンプルなあしらいを入れる
- 色は3色以内に収める
実際にこの3つのコンセプトを守り、作成したため目標通りの結果にはなりました。
ですが皆さんも見て感じる通り、なぜか野暮ったく雑なデザインのアイキャッチになってしましまいました。
姫ダサすぎるわけじゃないけど、見ていて気持ちの良いデザインじゃないよね
正直自分でもそこまで悪いアイキャッチではないのでは？と思っていましたが、
真剣に見てみると良くないポイントが多数あります。
これからは具体的に何がこのアイキャッチをダサくしてしまっているのかを私的感想を交えながら紹介します。
ぜひ一緒に考えながら見てもらえると幸いです。
ダサポイント①フォントが太すぎ
1つ目はフォント選びに失敗しているという点です。
別の記事でも紹介していますが、フォントはできるだけシンプルなものを使うのがベストです。
姫ゴシック体とかメイリオとか
このアイキャッチで使用しているフォントは「VDL ロゴJrブラック BK」とという、線が極太で文字全体がアイコンのように可愛らしいポップなフォントです。
このフォントをメインの文字に使ってしまったせいで全体が野暮ったいデザインになってしまっています。
デザイン性が高いフォントはアクセントとして使うことに優れているため、読ませる文章には使わない方が良いです。
上記の画像でもわかる通り、太いフォンㇳだけで文字を装飾するとスッキリと見えないですよね。
逆に太いフォントと細いフォントを使い分けただけで、見栄えがぐっと高くなります。
フォントを選ぶときは、しっかりと作成するアイキャッチの世界観を考えながら、決めるようにしましょう。
ダサポイント②あしらいが適当
別の記事にも記載していますが、
デザインにおける「あしらい」というのは、「装飾」のことを意味します。
詳しくは下記記事をご覧ください。
このブログで使われているあしらいは以下の2つです。
姫シンプルでいいじゃないの？
使用しているあしらいはシンプルで悪くはないですが、それらの配置とバランスが悪いです。
①線の太さのギャップ
1つ目の画像を見てどう思われましたか？
私は
文字が太いのに、あしらいの線が細すぎてバランスが悪く、見ずらいように感じました。
上記の画像でわかる通り、「太線」と「細線」を同時に使用してデザインすることは非常に難しいです。
太線だけでもバランスとしては悪くないですが、やはりどこか野暮ったさを感じてしまいます。
細線だけのデザインは、スタイリッシュさを感じながら、見栄えも良いのでどのような場面でも活躍することができます。
シンプルにデザインしたいという方は、まずは線の太さは細めに設定して全体を整えていくようにすることをおすすめします。
②余白の無さ
2つ目の画像のように、文字を図形で囲む場合には
「余白」に気を付けなければいけません。
余白ってなに？
そう思われる方も多いと思うので、次の画像を見てください。
どちらのほうがスッキリして見えますか？
下の方のデザインの方がすっきりしたデザインだと感じた方が多いのではないでしょうか？
設置した図形とそれ以外の物体との距離、空間を開けること。図形内に文字を入れるときに、ミチミチに詰めるのでなく、余裕をもって設置すること。
上記の画像のように、余白を開けないことでデザインに窮屈感が生まれてしまいます。
これは図形内の文字に限った話だけではなく、「文字列と文字列の間」「文字とあしらいとの空間」などにも関係してきます。
余白についての技術について学ぶ方法として、下記書籍がおすすめです。
「余白」についての技術を、実際のチラシ、Webページなどを用いて紹介してくれるわかりやすい書籍です。
読みやすさに加えて、わかりやすさも高いので、ぜひご覧になって見てください！
デザインについて学びたい方は私の下記記事をご覧になって見てください。
修正後のアイキャッチ
これまで修正前のアイキャッチの何がダサくさせる要因なのかを考察しましたが、
それらの改善点を踏まえて私が作成した、新しいアイキャッチを紹介します。
それがこちらです。
どうでしょう？
ものすごくシンプルなデザインになったため、「前のアイキャッチの方が良かった」と思われる方も多いと思いますが、
個人的にはシンプルにまとめ上げる方が難しく、かつ見栄えが良いので後者の方が優れていると感じます。
このアイキャッチを作成するときに気を付けたのは、
①文字のフォントは「細くて丸い」フォントを使用する
②全体を通して白黒でデザインする
③あしらいはワンポイント
それぞれについて細かく紹介していきます。
①細くて丸いフォントを使用する
今回使用したフォントは「レラ-２」という、丸みを帯びたデザインが特徴のフォントを使用しました。
メジャーなフォントと比べても、角が取れて可愛らしい印象があるフォントです。
色を使わない分ちょっとポップなフォントを使用することで、デザイン性を高めることで「シンプルながら見栄えがよい」デザインを心がけました。
もともとのフォントの「VDL ロゴJrブラック BK」よりも見やすいフォントなので、全体のデザインをまとめるのも簡単でした。
デザインするのが難しいという方は、このような細めのフォントを使用するのがおすすめです。
②白黒でデザインする
ご覧になってわかる通り、新しいアイキャッチは白黒の2色だけでデザインしました。
元のものと比べると、色味が全くないため目立つポイントがありませんが、
シンプルで何が書かれているかわかりやすくなったため、デザイン性は優れていると感じます。
姫見比べてみると、元のアイキャッチはごちゃごちゃしているように見えるね。
白と黒だけでも、図の配置や文字のフォントを利用するだけでお洒落なアイキャッチは作成することができます。
③あしらいはワンポイント
今回使用したあしらいは、文字を囲むための図形だけです。
こちらのあしらいにも、余白の技法を使用しています。
全体的に余白を多めに取ることで、すっきりとした印象を与え、野暮ったさを感じさせないように気を付けました。
実際にぎちぎちに詰めたものも作成したので、見比べてみて下さい！
見比べると余白があるの方が、断然見やすいです。
このように見やすさを考えるときに「余白」を意識してみるのも1つのテクニックです。
今回のデザイン教訓
今回のアイキャッチリメイクで学べたことは以下の3点です。
- 世界観を守るフォントを選ぶ
- 意外と白黒でも見栄えのよいデザインが出来る
- 余白を使用してバランスを整える
姫これら3つを徹底するだけで、意外とデザイン力はすぐに高まると思います。
今まで私のようになんとなくアイキャッチを作成していた方は、
これからは上記の3つの教訓を意識しながら、作成してみてはいかがでしょうか。
ぜひ作成してアイキャッチをTwitterなどでおしえてください！
最後までご覧いただきありがとうございました！
