ブログ運営

「Canva」と「FLAT ICON DESIGN」でアイキャッチ画像を作る方法丨初心者向け簡単7ステップ

こんにちは!とも@tomounsoです。

とも

みなさんはアイキャッチ画像はどうやってつくっていますか?

この記事では、

「『Canva』と『FLAT ICON DESIGN』でアイキャッチ画像を作る方法。初心者向け簡単7ステップ。」

を紹介します。

この記事は次のような方が対象です

ブログの初心者でアイキャッチ画像を作りたい方

 『FLAT ICON DESIGN』で好みのアイコンを選ぶ。

FLAT ICON DESIGNのページでWebページのブラウザアイコンを選択している画面。

まず『FLAT ICON DESIGN』で必要なアイコンを選びます。

好みのアイコンが見つかったら右クリックをして保存しておきます

ここでは赤枠で囲った「WEBページのブラウザウィンドウアイコン素材」を保存しました。

 『Canva』トップページの「カスタムサイズ」をクリックする。

Canvaのトップページでカスタムサイズをクリックする画面。

次に『Canva』のページに移動し、赤枠で囲んだ「カスタムサイズ」をクリックします。

初めてCanvaを使用する方は無料のアカウントを先に作ってください。

 アイキャッチ画像のサイズを決める。

アイキャッチ画像サイズを幅760px高さ428pxに設定する画面。

次にアイキャッチ画像のサイズを決めます。

私が使用するテーマ「JIN」のアイキャッチ画像サイズ、幅760px高さ428pxの長方形で作ってみます。

 背景の色を選択する。

背景の色に青を選択した場面。

次に背景の色を選択します。

赤枠で囲んだ画面左側のメニュー「背景」をクリックすると背景や色を選択できます。

今回はシンプルに一番上の赤枠部分で青色だけを選択しました。

 フラットアイコンをアップロードする。

「WEBページのブラウザウィンドウアイコン素材」をアップロードした画面

赤枠で囲んだ画面左端のメニュー「アップロード」をクリックすると、「画像または動画をアップロード」ボタンが表示されます。

さきほど『FLAT ICON DESIGN』で保存しておいた「WEBページのブラウザウィンドウアイコン素材」をアップロードしましょう。

 背景の上にフラットアイコンを置く。

背景の上に「WEBページのブラウザウィンドウアイコン素材」をドラッグアンドドロップした画面。

背景の上に「WEBページのブラウザウィンドウアイコン素材」をドラッグアンドドロップして移動させます。

Twitterなどで記事がシェアされるときや、ブログ内で自動的にトリミングされるときのことを考え、上下左右に余白を取っておきます

アイコンのまわりの白い丸をクリックすると斜めの矢印が表示され、その状態でドラッグすれば拡大縮小ができます

アイコン全体をドラッグすれば移動もできますので、調整してみてください。

失敗しても左上の赤枠で囲った部分、戻る矢印をクリックすれば簡単に元にもどせます

 テキストを入力する。

画面左端のメニュー「テキスト」をクリックします。

「見出しを追加」をクリックすると背景画面中央に「見出しを追加」ボックスが表示されます。

画面左端のメニュー「テキスト」をクリックし、「見出しを追加」ボックスを表示させた画面。

画面左上赤枠で囲った部分で文字のフォントが選べます

ここでは「M Plus Rounded Black」を選択しました。

続いて黄色枠で囲った「見出しを追加」ボックスにタイトルを直接入力します

フォントを選択する画面。

タイトルを入力したら先ほどのアイコンと同じように、位置やサイズを調整してください。

ここでは「超初心者向け!フラットアイコンを使ったアイキャッチ画像の作り方。」と入力し、文字サイズは28としました。

「超初心者向け!フラットアイコンを使ったアイキャッチ画像の作り方。」と入力し位置やサイズを調整した画面。

赤枠で囲んだ「A」の部分で文字色を変えることができます

ここでは白に変えてみました。

文字色に白を選択し、完成した画面。

あとは画面右上のダウンロードをクリックすれば完成です。

この記事のアイキャッチ画像を見れば、実際に表示される感じはわかると思います。

 まとめ

今回は自分の勉強を兼ね、フラットアイコンを使用したアイキャッチ画像を作ってみました。

センスのある方なら無料でおしゃれな感じのアイキャッチ画像が作れそうですね。

今回も最後まで読んでいただきありがとうございました。

もしもアフィリエイト「かんたんリンク」の使い方丨初めての広告におすすめこの記事では、もしもアフィリエイト「かんたんリンク」の特徴と使い方を解説します。初心者の方でも簡単にアフィリエイトリンクを貼れるようになりますので、 最後までお付き合いくださいね。 ...
ココナラでアイコンを作る簡単4ステップ丨ブログ初心者におすすめ!この記事では、「ココナラでアイコン作成を依頼する方法」を解説します。結果は大満足でした。簡単4ステップでブログ初心者におすすめです!...
https://tomounso.com/about-google-photo/
Googleアドセンスの審査に合格する方法【9つのチェックポイント】この記事では、Googleアドセンスの審査に合格する方法【9つのチェックポイント】について解説します。 ...
ワードプレスでブログを始める方法【初心者向け】この初心者によるブログ運営日記では、私が知識ゼロの状態からブログを運営する様子を初心者の立場で解説します。ブログをこれから始める方にとって少しでもお役に立てば幸いです。...