日常の最中に、

ちょっとした楽しみを。

header-img

本当は教えたくない!ド素人でも3ステップでオシャレなアイキャッチが作れる「Canva」

誰にも言わないでね!

 

どうもー、もなかです。

最近の記事はちょっと頑張ってアイキャッチ画像も設定してるんですけど、どうでしょう?

 

良いでしょ? 良いよね?

 

別に......って人はその卓越したセンスを僕に少し分けてください。お願いします。

 

ド素人の僕でもこのくらいのアイキャッチ画像ならほんの10分くらいで作れる素晴らしいWEBツールがありますので紹介します!!

海外発の無料デザインツールCanva

Canvaとは2017年5月に日本語版がリリースされたばかりのWEBデザインツールです。

Amazingly Simple Graphic Design Software – Canva

―驚くほどシンプルなグラフィックデザインソフトウェア―
と自ら名乗ってますが、 本当に驚くほどシンプルで使いやすいんです。

 Canvaのスゴイ所

無料

ハイ、神。
アイキャッチがオシャレなブログって巧みな編集スキルを持った方がillustratorやPhotoshopを使ってるじゃないですか。

Canvaなら一部有料の操作はありますが、無料でも問題なくオシャレな画像を作成出来ます。神です。

WEB上で使える

ハイ、神。
使い始める際に面倒なダウンロードもインストールも必要ありません。

今少しでも興味があるならまず上のリンクからさくっと登録して使ってみるのが一番です!この後を読む必要もなくなります。

 

しかもネット環境さえあれば、作成途中であってもデータはWEB上に保管されるのでPCを変えようがすぐにさっきまでの状態から再開して作業を行うことが出来ます。神です。

直観的に操作出来る

ハイ、k(略

こういった画像編集ソフトなんてWindows標準のペイントくらいしか触ったことがなかった僕ですが、ほとんど調べたりすることもなく操作出来ました。

コピペやアンドゥなどのよくあるキーボードショートカットも使えますし、実際に触って試しながらで大体の操作は把握できます。

中央や端揃えなど、マウス操作で自動的に揃うのがとても使いやすいです。ポンポンと文字や図形を配置するだけで簡単に作成完了です。

豊富なテンプレート

ここがCanvaの一番のポイントだと言っていいでしょう。

最初からオシャレなデザインのテンプレートがたくさんあります。

センスに自信のない僕がすることは

3STEP
  1. 気に入ったテンプレートを選択
  2. 画像を記事の内容にあったフリー素材に変更
  3. 文字をタイトルに沿って変更

以上です。ホーラ簡単。

オシャレな日本語フォントも使える

僕が一番嬉しいのはコレ。

標準でいくつかのフリーフォントが入っています。
英字が多いけど日本語もちゃんとあります。

センスがある人は英字もカッコよく活かせるでしょう。僕は無理でした。

ただフォントを増やすのは有料なんです。

ここまで無料で文句は言えないけど
そっかー! そこ金かかるかー!
ってなった。本当に素晴らしいソフトなので文句はないです。ないです。

とにかく登録→操作してみて

GoogleやFacebookのアカウントでログイン出来るのですぐにでも使用出来ます。

とりあえず触ってみてもらえば大体の操作は問題ないと思いますが、サルワカさんの解説記事がとても丁寧で見やすいので是非ご覧ください。

saruwakakun.com

というか僕自身この記事でCanvaを知りまして。
会員登録から操作方法も一から十までしっかりとカバーしてくれているので、僕が語ることはほとんどありませんどうしましょう

なのでここからは「僕が実際にアイキャッチ画像を作成する際によく使う操作や意識していること」をお伝えします!

 

僕と同じようにデザインとか全くやったことないしわかんないっていうアナタもCanvaを使えば簡単にオシャレなアイキャッチ、作れますよ!

僕の使い方

この記事のアイキャッチ画像を作成した手順で説明します。

デザインのサイズを選択

f:id:saichu:20170704194926j:plain

左の「デザインを作成」から今回は「ブログタイトル」を選択します。
他にもTwitterヘッダー用やTwitter、Facebook、Instagram投稿用など様々なサイズとそのテンプレートが用意されています。

「ブログタイトル」は560×315のサイズとなります。

テンプレートを選択

f:id:saichu:20170704194959p:plain

今回はこちらのテンプレートを使用しました!
もちろん、どれでも好きなデザインを選んでもらって構いません。

僕の場合はサムネイルになった時に文字が切れないように真ん中よりのデザインにしています。

f:id:saichu:20170704195004p:plain

こちらは有料のテンプレートなので、そのまま使うと画像に網掛けが入ります。
これはこれでオシャレに活かせるかもしれませんが画像さえ差し替えてしまえば網掛けもなく使用できます。

フリー素材を用意して、そのままドラッグ&ドロップでアップロード出来ます。

画像の差し替え、文字入力

画像の差し替えは説明が難しいのでGIFを使ってみました!

まあドラッグで勝手に差し変わってくれるので簡単なんですけどね。
元画像と同じようにフィルターもかけてくれます。

そこから文字も入れ替えるとアイキャッチの出来上がりです!

f:id:saichu:20170704194919j:plain

今回は「Canva」の文字をそれっぽくするためにフォントを選んだり位置を調整して時間がかかりましたが、それ以外はとても単純なので本当に10分で作成出来ます。

 

10分で十分です。

サムネイル表示の調整

先ほどサムネイルになった時のために中央よりでデザインするといいましたが、スマホの記事一覧だとこんな感じです。
f:id:saichu:20170704204040j:image
トップページ

アイキャッチ画像が切り取られ、中央部分のみの表示になります。

なので、文字が切れないように調整する方法を紹介します。
(あくまでも僕のやり方なのでもっと良い方法があるかも知れません。教えてください)

仮の四角形を配置する

f:id:saichu:20170704194949p:plain

素材→図形→□を選択します。
四角形の大きさを変更して画像の縦幅に合わせます(今回は560×315なので315×315の四角形)。

真ん中に配置し透過させる

f:id:saichu:20170704194931j:plain

四角形を真ん中に置くと、サムネイルとして表示される範囲が可視化されますね。

そのままだと元の画像が見えませんので透過させます。

背面に移動する

f:id:saichu:20170704194944j:plain

今回は上手く範囲内に文字が収まりましたが、そうでない場合は配置や大きさを変更する必要があります。

しかし最後に配置した四角形が最前面にあるため、背面の文字やデザインが操作出来ません。

そのため四角形を背面に移動し、前後関係を逆転させて操作を行います。

 

これでサムネイルで表示した場合にも見やすいアイキャッチ画像になりました。

よくあるアイキャッチの作り方

テンプレートを使わなくてもシンプルなアイキャッチなら簡単に作れますので少し例を紹介します。

透過した帯に文字

サムネイル表示を可視化するために仮に配置した四角形ですが、大きさや色、配置を変えるとよく見るアイキャッチ画像が作成できます。 

f:id:saichu:20170704214953j:plain

 コチラもシンプルで良いですね。

画像に文字のみ

更にシンプルなパターン。

f:id:saichu:20170704215527j:plain

画像を選んで文字を入れるだけならすぐですし、フォントも色々選べます。

この場合は文字が見やすいように背景画像の明るさを調整します。

f:id:saichu:20170704215454p:plain

画像を選んで「フィルター」から明るさを調整。
プリセットもありますし、他の項目も調整できます。

この記事のアイキャッチ画像は「DRAMA」のフィルターを設定しています。

まとめ 

紹介だけのつもりが長々となってしまいました……
まずは使ってみて、また見返してもらえると嬉しいです。

本当は教えたくなかったし、もしかしたら今使ってる人達に怒られちゃうかも知れません。

でもこれだけ良いサービスです。いずれ皆に知れ渡ってしまうでしょう。

 

 

え、知らなかったの僕だけ?!

 

以上、もなかでした。