【超初心者向け】canvaを使った画像の作り方②アイキャッチ画像

暮らし

このシリーズは、私がWordPressを初めて立ち上げた頃に戸惑ったことを思い出しながら書いています。

最近のアプリは説明書などほぼなくて感覚的に簡単に操作できることがウリですが

この感覚操作に慣れていない中高年にはなかなか難問も多いのですw

(ついつい頭でルールや手順を考えてしまう癖があるから)

その中でも画像作りは頭を悩ませました。

今回はCanvaを使ってアイキャッチ画像(ブログの見出し部分に入れる画像)を作る方法を

初めてCanvaを触る超初心者向けに画像メインで解説しています。

テンプレートの有効的な使い方、画像の編集、自分の写真を加工する方法など基礎的なことがわかるのでぜひ役立ててくださいね!

Canvaをまだ使った事がない方、無料登録の方法がいまいち不安という方は

⏬こちらの記事を先に見てください。

【超初心者向け】canvaを使った画像の作り方①アイコン画像編

Cavnaは無料で使える上かなり使い勝手がいいソフトなのでインストールしない手はないです!

アプリを使えばスマホからも簡単にアクセスできるし

(あ、中高年にはパソコンでの使用がおすすめ。小さい画面で作業するのはなかなか骨が折れますw)

ページ内の目次から手順へショートカットできるのでサクッと登録を済ませましょう。

 

アイキャッチ画像とサムネイル

ところでアイキャッチ画像とは?

ワードプレスの場合、一言で言うと記事の見出しに使う画像です。

スマホの画面などでは文字だけだと見にくいため投稿のイメージにあった画像を見出しにおくんですね。

下の図はこのブログのトップに表示される画面。

1に設定されているのがアイキャッチ画像(これもCanvaで作成しています)

2は文字だけの見出し

あなたならどちらが見やすいでしょうか?

YouTubeなどでよく聞くサムネ(サムネイル)と何が違うの?

私も同じ疑問を持ちましたw

概念は同じで、わかりやすい見出しに使う画像ですが

ざっくり言うと画像サイズ(見た目ではわからないデータとしてのサイズ)の違いのようです。

サムネイル=thumb(親指の)nail(爪)

親指の爪ほど小さくまとめてあるって事みたい。

アイキャッチeye(目を) catch(掴む)

ちなみにこちらは和製英語だそうな。視線をつかむイメージですね。

どちらも記事内容をひと目で連想しやすくするために設置します。

WordPressには1つのアイキャッチ画像に対して、標準では3種類の大きさのサムネイルを自動生成する機能があるのでサムネとしてわざわざ作らなくてもいいようですね。

Canvaでアイキャッチ画像を簡単に作る

アイキャッチに使う画像はCanvaのテンプレートを利用して簡単に作れます。

テンプレートを文字変更だけで画像はそのまま使用する場合

まず登録済みのCanvaアカウントへログインします。

右上のデザインを作成をクリック、または虫メガネマークの検索欄に文字を入力します。

今回は検索でアイキャッチと入れてテンプレートを出しました。

なんとなく好みのテンプレートを選んでクリックすると

このように編集画面に表示されます。

最初からおしゃれな画像や配置が施されているのでまずはこのまま文字だけ変えてみましょう。

文字の上にカーソルを合わせると周りが紫色で囲まれます。

ダブルクリックで編集開始。

うーん。なんとなく文字を目立たせたいですね

文字サイズ、フォント、視覚効果などを好みに変更できます。

初めての時は、アレコレいじってみてイメージをつまむのが良さそうですよ。

文字を大きく、視覚効果を太字で微調整しました。

完成したら今回はブログに挿入するアイキャッチなので一旦ダウンロードして保存します。

右上の共有をクリックして

ダウンロードを選択

今回は一枚だけなのでそのままダウンロードしますが、複数枚作って一枚だけダウンロードしたいときは指定もできます。(後半で説明してます)

ダウンロードされてるかどうか確認。無事ダウンロードできました。

初心者あるあるで、たまに自分の意図しない場所に保存されて慌てる事があります。

のちに慌てないために、ダウンロードを確認できたら名前の変更と、画像用の保存ファイルの作成をお勧めします。

テンプレート画像をCanva内の別の画像と入れ替えて使う場合

テンプレートを使い画像も自分で用意せず、しかも自分好みのオリジナルにする事ができます。

テンプレートを選ぶところまでは同じ。

左端の項目から素材を選択します。

クリスマスを選んでみました。

虫メガネマークの検索窓に好みのテーマを入力したり

その下のカテゴリーを選ぶと

選んだテーマに合わせてAIが候補を出してくれます。

気に入った画像を見つけたら設置場所までドラッグしてスライド(クリックしたまま移動)すると入れ替わります。

画像の縦横比だけなんとなく合わせたほうが失敗がありません。

他の画像も同様に入れ替えて

さらに文字のフォントと背景色も変えたらグッとイメージ変わりましたね。

Canva Proには無料でも自由に使える画像が豊富に揃っていまるので、組み合わせることで初心者でもハイセンスにオリジナリティ発揮できるのがとてもいいです。

自分が撮った写真を組み合わせて作る

画像をアップロードして使う

上記のテンプレートを使って写真だけ自分で撮ったオリジナルを混ぜてみましょう。

左端のメニューからアップロード(1)を選択すると下の図のような画面になります。

紫のファイルをアップロード(2)をクリックして自分のファイルから画像をアップロードしましょう。直接使いたい画像をドラッグしてもできます。

下の画面はMacですがWindowsでも似たようなファイル選択画面が出るはず。

もしもわからなかったら使いたい画像を表示してドラッグ(クリックしたまま移動)すればOKです。

ファイルを選ぶと下のように選択肢が表示されます。

写真を選んで(ワンクリックすると青く囲みが出ます)右下の開くをクリック

下のようにアップロードされた画像が表示されます。

同様に使いたい画像を選んでアップロードしてください。

画像を入れ替えるにはアップロードした画像を置き換えたい場所へドラッグします。

おさまるとスッと画像が入れ替わりますが、ドラッグして放す場所がズレると置いた場所に画像が乗っかる感じになってしまうので注意。

そんな時は慌てずもう一度ドラッグし直せばOKです。

何度でもやり直せるので初心者でも安心して使えますよ!

画像の入れ替えとともに背景の色も統一してみましょう。

矢印箇所の四角い色が現在紫で囲まれた範囲の色。

変えたい場所を選択していることを確かめてカラーをクリックします。

選択した箇所の現在の色が表示されました。(紫の囲み部分)

色を編集するには使った写真のトーンに合わせた色の提案があるので初心者にはとても便利。

違うトーンで編集する場合の私のおすすめは、一旦下のパレットから方向性の合う好みの色を選んで上部左端から微調整する方法です。

空の色に合わせてみました。

文字のフォントを変えればさらに違うイメージが作れますし

使う画像の位置や数を変えるのも簡単。

下の画像はDIY用に作ったアイキャッチ。

画像2枚、文字を画像に載せて調整したものですが工程も少なくて簡単。

テンプレートを利用していくつか作るうちにすぐ作業工程に慣れます。

ちなみに、画像はそのまま保存されますが、無料プランの場合容量制限があるので

必要ないものは使い終わったら(素材をダウンロードし終わったら)削除しておくといいでしょう。

削除する画像を選択し右上に出ている・・・をクリックしてゴミ箱へ移動

 ←このマーク

これで削除完了です。

画像をさらに加工する

Canva Proではアップロードした画像を加工することもできます。

わざわざ別のソフトを使わないで多くの加工や編集ができるのは本当に助かる!

画像を選択して画面上にある画像を編集をクリック

(編集不可の画像ではこれは出ません)

左側に出てきた編集画面から微調整開始。

失敗したと思ったら上の青い帯の部分の矢印で元に戻せるのでとにかく色々いじってみるのが上達の早道です。

ちょっと選択した画像がわかりにくかったかも(汗

窓の外の空のを夕暮れ前の状態に加工してみました。

有料プランでは加工に背景リムーバという機能も加わって私はとても重宝してます。

Canva Proお試しプランで登録すれば無料の期間でも使えるのでぜひお試しあれ!)

画像を選んで背景リムーバをクリックするだけです。

ちょっとこの画像選択だと向いてない気がするけどイメージとしてはこんな感じ(^^;

私の場合は主に自分が書いたイラストや孫がかいた絵をスマホで撮って背景リムーバでイラスト素材として使っているんですけどね。

テンプレートに組み込むときの注意点

アップロードした画像をテンプレートの中の画像と入れ替えるときに注意する事があります。

それは画像サイズと縦横比。

上で作ったアイキャッチ画像を見てみるとシャンデリアは上下がカットされていますよね?

それを見越してドラッグするのですが、選ぶ画像によっては思ったようなバランスで入らないこともあります。

使いたい画像が外せない場合の対応策はふたつ。

1.テンプレートに入っているフレームを外して元画像をそのまま載せてサイズ調整

変えたい画像を選択するとこのようにゴミ箱マークが出現

グリッドを削除を選択

画像を削除するだけだと下のように表示されます。

この場合画像を移動すると最初と同じ設定のまま。

今回は元画像を調整して入れたいのでフレームごと消します。

消えるとこんな感じ。

空いた場所に画像をドラッグして置き、囲みの上下をドラッグしながらサイズ調整

角の四隅をスライドすると、縦横比そのままで収縮拡大するので全体のバランスを見ながら調整します。

Canvaでは位置や間隔を揃えるために画像をスライドするとピンクの点線でガイドが出るのもとても助かります。

私が以前使っていた他のソフトだと中心や高さの調整が目分量だったので微調整に苦労したんですよね。

そして画像のサイズを合わせながら載せたのが下の画像。

2.画像を単体で加工してアップロードしなおす

テンプレートのバランスはそのままにしてはめる画像だけ整えたい場合はこちらで。

テンプレートにそのまま画像を載せるとこんな感じ。

うーん、できれば桜鯛をもう少し見せたい…

まずページを追加して白紙のページを下に表示させます。

使いたい画像をクリックすると下のようにページに追加されます。

他にも使いたお画像があれば同じようにページに追加。

今回はこの画像をイメージする箇所だけ使えるようにします。

フレーム内では画像のほぼ中心に合わせて設置されるので新しいページの中心に見せたい箇所が来るように。

お刺身を中心に見せたいのでそれを意識して矢印方向へサイズを調整してます。

ページの中心線に合わせて画像を設定

このページの背景の色は今回は使わないので消しておきます。

右上の共有からダウンロードして再度Canvaにアップロードします。

ページを全部ダウンロードする必要はないので今回必要なページだけチェックを入れます。

完了をおしてダウンロード

左側のファイルをアップロードから今ダウンロードした画像をアップロードします。

画像がリストに出てきたらドラッグしてフレームの中に入れましょう。

なんとか桜鯛のお刺身が画面に収まりましたw

ちょっと手数はありますが、デザインに自信がない><とか、このバランスを維持したい!という場合に有効です。

余談ですが、有料プランの王冠マークがついている背景透過機能を使ってダウンロードすると画像部分だけが素材として保存されます。

今回の設定では問題ありませんでしたが無料のうちに試してみるといいかも!

(ダウンロードした画像はお試し期間が過ぎても自分のものなので絶対に試さないと損です!!!)

まとめ

いかがでしたか?

この回ではCanvaProを使ったアイキャッチ画像の作り方を超初心者向けに解説しました。

・テンプレートのまま文字だけ変えて作る

・テンプレートに入れる素材を既存のフリー素材から自分で選んでオリジナリティを出す

・テンプレートに使う素材を自分の撮った写真から選ぶ

・テンプレートをベースにして画像の加工を加え、さらにオリジナルな画像を作る

まとめるとこんな感じでしょうか。

初心者にとって画像のサイズ問題や加工の手順、そしてデザインともなるとかなりハードルが高い。

そこに著作権問題やら何やら絡んでくると本当に気が遠くなります。

 

せっかくブログを立ち上げたなら素敵な画像設定しておきたい。

自分で撮った写真のいい箇所だけ切り取って使いたいけどどうしたらいいかわからない。

若い人たちは何事もなくこなしているみたいだけど実際さわってみたら何が何だか(汗

 

私が初めに感じた事でした。

実は大昔パソコンスクールの受付で勤務していた事があって

先生たちの教え方を横で見守りながら

「そこ、超初心者にとっては当たり前じゃないんだよね・・・」

「その説明に入る前の前提がそもそもわからないんだよね。」

と、操作を当たり前にできる人にはわからない初心者の持つ壁を感じていました。

だから、少しでもこれからブログを始める人の役に立てたらいいと思いこのシリーズを書いています。

次は、アフィリエイトも視野に入れてブログを立ち上げたい人のためのサーチコンソールの設定を。

ではまた♪