ブログのアイキャッチなどを作る時、多くの場合はタイトルなどのキーワードを文字として入れますよね？その時、あなたは「余白」を意識していますか？この「余白」実は非常に重要な要素です。
余白は文字のないスペースのような空間です。一見無意味のようなスペースのどこが重要なのか？この見えないスペースに気を配るだけで、あなたのデザインが一段レベルアップするのです。
では、どのように「余白」を取っていけばよいのでしょうか。アイキャッチのサンプルをひとつ、作成しながら解説していきます。ぜひ、最後まで読んであなたのデザインに活かしてくださいね！
余白の重要性
「余白」はデザインにおいて重要な概念です。余白とは、画面上に配置された要素と要素の間に配置されるスペースのことを指します。このスペースは、要素と要素を隔てて、見た目を分かりやすく整理する役割があります。
また、「余白」は、ページを見たときに目に優しい印象を与えることもできます。「余白」は、ウェブサイトやグラフィックデザインなどのデザインにおいて重要な要素であり、場所や大きさによって適切な使い方をすることが大切です。
デザインにおいて余白がない場合、そのデザインは密集感があり、狭く見える傾向があります。また、見た目が雑で整っていない印象を与えたり、見にくいものとなりがちです。これに対して、十分な余白を設けたデザインは、クリーンで見やすい印象を与えます。余白は、要素間の空間をとり、見た目を綺麗に見せる役割があります。
口紅の紹介記事のアイキャッチを作ってみよう
今回は、口紅を紹介する架空の記事のアイキャッチを作っていきましょう。
要点は以下。
- 大人の女性向け
- 商品を目立たせる
- 女性雑誌の広告のようなイメージ
アイキャッチ全体の余白
まず、アイキャッチの周囲にも余白をつくることを考えましょう。
なぜなら、あまり端までテキストが寄ってしまうと、表示方法によっては切れてしまったりする場合があるからです。
また、画像全体の周囲に余白を意識することで、スッキリしたデザインにすることができます。
画像ではブラウンのエリアにテキストを配置するようにします。ブラウンのエリアはあなたの頭の中のイメージをわかりやすくするように可視化したものです。完成した際にはこのテキストエリアは削除します。
Youtube用のサムネイルやインパクトを狙って大きなテキストをはみ出させる場合は、はみだして配置する場合もあります。
女性を配置
女性向けのデザインということが一目でわかるように、女性を配置します。
今回は口紅がメイン商品なので、女性の口元が気になるように配置しましょう。
口元を目立たせるには、女性の目を思い切って枠外にしてしまうのも作戦のひとつです。なぜなら、目や表情が見えるとそちらに目が行ってしまうからです。これで口元に視線を惹きつけることができますね。
タイトルの配置
タイトルを選ぶ際は、特徴のあるフォントを選ぶとよいです。理由は、他のテキストと違いを出して「重要なテキスト」だということを認識してもらうため。商品の場合は、その商品のロゴをそのまま使用するのがデザイン的にはもっとも良い結果になります。
あなたがフォントを選ぶ場合は、特徴がありながらも「読み取れる」フォントを選ぶようにしてください。特徴がありすぎて読めないのでは、何の記事なのかわからなくなってしまいます。
細かい配置は最終で調整するとして、ひとまずタイトルを仮配置しておきましょう。
テキストボックス内の余白
今回は余白の勉強ですので、あえてテキストボックスを使用してみます。
白いテキストエリア内に縦いっぱいにテキストを配置してみました。この状態では上下の余白がほぼゼロに近い状態で、ごちゃごちゃした印象になります。
しっかりと上下に余白をいれてみましょう。
どうですか？すっきりとした印象になりましたね。文字を配置する時も必ず「余白」を意識するようにしてください。
ブログタイトルを入れる
現在、Googleの検索結果に画像が表示されるようになってきています。画像でどのあなたのサイトをアピールするためにサイトロゴを入れるとよいでしょう。
サイトロゴを入れることで、どこの記事なのか画像でアピールすることができるようになります。こちらの内容は別の記事で解説していますので、読んでみてくださいね。
下段にテキストを配置する場合も、上下左右の余白がしっかり確保できるように配置します。
色の調整
アイキャッチ全体の余白を可視化するための素材を除去しました。
色合いを落ち着いたベージュ系に統一し、大人びた印象に仕上げます。
目立たせたいところにアクセントを
背景や写真をおとなしめの色で仕上げたのは、商品の写真を目立たせるためです。
商品が口紅ですので、赤色をアクセントカラーと想定していました。赤色が目立つように、その他の色をおとなしめの色で限定して、全体の使用色を減らします。
そうすることによって、赤色が目立ちます。イコール商品が目立つ、ということになります。
口紅のカラーで読者の気を惹く
女性にとって口紅のカラーは一番気になるところ。何の説明もなく、口紅のカラーを表した四角を並べるだけでも気を惹くことができます。アイキャッチに過剰な説明はいりません。デザインチックに使用していきましょう。
余白を多めにすることで、落ち着いた感じに仕上がる
今回の作品は記事のための架空のアイキャッチです。かんたんに作りましたが、抑えるところは抑えたアイキャッチです。
余白を多めにして、文字を小さめに配置することで、スッキリ大人びた感じに仕上がります。
逆に文字を大きくして余白を減らしていくと、慌ただしい感じになっていきます。文字を目立たせたい、Youtubeのサムネイルのような仕上がりにしたい場合は余白を減らしていきましょう。
ぜひ、余白を意識して作品を作ってみてくださいね。
けっきょく、よはく。
余白をもっと勉強したい方におすすめの書籍がありますのでご紹介しておきます。
それが、「けっきょく、よはく。」
余白がおりなす、印象の違いをたくさんの例を用いて解説してくれています。テキストや写真の配置。なぜかごちゃごちゃしてしまう。その原因が余白だったことに気づかせてくれる一冊。
あなたのデザインにも取り入れられる要素がたくさん。ぜひ、興味があれば読んでみてくださいね。
ポチップ推奨デザインツール
当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。
おすすめWordpressテーマ
私は、導入するだけで一気にお洒落になるWordpressテーマ「SWELL」をおすすめします。デザイン性はもちろん、その操作性は特筆ものです。
SWELLを愛用する私が実際に使用してきた内容を加えた、詳しい記事を書いています。ぜひご参照ください。
お気軽にコメントください