【Adobe XD】初心者向きのサムネイルの作り方【Youtube・ブログ】

  • PR
  • ブログ運営
【Adobe XD】初心者向きのサムネイルの作り方【Youtube・ブログ】

この記事では、デザインツールの『Adobe XD』を使った『サムネイル画像』の作り方を解説してゆきます。

Adobe XDは操作が簡単で初心者にも扱いやすいため、慣れれば10分程度で高品質なサムネイルを作成することも可能ですよ。
この記事のサムネイル画像もAdobe XDで作成を行いました!

▼この記事を書いたひと

フリーランスみやしも(@miyashimo_blog)です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

Adobe XDでサムネイルの作り方を解説する

Adobe XDで作成するサムネイルの実例を紹介する
Adobe XDで作成したサムネイル画像

ブログやYoutube動画などのコンテンツ制作にかかすことが出来ない『サムネイル(アイキャッチ)』の画像。



今回はそんなサムネイルの作り方について、無料で使えるデザインツールの『Adobe XD』というソフトを例に紹介してゆきます。

サムネイルの重要性について

ブログやYoutube動画におけるサムネイルの役割は以下の様になります。



▼サムネイルの役割

  • 短文で記事の内容を分かりやすく伝える
  • 視覚的な印象に訴えて興味を持ってもらう



この上で、良質なサムネイルは、ブログやYoutube動画において次のような効果が期待できます。



▼サムネイルの効果

  • 【Youtube動画 】 動画の再生数・チャンネル登録数の向上
  • 【ブログ記事】記事のアクセス数・滞在時間の向上
この様にサムネイルは、ユーザーに興味を持ってもらい内容を見てもらう機会を得るという意味でブログ・Youtube動画における重要な役割を果たします。
僕もブログ運用においてはサムネイルの作成に力をいれています!

Adobe XD について

Adobe XD について

『Adobe XD(アドビエックスディー)』とはAdobe社が提供しているデザインツールです。

Adobe XDをおススメする理由

サムネイルの作成にAdobe XDがおススメな理由は以下のとおり。



▼Adobe XDをおススメする理由

  • 無料から利用ができる(※Adobe IDの作成が必要)
  • 操作が簡単でPCのスペックが低くても利用できる
  • サムネイル作成に必要な機能が十分にそろっている


多くの方に利用がしやす条件が揃っているため、とくに初心者の方にとっておススメなデザインツールと言えます。
パワポみたいな感覚で使えるので、思った以上にかんたんですよ!

Adobe XDについてより詳しく知りたい方には、次の記事が参考になります。

Adobe XDを無料で利用する方法

公式サイトの『スタータープラン(無料)』を選択のうえ、パソコンにインストールすれば、無料でAdobe XDを利用できます。

Adobe XDのスタータープラン
Adobe XDのスタータープラン

▼公式サイト

Adobe XD



Adobe XDの基本的な使い方については次の記事が参考となります。

サムネイルを作成する手順

ここからはAdobe XDを使用したサムネイル画像の作成手順について解説を行います。

この記事で使用している上記の画像を作成します。サムネイルのデザインは、あくまで一例としてご参考ください。また以降は、Adobe XDがインストールされている前提での解説内容となります。

1.アートボードのサイズを設定する

まずは作成するサムネイルのサイズに合わせて、アートボードのサイズを設定します。

ここで設定したアートボードのサイズがそのままサムネイル画像のサイズとなります。

ブログやYoutube動画の場合は一般的には次のサイズが推奨されていますので、目的に合わせて設定してゆきましょう。

ブログのサムネイル画像

横幅1200px × 縦幅630px
※利用するWEBサービスやWordpressテーマなどによっては上記に限りません

Youtubeのサムネイル画像

横幅1280px × 縦幅720px
※Youtube公式のヘルプに基づきます
サムネイル作成の準備はこれでOKです!

2.サムネイルの背景を作成する

つづけて画像ファイルを使って、サムネイルの背景を作成してゆきます。

画像ファイルを配置する

写真の画像ファイルをドラッグ&ドロップするとXD上に配置できますので、このうえでサイズと位置の調整を行います。

画像ファイルのサイズと位置を調整した状態
アートボードの上下にはみ出した部分は、自動でトリミングされます。

ちなみに今回のサムネイルに使用した写真は、無料素材サイトの『 O-DAN(オーダン) 』で取得しました。



O-DAN (オーダン)

背景の調整をおこなう

ここでは、四角い図形をアートボード上にかぶせて塗りつぶしと不透明度を設定します。(※今回は白色で塗りつぶし、不透明度を65%としました)

図形を配置して塗りつぶし・不透明度を設定した状態
こうすると背景がうっすら白がかり、この上に乗せたアイコンや文字がくっきり見やすくなる効果が得られます。

3.アイコン・テキストを作成する

アイコンとテキストを作成してゆきます。

アイコンを配置する

アイコンの素材には、今回はAdobeStockからダウンロードしたベクター素材を使用します。

AdobeStockの無料画像
AdobeStockのベクター素材
▼ベクター素材について
拡張子が『.ai』となっている本来はIllustrator用のファイルですが、Adobe XDでも開く事ができます。

取得したファイルをXDで開き、イラストのディスプレイのイラスト部分のみをコピーして、作業しているアートボード上に貼り付けます。

アイコンの配置が完了した状態

テキストを配置する

タイトルなどのテキスト部分は、XDのテキストツールを使用して作成してゆきます。

テキストの配置が終わった状態

4.全体の色の調整を行う

背景・アイコン・テキストなどの配置が終わったら、最後にサムネイル全体の色を調整してゆきます。



今回は、アイコンから色を抜き取り枠線や文字などに適用してゆく形で調整を行います。

全体の色の調整をした状態
そのほかレイアウトなどの位置調整も、このタイミングで行いましょう。
以上でサムネイルのデザイン作業はおわりです!

5.画像ファイルで保存する

最後に作成したアートボードの内容を、画像ファイルに書き出して保存しましょう。



やり方は、レイヤーパネルで『アートボードを右クック⇒選択した項目を書き出し』とすれば、そのアートボードの内容を書きだすことができます。

アートボードの内容を書きだす方法

そのほか、アートボードを選択した状態で以下のショートカットキーを使用することも出来ます。

【Windows】Ctrl+E
【Mac】Command + E

ファイルに書き出す際には、JPG形式を指定のうえ『書き出し』のボタンを押しましょう。

JPG形式を指定して『書き出し』をクリックしましょう

以上でサムネイルの書き出しの作業はおわりです。

実際に作成したサムネイル画像をブログに使うと次のようになります。
サムネイルを実際のブログ記事に使用した状態

この記事のまとめ

今回は無料で利用できるデザインツール『Adobe XD』を使用して、ブログやYoutube動画に使えるサムネイルの作り方を解説してきました。



ユーザーの興味を引いてコンテンツに触れてもらう機会を得るという意味で、サムネイルはブログ・Youtubeなどの運用において大きな意味を持ちます。



このうえでも、サムネイルの作成には初心者にも扱いやすいAdobe XDの利用がおススメです。

慣れれば10分ほどで、良質なサムネイルが作成できる様になりますよ!