【超初心者向け】ぼくが使っているデザインツールと無料ツール”Canva”の使い方!

 

ほりぴー
秋晴れ続きで、気分も体調もいいほりぴー(@horimoto61)です

ここのところ順調にブログを更新できてます!

更新することが目的ではないんですけど、楽しみながら続けられているのでそれが何より嬉しいです。

 

そしてブログを読んだ方から、反応・コメントをいただけているのも励みになってます!ありがとうございます!

 

昨日・一昨日と香春町の移住体験に関する記事を書きました。

 

そしたら、今朝こんなメッセージをいただきました。

Iloveimg comのコピー

お昼にはこんなメッセージも届きました。

Iloveimg com 0

 

ブログ見やすいって褒めてもらえたーーーーーー!!!めっちゃ嬉しい!ありがとうございます!!!!!

 

ぼくの作っているアイキャッチ画像にみなさん興味を示してくださっているようで、「何を使って作っているの?」という疑問。

実はこの質問は過去にいただいたこともあった質問です。そこで今回はぼくがアイキャッチ画像の作成に用いているツールをご紹介しようと思います!

ぼくが使っているデザインツールはこいつらだ!

ぼくがブログなどのデザインや画像編集に使っているのは以下のツールになります。

使用しているデザインツール!

Canva  アイキャッチ画像の作成

Pixelmator  少し手の込んだ画像編集・ロゴ制作

I♡IMG  画像サイズの変更

ぼくは上記のサイト・アプリとフリー画像を使用してブログのアイキャッチやロゴを作っています。


フリー画像はこのサイト使ってます『商用利用可・クレジット表記不要のフリー素材・無料画像検索エンジン「タダピク」


 

Canvaブラウザ上で簡単に使用することのできるグラフィックデザインツールです。基本機能は無料で使用することができます。アイキャッチは毎回これを使用して作成しています。

 

Pixelmator有料のMac用のグラフィックデザインツールです。このブログのロゴであるTシャツやぼくのスマホやパソコンのデスクトップ画像はこのツールを用いて作りました。

無地無題 com 1479367789146

レイヤーなどの概念に理解があって、デザインが好きでこだわりたい方にオススメです。

 

I♡IMGJPG画像のサイズを変更することのできるサービスです。スクショなどの画像サイズを変更する際に利用しています。類似サービスはたくさんあるので気に入ったものを使うといいと思います。

 

以上の3つのツールがぼくが主に使用しているツールです。なんとなくのルールを作って住み分けしています。

ぼくの使っているツールの紹介は以上にしてここからは質問をいただいたCanvaを利用したアイキャッチ画像の作り方を紹介していこうと思います!

初心者向け!Canvaの使い方!

では、Canvaの使い方解説に移っていきましょう。

 

そもそもCanvaとはなんなのか。

Canvaとは

Canvaはオーストラリアで生まれたフォトグラフィックデザインツール

基本機能は無料ブラウザ上で使用することができるのが特徴。

多くの素材・テンプレートが用意されているのでデザインに自信のない方でも簡単におしゃれなデザインを作ることができます。

誰でも無料で簡単におしゃれなデザインを作ることができる。これがCanvaの魅力ですね。

Canvaについての基本が理解できたところで実際にCanvaを用いてアイキャッチ画像を作成していきましょう。

 

完成品は昨日の記事のアイキャッチ画像であるこちら!(昨日のより暗めに作ってあります)

それではいってみましょう!

Canvaにアクセスして登録する

まずはCanvaのサイトにアクセスしましょう。

スクリーンショット 2017 11 07 17 51 00 iloveimg resized

Canvaを利用するためには、初回にユーザー登録を行う必要があります。登録はFacebook・Google・メールアドレスのいずれかを利用して行うことができます。

作りたいデザインのテンプレートを選択する

Canvaにアクセスすると以下のようなページが表示されます。

Iloveimg com 1のコピー

ご覧の通り、たくさんのテンプレートが用意されています。今回はアイキャッチ画像を作成するので「ブログタイトル」を選択しましょう。

使用する画像を決める

テンプレートを選択するとこのような新しいタブが立ち上がります。

Iloveimg com 2のコピー

レイアウトから作成することもできるのですが今回は使用しません。

 

使用する画像は、

  1. Canva内の無料画像を選択する
  2. 自分で用意した画像をアップロードする

の2パターンあります。

 

①の場合には素材の中の無料写真からイメージにぴったりな画像を選んでください。

Iloveimg com 4

今回はぼくが撮影した画像を使用するので②のパターンになります。

アップロードの「画像をアップロード」から使用したいファイルを選択してアップロードしましょう。

Iloveimg com 7

レイアウトを作っていく

ここまでで下準備は完了です。いよいよレイアウトを決めてデザインを作り上げていきましょう。

 

ぼくがアイキャッチ画像を作る際には以下の手順で作成するようにしています。

  1. グリッドを決める
  2. グリッドに画像をのせる
  3. もう一度グリッドを重ね、画像を少し黒っぽくする
  4. テキストを書き込む
  5. 完成!

いつもこの手順を守っています。やることが決まっているので5分もかからずに作れちゃいますよ。

 

1,グリッドを決める

グリッドとはつまり枠ですね。使用する画像を入れるための枠を決めます。

Iloveimg com 8

たくさん種類があるんですが、基本的には左上の一番シンプルなものを利用しています。

 

使うグリッドをクリックしてあげると今まで真っ白だった画面がこんな風になります。

Iloveimg com 9

これで最初の手順はOKです。

 

2,グリッドに画像をのせる

グリッドに画像を載せてあげます。先ほど選んでおいた画像をドラッグ&ドロップしてあげればOKです。

これで2つ目の手順もクリアです。

 

3,もう一度グリッドを重ね、画像を少し黒っぽくする

この手順、個人的には結構重要だと思っています。アイキャッチ画像の見やすさ、クオリティに大きく関わってくる手順です。

どんなことをするかは以下の動画で確認して見てください(動画を見たくない方は動画の下に画像で解説しています)。

この手順でやっていることは、

  1. グリッドを重ねる
  2. グリッドに黒をのせる
  3. 透明度の調節をしてあげる

という3ステップです。

 

グリッドを重ねて、

Iloveimg com 9

黒を選んであげて、

Iloveimg com 10

透明度の調節をする。

Iloveimg com 11

 

なぜこの手順を大事にしているかというと、少し画像を暗くしてあげることでこの後のせるテキストを映えさせることができるからです。

以下の2つを見比べて見てください。

Ilovepdf com Ilovepdf com 0

一手間かけて暗くしてあげた画像の方が見やすくて、キャッチーな感じがしませんか?

 

アイキャッチは記事に興味を持ってもらうための大事な要素です。

この一手間で大きく印象が変わってくるのでぜひ取り入れて見てください。

 

4,テキストを書き込む

最後はテキストを書き込んでいきましょう。

Canvaはテキストのテンプレートもたくさん用意されていますが、ぼくは「見出しを追加」「小見出しを追加」の2つを利用しています(小見出しを追加もほとんど利用しません)。

 

まずは「見出しを追加」を画像の中にドラッグ&ドロップします。

Iloveimg com 12

そして文章を入力。

Iloveimg com 13

 

このあとは、「テキストスタイル」「文字サイズ」「文字のカラー」を決めていきます。

テキストスタイルは左上のボックスから選択します。たくさんのスタイルがあるので気に入ったものを使用してください(ぼくは源柔ゴシックがお気に入りです)。

Iloveimg com 2

文字サイズはテキストスタイルの右隣のボックスから調整してください。

Iloveimg com

文字のカラーは文字サイズの隣で調整できます。デフォルトの15色、あるいは「+」のボタンから自分でカラーを追加してください。

スクリーンショット 2017 11 07 17 44 41 iloveimg resized

この作業を繰り返し行うと、こうなります。

スクリーンショット 2017 11 07 17 46 46 iloveimg resized

はい、完成です!!!

 

作成の様子は以下の動画で確認いただけます。実際やってみたら2分半くらいで作れました!

慣れてきて、作るものも固まっていれば本当にあっという間に作ることができますよ!

ダウンロードして終了

作り終えたらダウンロードしましょう。

右上のダウンロードボタンからファイルの種類を選択してダウンロードしてあげればOKです。

Iloveimg com 1

これにて全行程終了です!本当に簡単に作れちゃいますよ!

まとめ

もう一度手順をまとめておきます。

アイキャッチ画像作成手順!

  1. サイトにアクセスしてテンプレートを選択する
  2. 使用する画像を決める
  3. グリッドを決める
  4. グリッドに画像をのせる
  5. もう一度グリッドを重ね、画像を少し黒っぽくする
  6. テキストを書き込む
  7. 完成!

これらの手順で簡単にアイキャッチ画像を作成できます。

 

もちろんアイキャッチ画像以外にもたくさんのテンプレートが用意されているのでぜひCanvaを活用してみてください!

Canvaを使ってかっこいいアイキャッチ画像を。

ありがとうございました!