こんにちは、Sayuです☺
ブログをおしゃれにしたいけど
どうすればいいの?💦
と悩むブロガーさんに向けて、アイキャッチを統一するコツをご紹介します☺
アイキャッチを統一すると、全体がすっきりして
オシャレかつ見やすいサイトに!
オシャレブロガーになるため、
私はアイキャッチを作り直すことから始めました☺
私が最初に作っていたアイキャッチがこちら▼
一つ一つのデザインは良くても、
統一感がないね💦
改良版はこちら▼
こっちの方が見やすいしオシャレ!
私は全部【canva】で無料で作っています☺
- おしゃれなアイキャッチで統一するメリット
- おしゃれなアイキャッチの適切なサイズは?
- おしゃれなアイキャッチの作り方
- おしゃれなアイキャッチ画像の完成!
- おしゃれなアイキャッチの参考デザイン
- みらno情報局
- いちブログ
- 転妻ワークス
- Ken’s Blog
- 香りハピネス
- InoKazu Blog
- てぬき生活のすすめ
- なまずのはね
- おてぃ×すた
- ほはるブログ
- Maruyan Room
- ビットコイン投資.com
- 夢みるナマケモノ。
- 軽音部かあさんブログ
- ちぇりのブログ
- エンクラ!
- Polish
- toa blog
- 現役SEの馬には乗ってみよ人には添うてみよ
- kazu for free lifestyle…
- さつきのブログ
- あやんブログ
- ゆまブログ
- むさしのつぶやき
- ミキサクの夫婦deブログ
- もっちログ
- ゾロメ局
- 笑顔を贈る出産祝い
- ももぷーぶろぐ
- okazu blog
- あむさいのブログ
- ミニマリストのゆるい暮らし。
- ハイレグブログ
- ペンギン看護師の雑記
- FIREへの道
- 【おしゃれなアイキャッチの作り方】まとめ
おしゃれなアイキャッチで統一するメリット
サイトが見やすくオシャレになる以外にも様々なメリットがあります。
私が感じたメリットはこちら▼
- 一度デザインを決まてしまえば、次から作成が楽になる
- SEO効果があり、SNSや画像検索からの流入が増える
良いことだらけだね!( ゚Д゚)
アイキャッチ作成が格段に楽になる
毎回アイキャッチの構成を考えるのって手間と時間がかかりませんか?
私も以前はそうでした💦
ですが一度デザインを作ってしまえば、文字と画像を入れ替えるだけで簡単に作れるようになります。
テンプレートを作るイメージ!
作成スピードがグンと上がり、とても楽になりますよ☺
アイキャッチはSEOとSNSで効果抜群?!
ブログをみて一番初めに目にする顔がアイキャッチですので、
魅力的なアイキャッチだと、読みたくなる♪
という理由で、PVを伸ばすのにも効果的です。
例えば、多くのブロガーさんはTwitterなどのSNSで記事更新をお知らせしますよね!
その時に他のツイートと一緒に流れてしまわないように、
パッと目を引くデザインにすることが大切です。
そこで、ツイートの前にアイキャッチの表示を確認しておけば安心です!
Twitterの表示を確認する▼
どのように表示されるのか分かります。
また、アイキャッチが魅力的だと、Pinterest(画像をシェアしたり、他の人の画像をピン(保存)できるwebサービス)からの流入が増えます。
↓
リンクから記事を訪れてくれる
という流れで、読者を集められます。
強い被リンクなので、登録しておけばSEOにも効果的です👍
ブログを更新すると自動でアイキャッチがアップされる便利な機能もあるのでおススメです☺
画像の代替テキストにキーワードを入れるのを忘れずに!
クローラーは代替テキストで画像の内容を分析しているので、
画像検索で上位にあげる為に重要なんです。
おしゃれなアイキャッチの適切なサイズは?
アイキャッチの最適サイズと言われているのがこちら▼
- 横1200px × 縦630px(1.91:1)
- 横1200px × 縦675px(16:9)
Cocoonの場合「16:9」が最適だと言われています。
ただ、Cocoon作成者のわいひらさんは1280pxより大きいサイズをおススメしています▼
アイキャッチは1280×1280px以上を推奨します。
引用元:Cocoon テーマのサムネイルをRetinaディスプレイ対応させる方法(スマホで画像がぼやける対策)
ということで私は、
横1600px × 縦900pxで作成しています☺
ちなみに使用するテーマによって丁度いいサイズは異なります。
Cocoon以外の方は以下を参考にしてください▼
JIN | 横760px:縦428px |
Swell | 横1200px:縦630px |
SANGO | 横680px:縦390px |
アフィンガー5 | 横1200px:縦630px |
サイズが分からない時は、
とりあえず16:9か1.91:1で作るときれいに見えるよ☺
おしゃれなアイキャッチの作り方
デザイン初心者でも簡単にできる方法をご紹介します☺
アイキャッチで記事の内容が分かるように
アイキャッチを見るだけで、「何についての記事か」分かるよう心がけましょう。
この記事は悩みを解決してくれそう!
と思ってもらうために、短くて分かりやすいキャッチーな言葉が望ましいです。
思わずクリックしてしまう、フレーズも活用しましょう!!
”おすすめ〇〇10選!”とか、
”〇〇の3つのメリット!”のように数字を入れるのも効果的♪
例えばこのアイキャッチ、▼
「TOEICのメリット」について知りたい人に向けたタイトルを付けています。
また他との差別化を図るために、
この記事が一番が悩みを解決してくれそう!と思ってもらうことが大切です。
【例】
検索上位の他の記事が「メリット10個」であれば、
「メリット11個」にしてみる
このように、「どうすれば読者を引き付けられるか」を常に意識してタイトルを付けましょう☺
英語と数字を入れる
オシャレなブログを研究していると、
「英語と数字」が含まれていることが多いと気づきました(´▽`*)
例えば、私が参考にした
サワタリタツヤさんのブログ(Sarunomado)のアイキャッチはこんな感じ▼
英語、日本語、数字を使っていてすっごくおしゃれですよね!
(Sarunomado)ブログさんは、
カテゴリーごとにアイキャッチのデザインが違って分かりやすい&おしゃれ!
これからデザインを考える方は是非参考にしてくださいね(´艸`*)
私のアイキャッチで、英語と数字ありとなしを比較してみました。
【英語と数字なし▼】
【英語と数字あり▼】
このように、英語や数字だけでそれっぽさが出るのでおススメです(笑)
私のように筆記体を使用する場合は、
読みにくいのであくまで飾りとして使用するのが良いでしょう☺
それぞれのフォントを選ぶ
日本語、英語、数字それぞれのフォントを決めましょう!
フォントは「あなたのサイトのイメージが決まる」
とも言えるぐらい重要なポイント!
私は画像をCanvaで作成していて、
すべて無料フォントを使用しています!
【フォントを選ばない場合▼】
【フォントを選んだ場合▼】
私が使用しているフォントはこちら▼
日本語 | せのびゴシック Regular |
英語(グレーの部分) | AC Fifindrel |
数字 | Times Neue Roman |
ちなみに、最近発見した
かわいいな~と思っているフォントがこちら▼
正直こっちのフォントに浮気しそうです(笑)
これは「モトヤアラタL」というフォント。
私が使っているフォントでよければ、
みなさん是非使ってみて下さいね☺
お揃いにしましょう~(´艸`*)
文字の間隔をあける
文字の間が詰まっているよりも余白がある方が
ゆとりのある心地よいデザインに👍
私は半角スペースを空けています!
【余白なし▼】
【余白あり▼】
どうでしょうか。
ゆとりがでて、見やすくなりましたよね☺
サイト全体にも「余白」を取り入れることがお洒落ブログのポイント👍▼
目立たせるところは強調させる
とにかく「メインタイトル」を目立たせて読みやすくしましょう。
文字の背景は無地がおススメです。
【文字が目立たない場合▼】
【文字を目立たせた場合▼】
かなり見やすくなりました。
背景の写真を隠したくない💦
という方は、文字を縁取るだけでも見やすくなりますよ☺
次に、主役と脇役が分かりやすいように工夫しましょう。
簡単に言うと、
メインタイトルは目立たせて、その他は主張しすぎないという事。
当サイトでは、
- 文字のサイズ
- テキストの種類
- 文字の色
- ポイントにはアンダーライン
で差を出して情報に優先順位をつけています。
【主役と脇役を考えない場合▼】
【主役と脇役を意識した場合▼】
こっちはメインタイトルに目がいきますよね!
カテゴリー(Conversation)の部分は、
目立たないように筆記体&うすいグレーにし、文字も小さくしています。
アンダーラインを入れると、デザイン性もUP!
キーカラーを取り入れる
サイト全体を統一させる基本として、
メインのカラーを決めることが重要です!
私のようなデザイン初心者さんは、3色以内で決めるのがおススメです☺
私は配色について全く知識がなかったので、
この本を熟読しました💦▼
そして決まったこのサイトのカラーは、、、▼
やわらかい雰囲気を出したいという、
イメージ通りの色を選ぶことに成功しました!
そしてアイキャッチにもこれらの色を取り入れることが
オシャレブログへの第一歩です☺
色の取り入れ方を教えちゃうよ♪
私のアイキャッチを例にすると、
黒い点線の〇で囲まれている部分はサイトカラーが使われています。▼
実は左側の画像、
元々別の色なんです!
元の色は、、、▼
えぇ!なんだかごちゃごちゃしててあんまりだな、、
ということで、
画像作成サイト【Canva】で素材を好みの色に変更する手順を解説します▼
「素材」で画像を選択した後、
① 色を変更したい画像を選択
② 変更したい色を選ぶ
③ 虫眼鏡マークからカラーコードを検索
これで、
色が合わないから画像が使えない💦
と悩むことも無くなります☺
おしゃれなアイキャッチ画像の完成!
- 記事の内容がわかるタイトルをつける
- 英語&数字を取り入れる
- フォントに力を入れる
- 余白をつくる
- 主役と脇役を区別する
- キーカラーを取り入れる
これら全てを駆使して今回できたアイキャッチは、、▼
デザイン初心者でもいい感じのアイキャッチができました☺
無料で超おしゃれなイラストが見つかるサイトも紹介しています👍
という方も多いのではないでしょうか。
ですが独学でもデザインのセンスは磨けます!
何となくこんな感じかな?でやってもうまくいかないよ。
デザインについて知ることもブログの勉強だと思って実践しよう!
私は「デザインのドリル」で一から基礎を学びました。
配色、配置、余白、ロゴの組み合わせ方など、デザインの必須事項が
この1冊で学べます。
まさにドリル!!
kindle版も出版されています。
私は、このデザイン使ってみよう!と
ブログやアイキャッチに活用しています👍
最後に、当記事を参考にアイキャッチを作成して下さった
ブロガーさんをご紹介します♪
おしゃれなアイキャッチの参考デザイン
この記事を参考にアイキャッチを作成してくれた
ブロガーさんを紹介するよ!
当記事を参考にして下さり、ありがとうございます!
感謝の気持ちを込めて、サイトをいくつかご紹介します♪
デザインの参考にして下さいね☺
みらno情報局
ディズニーが大好きすぎて、
本場アメリカのディズニーワールドでキャストをされたこともあるという
みらさんの
「みらno情報局」
当記事で紹介した、すべてのポイントを押さえてくれています!!
ピンク色のマーブル柄が、海外っぽくてお洒落ですね♪
かわいくて見やすいアイキャッチは
思わずクリックしたくなる!
いちブログ
大学生活・資格勉強・サッカーについて発信されているいちさんの
「いちブログ」
オシャレ過ぎて、
見た瞬間トリコになりました!
背景に写真が見られるデザインですが
こんな風に写真をすこし透過させると、タイトルの邪魔にならない!
これぞ「見やすくてお洒落なアイキャッチ」ですね☺
転妻ワークス
在宅ワークについて・暮らしを楽にする情報を発信されているうめこさんの
「転妻ワークス」
全体はピンク・ブルー・ホワイトと、ポップで可愛らしいデザイン。
そのサイトカラーをアイキャッチにも取り入れることで
さらに統一感がUPしています☺
文字も見やすくて、
これぞ完璧なアイキャッチ!
Ken’s Blog
アメリカ生活・英語学習について発信されているKenさんの
「Ken’s Blog」
写真を背景にしたアイキャッチで統一されています。
背景が写真でも、文字が見やすくなるように工夫されていて素晴らしい!
写真を使いたい人は是非
参考にしてね♪
香りハピネス
香料メーカーで研究職をされていた、かおりさんの
「香りハピネス」は、香りに関する情報が満載です。
サイトカラーはピンクで、
アイキャッチに入れるイラストもピンクで統一する
こだわりっぷり!
【ピンク=花】
という印象を与えるので、今にも良いにおいが漂ってきそうですね☺
香水が気になる人におすすめのブログ♪
InoKazu Blog
現役バーテンダー、いのかずさんの
「InoKazu Blog」は、ウイスキー好き必見です👍
全体はワインレッドとホワイトで統一されていて、
【四角い図形】が多く見られます。
実は「形」はデザインのイメージを決める大切なポイントで、
- 丸=柔らかい、ゆるい雰囲気
- 四角=かっちりした雰囲気
という印象を与えます。
アイキャッチにも四角を取り入れることで、
高級感・エレガントさを引き出してる!!
てぬき生活のすすめ
主婦、くりかわさんが運営する
「てぬき生活のすすめ」は、負担をかけずに健康的な生活をする術が満載!
温かみのある木の机に料理を並べ、手書きフォントでタイトルを置くことで
ものすご~く家庭的な印象を引き出すことができます。
私の「一目ぼれブログデザイン集」でも
紹介させていただきました!!▼
なまずのはね
「楽しく私らしく暮らす」をコンセプトに、
実際に体験した、為になる話を発信されているPikさんの
「なまずのはね」
カテゴリーごとにデザインを変えるこだわりっぷりに感激です!
アイキャッチを見るだけで
カテゴリーが分かるからおススメ♪
おてぃ×すた
作業療法士で、なんとメイクセラピスト1級を取得しているありこさんの
「おてぃ×すた」は、作業療法士・メイク・働き方などを紹介するブログです。
薄紫・淡いブルーがメインカラーで、
見ているだけで癒されます♡
アイキャッチの背景は大理石で
とてもお洒落!
無地だとシンプルすぎるけど、ごちゃごちゃするのも見にくいしなあ。。
というときに使えるのが「大理石(マーブル柄)」!
エレガントさも出るのでおススメです👍
ほはるブログ
育児・家事・DYIについて書かれているパパ、はるさんの
「ほはるブログ」
はるさんのアイキャッチは文字が大きくて、とにかく見やすい!
見やすいフォントとサイズ感をとらえているね👍
写真の上に白いヴェールを敷いたようなデザインもお洒落ですね♪
Maruyan Room
美容・お金・勉強など、
さまざまな役立つ情報を発信されているまるやんさんの
「Maruyan Room」
ブログもアイキャッチも、とにかく可愛い!!!!♡
淡い色合いが、女の子らしさをイメージさせてくれますね。
まるやんさんは、ワンポイントでおしゃれ度がUPする
筆記体を取り入れるワザも活用してくれています☺
ビットコイン投資.com
ビットコインの投資についてメインに発信されているけんさんの
「ビットコイン投資.com」
全体の背景はホワイトなので、
カラフルなアイキャッチがとても映えます!!
アイキャッチのフォントも
見やすい文字を選んでいるから、目に留まりやすい!
夢みるナマケモノ。
子育て・ブログ・料理などの雑記ブログを運営されているmonoさんの
「夢みるナマケモノ。」
カテゴリーごとにデザインを変えているけど、
使うフォントは全て同じなので
全体的なイメージは統一しつつ、
アイキャッチを見るだけでカテゴリーが分かるという素晴らしさ!
手書き風フォントで
柔らかさ・親しみやすさを演出しているね♪
軽音部かあさんブログ
大人になってからギターを始めて、バンド活動もされているおんぶけいさんの
「軽音部かあさんブログ」
テーマは「Cocoon」!!
アイキャッチにもおすすめカードにも
オシャレな英語が見られます。
筆記体でそれっぽく見せるワザを使いこなしている!!
ちぇりのブログ
雑記ブログを運営している、ちぇりさんの
「ちぇりのブログ」は、実体験をもとした役立つ情報が満載です!
アイキャッチ・記事内に写真がたくさんあるから
分かりやすいし、信頼できる!
カテゴリーごとにアイキャッチの色が違うので、
一目で何の記事か分かります👍
筆記体でおしゃれ度もアップしているよ!
エンクラ!
クライミングが趣味のだいぶつさんの
「エンクラ!」は、ボルダリングがメインのブログです。
ブログ全体がカーキがかったベージュで統一されていて、
アイキャッチの背景でも同じ色を使用されています☺
アイキャッチに使うイラストの配色も
サイトカラーと合わせているから、統一感抜群!!!👍
ヘッダー・おすすめカードのデザインも
おしゃれだよ♪
Polish
ズボラだけど、可愛くなりたい!という人向けに
ズボラでも続けられる自分磨きの方法を伝授してくれる、ちゃむさんの
「Polish」
ズボラとは思えないぐらい
デザイン性が高い!
テンプレ化すると、
簡単 & すばやく、
こんなにクオリティの高いアイキャッチが作れるんですね!☺
toa blog
健康・美容・サウナを主に発信されているとあさんの
「toa blog」
ブログのデザインは「地中海」のイメージだそう♪
アイキャッチはまるでタイルみたい!
地中海のおしゃれな雰囲気にピッタリ💛
テーマは当ブログと同じ「Cocoon」を使用されています☺
無料テーマでもここまでオシャレに作れるんですね!
Cocoonユーザーは要チェック👍
現役SEの馬には乗ってみよ人には添うてみよ
IT業界・プログラミングについて書かれているgugusukeさんの
「現役SEの馬には乗ってみよ人には添うてみよ」
なんとgugusukeさんは、
オリジナルのキャラクターを作ってしまったそう!すごい!
ブログやアイキャッチにマスコットを入れると
個性が出ておススメです👍
アイキャッチだけで、
あ、〇〇さんのブログだ!と覚えてもらいやすくなる!
kazu for free lifestyle…
作業療法士のkazuさんが運営する
「kazu for free lifestyle…」では、心と身体のケア方法やブログ運営について学べます!
数字と英語がバランスよく入っているから
見やすい!!
他にも、当記事で紹介したアイキャッチの作り方を全て実践してくれています☺
画像・イラスト・数字・英語。
すべてが詰め込まれたデザインにこだわりを感じますね!
さつきのブログ
大学生、さつきさんが運営する
「さつきのブログ」は通信高校についてや大学生活についての記事がメイン。
アイキャッチに登場するマスコットキャラ、めっちゃ可愛くないですか?!
思わず、どこでイラストを見つけているのか
聞いちゃった!!
それが、、まさかのCanvaだったんです!
やっぱりCanvaは優秀すぎる😂
色の組み合わせ方もセンス抜群です♪
あやんブログ
仕事・映画などの雑記ブログを書かれているあやんさんの
「あやんブログ」では、オリジナルの連載漫画が楽しめる!!
とってもゆる~い恐竜ちゃんイラスト、癒されます。。。
私もすぐにファンになりました!
恐竜ちゃんに見つめられると思わずクリックしちゃう人も
多いのでは、、、?
ゆまブログ
雑記ブログを運営するお母さん、ゆまろさんの
「ゆまブログ」
私のお気に入り記事がこちら▼
この記事めっちゃ面白いから読んで欲しい(笑)
話がそれましたが、アイキャッチを分析していきましょう。
全体を淡いピンク、くすみピンクで統一したおちついたデザイン。
面白い記事とのギャップに完敗です!!!
意外性・ギャップを出して、周りと差をつけるのも効果的👍
むさしのつぶやき
仕事・転職・サウナをメインに書かれているむさしさんの
「むさしのつぶやき」
むさしさんは、完全にアイキャッチのデザインを揃えられています!
文字を変えるだけだから
アイキャッチ作成があっという間だね!
また、ゾウのマスコットキャラを取り入れることで
覚えてもらいやすいデザインに♪
ミキサクの夫婦deブログ
夫婦でブログを運営されているミキサクさんの
「ミキサクの夫婦deブログ」は、
暮らしを豊かにするワザを紹介してくれる雑記ブログです。
ヘッダー画像、アイキャッチ両方に「桜」がちりばめられていて
ぽかぽかした春のような雰囲気を与えてくれます☺
他では見られない個性的なデザインで
周りと差を付けよう!!
もっちログ
【育児×ワンオペ×ずぼら】な内容を発信されている
2児の母、もちママさんの「もっちログ」
淡い色合いの画像や曲線の図形、丸みのあるフォントで
子育てにぴったりな「優しいイメージ」をうまく引き出している!
プロフィール画像もゆるふわイラストで
やさしさがひしひしと伝わってきます♡
ふんわりしたイメージのブログに仕上げたい方は
このようにベージュやグレーを取り入れましょう!
ゾロメ局
お金に関する特化ブログを運営されているゾロメさんの
「ゾロメ局」
あえてグレー感の強い暗い画像を背景にチョイスすることで、
タイトルが際立ちますね!
「金利が低くてお金が貯まらない?」のサブの部分で
小さめの文字 & 目立ち過ぎないフォントを使うことで
タイトルとの差別化ができています!!
読んでもらいたいタイトルを
見やすくするよう心がけよう!
笑顔を贈る出産祝い
2児の母であるまほさんが運営する
「笑顔を贈る出産祝い」は、
本当に喜ばれる出産祝いがメインのブログです。
コウノトリが赤ちゃんを運んでいるデザインに
ほっこりしますね☺
こんな風に、
コンセプトにあったデザインを心掛けよう!
ももぷーぶろぐ
面白い経験談や、おいしいパンについて発信されているももぷーさんの
「ももぷーぶろぐ」
右上の水彩画と筆記体がポイントになっていてとっても可愛い!♡
ももぷーさんは記事内で
方言で話しかけてくれるから
友達と話してるみたいなの!
温かみを感じるデザインからも親しみやすさが感じられるブログです。
okazu blog
ヘアケアマイスターの資格をお持ちの元美容師、おかずさんの
「okazu blog」は、ヘアケアをメインに発信されています。
オレンジをメインカラーに、
アイキャッチでは淡い色で変化を見せるおしゃれっぷり!
カラフルだけど、奇抜な色じゃないから
やさしい印象に♪
あむさいのブログ
元薬剤師のお母さん、あむさいさんの
「あむさいブログ」
パステルカラーがかわいらしいデザインのアイキャッチです☺
丸っこいフォントと愛らしいイラストが
パステルカラーと相性抜群!
それに比べて、クラウドワークス関係の記事のアイキャッチを
スタイリッシュなデザインにすることで
対比を見せている!見ていて飽きないブログです☺
ミニマリストのゆるい暮らし。
ミニマリスト、かてぃさんの運営する
「ミニマリストのゆるい暮らし。」では実際につかってよかった物などを
発信されています。
記事のコンセプトに合わせたデザインが多く見られます。
例えばこちらの記事はレトロなカフェについてですが、
アイキャッチにもレンガ色と紺色を取り入れることで
「レトロ感」が伝わるデザインに☺
色にこだわってデザインしよう!
ハイレグブログ
超低出生体重児の育児・育児中でも楽しめるゲームについて発信されている
変態ハイレグ仮面さんの「ハイレグブログ」
人気フリー素材サイト「いらすとや」の画像を
取り入れたアイキャッチが特徴です。
同じイラストサイトの画像をつかうと、
統一感が生まれるよ!
シンプルで見やすいアイキャッチですね♪
ペンギン看護師の雑記
ペンギン看護師さんが運営する雑記ブログ
「ペンギン看護師の雑記」はスキンケアやコスメ、
オンラインショッピングのお得情報が満載です!
ブログ全体はパステルピンクで可愛らしいイメージ♡
アイキャッチも可愛らしいデザインで統一されています☺
美容系で女性をターゲットにするときは、
可愛いデザインでヒットを狙える!!
アイキャッチを見るだけで女子力が上がりそう!
FIREへの道
仮装通貨・資産運用について書かれている、ゆうさんの
「FIREへの道」
かくかくした形 & 電気を連想させるシルバーとライトブルーの色づかいが特徴。
デジタルっぽさあふれるデザインが
ブログのコンセプトに合っている!
スタイリッシュなデザインの参考になりますね!
【おしゃれなアイキャッチの作り方】まとめ
今回は「アイキャッチの作り方」をご紹介しました。
この記事が、デザインについて分からない方のお役に立てたらな。と思っています(´艸`*)
普段は英語学習についての記事を書いているので、ぜひ覗いてみて下さい。
最後まで読んで頂きありがとうございました。
皆さんのブログがもっと充実しますように♥
コメント
[…] U Love English 【ブログ】おしゃれなアイキャッチの作り方 | デザイン初心… Teru […]