MENU
  • homeicon-home
  • サロン専門ホームページ制作
  • 初心者向けワードプレスレッスン
  • ワードプレスオンラインレッスン
  • ホームページ制作実績
  • 写真撮影
  • blog
  • 写真のホームページへ
  • お問い合わせicon-mail
個人サロン向けのホームページ制作やワードプレスレッスンを受講できます。年金以外に自分の力で稼ぎたいアラフィフ女性を応援します。50代からのプチ起業をお考えの方はぜひお気軽にご相談ください。
【大阪箕面市】ホームページ制作・ワードプレスレッスンならecru(エクリュ)
  • ホームhome
  • ホームページ制作web site
    • ワードプレス1ページプラン
    • ワードプレススタンダードプラン
    • htmlプラン
  • ブログレッスンWordPress lesson
    • ワードプレスマンツーマンレッスン【5回レッスン】
    • WordPressオンラインレッスン【おしゃれなサイトが作れます】
  • 写真撮影photo
    • 写真のホームページへ
  • ブログblog
    • 50代起業
    • ホームページ制作実績
    • ワードプレスのこと
    • お客様のご感想
    • 起業コラム
  • プロフィールabout me
  • お問い合わせcontact
【大阪箕面市】ホームページ制作・ワードプレスレッスンならecru(エクリュ)
  • ホームhome
  • ホームページ制作web site
    • ワードプレス1ページプラン
    • ワードプレススタンダードプラン
    • htmlプラン
  • ブログレッスンWordPress lesson
    • ワードプレスマンツーマンレッスン【5回レッスン】
    • WordPressオンラインレッスン【おしゃれなサイトが作れます】
  • 写真撮影photo
    • 写真のホームページへ
  • ブログblog
    • 50代起業
    • ホームページ制作実績
    • ワードプレスのこと
    • お客様のご感想
    • 起業コラム
  • プロフィールabout me
  • お問い合わせcontact
「あなたも50代から好きなことを仕事にできる」完全マニュアル詳細はこちら
  1. ホーム
  2. canva
  3. おしゃれなアイキャッチを作るデザインのコツ

おしゃれなアイキャッチを作るデザインのコツ

2021 12/01
canva
おしゃれなアイキャッチを作る

ブログのアイキャッチがなかなか上手に作れません。

アイキャッチは難しいですね。

最近のブログのレベルはどんどん上がってますね。
2年ぐらい前までブログのアイキャッチはとてもシンプルに画像だけだったりとか、写真に少し文字が入っている程度でした。

でも最近はブロガーさんのレベルが上がって、canvaなどで凝ったアイキャッチを作る人が増えてきました。

目次

素敵なアイキャッチを作る基本ルール

最初に言いますがアイキャッチってとってもむずかしいです。
デザインの勉強をしていない素人さんがセンスの良いアイキャッチを作るのは難易度高いです。

でも安心してください。
このルールを守れば比較的カンタンに作れますよ。

まずはビフォーアフターを見てください

まずは下記の画像を比べてみてください。

before

以前作ったアイキャッチ画像
画像の上にテキストを載っけただけ

after

さきほど作ったアイキャッチ
イラストを使いパッとみてわかりやすく作ったがまだ修正箇所がありそうです。

beforeは2年ほど前かなりテキトーに作ったアイキャッチ。
当時はアイキャッチにそれほど凝らないのが一般的でした。
サイズも適当だったので基準よりも縦が長く作りました。

SWELLのアイキャッチのサイズは1200px×630pxで作りましょう。

afterは今風にイラストを使いスッキリとしたデザインにみえます。
でも実はまだ修正点がいくつかありそう。

一緒に改善していきましょう!

デザインのルールって何?

デザインには基本原則があります。
それを意識するだけでプロっぽいアイキャッチになります。

  • 近接 (Proximity)
  • 整列 (Alignment)
  • 反復 (Repetition)
  • コントラスト (Contrast)

いったい何のこと?
と思われるかもしれませんが実際にバナーを例に見てみましょう。

近接(同じ要素同士をグループ化する)

関連のあるもの同士は近づける。逆に関係のないものは離すという法則。

この例では少しわかりにくいのですが「アメブロの集客で疲弊していませんか?」と「アメブロで集客する3つの方法」は別の文章なのでしっかりと余白を空けて別のグループに分けています。

そうすることで「アメブロの集客で疲弊していませんか?」のキャッチコピーが引き立ちます。

いまひとつメリハリがついていないのでキャッチコピーが目立たない。

2つのグループに分かれてキャッチコピーが目立った。

整列(要素の頭やお尻、または中央に揃える)

整列も大事です。下の例では「アメブロの」の最初の「あ」と疲弊の「疲」を左揃えにしています。
文字を揃えるのはデザインの基本です。

場合によっては右揃えや中央揃えにします。

反復(規則性をもたせる)

反復が少しわかりにくいかもしれませんがデザインの中で規則性をもたせるとデザインがすっきりします。
たとえば左の画像のように「疲弊」だけをピンク色にするよりは右の画像のように「3」と同じブルーで統一した方が規則性がありますよね。

またフォントもバラバラではなく同じものを使うことも反復の意味あいになります。

コントラスト(強調したい要素に変化をつける)

コントラストは色や大きさに変化をつけて強調したり、バックの色と上に重ねる文字が同型色にならないようにすることです。

下のイラストのように「の」や「で」などのひらがなを小さくして「アメブロ」「集客」を大きくすることで目立たせたいところが明確になります。

また数字を大きく表示するのもよく使う方法です。

ひらがなを小さくしたり数字を大きくするだけでプロっぽいデザインになりますよ。

ビフォーアフター

ビフォーとアフターを比べてみました。
アフターの方がスッキリしているのがわかりますよね?

before

修正前

after

修正後

他に何か気をつけることはありますか?

色をたくさん使い過ぎないのもコツです

素敵なアイキャッチを作るには色を多用しない

アフターのバナーを見るとバックのアイボリー、差し色のブルー、そしてイラストのイエローの3色を使っています。
アイボリーはほぼ白(無彩色)なのでどんな色とも相性が良いです。

なのでここでは黄色とブルーの2色でまとめています。

×色が揃ってないので統一感がない

◯色数が少ないのでスッキリ見える

初心者は色をたくさん使う傾向にあります。
思い切って色数を減らしましょう。

アイキャッチはcanva(キャンバ)で作れます!

ご紹介したアイキャッチはcanvaというサイトで作れます。
アプリもあるのでスマホでデザインできるもの魅力です。

https://www.canva.com/

あわせて読みたい
canvaで簡単にかわいいロゴを作る方法 WordPressでブログを作りたいけどロゴってどうやって作るのかな? ロゴって自分で作れるのかな?誰かに頼んでも良いけど自分で作れるのなら作ってみたい。 この記事を読...

\この記事が良かったと思ったらポチッとクリックしてね/
にほんブログ村 ライフスタイルブログ フリーランス生活へ
にほんブログ村

メルマガ登録してね
47歳で離婚後、どうやってフリーランスとして収入を得ることができているか?
その秘密を覗いてみませんか?

まずは下のバナーをクリックしてください。

メルマガ登録

メルマガ

関連

canva
おすすめ ブログお役立ち記事
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • 【SWELL】サイトにふわふわ動きをつける方法(Blocks Animation)
  • SWELLで作ったブロガーさんのご紹介です

関連記事

  • canvaで簡単にかわいいロゴを作る方法
    canvaで簡単にかわいいロゴを作る方法
    2021年9月19日
エクリュ
エックスサーバーの設定方法
エックスサーバーの契約からワードプレスインストールまで
WordPressマンツーマンレッスン
アラフィフ主婦でも稼げる狙い目副業7選。リスクなし在宅のお仕事紹介
女性向けサイトにぴったりなワードプレステーマの選び方
人気記事
  • 50代からの起業して成功!人生経験を生かして稼ぐ職種7選
    50代からの起業は遅くない!おすすめお仕事7選メリットとデメリット
  • macbookpro
    macbook proが熱すぎる!原因と対策は?
  • サイトに動きをつける方法(Blocks Animation)
    【SWELL】サイトにふわふわ動きをつける方法(Blocks Animation)
  • 【LESSON1】SWELLでヘッダーとメインビジュアルを設定する
  • メインビジュアルに画像を重ねておしゃれ感を出す方法
    【SWELL】メインビジュアルに画像を重ねておしゃれ感を出す方法
カテゴリー
  • 50代起業 (14)
  • canva (2)
  • SWELL (18)
  • webデザイナー (4)
  • アフィリエイトの始め方 (1)
  • アメブロ集客 (2)
  • お客様のご感想 (7)
  • パソコン (1)
  • フリーランス (1)
  • ブログを始める (4)
  • ホームページ制作実績 (54)
  • マンガ (9)
  • レッスンのこと (1)
  • ワードプレスのこと (5)
  • ワードプレスの機能 (14)
  • ワードプレスマンツーマン5回習得コース (26)
  • わたしのこと (2)
  • 主婦の副業 (3)
  • 引越し用 (1)
  • 未分類 (2)
  • 起業コラム (69)
  • 起業プロデュースプラン (5)
タグ
adobeCANVASEOSNS苦手SWELLTCDwebスクールWordPressWordPressの操作方法おすすめお金のことアフィリエイトアメブロアメブロカスタマイズカウンセラーキャッチコピーグーグル検索ストアカセラピストネット販売ブログお役立ち記事ブログカスタマイズホームページ作成マンガライトニングロゴワードプレスワードプレスオンラインレッスン制作実績副業年金以外に収入を得る引き寄せの法則画像の入れ方自宅サロン自宅教室製作実績起業起業コンサル起業塾集客高額コンサル

お問い合わせ・お申込み

 090-1656-1032

ホームページのこと・起業相談はお気軽にお問い合わせください。

お問い合わせ

メールマガジン
メールマガジン
最近の投稿
  • 40代ではもう遅い?未経験からwebデザイナーになる方法
  • 50歳でフリーランスになった経験を語ってみます
  • 婚活サロンミリーマリアージュ様のご紹介
  • おしゃれなWordPressテーマSWELL(スウェル)とは?
  • 【SWELL】フルワイドセクション〜3カラムと境界線を波線にする方法
  • ブログ一覧ページにタブをつける方法
  • ものごとがスムーズに運ぶ時はGOサインです
目次
  • ホーム
  • サロン専門ホームページ制作
  • ワードプレス1ページプラン
  • ワードプレススタンダードプラン
  • WordPressオンラインレッスン【おしゃれなサイトが作れます】
  • htmlプラン
  • 初心者向けワードプレスレッスン
  • 写真撮影
  • プロフィール
  • お申し込み・お問い合わせ
ランキングに参加しています

にほんブログ村 ライフスタイルブログへ
にほんブログ村

SWELLを使ってホームページを作ろう
人気テーマSWELLを使ってホームページを作ろう
SNS
SWELLご購入はこちら

© 【大阪箕面市】ホームページ制作・ワードプレスレッスンならecru(エクリュ).

目次
閉じる
 

コメントを読み込み中…
 

コメントを投稿するにはログインしてください。