Macのkeynote(キーノート)でYouTubeのサムネイル画像やブログのアイキャッチ画像を秒速で作成する方法

スポンサーリンク

 

こんにちは、WEBマーケッター山田祐輔です。

突然ですが、あなたはブログのアイキャッチ画像ってどうやって作ってます?

 

・フォトショップ?

・Gimp?

・いや、そもそも画像の加工をしない?

 

のんのん、ちちち。

keynoteを使えば、秒速でブログのアイキャッチ画像が作成できます!

 

ちなみにこのブログのアイキャッチ画像もkeynoteでパパッと作ってます。

 

今回、作っていくのはコレ!!!!

keynote-aikyattigazou.001

 

うん、個性的でいい味出てるぜ!(自己満)

 

この画像の作り方をこれから秒速で1億稼ぐ男こと、山田が解説していきます。

 

 

keynoteを使ってブログのアイキャッチ画像を作成する方法

 

まず、keynoteを開きまっす。

次に、下記のような画面になるので「新規書類」から「開く」を選択します。

 

スクリーンショット 2016-04-19 7.38.59

 

そして、次にテンプレートの選択なのですが、今回は無難に「ホワイト」を選択しまっす。

 

スクリーンショット 2016-04-19 7.39.21

 

すると、こんな感じの画面になるので、真ん中のテキストの部分はdeleteキーで削除します。

 

スクリーンショット 2016-04-19 7.41.06

 

ここから画像を入れていきまっす!!

今回、使う画像はこちら!!

max16011524-2_TP_V

少し前に話題になった経営コンサルタントの○ョーンK氏似のナイスガイだ!(爆)

 

ちなみにいつも山田がお世話になっていて、今回も使用している画像の引用先はこちら

→ ぱくたそ

※無料でいい感じの写真がめちゃくちゃ豊富です。いつもありがとうございます!

 

こちらの画像を使って、ナイスなアイキャッチ画像を作っていきます。

 

まず、こちらの画像をファイルから挿入もしくはそのまま画像をkeynoteにドラッグします!

ちなみに画像のサイズは写真のように端っこを上に引き伸ばすと画像も拡大します。

 

(デザインのプロ的に言うと画像を引き伸ばすのは悪らしいが関係ない!笑

ただし、やりすぎると画質が荒くなるのでそこは注意っす)

 

スクリーンショット 2016-04-19 7.42.48

 

画像が拡大できたら、次は「テキスト(文字)」を入れていきましょう!

まずは上部のメニューにある『テキスト』を選択します。

 

スクリーンショット 2016-04-19 7.43.31

 

すると、下記のような感じでテキスト文字が入力できます。

ここにアイキャッチに入力したい文字を入れていきまっす。

 

スクリーンショット 2016-04-19 7.44.09

 

このままだと横に広がりすぎ&文字が小さいので修正していきます。

まず、文字を選択して文字を改行しまっす。

 

スクリーンショット 2016-04-19 7.44.30

次に、文字の『フォント』『文字の大きさ』『文字の色』を変更します。

 

※今回使用したフォントは『じゆうちょうフォント』といって無料で使えるフォントです。

興味があったら使ってみてね!他にも『フォント』『フリー』とかで調べれば色々出てきます。

 

文字の大きさは今回、『150』サイズ

文字の色は強調したい部分だけ色を変えました!

 

《ビフォア》

スクリーンショット 2016-04-19 7.45.12

《アフター》

スクリーンショット 2016-04-19 7.45.46

 

こんな感じでアイキャッチ画像っぽくなった。

次は、テキストを見やすくするためにボックスを作っていきます。

上部メニューの「図形」をクリックし、その中から写真のような正方形の図を選びます。

 

スクリーンショット 2016-04-19 7.46.47

 

すると、こんな感じで挿入されまっす。

次にこれを文字に沿ってグイッと広げていきます。

 

スクリーンショット 2016-04-19 7.47.25

 

すると、下記のように図がテキストに沿って広がります。

 

スクリーンショット 2016-04-19 7.48.20

 

このままだと文字が見えないので、この青い図の透明度を下げていきます。

あ、透明度とはその名の通り、透明にしていくという意味っす。

 

まずは、図よりも文字を上に表示したい。

うーん、いまいち伝わらんか。。

 

とりあえず下の図みたいに文字が見える(読める)状態にするというイメージです。

 

スクリーンショット 2016-04-19 7.50.00

 

このままの状態だと、青の主張が激しいので青を透明にしていきます。

右側の「不透明度」%(パーセンテージ)を下げていきます。

 

すると、下記の図のようになります。

今回は透明度「34%」にしてみました!

 

ちなみにバックの色も変えれるっす。

 

スクリーンショット 2016-04-19 7.51.57

 

これでだいぶ大元に近づいてきましたが、ここにさらに付け加えていきまっす。

下に「YouTubeの文言」を追加しました。

 

次に、余計な演出ですが、口元に✨というようなスタンプを入れます。

(keynoteだと「キラ」とか入れると✨という感じで出ます)

 

これをそのまま「150pt」ぐらいにすると・・・

 

スクリーンショット 2016-04-19 7.57.31

 

これを口元に持ってくれば・・・

下記のようになります。

 

スクリーンショット 2016-04-19 7.35.45

 

うん、これで完璧になりましたね。(見本に対してという意味っす)

 

これを今から保存していきまっす。

上のメニューの「ファイル」から「書き出す」を選択します。

 

スクリーンショット 2016-04-19 8.07.27

 

次に、「イメージ」を選択します。

 

スクリーンショット 2016-04-19 8.07.48

 

すると、下記のような画面になりますので、「次へ」を選択。

 

スクリーンショット 2016-04-19 8.08.16

 

そこから「名前」「保存先」を決めていきます。

以前にも書きましたが、ファイル名は「英語」にしてください!!!

 

詳しい理由はこちら→画像の名称が日本語ではダメな理由

 

スクリーンショット 2016-04-19 8.09.54

 

今回はデスクトップを選択したので、デスクトップに保存されました!

 

スクリーンショット 2016-04-19 8.03.17

 

これで作成自体は完了でっす!

(まだ終わりじゃないよ)

一旦はお疲れっした!!!

 

ちなみにYouTubeのサムネイル画像の場合はこれでサイズもバッチリなので、このままで大丈夫っす。

 

ブログのアイキャッチ画像の場合はサイズが少し大きいのでサイズを小さくしていきます。

まずは画像をクリックします。

 

すると、下記のような画面が表示されますので右上のボックスのマークのような部分をクリックします。

(写真の部分です)

 

スクリーンショット 2016-04-19 8.10.32

 

すると、下記のような画面になりますので、まず、上部メニューのサイズを広げるようなアイコンを選択。

(抽象的で申し訳ないっす。笑)

 

次に、色々と項目が出てくるので、

まず、「サイズ」ですがカスタムを選択。

次に、先に「縦横比を固定」のチェックがデフォルトではついているのでこのチェックを外します。

(縦横比が少しズレますがそこは無視だーー)

 

次に、幅を「1200」、高さ「630」に変更しまっす。

入力が終わったら、「OK」を選択。

 

スクリーンショット 2016-04-19 23.43.11

 

これで完全に終了です!!!!

お疲れ様でした!!!

 

このサイズを変更した画像をブログのアイキャッチ画像として使用してください!

 

まとめ

 

いかがでしたでしょうか?今回はきっちり説明したので長く、大変に感じたかもしれませんが、実際に一回やってみたら次からは5分ぐらいで作成できると思います。

 

・・・・

 

最後にお詫びです。

 

当初、秒速でアイキャッチ画像が作れるとお話しましたが、実際は約5分の誤りでした。

 

この度は虚偽があったことを心よりお詫びいたします。

(笑って許してください・・笑)

スポンサーリンク

参考になりましたら、「ツイート」や「シェア」お願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

IT企業でメディア運営を行いながら個人でもWEBデザインやネットビジネス、映像など色んなことを勉強中!(特に海外のマーケティング情報が大好物)このブログでは主に学んだことを中心に、個人や小規模ビジネスを対象にしたコンテンツマーケティングに関する情報を中心に書いています!