00:02
はい、それでは今回は、アイキャッチ画像テンプレートの編集方法を解説していきます。
このようにですね、ページ内にこういうものを用意しておきますので、この部屋が作成したテンプレートがあなたと共有されまして、今すぐデザインを始めましょう。
こちらを確認していただいて、キャンバーのアカウントも必ず用意した上でですね、このテンプレートの使用をクリックします。
クリックするとこのようにコピーされますので、タイトルは別にコピーってついていてもいいと思うので、もし気になったら消すという感じで調整してください。
編集方法は、まずはレイアウトの確認ですね。
こういうのが鉄板ですよ、逆には外れないですよ、ダサく見えないですよっていう、そういうものをピックアップしています。
大体この中央にタイトルがあるっていう感じですね。
背面に画像配置っていうところを今回メインで解説していきたいと思います。
はい、こんな感じですね。
どれも簡単に編集ができます。
この背面に画像配置っていうところですね、ちょっと解説していきたいと思います。
はい、とりあえず画像の編集、ワードとかPowerPointとかKeynoteとかでも同じようなものがあるんですけど、背面と前面があります。
背面に何もない状態で、ここで四角形ですね、この四角形がある。
さらにその上にテキストが2つ乗っかっているという状態になります。
どんどん上に乗っかっているイメージですね。
一番上のものが強調して一番よく見えて表示されるといった形になります。
はい、まずこの背面に画像を配置してほしいんですけど、ちょっと一旦どかします。
画像はですね、このようにですね、メディアをアップロードから自分のパソコン内の画面が表示されますので、画像を用意していただいてそれを選択してください。
画像はですね、だいたいダウンロードホルダーに入っていると思いますので、そこから選択してください。
画像素材はこういうPixabayという素材サイトがありますので、ここからですね、好きな画像を選択していただいて、一応ここを確認してください。
所要利用無料記憶表示は必要ありません。
無料ダウンロードをクリックしてダウンロードを進めていただくといった形になります。
基本はこの他にもあるんですけど、所要利用可能な素材サイトから持ってくるといった感じです。
03:01
もう既に入っているので、これを使ってですね、ちょっとやっていきたいと思います。
これでいきます。
はい、こういう風にドラッグ&ドロップして、もう一回お見せしますけど、選択すると、クリックするとこうなってしまうんですけど、これで広げていってもいいんですけど、それだとちょっと手間なので、
ドラッグ&ドロップで、はい、こうなったら離すってやった方がスムーズにいけるかなっていう、まあ時短できるかなといった感じです。
そしたらこの四角形ですね、黒いちょっと薄くなっている四角形、これをこのようにガイド線に合わせて配置します。
で、この四角形ですね、なんで薄くなっているのかというと、不透明度を下げているからですね。
透明度を下げていると。
これで調整できますので、この画像の明るさによってもだいぶ調整する必要があります。
背景の画像がちょっと明るいと、透明度をちょっと上げる。
その方が、このタイトルのテキストが映えるという。
はい、そんな感じで調整してください。
なのでこの機能は覚えておいてください。
四角形をクリックして、選択して、透明度を上げ下げする。
ここですね。
カーソルを合わせると透明度が出てくるので、これを確認してください。
だいたいこういうサービスって、カーソルを持っていくとこういう風に出てくるので、それでわかります。
で、背面に画像を配置したら、これは消すと。
ガイダンス的なテキストなので。
あとはここにブログのタイトルですね。
これは中に配置と。
基本はですね、背景の四角形が黒なので、白でいいんですけど。
例えばですけど、赤でも。
基本は白の方がいいという感じです。
ちなみにここで色が色々変えられます。
基本は黒でいいと思うんですけど、ちょっと変えてみたいなという場合はいろいろ変えてみてください。
例えばこの白が四角形の色を白にした場合は、このタイトルのテキストが見づらくなってしまうので、この場合は黒にするという感じになります。
こんな感じで調整をしていってみてください。
基本はこの白で背景の色、これは濃いものにした方が見やすいですね。
赤は強調しすぎなんですけど、緑とか。
言ったらベースは黒で考えていただければと思います。
06:01
そんな感じで編集をお願いします。
あとのやつも基本同じでして、ドラッグ&ドラッグで配置。
戻す。選択した状態で戻す。
背景の画像配置を消す。
これを中央に配置。
基本同じですね。
この四角形にプラスして、前面にこの枠がついているという、そういう違いになります。
これも同じです。
ドラッグ&ドラッグで配置。戻す。
今画面に映っているのは、
透明度を下げた四角形の上に、さらに上に、
透明度を下げた白の四角形があるといった感じになります。
ここは基本白で統一してもらって、
ここも黒で統一という感じでいいと思います。
あとはこれ必ず消す。
というより、画像を配置してこれ残したら気持ち悪いと思うので、気づかないといった感じです。
消します。
これも同じですね。
この黒い方の四角形をずらして上で配置。
これはもしかしたらいけるかもしれないですが、いけないですね。
さすがにずらさないといけないようなので、
こんな感じですね。あとは同じです。
なので基本的に覚えてほしいのは、この画像を挿入する作業と、あとは色ですね。
色をこちらから変更できます。
それと不透明度ですね。
これをここから下げてみます。
時々不透明度と言っていますが、一応透明度と不透明度は一緒なので、そんな感じです。
あとはこの前面とか背面ですね。
このテンプレートでは全部調整してあるので大丈夫なんですが、
一応この前面・背面も覚えておいてください。
今わかりやすくずらしていますが、
背面に画像、その前面に四角形、黒の四角形ですね。
テキスト、この3つの構造になっている。
上に行けば行くほど見えるという構造を置いておいてください。
そうするとキャンバーを使って他の画像も編集できますし、
このテンプレートも編集するときに理解が深まるという感じで、
09:02
画像編集に必要な知識なのでそれも覚えておいてください。
画像編集に必要な知識といえばカラーコードとかもありますので、
カラーコードはこういうサイトがあって、
このシャープで始まる数字とアルファベットのラインです。
これがカラーコードになります。
あとはこういうカラージュラで色を抜き取ることができます。
ピックカラーフロムページ、これ拡張機能ですね。
こんな感じで抜き取ることができます。
これも一応編集の幅を広げるという意味でも覚えておいてください。
それではこのブログのiCatch画像テンプレートの編集方法は以上になります。
それでは今回はキャンプでヘッダー画像の作成方法を解説します。
今回このテンプレートを用意していますので、
それの使い方に沿って解説を進めていきたいと思います。
このテンプレートはですね、ページ内に配置していますので、
このページにアクセス、ここ自体にアクセスしていただいて使用してください。
必ずキャンバーのアカウントを登録しているのを前提として、
このテンプレートの使用をクリックしてください。
こんなデザインになっています。
非常にシンプルなデザインとなっています。
まずテキストの編集方法を解説します。
このテキストですね、該当のテキストをクリックして、
もう一回クリックすると編集ができます。
なのでここにターゲットを入力してください。
ヘッドラインも同様ですね、もう一回クリックすると編集ができます。
開業もできます。
場合によってはですね、長くなってしまって、
はみ出てしまう場合はですね、開業してください。
それと色ですね、フォントの色も変更できます。
カラーコードでも指定ができます。
カラージュラーですね、使っていただいて、
サイトからですね、カラーコードを抜き取って指定する。
そんな感じでやってみてください。
サイト以外でもこの中から選択するでもOKです。
それとこの背景の四角形ですね。
こうなっている場合指定ができないので、
このテキストエリアですね、ずらしてください。
ずらしていただくか、ずらした方がやりやすいですね。
ずらしてこの背景のテキストを選択。
これも同様に色の変更ができます。
このテキストエリアは内容に応じて微調整してください。
四角形は縦と横に微調整することもできます。
12:03
これも内容に応じて微調整してみてください。
背面のイメージ画像ですね。
ここはこの背景に画像を入れてくださいというものでして、
このアップロードですね、アップロードからメディアをアップロード。
自分のパソコン内の画面が出てきますので、
画像を選択してアップロードしてください。
画像はですね、こういうPixabayですね。
Pixabayというサイトとか、あとUnflushとかですね、
所有量可能なサイトから持ってくるようにしてください。
Pixabayが一番使用頻度が高いのでご紹介しています。
こういう画像がダウンロードできますので、
一応こちらだけ確認しておいてください。
所有利用無用、記憶表示は必要ありません。
ここだけ確認をしておいてください。
画像をアップしますとこのように出てきますので、
安全な画像であれば特に問題なく使えます。
これをドラッグアンドロップで移動ですね。
すると背面に画像が設置できます。
この透明度を下げた四角形を覆い被せるようにします。
この透明度はこのように微調整できますので、
暗くもできますし、
極端にやる場合は消してしまってもいいんですけど、
こんな感じで調整ができますので、
背面の画像の明るさによって微調整してください。
これ必須ですね。
微調整は必須なので、
操作方法はそこまで難しくないと思うんですが、
そんな感じですね。
当てはめるだけというよりかは、
ちょっと調整はお願いします。
あと開業ですね。
開業するというのは必要になってくると思うので、
配置についてはいろんなパターンあるんですが、
中央に配置するか、
あとは左側に寄せるかという感じですね。
右側に寄せるパターンもあるんですが、
それよりかは左の方がしっくりくるかなという感じです。
デザイン的なことを言うと、
左の方がしっくりきます。
開いたところに画像ですね。
こういう画像を配置するといいですね。
こういう画像は背景が透明化されていると思うんですが、
Remove BGですね。
このように検索すると出てきますので、
これで人物の背景の削除ができます。
その上でまたアップロードしていただくといいかなといった感じです。
顔出しですね。
それはあった方が信頼になるんですけど、
自分の場合は出したくないという場合は
なくてもいいかなといった感じです。
これガイダンスのテキストなので、
15:03
画像を配置したら消してください。
仕組み的なことを言うと、
背面に画像があって、
その上に透明度を下げた四角形があって、
その上にテキストとか四角形があるといった感じです。
そのイメージを持っていただくと、
さらに編集がしやすくなります。
削除ですね。
あとは基本的に、
ノトサンズ系のものを使っていただければと思います。
ゴシック体の方がパッと見分かりやすい、
視認性が良かったりしますので、
そのようにしてください。
あと他にもいろいろあるんですけど、
今回使うものと言えば、
この行の間隔ですね。
こういうところもですね、
極端じゃなければいいんですけど、
例えばこれは極端なので、
もうちょっと開けるとかですね。
開けすぎも良くなくて、
こんなに離れていると良くないので、
適度な位置に調整をお願いします。
はい、といった感じです。
基本この1ページ目とあと2ページ目以降、
同じような感じですね。
この場合はここに画像を配置する形になりまして、
これもドラッグ&ドロップで
ポンと移動していただければ配置ができます。
丸く切り抜きが自然にしてくれるというものですね。
あとこういう帯の色ですね。
こういうのも調整、あとは色の変更をお願いします。
これも同じですね。
あとここに画像を配置ということなので、
これはシンプルに、例えばこの画像を配置するとして、
この場合はシンプルに配置するだけになるんですけど、
これイメージ画像を配置してくださいねということですね。
最後これですね。
もしこれ四角形とかいらない場合は消してしまっても良いんですけど、
動かして微調整することができます。
ここの十字キーで動かすことができます。
色も変更できますので自由に変更してしまってください。
基本的に選択してここに編集項目が現れるので、
色の指定とかそういうことをするといった感じになります。
あとここに画像を配置ということです。
パソコンの中にドラッグ&ドロップで配置することができます。
といった感じですね。
編集法は非常に簡単だと思いますので、
あとは微調整ですね。
必ずしてください。
はめるだけというよりは微調整が必須なので。
こんな感じでよろしくお願いします。
18:00
微調整の中にはいろいろ含まれるんですけど、
開業だとか色の変更だとかですね。
あとこの四角形の幅とかその他のものが含まれます。
あとCanvaの方にもテンプレートがあるので、
もし気になったらこれが絶対的正解というわけではないので、
もし気になったらこういうのも無料のものですね。
無料となっているものを使用してみてください。
王冠のマークがついていると、
王冠のマークというか有料のものも含まれていますので、
そういうのは使えないので気をつけてください。
おそらく王冠のマークだったと思います。
またこういうアップロードですね。
これは非常にシンプルなので簡単だと思うので、
Canva上に自分のパソコンから画像をアップして使うといった感じです。
あとテンプレートを使う際の注意点として、
Canva上のテキストがグループ化されているので気をつけてください。
グループ化とは一緒にすることでして、
こういうふうに解除することもできるのでそのようにしてください。
といった感じです。
最後このダウンロードをクリックして、
その上でピンですね。
ダウンロード。
JPEGはロゴ画像とか背景を透明化させた画像、
先ほど透明化した人物画像がありましたけど、
ああいうもの以外は使用しないでください。
このダウンロードした画像をヘッダー画像として使用してください。
それでは今回は両方の表紙画像の作成法を解説します。
こういったデザインのベースを用意していますので、
このテンプレートを使用をクリックしてください。
するとご自身のCanvaのアカウントにコピーされました。
基本的に編集方法は、
このテキスト、あとこちらタイトルですね。
あと画像の配置といったこの3つになります。
あとはこの内容に応じて、
この配色ですね。
これを変更していただくという形になります。
ターゲットのお悩みを書いていくと。
あとはこのチェックリストですね。
タイトルを入力。
会社のロゴなんですけど、
自分のパソコンからロゴをアップロードして配置してください。
例えばこれがロゴだとして、
クリックすると配置できますので、
これを大きさを変更して配置するようにしてください。
こんな感じですね。
実際はロゴを配置してください。
あとこの背面に画像を配置ですね。
21:01
これなんですが、
例えばこれも画像を用意していただいて、
画像をPixabayとかそういったものを使ってください。
Pixabayとかアンスプラッシュとかですね。
こういうサイトから持ってきてください。
所有利用可能なサイトからですね。
例えばこういう画像が取得できるんですけど、
これに関してはブラックアンドラップの方がいいですね。
このように配置できます。
このテキストはいらないので消します。
先ほどのロゴのやつもですね。
配置したら消してください。
背面にイメージ画像ですね。
配置するようにしてください。
例えばこういうのとかもですね。
あとはこういうフォニオラの方へチェックリスト、タイトルですね。
ここにもロゴを配置してください。
もし画像によって見にくくなる場合はですね、
こういう四角形の部分に配置してください。
ここも画像の変更ですね。
配置、ロゴですね。
といった感じですね。
これをベースに編集してみてください。
あと色の変更方法はですね、
クリックするとここで色の変更ができます。
こんな感じで。
カラーコードでも指定できますので、
それでも変更してみてください。
あとはこの3つあるんですが、
その中の1つでOKです。
作成終わりましたらここをクリック。
今回はPDFですね。
PDFの表紙として使いたいのでPDFを指定します。
ダウンロードをクリックします。
ちなみにこのページをですね、
今3個あると思うんですけど、
ガイドのページだけに絞ってダウンロードすることができます。
例えば1ページ目だけの編集した場合ですね。
1ページを指定したまま完了をクリックしてください。
あとはチェック外すって感じですね。
あとはPDF以外にも、
例えばサイトに配置したい、
リードカウントページを作成するときに、
ヘッダー画像として使いたいとか、
画像として使う場合もありますので、
その場合はJPEGを指定してください。
以上が編集方法と、
あとダウンロードのやり方になります。
それでは今回は、
Facebookで使う広告画像ですね。
テンプレートを用意していますので、
それの使い方というか、
編集方法を解説していきます。
こういうものを用意していますので、
24:00
この解説動画のページ内に配置しておきます。
アカウントをログインした状態で、
テンプレートの仕様をクリックしてください。
すると自分のCanvaのアカウントにコピーできます。
非常にシンプルなデザインでして、
実際のところは、
実際にFacebookを見てみて、
どこで出稿されているのかチェックしてみてください。
基本的にはこんなシンプルなものでも、
出稿はできますよ、そんなテンプレートになっています。
内容を確認していきますと、
無料オファーの表紙を作ってもらったと思うんですけど、
それを画像化して配置するという形になります。
なぜこれ画像なんですね。
それを中央に配置して、
一目でこういうものがもらえるんだなという表紙を見せるという感じになります。
あとは無料を強調しておくということですね。
無料で公開とか無料とかですね。
この表紙の画像を、
メディアをアップロードから、
画像化しておいたものをアップしていただいて、
例えばこれだとして、
クリックすると中央に配置されて、
大きさの変更ができますので、
それで調整してください。
これは表紙については別の動画で解説していますので、
それをダウンロードのところで、
もしこうなっていたら、
JPEGにして出力するといった感じになります。
もし背景がこういう風になっていない、
白く背景が出てしまった場合はPINGにしてください。
で、配置する、それをダウンロードして、
そこからのアップしてまた配置するという感じになります。
あとは基本的にはこの色を変更してもらう。
背景は薄いグレーでいいと思うんですけど、
こんな感じで白にもできますし、
ただこの無料版のこの表紙自体が白背景だと目立たないので、
こういう薄いグレーにしてください。
あとは、
ベージュを他のサイトからカラークローで取得してきて、
カラークローで取得するとかですね。
カラージュラで取得できますので、
こんな感じです。
この無料の背景の丸ですね、
丸になっているんですけど、
27:02
これの色を自分のサイトの色でもいいですし、
好きな色で変更しておいてください。
設定してみて目立たないなとかそういうのがあったら
適宜変えてください。
これはテンプレートなのでこういう黒めのグレーにしています。
あと文字の色もここから変えられますので、
こんな感じで変えられますのでそれで変えてみてください。
基本的にここで色々いじれるテキストの色だとかですね、
下線を引いたりとかそういう感じです。
フォントはいじらないでください。
Not Sans Blackですね。
これからいじらないでください。
フォントに関してはいじらないと。
ただ色関係、配色関連はちょっと変えてみるといいかなという感じです。
これなんかも目立たないので、
そしたらこれを背面にして目立たせるみたいな感じになります。
基本的にカスタマイズしていただいていいので、
およそこういうイメージですよという共有なので、
ちょっとテキストを追加してみるとかですね、
その際はNot Sansのフォントにしてほしいんですけど、
テキストを下に配置してみるとかそういうカスタマイズは全然OKですので、
ベースだと思ってください。
あとこれで絶対に反応が取れるというものでもないので、
あとは、もしカスタマイズするのであれば、
実際のFacebookを見てみて広告を確認してみるというのもいいので、
デザインというのは正解不正解がないので、
これが正解というわけでもないので、
そういったものも参考にしてみるというのも非常にお勧めです。
ということで、こちらのFacebookの広告画像のテンプレートの解説は以上になります。