飾り無しアイコンカラオケ字幕動画でパート分け用アイコンを付ける際、キャラクター画像をそのまま使うのも良いですが、「飾り枠」を付けたくなる時もあるのではないかと思います。

馴染みのグラフィックスソフトがある方はそれを使えばいいのですが、普段グラフィックスソフトを使っていない方はエクセルで飾り枠を作ることもできますので、その作り方を整理してまとめました。

About本記事は Microsoft 365 Excel バージョン 2204 で動作確認していますが、比較的最近のエクセルであればだいたい似たような感じで作成できるのではないかと思います。

縮小されている画像はクリックで拡大できます。

目次


飾り無し

エクセルによる飾り枠の話の前に、飾り枠無しの状況もまとめておきます。

飾り無しキャラクター画像を加工せず、飾り無しのまま使った場合は右のようになります。

ニコカラメーカー 2 の @Emoji タグを使う際、NoDecor オプションを付けます。

@Emoji=【飾り無し】,アイコン_飾り無し.png,,NoDecor,MarginRight=7

@Emoji タグの詳細についてはニコカラメーカー 2 のヘルプ「インライングラフィックス」をご覧ください。

飾り無し拡大これはこれで味がありますし、また、使い方によっては効果的です。一方で、背景動画の色合いによっては視認性が悪くなることがあります。

ブラー

ブラーキャラクター画像を加工せず、ニコカラメーカー 2 の機能で飾りを付けた場合は右のようになります。

ニコカラメーカー 2 の @Emoji タグを使う際、NoDecor オプションを付けません。

@Emoji=【ブラー】,アイコン_飾り無し.png,,MarginRight=7

ブラー拡大キャラクター画像を加工する必要が無いため、手軽に使えます。一方で、飾りは字幕フォントと同じものを使うことになるため、字幕フォントの飾りに引きづられます。

凸枠

凸枠アイコンここからが本記事の本題です。

まず、少し立体的に盛り上がっているような飾り枠をエクセルで付けるやり方です。

外枠

凸枠1盛り上がる枠を作成するには、まず、エクセルの[挿入 → 図形 → 四角形]にある「四角形:角を丸くする」で角丸四角形を作成します。

作成時、必ず「Shift キーを押しながら」ドラッグして作成することにより、縦と横のサイズを同じ(正方形)にします。

ある程度大きめ(ニコカラメーカー 2 のフォントサイズ指定よりも大きめ)のほうが最終的にきれいになります。筆者環境では、エクセルシート 10 行くらいのサイズにすると、最終的なアイコンサイズが 200 ピクセル程度になりました。

凸枠2作成後にリサイズする場合は、右下のリサイズポイントで縦と横を同時にリサイズし、必ず「Shift キーを押しながら」リサイズすることにより、縦と横のサイズを同じにします。

凸枠3作成した角丸四角形を右クリックして表示されるメニューから「図形の書式設定」を選ぶと、右側で設定ができるようになります。

凸枠4[図形の書式設定 → 図形のオプション → 塗りつぶしと線]で、塗りつぶしの色を指定します。今回はピンクにしてみました。

線は「線なし」にします。

凸枠5[図形の書式設定 → 図形のオプション → 効果]で、面取りを指定します。「丸」がシンプルで使いやすいと思います。

幅と高さは枠のサイズに合わせますが、枠を 10 行くらいで作成している場合、10 pt 程度で良いかと思います。

背景枠

次に、背景枠を作成します。この作業は、キャラクター画像が透過 PNG になっていて背景色が付いていない場合のみ行います。キャラクター画像に背景色が付いている場合は不要です。

凸枠6[挿入 → 図形 → 四角形]にある「四角形:角を丸くする」で角丸四角形を作成します。今回も Shift キーで正方形にします。

外枠よりも一回り小さい枠にします。

位置合わせがやりづらい場合は、エクセル右下の拡大率をアップさせるとやりやすくなります。また、細かな位置調整はマウスよりもカーソルキーのほうがやりやすいです。

[図形の書式設定 → 図形のオプション → 塗りつぶしと線]で、塗りつぶしの色を指定します。白が使いやすいかと思います。

線は「線なし」にします。

キャラクター枠

凸枠7最後に、キャラクター枠を作成します。

[挿入 → 図形 → 四角形]にある「四角形:角を丸くする」で角丸四角形を作成します。今回も Shift キーで正方形にします。

[図形の書式設定 → 図形のオプション → 塗りつぶしと線]で塗りつぶしを「図またはテクスチャ」にして、画像ソースの「挿入する」ボタンをクリックすると、ダイアログが表示されます。「ファイルから」を選び、キャラクター画像を指定すると、角丸四角形がキャラクター画像になります。

凸枠8キャラクター画像の位置やサイズを調整して、良い感じになるようにします。サイズ調整時は、必ず右下のリサイズポイントで「Shift キーを押しながら」リサイズし、正方形をキープします。

個人的には、頭の上に少し余白があるほうが見やすいかなと思います。

画像出力

ここまでできたら、いったんエクセルを(通常の xlsx 形式で)保存します。

凸枠9その後、[ファイル → 名前を付けて保存]で形式を「Web ページ (*.htm, *.html)」にして保存します(単一ファイル Web ページではないので注意してください)。

凸枠10例えば icon.htm というファイル名で保存すると、そのファイルを保存した場所に「icon.files」というフォルダーが作成され、「icon.files」フォルダーの中に複数の画像ファイルが作成されます。

通常は、最も番号の大きい画像ファイル(例:image004.png)が凸枠アイコンになっているかと思います。

凸枠そのアイコンファイルを歌詞ファイルと同じフォルダーにコピーし、ニコカラメーカー 2 で使います。

画像自体に飾り枠が付いているので、@Emoji タグには NoDecor オプションを付け、ニコカラメーカー 2 による飾りは付けないようにします。

また、MarginRight オプションでアイコンと歌詞の間に隙間を多少空けておくと、字幕が読みやすくなると思います。

@Emoji=【凸枠】,アイコン_凸枠.png,,NoDecor,MarginRight=7

凸枠拡大立体感があり視認性も良いアイコンになったのではないかと思います。

半透明ダブル枠

半透明ダブル枠アイコン半透明の枠を 2 重にした枠をエクセルで作るやり方です。

背景枠

最初に、背景枠を作成します。凸枠の時と同様、この作業は、キャラクター画像が透過 PNG になっていて背景色が付いていない場合のみ行います。キャラクター画像に背景色が付いている場合は不要です。

半透明ダブル枠1[挿入 → 図形 → 四角形]にある「四角形」で四角形を作成します(角丸ではなく通常の四角形です)。今回も Shift キーで正方形にします。

[図形の書式設定 → 図形のオプション → 塗りつぶしと線]で、塗りつぶしの色を指定します。今回はエンジにしてみました。

線は「線なし」にします。

キャラクター枠

背景枠とキャラクター枠はぴったり同じ大きさにしたいので、背景枠をコピー&貼り付けして、新しく同じ大きさの正方形を作成します。

半透明ダブル枠2[図形の書式設定 → 図形のオプション → 塗りつぶしと線]で塗りつぶしを「図またはテクスチャ」にして、キャラクター画像を指定します(凸枠の時とやり方は同じです)。

背景枠とキャラクター枠がぴったり重なるように位置を調整します。

半透明外枠

半透明ダブル枠3[挿入 → 図形 → 四角形]にある「四角形」で四角形を作成します(角丸ではなく通常の四角形です)。今回も Shift キーで正方形にします。

[図形の書式設定 → 図形のオプション → 塗りつぶしと線]で、塗りつぶしを「なし」にします。

線を「単色」の「黒」にして、透明度を「50%」にします。

線の幅は適宜調整ですが、背景枠をエクセル 10 行分くらいで作成している場合、「10 pt」程度で良いかと思います。

半透明内枠

半透明ダブル枠4半透明外枠と同様にして、半透明内枠も作成します。

半透明内枠は、半透明外枠よりも 1 周り小さくします。

また、線の色は「白」、線の幅は外枠の半分「5 pt」にします。

画像出力

凸枠の時と同様にして PNG 画像を出力します。

背景枠・キャラクター枠・半透明外枠がぴったり重なっていれば PNG 画像は正方形になりますが、微妙にずれていると正方形の画像になりません。多少長方形になるのを許容するのも 1 つの手ですし、気になるようであれば、ペイントなどで正方形に切り取って保存し直しても良いでしょう。

半透明ダブル枠凸枠の時と同様、ニコカラメーカー 2 で使用する際は NoDecor オプションを付けます。

@Emoji=【半透明ダブル枠】,アイコン_半透明ダブル枠.png,,NoDecor,MarginRight=7

半透明ダブル枠拡大枠が半透明なので、キャラクターが枠と被っているところが逆に面白いのではないかと思います。