WEBVTT

00:00:03.030 --> 00:00:04.030
それでは今回は、

00:00:05.030 --> 00:00:09.030
アイキャッチ画像テンフレートの編集方法を解説していきます。

00:00:09.030 --> 00:00:13.030
このようにですね、ページ内にこういうものを用意しておきますので、

00:00:13.030 --> 00:00:15.030
この部屋が作成したテンフレートがあなたと共有されました。

00:00:15.030 --> 00:00:17.030
今すぐデザインを始めましょう。

00:00:18.030 --> 00:00:20.030
こちらを確認していただいてですね、

00:00:20.030 --> 00:00:24.030
あとキャンバーのアカウントも必ず用意した上でですね、

00:00:24.030 --> 00:00:28.030
このテンフレートの使用をクリックします。

00:00:29.030 --> 00:00:32.030
クリックすると、このようにコピーされますので、

00:00:32.030 --> 00:00:34.030
タイトルはですね、別に

00:00:35.030 --> 00:00:37.030
コピーって付いててもいいと思うんで、

00:00:38.030 --> 00:00:42.030
もし気になったらこれ消すっていう感じで調整してください。

00:00:43.030 --> 00:00:47.030
編集方法ですね、まずはレイアウトの確認ですね。

00:00:48.030 --> 00:00:51.030
こういうのが鉄板ですよ、

00:00:52.030 --> 00:00:56.030
逆にはそんな外れないですよ、ダサく見えないですよ、

00:00:56.030 --> 00:00:59.030
そういうものをピックアップしています。

00:01:01.030 --> 00:01:06.030
大体この中央にタイトルがあるっていう感じですね。

00:01:07.030 --> 00:01:12.030
背面に画像配置っていうところを今回メインで解説していきたいと思います。

00:01:13.030 --> 00:01:15.030
こんな感じですね。

00:01:15.030 --> 00:01:18.030
どれも簡単に編集ができます。

00:01:19.030 --> 00:01:21.030
この背面に画像配置っていうところですね、

00:01:21.030 --> 00:01:23.030
ちょっと解説していきたいと思います。

00:01:27.650 --> 00:01:29.650
大体画像の編集、

00:01:29.650 --> 00:01:33.650
ワードとか、パワーポイントとか、キーノートとかでも

00:01:33.650 --> 00:01:35.650
同じようなものがあるんですけど、

00:01:35.650 --> 00:01:38.650
背面と前面があります。

00:01:38.650 --> 00:01:42.650
なので今、背面に何もない状態なので、

00:01:44.650 --> 00:01:47.650
何もない状態で、ここで四角形ですね。

00:01:47.650 --> 00:01:49.650
この四角形がある。

00:01:49.650 --> 00:01:54.650
さらにその上にテキストが2つ乗っかっている状態になります。

00:01:54.650 --> 00:01:58.650
どんどん上に乗っかっているイメージですね。

00:01:58.650 --> 00:02:01.650
一番上のものが強調して、

00:02:01.650 --> 00:02:04.650
一番よく見えて表示されるといった形になります。

00:02:06.650 --> 00:02:09.650
まずこの背面に画像を配置してほしいんですけど、

00:02:10.650 --> 00:02:16.690
ちょっと一旦どかします。

00:02:16.690 --> 00:02:19.690
画像はこのようにですね、

00:02:20.690 --> 00:02:24.690
メディアをアップロードから自分のパソコン内の画面が表示されますので、

00:02:24.690 --> 00:02:27.690
画像を用意していただいてそれを選択してください。

00:02:27.690 --> 00:02:30.690
画像はですね、だいたいダウンロードホルダーに入っていると思いますので、

00:02:30.690 --> 00:02:33.690
そこから選択してください。

00:02:33.690 --> 00:02:37.690
画像素材はこういうPixarwayという素材サイトがありますので、

00:02:37.690 --> 00:02:41.690
ここからですね、好きな画像を選択していただいて、

00:02:41.690 --> 00:02:43.690
一応ここを確認してください。

00:02:43.690 --> 00:02:46.690
使用料無料、記憶表示は必要ありません。

00:02:46.690 --> 00:02:50.690
無料ダウンロードをクリックしてダウンロードを進めていただくといった形になります。

00:02:51.690 --> 00:02:56.690
基本はこの他にもあるんですけど、

00:02:56.690 --> 00:03:01.690
所要利用可能な素材サイトから持ってくるといった感じです。

00:03:01.690 --> 00:03:05.690
もう既に入っているのでこれを使ってですね、ちょっとやっていきたいと思います。

00:03:05.690 --> 00:03:07.690
これでいきます。

00:03:07.690 --> 00:03:13.750
こういうふうにブラックアンドドロップして、

00:03:13.750 --> 00:03:16.750
もう一回お見せしますけど、

00:03:16.750 --> 00:03:22.190
選択すると、クリックするとこうなってしまうんですが、

00:03:22.190 --> 00:03:24.190
これで広げていってもいいんですけど、

00:03:24.190 --> 00:03:26.190
それだとちょっと手間なので、

00:03:26.190 --> 00:03:28.190
ダークアンドドロップで、

00:03:28.190 --> 00:03:34.190
こうなったら離すとやった方がスムーズにいけるかなという、

00:03:34.190 --> 00:03:37.190
時短できるかなといった感じです。

00:03:37.190 --> 00:03:41.190
そしたらこの四角形ですね、

00:03:41.190 --> 00:03:43.190
黒いちょっと薄くなっている四角形、

00:03:43.190 --> 00:03:48.190
これをこのようにガイド線に合わせて配置します。

00:03:48.190 --> 00:03:50.190
この四角形ですね、

00:03:50.190 --> 00:03:53.190
なんで薄くなっているのかというと、不透明度を下げているからですね。

00:03:54.190 --> 00:03:57.950
ここで調整できますので、

00:03:57.950 --> 00:04:04.710
この画像の明るさによってもだいぶ調整する必要があります。

00:04:04.710 --> 00:04:06.710
背景の画像がちょっと明るいと、

00:04:06.710 --> 00:04:08.710
透明度をちょっと上げる。

00:04:08.710 --> 00:04:12.710
その方がこのタイトルのテキストが映えるという。

00:04:12.710 --> 00:04:18.070
そんな感じで調整していってください。

00:04:18.070 --> 00:04:20.070
なのでこの機能は覚えておいてください。

00:04:20.070 --> 00:04:22.070
四角形をクリックして選択して、

00:04:22.070 --> 00:04:24.070
透明度を上げ下げする。

00:04:24.070 --> 00:04:26.070
ここですね。

00:04:26.070 --> 00:04:28.070
カーソルを合わせると透明度が出てくるので、

00:04:29.070 --> 00:04:31.070
これを確認してください。

00:04:31.070 --> 00:04:33.070
だいたいこういうサービスって、

00:04:33.070 --> 00:04:36.070
カーソルを持っていくとこういう風に出てくるので、

00:04:36.070 --> 00:04:38.070
それでわかります。

00:04:40.070 --> 00:04:43.070
背面に画像を配置したら、これは消すと。

00:04:45.070 --> 00:04:47.070
ガイダンス的なテキストなので。

00:04:47.070 --> 00:04:49.070
あとはここにブログのタイトルですね。

00:04:49.070 --> 00:04:53.070
これは中に配置と。

00:04:53.070 --> 00:05:01.410
基本は背景の四角形が黒なので、

00:05:01.410 --> 00:05:03.410
白でいいんですけど。

00:05:03.410 --> 00:05:05.410
例えばですけど、

00:05:05.410 --> 00:05:07.410
赤でも。

00:05:07.410 --> 00:05:12.410
基本は白の方がいいという感じです。

00:05:12.410 --> 00:05:15.410
ちなみにここで色が色々変えられます。

00:05:15.410 --> 00:05:17.410
基本は黒でいいと思うんですけど、

00:05:17.410 --> 00:05:21.410
ちょっと変えてみたいなという場合は色々変えてみてください。

00:05:22.410 --> 00:05:29.410
例えばこの白が四角形の色を白にした場合は、

00:05:29.410 --> 00:05:33.410
このタイトルのテキストが見づらくなってしまうので、

00:05:33.410 --> 00:05:37.410
この場合は黒にするって感じになります。

00:05:37.410 --> 00:05:43.060
こんな感じで調整をしていってみてください。

00:05:43.060 --> 00:05:48.060
基本はこの白で背景の色、

00:05:48.060 --> 00:05:52.060
これは濃いものにした方が見やすいですね。

00:05:53.060 --> 00:05:56.060
赤は強調しすぎなんですけど、

00:05:56.060 --> 00:05:58.060
緑とか。

00:05:58.060 --> 00:06:03.060
言ったらベースは黒で考えていただければと思います。

00:06:03.060 --> 00:06:06.060
そんな感じで編集をお願いします。

00:06:06.060 --> 00:06:08.060
あとのやつも基本同じでして、

00:06:08.060 --> 00:06:12.820
ドラッグ&ドラップで配置。

00:06:12.820 --> 00:06:14.820
戻す。

00:06:14.820 --> 00:06:16.820
選択した状態で戻す。

00:06:16.820 --> 00:06:19.820
背景の画像配置を消す。

00:06:19.820 --> 00:06:23.820
これを中央に配置と。

00:06:23.820 --> 00:06:25.820
基本同じですね。

00:06:25.820 --> 00:06:30.140
この四角形にプラスして、

00:06:30.140 --> 00:06:33.140
前面にこの枠が付いているっていう、

00:06:33.140 --> 00:06:36.580
そういう違いになります。

00:06:36.580 --> 00:06:37.580
次ですね。

00:06:37.580 --> 00:06:40.580
これも同じです。

00:06:40.580 --> 00:06:42.580
ドラッグ&ドラップで配置。

00:06:42.580 --> 00:06:45.580
戻す。

00:06:45.580 --> 00:06:50.580
そしたら今画面に映っているのは、

00:06:51.580 --> 00:06:55.580
透明度を下げた四角形の上に、

00:06:55.580 --> 00:06:59.580
さらに上に透明度を下げた、

00:06:59.580 --> 00:07:05.980
白の四角形があるといった感じになります。

00:07:05.980 --> 00:07:09.980
ここは基本白で統一してもらって、

00:07:09.980 --> 00:07:15.980
ここも黒で統一っていう感じでいいと思います。

00:07:15.980 --> 00:07:20.980
あとはこれ必ず消すと。

00:07:20.980 --> 00:07:22.980
これより画像を配置して、

00:07:22.980 --> 00:07:25.980
これ残っていたら気持ち悪いと思うので、

00:07:25.980 --> 00:07:28.980
気付くかなといった感じです。

00:07:28.980 --> 00:07:34.980
消します。

00:07:34.980 --> 00:07:36.980
これも同じですね。

00:07:36.980 --> 00:07:44.350
これも黒い方の四角形をずらして上で配置。

00:07:44.350 --> 00:07:46.350
これはもしかしたらいけるかもしれないですが、

00:07:46.350 --> 00:07:48.350
いけないですね。

00:07:48.350 --> 00:07:53.350
さすがにずらさないといけないようなので。

00:07:53.350 --> 00:07:54.350
こんな感じですね。

00:07:54.350 --> 00:07:56.350
あとは同じです。

00:07:56.350 --> 00:07:58.350
なので基本的に覚えてほしいのは、

00:07:58.350 --> 00:08:01.350
画像を挿入する作業と、あとは色ですね。

00:08:01.350 --> 00:08:04.350
色をこちらから変更できます。

00:08:04.350 --> 00:08:06.350
それと不透明度ですね。

00:08:06.350 --> 00:08:10.350
これをここから下げてみます。

00:08:10.350 --> 00:08:12.350
時々不透明度って言ってますけど、

00:08:12.350 --> 00:08:15.350
一応透明度と不透明度一緒なので、

00:08:15.350 --> 00:08:18.350
そんな感じです。

00:08:18.350 --> 00:08:20.350
あとはこの前面とか背面ですね。

00:08:20.350 --> 00:08:23.350
このテンプレートでは全部調整してあるので、

00:08:23.350 --> 00:08:24.350
大丈夫なんですけど、

00:08:24.350 --> 00:08:27.350
一応この前面・背面も覚えておいてください。

00:08:27.350 --> 00:08:31.350
今わかりやすくずらしてますけど、

00:08:31.350 --> 00:08:36.350
背面に画像、その前面に四角形。

00:08:36.350 --> 00:08:38.350
黒の四角形ですね。

00:08:38.350 --> 00:08:40.350
で、テキスト。

00:08:40.350 --> 00:08:44.350
この3つの構造になっている。

00:08:44.350 --> 00:08:46.350
上に行けば行くほど見える。

00:08:46.350 --> 00:08:49.350
この構造を覚えておいてください。

00:08:49.350 --> 00:08:52.350
そうすると、キャンバーを使って

00:08:52.350 --> 00:08:55.350
他の画像も編集できますし、

00:08:55.350 --> 00:08:58.350
このテンプレートも編集するときに

00:08:58.350 --> 00:09:03.350
理解が深まるという感じで、

00:09:03.350 --> 00:09:05.350
画像編集に必要な知識なので、

00:09:05.350 --> 00:09:07.350
それも覚えておいてください。

00:09:07.350 --> 00:09:10.350
画像編集に必要な知識といえば、

00:09:10.350 --> 00:09:13.350
カラーコードとかもありますので、

00:09:13.350 --> 00:09:21.740
カラーコードはこういうサイトがあって、

00:09:21.740 --> 00:09:24.740
このシャープで始まる数字とアルファベットの来月。

00:09:24.740 --> 00:09:26.740
これがカラーコードになります。

00:09:26.740 --> 00:09:28.740
あとはこういうカラージュラで

00:09:28.740 --> 00:09:30.740
色を抜き取ることができます。

00:09:30.740 --> 00:09:31.740
ピックカラーフロムページ。

00:09:31.740 --> 00:09:32.740
これ拡張機能ですね。

00:09:32.740 --> 00:09:35.740
こんな感じで抜き取ることができます。

00:09:35.740 --> 00:09:39.740
これも一応、編集の幅を広げるという意味でも

00:09:39.740 --> 00:09:43.740
覚えておいてください。

00:09:43.740 --> 00:09:44.740
それではこのブルー、

00:09:44.740 --> 00:09:48.740
iCatch画像テンプレートの編集方法は以上になります。