00:00
それでは今回は、おしゃれなアイキャッチ画像のつくり方ということで、こちらの動画を通して解説を進めていきたいと思います。
ではまずこちらのスライドをご覧になってください。 まずそもそもアイキャッチ画像とはということで、解説を進めていくわけなんですが、このアイキャッチ画像の意味は目を引く画像
といった解説をされている方が多いです。 これだけだと少しざっくり過ぎているので、どういった画像の役割があるのかというのを見ていきたいと思います。
まずアイキャッチ画像の役割として、記事の内容が一目でわかる、といったものになります。 こういった形で
記事の内容が反映されたような、雰囲気がわかるような画像を設定していただくと、 一目でどういった記事なのかがわかる
といったものになります。 あとはこの記事一覧の画像がわかりやすいということですね。
こういった形で一覧となってワードプレス表示されると思うんですが、その際に こういった形で
わかりやすくなるといった形になります。 もしこれが、画像が設定されなかった場合ですね、その場合は
こういった形で 表裏されてしまうので、やはりアイキャッチ画像の設定は必須となってきます。
一覧となって表裏された場合すべてこんな感じで表裏されてしまうとやっぱり無機質になってしまうので、そういった場合も雰囲気が伝わらなくて
せっかくいい記事を書いても 少し寂しい印象になってしまうので、やはりアイキャッチ画像は
他が画像ですけど必須ということになります。 あとはそのクリック率ですね、それが上昇するといった形になります。
先ほどから解説している通り、記事の雰囲気がわかったりしますので そういった意味でもクリックがしやすく
なるといった形になります。 あとはSNSなどでシェアされた時に目立つといった形になります。
こういった形で、これはFacebookページの投稿なんですが、こういった画像があると雰囲気が伝わって
先ほどの解説の通りクリックしやすくなるのと目立つといった役割があります。 これらの理由から
ブログ記事にアイキャッチ画像を書かせない そういった画像となってきます。
03:01
ワードプレスなのでオンドメディアを運営されている方は ただの画像なんですけどこういった
工夫が必要となってきます。 せっかくいい記事を書いても画像がないと雰囲気が伝わらないので少しちょっと
もったいないかなと思うのでこのアイキャッチ画像をぜひ作っていきましょう。
そういった形でおしゃれな画像を作れる無料のデザインツールとはということで 解説を進めていくんですが、まず
代表的な画像デザインツールといえば Photoshopであったり
イラストレーターですね。この2つが非常に有名かなと思います。 ですけどこちらどちらも有用のツールとなっています。
今では月額課金で使えるようになって少しハードルは下がったんですが それでもこの2つのツールを使いこなすのがなかなか難しいです。
操作も含めて やはり習得に時間がかかってしまうので
そういった 有料のツールでもあるのでちょっと手が出しにくい方も
多いかなと思います。 そこで無料で使えるデザインツールとは
ということでこちらのツールを紹介したいと思います。 このCanvaというツールですね。
こちらで無料でも十分使えますししっかりデザインができますので こちらのツールを使って今回はアイキャッチ画像の作り方
これを解説していきたいとおもいます。 このCanvaのメリットとはということで
先ほどから申している通り無料でも問題なく使用可能 これはwebサービスですのでソフトのインストールは不要ですね
なのでパソコンが重たくなったり面倒なインストール作業は一切ないといった 形になります。
ちょっと順番が前後してるんですけど、画像テンプレートですね。 これが抱負
なので一からデザインする必要もないですし デザインに自信がなくてもそのテンプレートに当てはめて作成ができます。
あとは画像素材サイト あまり疎くても
その サービス内で画像が検索もできるので
そこで検索を受けていただいて配置できたりもできます。 といった形で全部このCanvaの中で
完結できる そんなツールとなっています。
では実際に見ていきたいと思うんですが
こちらがCanvaの実際の画面になります。 実際にログインしていきたいと思うんですが
このようにFacebookの方でログインすることができます。
06:03
メールアドレスとかパスワードそういったもの 管理がめんどくさい方はFacebook自分のアカウントにログインした状態で
Facebookでも こちら使えるということを覚えておいてください。
私の場合はFacebookの方でログインをします。 これが実際の画面になります。
過去に作ったデータがこのように表示されますので デザインのファイル、データのファイルですね
そういったものがパソコン 自分のローカルの中に
溜まっていかないので要要も食わないといったメリットもあります。 こういったウェブサービス内で管理されているので
要要も食いません。そういったメリットもあります。 あとは特にこちらはチームで
デザインされている場合に使うものですので特に 解説を省くんですが、あとはゴミ箱ということでこちらに
こういった形で ゴミ箱に移動した際にこちらに行くっていう
ことを覚えておいてください。 アップグレートってあるんですが基本無料でも使うことができます。
こういった形で過去のデータが表示されます。 では実際にCanvaで使っていきたいと思うんですが
まずこのデザインを作成をクリックしてください。 今回はアイキャッチ画像の作成方法ということなので
スクロールしていただいてこのブログと電子書籍の中の ブログバナーですねこちらをクリックしてください。
しばらくしますとこの編集画面に移動します。これが編集画面になります。 それではテンプレートを選択していきたいと思います。
このようにいろいろテンプレートが用意されているんですが今回はシンプルに作成したいと 思いますので
こちらのテンプレートを使用します。 ちょっとこのCanvaの画面
時々重たくなりますのでその場合はしばらく待っていただいて 反映されるのをしばらくお待ちください。
このように反映がされました。 もし画面がフリーズしてしまったり重たくなってしまった場合
時間を置くかもしくはこちらの更新ですね。 こちらをクリックしてください。
09:01
では編集を始めていきたいとおもいます。 ちょっとその前に更新をします。
では編集の方を始めていきたいとおもいます。 編集方法はいたってシンプルなんですけどこのように
テキストのブロックがあったり要素のブロックがありますのでそちらをクリックして 移動したりとか
テキストでしたらテキストの内容を編集したりとか大きさを変えたりとかそういった ことができます。
不要な要素がありますのでそちらを削除します。 ちなみに大きさを変える場合はこのように動かしてもらうと
変更することができます。 今回これいらないので削除。
こちらの要素もいらないので 選択をした状態で削除ですね。
この状態で削除。 ちょっと重たい場合がありますのでその場合はちょっと時間を置いてから
編集するなり更新をするといった対処でお願いします。 あとはこちらにブログ記事のタイトルを
入力するわけなんですがそれはシンプルにこちらの ブログ記事のタイトルをコピーして
こちらに貼り付けをしてください。あとはちょっと微調整をします。 行間もかなり狭いのでこちらの間隔から
行の高さですね。これで微調整をします。 あとはだいたい中央に配置していただいて
この線も若干太いので 少し細くします。
あとはブログ記事のタイトルに合わせて長さを変更します。 といった形でだいたい中央に配置していただいて
編集していただければなと思います。
あとはこちらの背景の画像と背景の色ですね。 画像の上のレイヤーに四角形がありますのでそちらの色を変更します。
こちらの背景から、こちらの黒ですね。 こちらを選択していただいて、あとはグレーとかありますのでお好みに合わせて変更してください。
12:06
色によってテキストの色も変わってくれますのでそれで調整をお願いします。
あとはこちらの検索から写真。 このように検索をかけていただくと
画像が表示されます。 これを
このように大きさを変えていただいても結構なんですが、このようにちょっとずらすと 勝手に反映されます。
あとは少し不透明度を調整していただいて
こんな感じで編集をしていただいて、あとは基本的なところですとフォントサイズの変更とか
色の変更とか、不透地にしたりとかそういったものができます。 基本的にはこのフォントサイズの変更かフォントの変更
あとは感覚、不透明度といったものが一番使うかなと思います。
これで編集自体は終わりですので、 このダウンロードをクリックしていただいて
ファイル形式をPing、推奨されているPingでダウンロードですね。
これ後々ワードプレスの方にアップロードしますので、半角英数字で ファイル名を入力します。日本語ですと
記号の羅列したものになってしまいますので これを半角の英数字に
してください。 これで保存ですね。
といった形で画像の編集は以上になります。 これを×で消していただくと再度
先ほどの編集画面に移動します。 これはテンプレートを使ったやり方なんですが、実は1から作ることもできます。
その場合のやり方なんですが、このトップページの方から
画像サイズを指定。 1200からだいたい600ですね。
ピクセルになっていることを確認してデザインする。 そうしますと先ほどと同じ画面に移動します。
あとはこのままで結構ですので、まずは 画像の方を配置していきたいとおもいます。
写真で ここは
自分の好きな 写真のキーワードを入力。
15:08
画像を選択しますとこのように表示されます。 あとはこの画像のサイズを変更していただいて
このように配置をしてください。 次に四角形を配置したいと思いますので素材から図形ですね。
こちらをクリック。白になっていますのでこれを黒に変更。 同じように
大きさを変更します。 不透明度を変更したいので
選択をした状態でこちらですね。こちらをクリック。 不透明度をだいたい
お好みに合わせて変更してください。 今回は45にしました。
あとテキスト要素の配置です。こちらのテキストから見出しを追加。
見出し要素をクリック。 ホントを変更したいと思いますので日本語は少ないんですが
こちらにしてみます。 あとは同じように
ブログ記事のタイトルをコピー。 こちらに貼り付け。
ホントの色なんですがこれを白。 あとはちょっと微調整をしていきます。
これを中央に配置。 ホントサイズを少し変えます。
こちらの素材の方から こういったアイコン素材があります。
こういった形でアイコンが表示されますので、あとはこれを色の変更をこのようにしたりですとか
大きさを変更していただいて 配置をしてください。
あとは細かい微調整をしていきます。 こういった形で編集をしていただいて
18:35
十字キーでも動かすことができます。
なるべく中央に このタイトルですとかアイコン配置していただいた方が
いいと思います。一覧となって表示された際に はみ出てしまったりとかそういった可能性がありますので
小さめにしていただいて中央に配置。これぐらいで結構だと思うんですが配置していただいて
あとは ダウンロードしていきたいとおもいます。
先ほどと同じでこちらのダウンロードをクリック ピングでダウンロード
これも半画で名前をつけます。 といった形でテンプレートを使って
作成する方法と位置から自分で作る方法ですね。 こちらを解説しました。
ちなみに この画像サイズを指定
してたんですがテンプレートの場合はこの画像サイズの変更ができません。 なので
画像サイズ指定がある場合は位置から作っていただいた方がいいかもしれません。
特にこだわりがなければ テンプレートを使って作成していただくと
スムーズにいくかなと思います。 あとはアイキャッチ画像を実際に設定してみたいと思います。
このワードプレスの編集画面ですね。 右のサイドバーの中にこのアイキャッチ画像というのがありますのでそちらから設定します。
ファイルをアップロードからファイルを選択
今回自作した方を 設定してみたいと思います。
これで設定ですね。 これで更新です。
21:09
実際に見てみますと こういった形で
テーマによるんですが表示されます。 あとは一覧となって表示された場合ですね。
こういった形で表示がされます。 先ほど言っていたホントサイズが少し
大きめにしてしまうとはみ出てしまう可能性があるというのはこの 表示ですね。
テーマによるんですが こちらはみ出てしまうとちょっと不格好ですので
中央に寄せていただいて小さくしていただければなと思います。
といった形でアイキャッチ画像の設定方法まで解説をしました。
今回はこのアイキャッチ画像をそのままアップロードして設定したわけなんですが
もう一つ覚えておいてほしい操作としまして
このpingの圧縮というものがあります。 このpingというのは
このファイルの形式ですね。画像のファイル形式。 こちらを圧縮させて品質はそのままで
ちょっと画像を軽くするといった操作になります。 詳しくはこういった検索をかけていただくと
ツールの紹介とともに詳しい解説が載っています。 こちらの記事もぜひ
参考にしていただきたいんですが こういったものですね。
要要が減らせるといったものになります。 こちらにも書いてある通り
この画像の要要が多いとページ速度に影響が出てしまうので 圧縮をしていただくといった形になります。
といっても非常に簡単な操作でできるのでぜひ覚えていただきたいんですが このように検索をしていただいて
検索結果の一番上に来るこちらですね。 このpingイメージをオンラインで圧縮するという
こちらですね。こちらをクリックしてください。 操作方法はいたって簡単なんですがアップロードする
回答動画を クリックする
開くですね。これだけで圧縮が されます。これで
すべてダウンロード。 こちらでもいいですね。このダウンロードでも結構です。
24:03
このような感じでダウンロードできますのでこれを回答ですね。 これが
圧縮した画像なんですけどほとんど同じ品質で このサイズが変更されていますね。
軽くなったのがわかるかと思います。 あとはこちらの画像を先ほどの
設定箇所に設定するといった
そういった操作になります。 これを削除して
圧縮したものをアップロードですね。 先ほどのは設定手順を伝えたかったので一度設定しました。
このように圧縮していただいたものを設定した方が この記事の通りページ速度に影響がない
影響が少ないといった形になります。これで更新ですね。 今回このツールで紹介をしたんですが検索結果に一番上に来たので
このツールを使ったわけなんですが万が一このツールが使えなくなった際は こういった記事の
ツールを使用してみてください。 使い方は多分
アップロードするだけといった簡単な操作になります。 特に複雑ではないのでぜひ他のツールもお試しください。
あとはですね最後に まとめとしまして
まとめとしましてCanvaで作る場合は1から デザインに自信がない方は
この テンプレートを使用していただく方法
あとは画像サイズを少しカスタマイズしたい場合は1から作る方法。その場合は
先ほど作った方法を参考に していただいて編集
あともっと お使いこなすにはこういった素材も用意されているんですが他の画像素材サイトから
こういったアイコンなどを持ってきていただいて配置していただくという形になります。 その場合はこのアップロードというところから画像だったり
アイコンをアップロードすることができます これ自分のパソコンからアップロードすることができます
それにあたっての素材サイトの 探し方ですねこちらをご紹介したいと思います
こちらはシンプルに 素材サイトまとめと検索をかけていただくとこういったまとめ記事がたくさん出てきます
27:12
中にはこの所要利用okといった感じで 安心できるものを
安心できるサイトをまとめてくれている記事がありますのでそういったものを見ていただいて気になったサイトをクリックしてその中から素材を選んでいただくといった形になります
こういった形で無料でも高品質な素材サイトたくさんありますのでそちらを参考にしてください
あとはアイコンですね こちらシンプルにアイコンと検索をかけていただくとこういった
アイコン素材サイトのまとめサイトもありますし 実際の素材サイトもこのように
表示されます こちらの
アイコンものというサイトも結構いろいろアイコンありますのでそちらからダウンロードして
先ほどの方法でキャンバーの方にアップロードしていただくと
編集の際に使用することができます またこういったまとめ記事ですねその中から選んでいただくと
いった形になります あとはイラスト素材なんかもあると便利ですので
これもシンプルにイラストと検索をかけていただくと
こういったイラストやというサイトですとか そういったサイトが表示されます
では実際にこういった素材サイトを利用して もう一度iCatch画像を作ってみたいと思います
ではまずこの こちらの記事で紹介されているこのPixabayというサイトですね
こちらの素材を使って実際に
作ってみたいと思います なのでこちらをクリック
こちらも何かキーワードを入力していただくとガイドする 画像が手に入ります
こういう形ですね こういった素材の中から気になるものを選択してください
こちらをクリック Pixabayのサイトの場合この商用利用無料
記録表示は必要ありません こちらの2点をゲームのため確認してください
この2点が表示されていれば安全な画像ですのでそのまま無料ダウンロード
デフォルトのままでダウンロードですね
私はロボットではありませんこちらにチェックを入れていただいて こちらのダウンロードをクリック
30:13
では実際にキャンバーの方に取り込んでみたいと思います こちらのアップロードをクリックしていただいて画像をアップロード
ダウンロードした画像を選択で開くですね これでしばらくすると
アップロードが完了します あとはクリックするだけで配置することができます
これも同様に画像のサイズを調整していただいて こういった形で
こういった形で調整をしていただいて 配置をします
あとはアイコンですねアイコンなんかもこちらの サイトからダウンロードできますので
実際に配置をしてみたいと思います このように検索をかけていただいて
該当するのが出てきますのでこちらをクリック 色なんかを調整していただいて
こういった形で今回は白でダウンロードしたいので 白にしました
あとはピングの形式で ダウンロードで保存ですね
また同じようにアップロードから 画像をアップロードですね
該当の画像を選択で開くですね こちらいらないので消します
あとは同じように配置ですね ちょっと大きさを調整していただいて配置
こういった形で 素材サイトも利用しますと
完全にオリジナルで 画像を作成できますので
33:03
ぜひこういった素材サイトとアイコンサイト これも素材サイトですね
こういった形で自由にカスタマイズしていただいて 作っていただければなと思います
基本的にはこういったまとめ記事を参考にしていただくと 安心できるサイトを紹介してくれてますので
そういったまとめ記事を参考に素材サイトを見つけて ブックマークするなりしておくと大変便利になります
あとこのCanvaなんですが 先ほど一瞬見たかと思うんですが こういった感じで
他のFacebook投稿でしたりとか Twitterですね
といった形でいろいろ用途があります
今回はiCatch画像を中心に解説したんですが 実はこういったポスターとか
いろいろ作れますのでそちらもぜひ試してみてください こういったFacebookのカバーとか
メルマガのヘッダーとか いろいろデザインに適したツールですので
ぜひデザインに自信のない方でもテンプレートを使って デザインしていただくといった形になります
では今回はiCatch画像の作り方 ブログ記事に設定必須なiCatch画像の作り方を
解説させていただきました 概中するよりかは自分で作っていただいて
先ほどのように設定自体も簡単ですので 設定をしてみてください
こういった形で画像素材サイトから 持ってきていただいても結構なんですが
自作していただくと少し雰囲気も変わるかなと思いますので
ぜひ作成をしてみてください 今回は以上になりますご視聴ありがとうございました