アイキャッチ画像は看板！魅力的な画像をGoogleサービスで簡単作成

この記事を書こうと思ったのは、下の記事を読んで(^^)

たったの5分で作れる超簡単なブログのアイキャッチ画像の作り方
http://junichi-manga.com/5min-making-eyecatch/

おお～、確かにその通り！アイキャッチ画像は重要ですよね！！そして、簡単だっ！すごい（≧▽≦）と思ったんですが・・

「ん？でも、まてよ、Officeをみんながみんないつも持ってるわけじゃ、ないんじゃない？」とも^^;

実際、自分自身、ガッツリ（特に複雑な画像作成などの）仕事をする時はメモリもHDDも容量の大きなデスクトップで、ブログの更新やSNSはノートでという使い方をしており、

デスクトップにはOfficeをはじめとした容量多目なソフトを入れていますが、非力なノートには入れていません。

この非力さを補ってくれるのが、Googleが無料で提供している、Googleのクラウドサービス、Googleサービス。
Officeが入っていないノートで非常に便利に利用させてもらっています。

そこでここでは、Officeは持っていない、でも画像ソフトも何を選べば？という方の為に、Googleサービスの「図形描画」を使用した簡単なアイキャッチ画像の作り方を紹介します。

Googleサービスとは

Googleには、様々な高機能なクラウドサービスがあり、Googleのアカウントを持っている人なら誰でも無料で利用できます。

Google ChromeブラウザでGoogleアカウントにログインしている状態であれば、ブラウザ右上の アプリ ランチャー アイコンをクリック、

ドロップダウンで表示されるメニューの一番下、「さらにもっと」をクリック

Googleアカウントを持っている人が使える、たくさんのGoogleサービスの一覧ページが開きます。

以前から、たくさんのサービスがありましたが、また増えているような・・^^;

Gmailはもちろん、ドキュメント（Word）、スプレッドシート（エクセル）、スライド（パワーポイント）とそれらのファイルをストックしておいたり、共有が簡単にできるGoogleドライブはホントに便利ですね(^^)

その中のホーム＆オフィスの中に「図形描画」があります。

「図形描画」では、図形の描画や表の作成・編集が可能です。

こういった↓簡単な図形などはこれで作成していて、重宝しています(^^)

この機能を使ってアイキャッチ画像を作っていきます。

作る前に用意するもの

• 画像：
  できれば、記事の内容に関連する、きれいなもの。
  Facebookでシェアするつもりならば、推奨サイズは、1,200 X 630 px。
  最低でも600 X 315 pxが必要です。
• Googleアカウント
• インターネット接続・・・つながっていないと使用できません^^;

画像の編集方法

まず、Googleサービスの「図形描画」を開きます。

Google「図形描画」の画面がブラウザで表示されます。

画像の追加

使いたい画像を図形描画内の描画領域に追加します。
パソコンのフォルダ内から直接ドラッグアンドドロップで追加できます。

画像の移動

描画領域内でも画像をドラッグで移動させることができます。
赤いガイドラインを目安に配置を決めます。

画像の修正オプション

画像を白黒にする、透過や明暗、コントラストを変更するといった、簡単な修正も可能です。

画像が選択された（画像の周りに青いラインがついている）状態で

ツールバーからその他▼をクリック

画像オプションをクリックします。

画像オプションが画面右側に表示されます。
このオプション内で、画像の色調を変更したり、透過や明暗、コントラストを修正できます。

アイキャッチ画像を更に”キャッチー”にするコピーを画像に入れる

テキストボックスの挿入

画像の上に文字を入れるには、テキストボックスを使います。
ツールバーのテキストボックスのボタンをクリックします。

マウスポインターが十に変わるので、ドラッグしてテキストボックスを作成します。

サイズを変更したいときには、四隅と上下左右の中央にあるハンドル■をドラッグします。

テキストボックスは、Officeと同様に文字色はもちろん、透過も含めた背景色、枠の色などの色の設定、文字を大きくする、中央に配置する、などの設定ができます。

テキストボックスの背景色の設定

背景色はツールバーの塗りのボタンをクリックして表示される色の一覧：カラーパレットから選ぶことができます。

テキストボックスの背景色を透過させる

さらに、その背景色を透過させるには、カラーパレット内のカスタムをクリックし、表示されるカスタム画面の右側にある、透明度の設定メモリをドラッグして下げることによって設定できます。

テキストボックスの文字列の設定

文字列の設定するには、ツールバーのその他▼をクリックし、その他のツールバーを表示すると、設定が簡単です。
例えば、文字色を設定するには、その他のツールバーから、文字色のボタンA▼をクリック、カラーパレットから色をクリックして選択します。

テキストボックスを斜めにする

テキストボックスに配色、文字も映える色に変更・・したけれど、いまいちインパクトに欠ける、という時、テキストボックスを少し斜めにすると、目立たせることができます。（ま、好みもありますが^^;）

テキストボックスを斜めにするには、テキストボックスの上に飛び出ている回転ハンドルをドラッグすればOKです。

PCに作成した画像を保存する

では、作成した画像を一回PCダウンロードしましょう。
まず、ダウンロード→アップロード→画像を記事に載せる、という手順の中でもわかりやすいように名前を変更しておきます。

左上の「無題図形描画」をクリックして、表示されるウィンドウに名前を入れて変更します。

メニューのファイルから、形式を指定してダウンロードをクリック、JPEG画像をクリックします。

ダウンロードがはじまり、ブラウザの下部に下の様にダウンロード履歴が表示されます。

この履歴の▼部分をクリックすると、メニューが表示されるので、フォルダーを開くをクリックします。

ダウンロードフォルダが開き、画像があることが確認できます。

トリミング

この画像をアイキャッチ画像にするには、周りの余白をトリミングする必要があります。

トリミングするには、一番最初のJunichiさんのブログのように、ペイントで行う、という方法もありますが、WordPressの編集機能を利用する、という方法もあります。

WordPressの編集機能を利用して画像をトリミングする

まず、WordPressにアイキャッチ画像をアップロードします。

ダッシュボードのメニューから、メディア→新規追加で、新規追加画面を表示させ、画像をアップロードします。

アップロードが終了すると、アップロード領域の下にアップロードされた履歴が表示され、その履歴の右側に、編集と表示されます。
この編集をクリックすると、編集画面が開かれますので、更に画像を編集をクリックします。
　

画像を編集 画面で、画像をドラッグすると、選択範囲が表示されます。

範囲内の□（ハンドル）をドラッグして調整し、トリミングボタンをクリックします。

トリミングがOKなら、保存ボタンをクリックします。

これでWordPressでの画像のトリミングが完了です。

右側に更新という青いボタンがありますので、クリックしておきましょう。

後は、アイキャッチ画像に指定するだけです！

ではでは、今日はこのへんで～(^^)

 

• 
• 
•