こんにちは。
前回記事でバナープラスv2導入のメリットをお伝えしました。
本当に気に入っているのでベタ褒めしてしまいましたが、バナープラスv2唯一の欠点「デフォルト以外の画像は透過しないと綺麗な画像が作れない」という点を解消する必要がありました。
本記事では、画像を透過してバナープラスv2でキャプションを作成する方法を図解します。
目次
先ずは画像透過方法を調べてみる
実は、以前無料ツールを使って画像透過をやってみたことがあるんですが挫折した経験があり、慎重に調べたところあっさり見つけました！
何度かブログを拝見したことのあるゆうそうとの兎本さんが、透過pngを簡単に作れるフリーソフトを紹介されていました。
兎本さん、本当に有難うございます^^
【注記】「ゆうそうと」とは、兎本さんの会社の屋号でIT関連ビジネスを行いながら地域（八王子）に根差した活動にも取り組まれています。
WordPressや今回の無料ツールの紹介、自分の強みを活かした地域貢献の方法等参考になる記事が多数あります。是非他の記事もチェックしてみて下さい。
透過pngを簡単に作れるフリーソフト 『手軽に透明png』は便利でした
実践編その１：事前準備
良質な情報をGET出来たので、さっそく実践タイムに突入します。
1-①：「手軽に透明png」をインストール
上記兎本さんの記事を参考に、手軽に透明pngをインストールします。特に面倒な操作もなく、速攻でダウンロード出来ます。
1-②：透過したい画像の準備と下処理
透過したい画像を準備しましょう。
画像の解像度ですが、結論から言えば日常的に使うアイキャッチや記事中の画像なら解像度低めを選択。
対して特に気合を入れたいキャプション（例えばサイトのヘッダー等）を作るなら、素材は迷わず高解像度の画像を使いましょう。
理由は下表にまとめました。
| 低解像度 | 高解像度 | |
|---|---|---|
| 作業進捗の確認 | 〇常に全体を見ながら作業出来るため、確認が容易 | ×表示が大きすぎるので、常に原画を見比べる必要がある |
| 仕上げ作業 | ×拡大すると画質が劣化するため作業しづらい | 〇拡大しても画質が劣化しないので作業しやすい |
| 仕上がり | △画像サイズによっては粗さが目立つ | 〇細かい修正が可能なので高品質 |
| 作業時間 | 〇短時間で作業完了 | ×場合によっては数時間コース |
| おススメ | アイキャッチ、記事中の画像、小~中サイズのバナー | ヘッダー、その他高画質のキャプションを使用したいとき |
また、作業時間短縮のために事前にペイント等を使って要らない余白を切り抜いておきましょう。
元がどんなに大きいサイズのファイルを使用しても、バナープラスv2で作成したキャプション（アイキャッチとバナー各種）のサイズを見ると今のところ出来上がりは200KBから400KB程度です。
品質重視で重たい画像を使ってキャプションを作ったら、サイトのレスポンスが悪化した…とならないのも良い点ですね^^
実践編その２：画像透過の難易度と画像選びのポイント
画像の背景を透過する際の難易度は、私の経験上以下の通りとなります。
難易度低：イラスト
難易度中：写真（透過したい色と残したい色が違うもの）
難易度高：写真（透過したい色と残したい色が同じ）
理由は、大体の場合透過したい色は白になると思います。が、写真の場合光の反射（白ですよね）が少なからず発生することと、モデルさんが白い服を着ている場合が多いので、手間が掛かるんですね。
対してイラストの場合は光の反射を描いているものが少ないのと、背景も含めカラフルなものが多いので結構楽に透過出来るケースが多いです。
ですので、余程気合を入れて作らなければならない場合以外は、イラストまたは不要個所と必要個所の色が違う写真を中心に透過した方が良いと思います。
あと、ロングヘアはかなり手間です。パーマかけてる方とか、ストレートヘアでも風になびく写真なんかだと透過に数時間かかる場合もあります。
髪の毛をまとめているモデルさんか、セミロングまでのストレートヘアのモデルさんを選んだ方が作業的には楽です。
実践編その３：難易度中の透過（背景と人物の色が異なる写真）
手軽に透明pngもバナープラスv2同様、4つのモード選択と、透明度の設定、誤差許容度の組み合わせで直感的に透過が出来ます。
基本的な作業手順は以下の通りです。
①塗りつぶしモードで大半を透過する
②色選択モードで未だ透過されていない個所を透過する
③消しゴムモードで細かい箇所を透過する
④バナープラス上で出来上がりを確認する
⑤（必要に応じ）フィニッシュボタンを押して透過しきれない個所を半透明化する
注意点ですが、塗りつぶしモードと色選択モードではクリックした箇所と同じ色だと判定した箇所を全て透過してしまうことです。
つまり、透過したい色と同じ色がある場合、透過したくない部分まで透過される場合があるということです。
例えば、この写真を見て下さい。モデルさんが、スーツの下に背景と同じ白い服を着ていますよね。
塗りつぶしモードで大半が透過された後に、左腕の隙間に残っている白い背景を色選択モードで透過しようとすると…何と服まで透過されてしまいました。
背景が白の場合、歯や服、アクセサリー等、同じような色のパーツが透過されてしまう場合があるので、都度確認しながら作業を行います。
透過したくない場所まで透過されてしまったら、元に戻してから消しゴムモードや四角形モードを使って透過したい場所だけを透過していきます。
大変長らくお待たせしました。それではさっそくこの画像を透過してみます。
3-①：塗りつぶしモードで大半を透過する
先ずは塗りつぶしモードで、背景をクリック
はい、クリック1発でここまで透過出来ました^^
残る右腕側もクリックしてみて、透過出来れば良し。出来なければ色選択モードにチェンジします。
3-②：色選択モードでさらに透過する
次に、残りの部分を色選択モードで透過してみます。
残った背景をポチポチ…先程紹介した事例のように、余計なところまで透過されていないか確認しながら作業を行います。
3-③：残りの背景を消しゴムモードで透過する
画像を拡大して、背景と写真の境目をまずは消す。
あとは、残った個所を全て消しゴムで透過します。
ざっと透過出来たら、フィニッシュボタンを押す前にバナープラスで画像を確認します。
3-④：バナープラス上で画像を確認する
この状態で画像を一旦保存して手軽に透明pngを閉じ、バナープラスv2を開きます。
今回の画像の場合、透過したい色は白。なので一番白が目立つ黒のキャンバスに画像を表示してみます。
画像が大きく表示されるようにサイズはレクタングル大（幅336×高さ280）をチョイス。確認してみましょう。
はい、ちょっと右腕が明るくなっていますが、全体的には綺麗に透過出来ていますよね。自分で納得出来るなら、これで透過作業は終了です。
ちなみに、当ブログのアイキャッチサイズ（幅600×高さ410）で画像をどアップにしてみると…
これも殆ど変わらない出来。広告用なら画像はもっと小さくなるので、このままでも充分いけます。
また、キャンバスや背景画像を黒ではなく明るめの色に変えれば、この程度の透過漏れならほとんど目につかなくなります。
例えば、こんな感じですね。
全く目立たなくなりました^^
実践編その４：バナー作成例
手軽に透過画像が作れるので、何パターンか即興でバナー広告を作ってみました。
コピーやオファーが超適当ですいません…さすがに、一気に何枚も透過したら疲れてきたので(笑)
因みに、画像さえ手に入ってしまえばこれらのバナー作成にかかった時間は各々10分から15分程度です。テンプレートやフォントのパターンを覚えてしまえばもっと短縮出来ると思います。
まとめ
いかがでしたか？
手軽に透明pngを使えば、キャンバスや背景画像に溶け込む、自然な画像をまさに手軽に作ることが出来ますよね！
慣れるまでは消しゴムモードでの仕上げに手間取るかもしれませんが、慣れてしまえば簡単なものなら1枚当たり20分前後で透過出来ます。
（繰り返しになりますが、ロングヘアとパーマは要注意です）
バナープラスv2と組み合わせれば、本記事でお伝えした通り多少粗くても結構綺麗に仕上がりますよ♫
それでは。
【関連記事】
