Bannerifyのトラブルシューティング

Bannerifyのエクスポート、表示の問題、プラットフォームの制約に関するトラブルシューティングガイドです。

親フレームの回転によるレイヤー位置のずれ ​

この問題は通常、コンテンツを追加する前に親フレームが0度以外（例：「-90」や「180」）に回転されていた場合に起こり、子レイヤーの位置がずれてしまいます。解決するには、同じサイズで回転していないフレームを新しく作り、元の回転したフレームから子レイヤーをコピーするかドラッグして、回転を設定していない新しいフレームに移してください。

テキストレイヤーのバウンディングボックス（切れてしまう） ​

テキストレイヤーの位置がずれたり切れたりするもう1つの原因として、テキストボックスのサイズがテキスト自体のサイズと合っていないことが考えられます。たとえば、テキストが複数行あるのに「バウンディングボックス」の高さがとても低いと、位置がずれて表示されてしまいます。解決するには、バウンディングボックスの高さをテキストの内容のサイズに合わせて調整してください。

Safariでシャドウ付きのSVGがぼやける ​

Safariには、ドロップシャドウを含むSVGに関する既知の問題があり、ベクターがピクセルにラスタライズされるため、シャープさが失われて見えます。

上記のスレッドで提案されている方法の1つは、シャドウのレイヤーとボタン・コンテンツのレイヤーを2つの別々のレイヤーに分けることです。こうすると、上にあるシャドウなしのボタンレイヤーはSafariでもシャープなSVGとして表示され、下のレイヤーは背後にシャドウを付ける役割だけを担います。

または、プラグインでそのボタン（CTA）のレイヤーだけ画像形式を「PNG」に上書きし、さらにそのレイヤーのスケール設定を@2x（Retina）に上書きする方法もあります。こうするとCTAが2xのPNG画像としてエクスポートされるため、シャープな見た目を保ちつつ、SafariでのSVGシャドウの問題を避けられます。

GIFの色やグラデーションが少しざらつく ​

GIFは通常のJPG・PNG画像とは異なり、最大256色までしか含められません。細部の多い画像や色の変化が大きいグラデーションを使っている場合、GIF形式のこの制限により、GIFの元になった画像ほどシャープにならなかったり、色の再現性が落ちたりするのは想定内の挙動です。

GIFで透明部分が表示されない ​

GIFファイル形式がサポートするのは不透明度0%か100%のどちらかだけで、その中間はありません。そのため、完全に不透明で見える要素の背後を完全に透明な背景にしたアニメーションGIFは作れます。つまり、各レイヤーは完全に透明か、そうでないかのどちらかになります。不透明度が50%未満のレイヤーは透明に、50%を超えるレイヤーは不透明になります。

Figmaで透明なGIFを指定する。デフォルトでは、GIFのエクスポートに透明部分は含まれません。GIFに透明部分が必要な場合は、Figmaのレイヤー名のどこかにtransparentという単語を追加してください。

.mp4動画ファイルのホスティング先 ​

Bannerifyに動画を追加する場合、プラグインは.mp4ファイルに直接リンクしているURLを読み込みます。そのため残念ながら、Vimeo・YouTubeのURLや、Webのプレーヤー形式のリンクは使えません。動画のホスティングにはBackblaze B2がおすすめです。無料アカウントに登録すると10gbの無料ストレージが使え、公開ストレージバケットを作成すれば、アップロードした動画ファイルのリンクをコピー＆ペーストして、その.mp4へのリンクをBannerifyに入力できます。もう1つの人気のファイルホスティングサービスはDropboxで、.mp4ファイルをアップロードし、そのリンクをBannerifyプラグインで使えます。リンクが（DropboxのWebサイトのプレーヤーではなく）動画ファイルを直接指すように、Bannerifyが?dl=0を?raw=1に自動で変更します。

エクスポートした画像の周りに細い白線が出る ​

画像によっては、縁にうっすらと細い白線が入ることがあります。レイヤーが整数のピクセル値に配置されていない場合（例：Y: 156.76やX: 56.3）、Figmaはこのような処理を行い、このサブピクセルの線が自動的にエクスポートに含まれてしまいます。Bannerifyは、Figma Plugin APIでサイズ変更が可能なレイヤーについてはこれらの値を自動で丸めようとしますが、（必要に応じて）手動で解決するには、すべてのレイヤーの位置が整数のピクセル値になっていることを確認してください。

高解像度のバナーがMP4にエクスポートされない ​

プラグインから高解像度のバナーをMP4動画にエクスポートすると、Figmaが2gbのメモリ上限に達し、動画ファイルを.mp4に直接レンダリングできないことがあります。回避するには、BannerifyからバナーをWebM形式でエクスポートし、エクスポートした.webm動画ファイルを、Figmaの外で動画変換ツールのHandbrakeを使って.mp4に変換してください。

Google Adsで検証が通らない ​

HTMLバナーがアップロードできない、またはGoogleの検証が通らない一般的な理由がいくつかあります。多くの場合、バナーのファイルサイズが大きすぎるか、バナーのサイズが「標準」サイズに正確に合っていません。アップロード前に、次のサービスでGoogle AdsやDoubleClick向けにバナーを検証できます。

エクスポートしたHTMLバナーがブラウザでアニメーション・再生されない ​

エクスポートしたHTMLバナーが止まって見える、アニメーションしない、またはBannerifyのプレビューでは動くのにエクスポートしたHTMLファイルをブラウザで開くと動かない場合は、広告ブロッカーやプライバシー系のブラウザ拡張機能が有効になっていないか確認してください。拡張機能によっては、ローカルのHTMLファイルや広告関連のHTMLファイルが正しく動作しないようブロックすることがあります。ローカルのプレビューファイルに対して拡張機能を一時的に無効にするか、別のブラウザでエクスポートしたファイルを開くか、普段使っているプレビュー・ステージング環境にバナーをアップロードしてテストしてください。

WindowsのFigmaデスクトップアプリでファイルの拡張子が空になる ​

Figmaデスクトップアプリ（Windowsのみ）には既知の問題があり、Figmaからの通常のファイルエクスポートでも同じことが起こります。ファイルを保存する際に「all files」というラベルが表示されることがあります。これを無視して「Save」をクリックすれば、正しい拡張子でファイルが保存され、パソコンにダウンロードされた後も通常どおり開けるはずです。それでも拡張子が空のまま保存された場合は、ファイル名を変更して正しい拡張子を手動で付け加えてください。

GoogleのHTMLバリデーターでドロップシャドウ付きSVG要素がPNGに変換される（モバイルからアップロードした場合） ​

理由は不明ですが、モバイルデバイス（例：iPhone）のブラウザからバナーの.zipをDCM Validatorにアップロードすると、ドロップシャドウを含むSVG要素がバリデーターによって自動的にPNGに変換され、プレビューでよりピクセル化して見えます。

エクスポートした画像が粗くなる ​

Figmaの画像素材がまだ段階的に読み込まれている途中でバナーをエクスポートすると、エクスポート前にFigmaファイル内で画像が完全に読み込まれていないため、ピクセル化した状態でエクスポートされることがあります。解決するには、Bannerifyプラグインでバナーをエクスポートする前に、Figmaファイル内ですべての画像が100%読み込まれ、シャープに表示されていることを確認してください。この問題への対策として、TinyImageの「Downsizer」機能を使って画像塗りをレイヤーのサイズに合わせて縮小する方法もあります。ファイルサイズが小さくなり、Figmaファイルでの読み込みがずっと速くなります。

レイヤーにaria-hidden='true'属性を追加する ​

アクセシビリティ上の理由でaria-hidden属性を含める必要がある場合は、Figmaのレイヤー名にaria-hiddenを含めることで、レイヤーごとに設定できます。バナーをHTMLにエクスポートすると、そのHTML要素にaria-hidden="true"が自動で追加されます。

中国ではVPNが必要な場合がある ​

中国からご利用の場合、アカウントサーバーが「グレート・ファイアウォール」によってブロックされている可能性があります。有効なキーを使っているのにアクティベーションエラーが表示される場合は、VPNを使うと解決できることがほとんどです。

「An error occurred while loading the plugin environment」と表示される ​

Figmaデスクトップアプリで、Figmaのデバッグ設定Use Developer VMが誤って有効になっていると、このエラーが発生することがあります。オフになっていることを確認するには、Figmaキャンバス上の任意の場所で右クリックし、Plugins、続いてDevelopmentにカーソルを合わせ、Use Developer VMのチェックが外れていることを確認します。チェックが外れた（横にチェックマークが付いていない）状態でFigmaプラグインを再実行すれば、正常に動作するはずです。