仕事情報ページはこちら

透過ファイルって何?透過ファイルを使ったアイキャッチの作り方も解説!

イラスト

今回描かせていただく透過ファイルに関して
私はブログを書く傍ら、イラストを収益源として描いているのですが、
基本的な納品内容を今年に入ってから
・白背景のもの
・透過背景のもの
の2種類を必ず同時に納品しているため、この質問非常に多いです

非常に多い、ということは使い方を知らない方がたくさんいるということ!
透過してあるイラストはアイコンだけの使用用途に限らず色々便利なのでぜひ知って欲しい!
と思ってこの記事を記録として作成します。

透過ファイルってそもそも何?

透過ファイルは簡単にいえば背景が透明になっているアイコンのこと。
背景がない分、上記の参考画像のように白背景に比べ四角い枠ではなく、対象物(この場合は人物)のみが挿入されるので、他の画像と重ねる際に違和感が出にくくなります。

そもそもイラストを作成する際は
レイヤーという透明の板のようなものをいくつも重ねる形で描いていくのですが
基本的にjpg、または背景レイヤーがある状態で書き出しをすると、デフォルトで白背景のものが書き出されます。
背景レイヤーがない、または非表示の状態でなおかつ透過pngの形式で書きだすことで
背景が透明になる画像ができあがります。

レイヤーの概念についてはCLIP STUDIOさんがとてもわかりやすい記事をかいてらっしゃいました!
【デジタル】デジ絵の基本!レイヤー機能って何?【はじめて】


透過アイコンの使い方

今回代表的な使い方として、【アイキャッチ】の作り方で解説していきます。

今回作るのはこの記事のアイキャッチ。
使用するのは以下ファイルです。

今回アイキャッチを作るために基本無料で使用することのできる
Canva
・イラストソフト(MediBang Paint(以下メディバン))

の2種類のツールでの作成方法を説明していきます

Canvaを使う場合

Canvaはオンライン上で作成できる無料のデザインツールで
多くのブロガーさんがアイキャッチの作成のために使用しています。今回は背景となるフリー画像を用意しましたが、Canvaならすでに無料のフリー画像が多数用意してありますのでそちらを使用するのもよいでしょう。

①ホームにてサイドのフォルダーをクリック
②メイン画面に出てくるアップロードをクリック

③右上のアップロードボタンから用意した画像をアップロード
④メイン画面にアップロードした画像が表示されます(実はこの①~④の工程は⑦の画面でもできます

⑤サイドの「デザインを作成」をクリック
⑥自分のブログに合うアイキャッチサイズを設定し「新しいデザインを作成」をクリック

ブログのテーマやデザインによって合うアイキャッチサイズは異なるので
そこは各自自分のテーマの推奨サイズがないかを検索してみてください。
もし推奨サイズがない場合は横:縦が16:9、または2:1の比率になる画像サイズがオススメです


⑦上記のようが画面になるので、サイドのアップロードをクリック。
こちらからでも①~④の用意した画像のアップロードができます!

⑧ベースとなる画像をクリック
画像の大きさを調整できるのでマウスをつかって画像サイズに合うように調整していきます。

⑨ベースとなる画像の大きさ調整が終わったら重ねたい透過ファイルをクリック。
きちんと人物の周りは透過されているので違和感なく画像同士を合わせることができました。

⑩文字をいれるための枠をつくります。別に作らなくてもいいですがCanvaには無料の素材がたくさんあるのでせっかくなので。クリックするだけで画面配置してくれるので文字をいれるために大きさを調整します。
⑪格子模様のアイコンをクリックすると透明度の調整ができるのでフキダシ素材を少し透明にします。
そうすることで用意したベースの画像もほんのり見せることができ、馴染みがよくなります。

⑫最後にサイドのテキストから好きなテイストのテキストを選んで、記事に合うような文字をいれれば完成です。

完成品はこちら

所要時間は慣れれば約1~2分ほどです。

Canvaのメリットデメリット

Canvaはアップロードした画像はそのまま保存されつづけるので一度アップロードしてしまえば簡単に自分オリジナルのアイコンを使ったアイキャッチが簡単に作れてしまうのが魅力です。
また、他のユーザーが作成したテンプレートを使用できるのでセンスに自信がない人でも手軽に取り扱えます。
デメリットとしては少し使用している機器のスペックによっては動作が遅いことがあることぐらいかな、と個人的には思います。


イラストソフトを使う場合

メディバンは無料のイラストソフトです
基本的な操作は無料なのにこれ1つでできるので
イラストも描いてみたい!という人にはおすすめのツールです。

①「ファイル」→「新規作成」からアイキャッチサイズを入力します。

②「ファイル」→「画像をレイヤーとして開く」から使用するアイキャッチの背景を選択します

③「選択範囲」→「変形」で画像の大きさが変更できます。
四方の点を動かすと比率を保ったまま、上や横の点を動かすと縦長や横長にもできます。

④透過のキャラクターイラストを②と同様の手順で開き、③と同様大きさを調整していきます

⑤塗りつぶしツールを選択すると上部に選択画面が出てくるのでそこで「短形」(四角のこと)と丸めるにチェックをいれればドラッグするだけで図形を作成することができます。ほかにも六角形や丸なんかの図形も選択できます。

⑥⑤にて作成した吹き出し部分の不透明度を変更すれば自然に後ろの背景画像も見せられます

⑦最後にサイドバーにある「T」(テキスト)にて文字を挿入すれば完成です!

メディバンは無料のソフトながら商用可能なたくさんのフォントが入っているので、ロゴも自分で作りたいという方にもおすすめです。

イラストソフトを使うメリットデメリット

メディバンのようなイラストソフトの特徴として画像として書き出す際に品質を選択して書き出せるのはメリットとしてあげやすいです。

上記の画像は品質を100と80に設定して書き出したjpgファイルの比較です。
若干80の方が粗いのですがパッと見ではわからない程度かな、と思います。

パッと見ではわからない程度の品質ですが、サイズの部分を見ると
品質100の方は191KB
品質80の方は53.4KB

と品質を20落としただけで4分の1ほどの容量になるので
画像をたくさん使うからなるべく軽くしたい!という方には他の画像を軽くするにも有効です。

デメリットとしては初心者の人には扱いづらいということと
テンプレートもなく1からつくることになるので人によってはセンスが表れてしまう
というところかな、と思います。

透過ファイルを上手に使ってサイト運営を!

透過ファイルは上手に使えば様々な用途で個性を出せる最強のファイル形式です。

私の場合は仕事ページにて記載の利用規約、許可事項の範囲に透過ファイルの使用をある程度の範囲は認めていますが、イラストレーターさんによっては別の場所で使うなら追加料金、という場合もありますので
利用規約をしっかりと把握したうえで楽しくブログ運営していく参考になれば幸いです。