※【マテリアル編】※
アイキャッチ画像の作成で、背景画像を使わずにオリジナルで作りたいと思ったことはありませんか?
とくに、ある程度アイキャッチ画像を自分で作ってきた方は、こんな感じになると思います。

そこで、お手本となる汎用性の高い「マテリアル風なアイキャッチ画像のデザイン集」みたいなものがあれば……。
ということで、今回その「マテリアル風なアイキャッチ画像のデザイン集」なるものをつくっちゃいました笑
この記事を読んでいけば、マテリアル風(フラット風)なアイキャッチ画像のデザイン例を10コ学ぶことができますよ(^o^)
今回は第四弾として【マテリアル編】のコンセプトになります。

と思うと思うので、一応、実績的なとこも紹介しておきます。
アイキャッチ画像を作るサービスを「ココナラ」などで販売してます。


もちろんプロのデザイナーというわけではないですが、 「ぜひ≪よぴ≫に作ってもらいたい!」という人が僕にお金払って指名してくれている事実があります。
あとは、この記事のアイキャッチ画像をGIFアニメーションにしています。今回お話しする「マテリアルなアイキャッチ画像デザイン集10枚」を載せてますね。
※パッパッパッと画像が移り変わる仕様なので、見慣れない人はビビったかもしれませんw
まあ、そこらへんで僕から盗むかどうか判断してください。
また、画像デザインに関してはセンス皆無でスタート。
※昔の記事のアイキャッチ画像とか見るとひどすぎて。死にたい……。
(そのうち直しますが、何かしらの記事で「ひどすぎるアイキャッチ過去作」もまとめたいと思います)
そんな中、独学で苦心惨憺しつつ頑張ってきた身です。
なので、初心者や画像デザインに行き詰っている人の気持ちはリアルに理解できます。
本記事では、 画像付きや動画付きでポイントを解説していきますので、気になる人はぜひ読み進めてみてね☆
※ちなみに、これらのデザインデータのテンプレ販売もしています。
(10枚つづりで500円。先行販売につき部数を限定してのセール価格です。売り切ったら普通に倍の価格とかにするつもりなので、あなたが見てるときに価格上がってたらゴメンナサイ汗)
※詳細は一番下に載せましたので、興味ある人はぜひご検討下さい(*_ _)
目次
- 1 【前提】アイキャッチ画像のデザインは『Canva』一択。非デザイナーでもイイ感じの作品をカンタンに作れるので、フル活用しよう。
- 2 1.文字メインでシンプルさを追求の術
- 3 2.裏に透かしを敷いちゃったの術
- 4 3.対立構造でレビュー記事を想定の術
- 5 4.口コミ評判の記事で汎用性アリな術
- 6 5.ツールまとめ系や「〇選」を意識の術
- 7 6.オリジナル囲みで文字を目立たせるの術
- 8 7.メリデメに広く使えるの術
- 9 8.特典やメリットの記事に、の術
- 10 9.すみません汎用性は低いけど一応マネはできるよ、な術
- 11 10.快眠グッズしか使えないやんけ!に見せかけての術
- 12 おまけ:知識0からそれなりのアイキャッチ画像を作りたい方は、以下の記事を!
- 13 まとめ:アイキャッチ画像はマテリアル風デザインにもできるよ!
【前提】アイキャッチ画像のデザインは『Canva』一択。非デザイナーでもイイ感じの作品をカンタンに作れるので、フル活用しよう。

使用ツールですが、僕が使っているのは『Canva』だけです。
基本、アイキャッチ画像は『Canva』だけでも完結します。
知らない人のために軽く説明すると、以下の通り。
画像デザインの総合ツール『Canva』
・無料で使える
・操作性に優れている
・テンプレートや素材が豊富
・ダウンロード不要(オンラインツール)
『Canva』は、Photoshopやillustratorのようにお金がかかりません。かつオシャレな画像デザインを作るための補助線をたくさん用意してくれている神ツール。
『Canva』を導入すれば、僕らのような非デザイナーでも、それっぽいイイ感じの作品をカンタンに作ることができちゃいます。
ブログやってて『Canva』をまだ入れていない人は即入れてください!!
以下、キャンバの公式サイト。
※オンライン上で1分で登録できます。
※「Googleで登録」を選ぶと楽ですよ。
それでは、アイキャッチ画像のデザイン例10コほど見ていきましょう!
文字配置:基本は、サブタイトル(大きさ・中)→メインタイトル(大きさ・大)→飾り文字(大きさ・小)の「サンドイッチ型」を使ってます。

→基本かつ汎用性も高いです。文字数が多くなる場合は、サブタイトル(大きさ・中)→メインタイトル(大きさ・大)だけでもOK。逆にして、メインタイトル(大きさ・大)→サブタイトル(大きさ・中)もOK。
色見:文字や図形の色は、今回いろいろ使っちゃってますね。すみません(^-^;
→配色はプロでも悩むと言われているめっちゃムズイ分野です。もし迷ったら、とりあえず白黒つかっておけばOK。
コンセプト:マテリアル風なシンプル~キャッチーなアイキャッチ画像の作例にしました。
→マネできそうなカンタンなものや汎用性の高いデザインも作ってます。この記事見ながら、ぜひ覚えてみてね。
1.文字メインでシンプルさを追求の術

はい、デジャブですみません汗
先ほど見出し下で見せた画像ですね。
こういう、背景画像を使わない画像デザインを「マテリアル風」「フラット風」と呼んだりします。
この画像ではわりとシンプル目なデザインにしましたので、ぜひ真似して見てみてください。
ちなみに、一番下の英文字「Design becomes fun」は【飾り文字】と呼ばれる技法。
あえて英語にしたり小さ目にしたりしてオシャレさメインで起用しています(別に読まれなくていい。あくまで「デザイン」のために使う)。
ちな「Canva」の立体感の出し方ですが、この記事の最後の方で動画実演にて解説しました(^o^)
2.裏に透かしを敷いちゃったの術

ちょっと複雑化させてみました。
裏に敷いている本っぽいアイコンは、「透明度」で10%くらいまで落として「背面へ」で作ってます。
この技は超便利です。
僕はエネルギー弾ばりに連打(重宝)していますが、よそ様のアイキャッチデザインではあんまり見ないのでぜひ盗んでみてね☆
どんなアイコンでも基本は使えるよ。
あと、左上に「三角形」の図形を敷いて、≪ドッグイヤー風≫にしてるのもポイント。
ノウハウ系、まとめ記事系にいいかも。
3.対立構造でレビュー記事を想定の術

「グッド(よかった点)」「バッド(悪かった点)」の対立構造。
上の「TOYBOX(トイボックス)」を商材名に変えれば、そのまんまレビュー記事(アフィリエイト記事)にも使えますね。
言葉は少なめですが、アイコンを効果的に使うことで伝えたいこと表現できるのも画像デザインの魅力です!
ちな、キャンバ上にいいアイコンなかったら、以下で探しましょう。
↑↑ 神サイトよ。
4.口コミ評判の記事で汎用性アリな術

アフィ記事(レビュー記事)つながりで、【口コミ評判】に使える画像デザインも作ってみた。
なにもアイキャッチじゃなくてもH2見出し下の画像に使っても良き。
僕も本気出してる記事(収益記事)には、H2見出し下にこういったオリジナル画像を自作しています。
アイコンは『いらすとや』さんです!
いつもありがとうございます<(_ _)>
5.ツールまとめ系や「〇選」を意識の術

今度はツールまとめ系や「〇選」系の記事に使える、アイキャッチの画像デザイン。
わりと正統派な感じかな。アイコンはけっこう多用してるけど。
アイコンは透かしてなじませてます。
あ、「ー ALL FREE ―」は飾り文字ね。
6.オリジナル囲みで文字を目立たせるの術

文字を目立たせたパターンも。
マテリアル風っていうか挿絵風ですが(^-^;
物議をかもすような投げかけ(短いキャッチコピー)などで使います。
囲んでる図形は全部キャンバ上にあるよ。
7.メリデメに広く使えるの術

メリデメの記事に。
けっこうシンプル目ですがその分伝わりやすいよね。
このくらいの簡素さだったら、ほとんどの人作れると思うのでトライしてみてください!!
もちろん、構図とか色見とかパクってもいいですよ。どんどんパクってみて(`・ω・´)
※これもキャンバ内の素材だけで作ってますので。
8.特典やメリットの記事に、の術

Amazonの記事にと作ったアイキャッチ画像ですが、裏のアイコンとかサービス名とか変更すれば汎用性も高くなるはず。
特典やメリットの記事に。
いや。文字配置とかの構図を崩しまくってたり、裏の透かしアイコンの感じだったり、オリジナリティ出しすぎ感も汗。
ある意味で僕(よぴ)っぽさの強いアイキャッチ画像デザインです。
9.すみません汎用性は低いけど一応マネはできるよ、な術

すみません、これもオリジナリティ出しすぎちゃってますが、何かしら構図とかではマネできるはず。
例えば、「泣ける映画(やアニメ)10選」とか「マジで驚いた叙述トリック7選」とか。
左側の「爆笑男の子」を「泣いてる男の子」「ビックリ男の子」とかにして、≪草 www ドっ≫とかを消したり変えたりして、あとは右側の文字内容を変えればなんとか。
10.快眠グッズしか使えないやんけ!に見せかけての術

ラストです。
下に雲みたいな図形を起用。
これも「快眠グッズにしか使えないやん!」って思うかもしれませんが、じつはこれは汎用性あるパティーン。
右側のぐっすり三日月アイコンのところは、別物にすれば大丈夫。
あと「快眠グッズ」を別の文字にすればOK。
おまけ:知識0からそれなりのアイキャッチ画像を作りたい方は、以下の記事を!
ここまで見てくれてありがとうございます<(_ _)>
おまけとして、
・デザイン完全初心者へ
・チュートリアル的記事
も作っています。
この記事を参考にしてその通りにやれば、
初心者のあなたでも、今日この場でアイキャッチ画像をつくれちゃいます(‘◇’)ゞ
※完全版なので長いですが、ブックマークしておけばいつでも戻ってこれます。ブクマ推奨です。
↓ ↓ ↓
【初心者OK】アイキャッチ画像の作り方はCanvaを覚えれば一瞬です【プレゼント在中】
まとめ:アイキャッチ画像はマテリアル風デザインにもできるよ!

ということで、まとめです。
今回はぶっちゃけ「中上級者向け」な記事にはなりましたが、やってできないことはないので、カンタンなものからぜひ真似してみてください(^o^)
外部サイト使わなくても、Canva内だけでも余裕でイイ感じのマテリアル風デザインをつくれますよ~。
細かいテクニックについては、動画などでくわしく解説していますので、繰り返し読み返してみてください。
また、この記事が「イイ感じだな」と思ったら、ブックマークして再訪していただければ幸いです。
P.S.今回の『アイキャッチ画像デザイン例10枚』ですが、テンプレートとしても販売してます。

ちなみにですが、この『アイキャッチ画像デザイン例10枚』、テンプレ化してデータ販売もしております。
◎Canva上であなた好みのカスタマイズが可能になります
→文章(キャッチコピー)、背景、色、文字フォントなどすべて変更できます。
☆Canvaの基本操作や便利なテクニック集などを易しく解説した動画マニュアル付き(特典ページへご案内します)
→むしろこっちのボリュームの方が多いです笑。このノウハウ目当てで購入するのもアリよ。Canvaの使いこなし方って情報として少ないし、あってもブログとかのテキストメインなのでわかりづらいんですね。
オススメな人
初心者すぎるので、お手本をイッコ買って、そこからいろいろ勉強してみたい(自分でもいじってみたい)。
アイキャッチなどの画像デザインはそんな好きじゃない(むしろ嫌い)ので、できれば使いまわしなど効率化したい。
兼業、副業、主婦ブロガーにつき、ブログにおける作業時間が極端に限られている(効率化が強く求められている)
こんな人にオススメの商品になります。
ちなみに特典ページ【らくらくデザイン講座 ー Master Canva ー】は、実に40動画オーバーのウルトラ大容量!!!
Canvaやアイキャッチ画像の基礎から応用的な部分までオールインワンパッケージで学習することができますよ♪

正直これは教えたくなかったな……。
っていうようなテクニックやノウハウも惜しげなく開放しちゃってます笑
目次をチラ見せするとこんな感じ。↓↓

全部YouTube動画で説明しているので視覚的にも分かりやすいです。
1回見ればなんとなくは理解できるはずですので、「2倍速」とかも活用しながら、学習ハードル下げつつ自分のものにしましょう!
※Canvaの共有リンクを発行する形にしています。元データをいじると購入した人全員に反映されますので、≪必ず≫元データを「コピー」してからご利用ください。
→ご購入後にお渡しする動画マニュアルにて詳しい方法を解説しています。ごくカンタンなので必ずお願いします。
価格ですが、先行販売としてなんと ワンコインの500円にて販売中!
のちのち、2倍の1000円にて販売するつもりですので、迷ってる方はお得な今のうちに購入することをおすすめします。
以下、BASEの販売ページからご購入下さい。クレカが使えます!
【販売用004】アイキャッチ画像のテンプレート(マテリアル風10枚)
※銀行振込がいい人は、ブログのお問い合わせページなどからその旨をお伝えください。個別に対応致します。
あと、第1弾~第5弾までの60枚分+αをまとめ売りもしています(大特価びっくり価格)。
複数のテーマをご検討の方はコチラの方が確実にお得ですので、ぜひコチラからお買い求めください。
