①アイキャッチ画像のデザイン例10枚【シンプル&シカク編】

アイキャッチ画像 デザイン例 Canva

 

アイキャッチ画像の作成って、ブログやってて地味に大変じゃないですか?

とくに、初心者の方はこんな感じになると思います。

困っている人
それっぽいアイキャッチ画像を作りたいけど、やり方がまったく分からない。中上級者ブロガーみたいにかっこよく仕上げたいけど、カンタンにできる方法はないかなあ……。

 

ブログを始めたての僕も、こんな感じでした。そんで、アイキャッチ画像についてはめちゃくちゃ苦労しました。

フリー画像を貼るだけでは他の人と被りまくりだし、かといって自分で1からつくりあげるのは大変過ぎるんですよね……。

せめて、お手本となる汎用性の高い「アイキャッチ画像デザイン集」みたいなものがあれば……。

 

ということで、今回その「アイキャッチ画像デザイン集」なるものをつくっちゃいました笑

この記事を読んでいけば、シンプルかつオシャレなアイキャッチ画像のデザイン例を10コ学ぶことができますよ(^o^)

 

今回は第一弾として【シンプル&シカク編】のコンセプトになります。

 

オコな人
なんでお前から学ばなきゃなんないんだよ!

と思うと思うので、一応、実績的なとこも紹介しておきます。

 

アイキャッチ画像を作るサービスを「ココナラ」などで販売してます。

 

 

もちろんプロのデザイナーというわけではないですが、 「ぜひ≪よぴ≫に作ってもらいたい!」という人が僕にお金払って指名してくれている事実があります。

あとは、この記事のアイキャッチ画像をGIFアニメーションにしています。今回お話しする「アイキャッチ画像デザイン集10枚」を載せてますね。

※パッパッパッと画像が移り変わる仕様なので、見慣れない人はビビったかもしれませんw

 

まあ、そこらへんで僕から盗むかどうか判断してください。

 

また、画像デザインに関してはセンス皆無でスタート。

その中で独学で苦心惨憺しつつ頑張ってきた身です。

なので、初心者や画像デザインに行き詰っている人の気持ちはリアルに理解できます。

 

本記事では、 画像付きや動画付きでわかりやすくやり方やポイントを解説していきますので、気になる人はぜひ読み進めてみてください。

 

 

※ちなみに、これらのデザインデータのテンプレ販売もしています。

(10枚つづりで500円。先行販売につき部数を限定してのセール価格です。売り切ったら普通に倍の価格とかにするつもりなので、あなたが見てるときに価格上がってたらゴメンナサイ汗)

※詳細は一番下に載せましたので、興味ある人はぜひご検討下さい(*_ _)

 

 

【前提】アイキャッチ画像のデザインは『Canva』一択。非デザイナーでもイイ感じの作品をカンタンに作れるので、フル活用しよう。

アイ キャッチ 画像 デザイン

 

 

使用ツールですが、僕が使っているのは『Canva』だけです。

基本、アイキャッチ画像は『Canva』だけでも完結します。

 

知らない人のために軽く説明すると、以下の通り。

 

 

 

画像デザインの総合ツール『Canva』

 

・無料で使える

・操作性に優れている

・テンプレートや素材が豊富

・ダウンロード不要(オンラインツール)

 

 

 

『Canva』は、Photoshopやillustratorのようにお金がかかりません。かつオシャレな画像デザインを作るための補助線をたくさん用意してくれている神ツール。

『Canva』を導入すれば、僕らのような非デザイナーでも、それっぽいイイ感じの作品をカンタンに作ることができちゃいます。

ブログやってて『Canva』をまだ入れていない人は即入れてください!!

 

以下、キャンバの公式サイト。

https://www.canva.com/ja_jp/

※オンライン上で1分で登録できます。

※「Googleで登録」を選ぶと楽ですよ。

 

それでは、アイキャッチ画像のデザイン例10コほど見ていきましょう!

 

そのほかの前提条件

背景:ごちゃごちゃしていないシンプルな背景画像を使っています。

→慣れないうちは山、川、海、空などの自然系を使いましょう。文字が映えやすいです。

 

文字配置:サブタイトル(大きさ・中)→メインタイトル(大きさ・大)→飾り文字(大きさ・小)の「サンドイッチ型」を使ってます。

 

アイ キャッチ 画像 デザイン

 

→基本かつ汎用性も高いです。文字数が多くなる場合は、サブタイトル(大きさ・中)→メインタイトル(大きさ・大)だけでもOK。逆にして、メインタイトル(大きさ・大)→サブタイトル(大きさ・中)もOK。

 

 

色見:文字や図形の色は、わかりやすく白か黒のみ使っています。

→配色はプロでも悩むと言われているめっちゃムズイ分野です。迷ったら、とりあえず白黒つかっておけばOK。

 

コンセプト:図形(今回はシカク)を用いたシンプル~なアイキャッチ画像の作例にしました。

→とくに、シカク(長方形、正方形、帯、枠)は汎用性・応用性が抜群。死ぬほど重宝する図形ですので、ぜひ覚えてみてね。

 

 

 

アイキャッチ画像のデザイン例①【白太枠】

アイ キャッチ 画像 デザイン

 

まずは、白太枠をつかったシンプルなパターンから。

背景画像の中に枠線を作ってあげて、その中にキャッチコピーを収めるイメージです。

 

使っている「素材」は、

 

 

・≪四角い枠線≫

・≪長方形(色:濃いグレーで25%まで透過)≫

 

 

です。

 

≪長方形(色:濃いグレーで25%まで透過)≫を使っているのは、白文字が見にくかったので、枠線の中にさらに長方形を敷いて文字を目立たせました。

※背景の写真も隠さずに見せたかったので、グレーのべた塗りにはしないで、25%まで透過しています。

※透過は右上のアイ キャッチ 画像 デザインこんなマークを押せば調整できます。

 

 

Canva上での素材の出し方は、

 

・左側の「素材」 → 検索窓に「四角」と入力 → 下にスクロール

 
 

でいろいろ見つかります。

 

アイ キャッチ 画像 デザイン

 

こんな感じですね。

(※このような説明画像もCanvaで作れます。便利すぎw)

 

枠線の中に敷いている≪長方形≫についても、同じく

 

・左側の「素材」 → 検索窓に「四角」と入力 → 下にスクロール

 

で下の方にあります。

(※正確には≪正方形≫を引き延ばして≪長方形≫にリサイズしてます)

 

アイ キャッチ 画像 デザイン

 

 

最近おぼえた、GIFアニメーションの技を使って説明すると以下のように。

 

アイ キャッチ 画像 デザイン

 

 

注意点ですが、「素材」や「写真」内にある$(ドル)マークのものは課金しなければ使えないので、スルーするようにしましょう。

 

アイ キャッチ 画像 デザイン

 

こういう奴ね。右側のとかおしゃれで使いたくなるけど汗

 

あと、使った素材は「いいね」に保存するなどすれば、のちのち見つけやすいです。

 

アイ キャッチ 画像 デザイン

 

「いいね」は「素材」や「テキスト」と同じ欄の、もっと下側にあります。

※「フォルダ」を押すと立ち現れます。

 

アイ キャッチ 画像 デザイン

 

 

その他ポイント
アイ キャッチ 画像 デザイン

 

その他のポイントは↑画像の3点。

 

①文字や文章を「\ /(スラッシュ)」で囲む

②目立たせたい単語や文章の下に「線(今回は太く短く調整)」を引く

③数字系は図形や枠線で囲ったり、アイコンを使ったりでさりげなくおしゃれに

 

実際に自分でCanvaを動かせばわかりますが、今あげた①~③は全然ムズかしいテクニックではないです。むしろ超カンタン。

誰でもできる上にあらゆるシーンで使える小技ですので、ぜひ真似してみてください。

※文字や図形とのスペース間隔や大きさのバランスだけ自分で微調整しましょう。

 

 

アイキャッチ画像のデザイン例②【白太枠+α】

アイ キャッチ 画像 デザイン

 

 

続いては、先ほどの【白太枠】の変形バージョン。

枠の上部に、横長の長方形を敷いてます(べた塗り。透過ナシ)。

 

その長方形内に文字(「アイキャッチ画像」)を配置したのですが、今回、黒だとどうしても合わなかったので、例外的に濃い青を使いました。

 

それ以外は先ほどの【白太枠】を踏襲して、やや変化させただけ。

変化したポイントとしては、

 

 

①<>みたいな図形で「アイキャッチ画像」の文字を囲った

 

※「素材」→検索窓に「矢印」で出てきます。だいぶ下の方にある。

 

②「シカクを使いこなす」の下に、細線を敷いてみた(文章全体に細い下線)。

 

 

こんなもんです。以上。

 

はい、次いきましょう!

 

 

アイキャッチ画像のデザイン例③【黒細枠】

アイ キャッチ 画像 デザイン

 

 

今度は、黒い細枠で囲っています。

文字の色も黒一色。

 

細枠を使うとシャープな感じを表現できます。

 

「アイキャッチ画像」「シカクを使いこなす」の下には、細い下線を敷きました。

だいぶシンプルですが、ごちゃごちゃしすぎたデザインよりもかえってオシャレに見せることができますよ。

 

 

アイキャッチ画像のデザイン例④【黒細枠+α】

アイ キャッチ 画像 デザイン

 

 

先ほどの【黒細枠】を変形させて少し遊んだバージョン。

デザイン例②の【白太枠+α】と構造は一緒です。

 

遊びポイントは、「シカク」の文字と下線を白にしてみたとこですかね。

 

 

アイキャッチ画像のデザイン例⑤【白二重枠な長方形】

アイ キャッチ 画像 デザイン

 

 

白の二重枠で囲み、中に長方形を敷いたパターン。

中の長方形は、かなり濃く透過しています。(80%)。

 

文字色をすべて黒にしているため、薄すぎる白だと文字が目立たなくなるからです。

 

 

あと、このパターではけっこう遊んでいて、以下の要素がポイントです。

 

ポイント

①「アイキャッチ画像」の下線を四角ブロックで点線に

②「シカク」の背景に図形を使って、マス目風に

③「シカクを使いこなす」が横幅ギリになるため、一部の文字を傾けてバランスを死守

 

 

①については、図形素材ではなく「テキスト」で表現しています。

 

 

手順1:「しかく」と打つと予測候補に「■」がでてくるのでそれを選択。

手順2:三つくらい「■ ■ ■」と入力する(間にスペースを挟む)。

手順3:その三つをコピーして、またスペース入れて、貼り付け。

手順4:六つになった「■ ■ ■ ■ ■ ■」をまたコピーして(以下略)。

手順5:イイ感じに下線ができたら、大きさや位置の調整をして完成。

 

 

またまたGIFアニメーションを載せときます。

(わりと手間w 動画で説明したほうがラクだったかも笑)

 

【真似OK】アイキャッチ画像のデザイン例10枚【シンプル&シカク編】

 

 

②の「マス目風」は白い正方形×3、黒い枠線×3を組み合わせて作っただけ。

以下、便利なので覚えておいてもいいでしょう。

 

 

・Canva内の「コピー」を使う

・左クリックしたままドラッグで「グループ化」する

・「グループ化」したものをコピペして数を増やす

 

 

GIFアニメだと死ぬほどめんどいので、YouTubeで実演した動画をとりました(無言ですw)。くわしい方法は以下を見て真似してください。

↓ ↓ ↓

 

 

アイキャッチ画像のデザイン例⑥【白二重枠な正方形】

アイ キャッチ 画像 デザイン

 

 

続きまして、白二重枠の正方形。正方形にして、中央に配置したパターン。

今回は中央に配置していますが、背景画像によって、左右に配置するのもアリです。

 

ここについては補足しておくことはまったくありません汗

 

しいて言えば、「シカクを使いこなす」を改行して、【】で囲んであげたくらいかな。

あ、あと透過は使わずにべた塗り(透過100%)でやってます。

 

 

アイキャッチ画像のデザイン例⑦【映画風の帯】

アイ キャッチ 画像 デザイン

 

 

正方形を横長に引きのばして帯状にしたものです。

ブロガーのアイキャッチ画像で多用される、基礎の基礎の基礎な画像デザインパターン。

 

ここでは、ちょっと変化をつけました。

ご覧の通り、上下の境界線を黒太線でつくってあげています。

 

なんとなく、【映画風な帯】みたくなってオシャレですよね。

これも、カンタンなワンポイントテクなので、気に入った方はとりいれてみてください。

 

 

アイキャッチ画像のデザイン例⑧【映画風の帯+α】

アイキャッチ 画像 デザイン

 

 

先ほどの【映画風な帯】でもうちょっと遊んでみたパターン。

 

ポイントは、以下。

 

ポイント

・帯全体と文字全体を傾けて勢いみたいなのを出す

・帯の外側の背景をあえて暗くして、そこに白文字(飾り文字)をのせる

 

ちな、カタムケルのは僕けっこう好きで、ついつい多用しちゃってますね( ˙▿˙ ; )

 

 

 

アイキャッチ画像のデザイン例⑨【右端に写真】

アイキャッチ 画像 デザイン

 

 

はい、ラスト2コです。

今回は、かなりの変化球でつくってみました。

 

背景画像を変えてます。

右端にオブジェクトが来るように配置して、左側にボックス型の塗りつぶし図形を使いました。

 

背景にする写真や画像によっては、左端や右端に偏ってるものもあると思います。

そういったときは、このパターンのデザインが使えますね。

 

 

アイキャッチ画像のデザイン例⑩【付箋風】

アイキャッチ 画像 デザイン

 

 

ラスト。

図形を組み合わせて、【大きい付箋】っぽく作ってみました。

アイキャッチってよりも、プレゼン風な感じになっちゃいましたが……。

 

個人的には、ここまで奇をてらったものはあんま好みではないです。

まあでも、「Canva使えばこんな感じでいろんなことできるよ」って意図が伝われば幸いっす。

 

今回だしたアイキャッチ画像のデザイン例は、10コともCanva内のものしか使っていません。

Canvaだけでも十二分にアイキャッチ画像として機能することは証明できたと思います。

 

+αな小技で、外部サイトから「吹き出し」や「アイコン」や「飾り線」や「背景」を引っ張ってくる方法もあるのですが、そこらへんはまたの機会に。

とりあえず、Canva内にあるものでアイキャッチ画像を作れるように、目指してみてください。

 

おまけ:知識0からそれなりのアイキャッチ画像を作りたい方は、以下の記事を!

【初心者OK】アイキャッチ画像の作り方はCanvaを覚えれば一瞬です【プレゼント在中】

 

 

ここまで見てくれてありがとうございます<(_ _)>

 

おまけとして、

 

・デザイン完全初心者へ

・チュートリアル的記事

 

も作っています。

 

この記事を参考にしてその通りにやれば、

初心者のあなたでも、今日この場でアイキャッチ画像をつくれちゃいます(‘◇’)ゞ

 

完全版なので長いですが、ブックマークしておけばいつでも戻ってこれます。ブクマ推奨です。

 

↓ ↓ ↓

 

【初心者OK】アイキャッチ画像の作り方はCanvaを覚えれば一瞬です【プレゼント在中】

 

 

まとめ:アイキャッチ画像は図形(主にシカク)を使えばプロっぽいデザインにできるよ

アイキャッチ 画像 デザイン

 

 

ということで、まとめです。

この記事で主張していることで、「これだけは!」ってとこをまとめましたのでおさらいしてみてください。

 

 

まとめ

 

・とりま、Canva(キャンバ)導入しよう

・色見はムズい要素なので白黒をつかえばOK

・中、大、小のサンドイッチ文字配置を使おう

・背景写真は文字が映えるシンプルなものを選ぼう

・シカクの図形(長方形、正方形、枠、帯など)を文字の下に敷こう

 

 

初心者の方やセンスに絶望している方は、 上記を守っておけばほぼほぼ外すことはないので、ぜひ押さえてもらえればと思います。

細かいテクニックについては、記事中で動画なども使ってくわしく解説していますので、繰り返し読み返してみてください。

また、この記事が「イイ感じだな」と思ったら、ブックマークして再訪していただければ幸いです。

 

 

P.S.今回の『アイキャッチ画像デザイン例10枚』ですが、テンプレートとしても販売してます。

 

 

ちなみにですが、この『アイキャッチ画像デザイン例10枚』テンプレ化してデータ販売もしております。

 

ポイント

◎Canva上であなた好みのカスタマイズが可能になります

→文章(キャッチコピー)、背景、色、文字フォントなどすべて変更できます。

☆Canvaの基本操作や便利なテクニック集などを易しく解説した動画マニュアル付き(特典ページへご案内します)

→むしろこっちのボリュームの方が多いです笑。このノウハウ目当てで購入するのもアリよ。Canvaの使いこなし方って情報として少ないし、あってもブログとかのテキストメインなのでわかりづらいんですね。

 

 

オススメな人

 

初心者すぎるので、お手本をイッコ買って、そこからいろいろ勉強してみたい(自分でもいじってみたい)。

アイキャッチなどの画像デザインはそんな好きじゃない(むしろ嫌い)ので、できれば使いまわしなど効率化したい。

兼業、副業、主婦ブロガーにつき、ブログにおける作業時間が極端に限られている(効率化が強く求められている)

 

こんな人にオススメの商品になります。

 

 

ちなみに特典ページ【らくらくデザイン講座 ー Master Canva ー】は、実に40動画オーバーのウルトラ大容量!!!

Canvaやアイキャッチ画像の基礎から応用的な部分までオールインワンパッケージで学習することができますよ♪

 

よぴ

正直これは教えたくなかったな……。

 

っていうようなテクニックやノウハウも惜しげなく開放しちゃってます笑

 

目次をチラ見せするとこんな感じ。↓↓

アイキャッチ画像 デザイン例 Canva

 

全部YouTube動画で説明しているので視覚的にも分かりやすいです。

1回見ればなんとなくは理解できるはずですので、「2倍速」とかも活用しながら、学習ハードル下げつつ自分のものにしましょう!

 

注意!

 

※Canvaの共有リンクを発行する形にしています。元データをいじると購入した人全員に反映されますので、≪必ず≫元データを「コピー」してからご利用ください。

→ご購入後にお渡しする動画マニュアルにて詳しい方法を解説しています。

 

 

 

価格ですが、先行販売としてなんと ワンコインの500円にて販売中!

のちのち、2倍の1000円にて販売するつもりですので、迷ってる方はお得な今のうちに購入することをおすすめします。

 

以下、BASEの販売ページからご購入下さい。クレカが使えます!

 

【販売用001】アイキャッチ画像のテンプレート(シカク&シンプル10枚)

 

※銀行振込がいい人は、お問い合わせページからその旨をお伝えください。

 

あと、第1弾~第5弾までの60枚分+αをまとめ売りもしています(大特価びっくり価格)。

複数のテーマをご検討の方はコチラの方が確実にお得ですので、ぜひコチラからお買い求めください。

【006】アイキャッチ画像のテンプレート(72枚セット)

 

ポイ活 ポイントサイト 無職

【無職OK】ポイ活で30万円をGETセヨ

 

高額ポイ活なら、コツを抑えてガチれば ほぼ誰でも稼ぐことができます!
僕自身も裏でこっそり荒稼ぎしちゃってますんで笑

 

じつは、超高額のFX案件を中心に 1年以上ガチで研究&実践してます(‘◇’)ゞ
もうすぐ獲得pt合計30万円に届いちゃいそうな勢いwww

 

~ 俺のノウハウか? 欲しけりゃくれてやる!~
~ 読め! その書のすべてをそこに置いてきた!~

 

\ 総7.5万文字!超有料級! /

 

ゆるプア同盟

 

【年500円】ゆるプア同盟でGIVEを磨こう!

 

無職界の革命戦士、よぴがお届けする至高の問題作!!!
 

オンラインサロン『ゆるプア同盟』。

 

ともに、天空の世界まで昇っていきましょう(‘◇’)ゞ

 

~ 与えよ、さらば与えられん。~

 

\ GIVEの実践道場! /

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください