ブランドのロゴは SVG(Scalable Vector Graphics: スケーラブル ベクター グラフィックス)ファイルです。このファイルをドメインの公開ウェブサーバーにアップロードします。SVG はベクター画像のオープン標準です。
SVG ファイルの要件と推奨事項
BIMI ブランドのロゴの要件を満たすことで、ブランドのロゴがさまざまな解像度で確実に表示されるようになります。また、ロゴが確認済みでセキュリティ チェックに合格していることが保証されます。
受信者の受信トレイでメールの横にロゴが正しく表示されるには、SVG ファイルが以下の要件を満たしている必要があります。
- 形式: SVG Tiny Portable/Secure(SVG Tiny PS)。SVG の一種です。
baseProfile
属性:tiny-ps
version
属性:1.2
<title>
要素: 組織名を反映する必要があります。title の値に厳密な要件はありません。- 以下のものを含めないでください。
- 指定された XML 名前空間以外の外部リンクまたは外部参照
- スクリプト、アニメーション、その他のインタラクティブな要素
x=
属性またはy=
属性(<svg>
ルート要素内)
BIMI に対応するメール クライアントとの互換性確保のため、以下の SVG ファイル ガイドラインにも準拠することをおすすめします。ロゴの要件は以下のようになります。
- 画像は正方形とし、中央に配置する。
- 背景は無地にする。透明な背景は想定どおりに表示されないことがあります。
- 96x96 ピクセル以上。Gmail は、サイズが小さい SVG ファイルに対応していません。
- 小さなファイルサイズ。推奨は 32 KB 以下。
- ユーザー補助用の
<description>
(説明)要素を含める。
ステップ 1. ブランドのロゴの SVG ファイルを作成する
現在、BIMI のすべての要件を満たす SVG ファイル作成ツールはありません。BIMI 用の SVG ファイルは通常、テキスト エディタか専用のスクリプトを使用して手動で修正する必要があります。
詳しくは、BIMI SVG ファイルを作成するための推奨ツールについてのページをご覧ください。
Illustrator とテキスト エディタで BIMI 用の SVG ファイルを作成する
Adobe Illustrator で SVG ファイルを作成し、テキスト エディタで一部を変更することができます。SVG ファイルを作成する際には、SVG ファイルの要件と推奨事項を必ず守ってください。
- 加工元のベクター画像を Illustrator で開きます。
- ベクター画像に、ビットマップ、他のファイルへのリンク、テキスト、またはグループ化されたオブジェクトが含まれていないことを確認してください。テキストをオブジェクトとしてファイルに残すには、Illustrator のアウトライン作成機能を使います。
- [ファイル] > [別名で保存] の順に選択します。
- [別名で保存] ウィンドウで次の操作を行います。
- [名前] 欄にファイル名を入力します。mybrand-bimi.svg のように、小文字とダッシュのみを使用することをおすすめします。特殊文字は使用しないでください。
- [フォーマット] の横にある [SVG(svg)] を選択します。[SVG 圧縮(svgz)] は選択しないでください。
- [保存] をクリックします。
- [SVG オプション] ウィンドウで、次の操作を行います。
- [SVG プロファイル] の横にある [SVG Tiny 1.2] を選択します。
- [画像の場所] の横にある [Illustrator の編集機能を保持] を選択します。
- [OK] をクリックしてファイルの保存を完了します。
- テキスト エディタでファイルを開きます。次のような内容のファイルが開きます。ファイルの最初の部分を変更します。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 742.23 828.45" overflow="visible" xml:space="preserve">
<g id="design">
<g>
<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
overflow="visible" xml:space="<title>Solarmora Services</title>
<g id="design">
- このテキスト ファイルの 3 行目と 4 行目を変更します。
svg version
の値が1.2
であることを確認します。違っている場合は、1.2
に変更します。base Profile
の値をtiny-ps
に変更します。x
属性とy
属性を値ごと削除します。<title>
タグと値を、手順 8 のサンプルに示されているように追加します。追加する場所は、<svg
より後かつ<g>
より前である必要があります。
- 編集を終えたら、ファイルの最初の部分が次のようになっていることを確認します。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
overflow="visible" xml:space="<title>Solarmora Services</title>
<g id="design">
- 変更内容をテキスト ファイルに保存します。ファイルの拡張子は .svg です。
次に、この SVG ファイルをドメインの公開ウェブサーバーにアップロードします。
ステップ 2. SVG ファイルを公開ウェブサーバーにアップロードする
SVG ファイルを公開ウェブサーバーにアップロードします。
ウェブサーバーは、送信メールサーバーと同じドメインにある必要があります。これは、ドメイン プロバイダで BIMI TXT レコードを追加するの手順で BIMI を有効にするドメインです。
SVG ファイルの URL をコピーします。この URL は BIMI TXT レコードで使用します。
次のステップ
VMC(Verified Mark Certificate)を取得するか、ドメイン プロバイダに直接アクセスして BIMI TXT レコードを追加します。Gmail の受信トレイで BIMI ロゴが表示されるようにするには、送信者が VMC を取得している必要があります。
Google、Google Workspace、および関連するマークとロゴは、Google LLC の商標です。その他すべての企業名および商品名は、関連各社の商標または登録商標です。