ブログのアイキャッチなどを作る時、多くの場合はタイトルなどのキーワードを文字として入れますよね？その時、あなたは「余白」を意識していますか？この「余白」実は非常に重要な要素です。
余白は文字のないスペースのような空間です。一見無意味のようなスペースのどこが重要なのか？この見えないスペースに気を配るだけで、あなたのデザインが一段レベルアップするのです。
では、どのように「余白」を取っていけばよいのでしょうか。アイキャッチのサンプルをひとつ、作成しながら解説していきます。ぜひ、最後まで読んであなたのデザインに活かしてくださいね！
余白の重要性
「余白」はデザインにおいて重要な概念です。余白とは、画面上に配置された要素と要素の間に配置されるスペースのことを指します。このスペースは、要素と要素を隔てて、見た目を分かりやすく整理する役割があります。
また、「余白」は、ページを見たときに目に優しい印象を与えることもできます。「余白」は、ウェブサイトやグラフィックデザインなどのデザインにおいて重要な要素であり、場所や大きさによって適切な使い方をすることが大切です。
デザインにおいて余白がない場合、そのデザインは密集感があり、狭く見える傾向があります。また、見た目が雑で整っていない印象を与えたり、見にくいものとなりがちです。これに対して、十分な余白を設けたデザインは、クリーンで見やすい印象を与えます。余白は、要素間の空間をとり、見た目を綺麗に見せる役割があります。
口紅の紹介記事のアイキャッチを作ってみよう
今回は、口紅を紹介する架空の記事のアイキャッチを作っていきましょう。
要点は以下。
- 大人の女性向け
- 商品を目立たせる
- 女性雑誌の広告のようなイメージ
アイキャッチ全体の余白
まず、アイキャッチの周囲にも余白をつくることを考えましょう。
なぜなら、あまり端までテキストが寄ってしまうと、表示方法によっては切れてしまったりする場合があるからです。
また、画像全体の周囲に余白を意識することで、スッキリしたデザインにすることができます。
画像ではブラウンのエリアにテキストを配置するようにします。ブラウンのエリアはあなたの頭の中のイメージをわかりやすくするように可視化したものです。完成した際にはこのテキストエリアは削除します。
Youtube用のサムネイルやインパクトを狙って大きなテキストをはみ出させる場合は、はみだして配置する場合もあります。
女性を配置
女性向けのデザインということが一目でわかるように、女性を配置します。
今回は口紅がメイン商品なので、女性の口元が気になるように配置しましょう。
口元を目立たせるには、女性の目を思い切って枠外にしてしまうのも作戦のひとつです。なぜなら、目や表情が見えるとそちらに目が行ってしまうからです。これで口元に視線を惹きつけることができますね。
タイトルの配置
タイトルを選ぶ際は、特徴のあるフォントを選ぶとよいです。理由は、他のテキストと違いを出して「重要なテキスト」だということを認識してもらうため。商品の場合は、その商品のロゴをそのまま使用するのがデザイン的にはもっとも良い結果になります。
あなたがフォントを選ぶ場合は、特徴がありながらも「読み取れる」フォントを選ぶようにしてください。特徴がありすぎて読めないのでは、何の記事なのかわからなくなってしまいます。
細かい配置は最終で調整するとして、ひとまずタイトルを仮配置しておきましょう。
テキストボックス内の余白
今回は余白の勉強ですので、あえてテキストボックスを使用してみます。
白いテキストエリア内に縦いっぱいにテキストを配置してみました。この状態では上下の余白がほぼゼロに近い状態で、ごちゃごちゃした印象になります。
しっかりと上下に余白をいれてみましょう。
どうですか？すっきりとした印象になりましたね。文字を配置する時も必ず「余白」を意識するようにしてください。
ブログタイトルを入れる
現在、Googleの検索結果に画像が表示されるようになってきています。画像でどのあなたのサイトをアピールするためにサイトロゴを入れるとよいでしょう。
サイトロゴを入れることで、どこの記事なのか画像でアピールすることができるようになります。こちらの内容は別の記事で解説していますので、読んでみてくださいね。
下段にテキストを配置する場合も、上下左右の余白がしっかり確保できるように配置します。
色の調整
アイキャッチ全体の余白を可視化するための素材を除去しました。
色合いを落ち着いたベージュ系に統一し、大人びた印象に仕上げます。
目立たせたいところにアクセントを
背景や写真をおとなしめの色で仕上げたのは、商品の写真を目立たせるためです。
商品が口紅ですので、赤色をアクセントカラーと想定していました。赤色が目立つように、その他の色をおとなしめの色で限定して、全体の使用色を減らします。
そうすることによって、赤色が目立ちます。イコール商品が目立つ、ということになります。
口紅のカラーで読者の気を惹く
女性にとって口紅のカラーは一番気になるところ。何の説明もなく、口紅のカラーを表した四角を並べるだけでも気を惹くことができます。アイキャッチに過剰な説明はいりません。デザインチックに使用していきましょう。
余白を多めにすることで、落ち着いた感じに仕上がる
今回の作品は記事のための架空のアイキャッチです。かんたんに作りましたが、抑えるところは抑えたアイキャッチです。
余白を多めにして、文字を小さめに配置することで、スッキリ大人びた感じに仕上がります。
逆に文字を大きくして余白を減らしていくと、慌ただしい感じになっていきます。文字を目立たせたい、Youtubeのサムネイルのような仕上がりにしたい場合は余白を減らしていきましょう。
ぜひ、余白を意識して作品を作ってみてくださいね。
けっきょく、よはく。
余白をもっと勉強したい方におすすめの書籍がありますのでご紹介しておきます。
それが、「けっきょく、よはく。」
余白がおりなす、印象の違いをたくさんの例を用いて解説してくれています。テキストや写真の配置。なぜかごちゃごちゃしてしまう。その原因が余白だったことに気づかせてくれる一冊。
あなたのデザインにも取り入れられる要素がたくさん。ぜひ、興味があれば読んでみてくださいね。
ポチップどんぐり所長のおすすめツール
どこでも、どんなデバイスでも順位チェック
ブログ記事の順位を確認していますか？どんなキーワードが上下しているのか知る事はブロガーでは必須と言えます。
ほとんどの方がダウンロード型の順位チェックツールを使用されていますが、私はコレ。「Nobilista」。クラウド型のチェックツールです。
クラウド型とは、ネット上にあるサーバーにデータが保存されている順位チェックツールです。従って、お家のパソコン以外でも情報にアクセスできちゃうんです。これが想像以上に快適で、一度体験すると戻れなくなっちゃう。詳しい記事を書いていますので是非読んでみてください。
実は私、Nobilistaの公式アンバサダーをさせて頂いています。使いだしたら超気に入ってしまって、気づいたらアンバサダーになっていました。そんな私が、おすすめする「Nobilista」。今なら7日間無料でお試しができます。クレジットカードなどの情報を入れなくても試せるので、ぜひあなたにも試してほしい。
＼場所を選ばない快適さを体験して／
Nobilista公式サイト
当サイト推奨 デザインツール
当サイトでは、ブログ初心者でも簡単・無料で美麗なデザインが作成できる、オンライン画像作成フォーム「Canva」を推奨しています。数万点の素材やフォントが用意されていて、選ぶだけで簡単にプロ並みのデザインを作成する事ができます。これから先、会社員の仕事でも使用する事になるかもしれないほど普及が広まっています。覚えるなら早い方がいいですよ！
当サイトのデザインは、SWELLで再現可能
私はSWELLを2年使用してきました。現在４つのサイトでSWELLを使用しています。
SWELLを使用する理由は、簡単・綺麗・速い。
実際このトップページも、SWELLの標準機能だけでデザイン。
お洒落なブログを作りたいあなたにピッタリのWordPressテーマです。
私が実際に使用して実感したSWELLの特徴は以下。
- 完全ブロックエディタ対応
- 直感で使える操作性
- 便利な専用ブロックを多数用意
- お洒落なトップページが簡単に作れる
- 最速レベルのページスピード
- 一度購入すれば複数サイトに何度でも使用可能
- ユーザーの利便性を考える熱意の運営者
- SWELLを紹介すればアフィリエイト報酬が貰える（購入者のみ参加可）
- 販売価格 ￥17,600（税込）
唯一の欠点は価格の高さ。しかしそれは、SWELLがハイクオリティだから。
そして、運営者がとびきりの対応をしてくれる必要経費。
SWELLにはアフィリエイトプログラムがあり、紹介すれば利益を得ることもできます。
よく、「アフィリエイトがあるから紹介しているんでしょ。」と言われますがこれは違います。
惚れ込んだWordPressテーマに、たまたまアフィリエイトがあっただけ。
あなたもSWELLを体験すれば、きっと紹介したくなります。
＼圧倒的な操作性を体験せよ／
あなたも今日からSWELLER！
お気軽にコメントください