EcAuthDocs

ロゴ・ブランド資産

EcAuth のロゴマークと、EC-CUBE オーナーズストア提出用の商品紹介画像(アイコン・バナー)、および ec-auth.io の OGP 画像の正典。派生プラグイン(EC-CUBE 2系 / 4.1系 / 4.4系 等)のリリース時は、ここのマスター SVG から派生版を作成する。

概要

ec-auth.io で使用している 🔐 絵文字を置き換える正式なロゴマークとして、ブランドカラーのグラデーションによる南京錠マークを定義する。すべてのアセットは html/assets/logo/ 配下にあり、SVG がマスター(ソース・オブ・トゥルース)、PNG は SVG からの生成物。PNG を直接編集しない。

準拠ガイドライン

アイコン・バナーは EC-CUBE の 商品紹介画像 作成ガイドライン(GL01 Ver.1.01) に準拠する。要件の要約は後述。

プレビュー

アセットプレビュー備考
ロゴマーク(マスター) EcAuth ロゴマーク 背景透過 SVG。白背景・淡色背景用のポジ版(青)。ブルー背景上では白反転版を使う(アイコン・バナー内に埋め込み済み)。
商品紹介アイコン EcAuth アイコン 50x50 原寸 50×50px。マークは各辺 5px の余白内(40×40px)。
商品紹介バナー EcAuth バナー 338x252 原寸 338×252px。サービス名「EcAuth」を明記。コンテンツは各辺 15px の余白内(308×222px)。
OGP 画像 EcAuth OGP 画像 1200x630 原寸 1200×630px(1.91:1)。ec-auth.io の og:image / twitter:image。EC-CUBE GL01 の適用対象外だが、配色・マークはバナーマスターと共通。
商品紹介バナー(EC-CUBE 2系) EcAuth バナー 338x252 EC-CUBE 2系対応版 マスターの派生版。左下の円形バッジで対応バージョン(2.17/2.25)を表示。バッジはマーケットプレイス慣習に合わせコーナーに食い込ませ、白リング + ローズ系グラデーション(#fb7185→#e11d48)で青背景から浮かせる。説明文はバッジと重ならないよう右側スペースの中央に配置。
商品紹介バナー(EC-CUBE 4.0/4.1系) EcAuth バナー 338x252 EC-CUBE 4.0/4.1系対応版 EC-CUBE 2系対応版からの派生。変更はバッジ内の対応バージョン表記のみ(2.17/2.25 → 4.0/4.1、文字数が減るぶん上段の font-size だけ 16 → 18)。ec-cube4-ecauth の 4.0 ブランチ(プラグインコード EcAuthLogin40)向け。

ブランドカラー

すべて ec-auth.io の CSS カスタムプロパティ由来。ロゴのために新色は導入しない。

色値由来用途
Primary#1a56db--color-primaryグラデーション始点、白背景上のマーク
Primary Dark#1240a8--color-primary-darkグラデーション終点、シャックル、鍵穴(白マーク時)
White#ffffff--color-bgブルー背景上のマーク・テキスト

アセット一覧(html/assets/logo/)

ファイル種別用途
ecauth-mark.svgマスターロゴマーク単体(青・透過)。favicon・資料・サイトへの流用元
ecauth-icon-50.svgマスター商品紹介アイコンのソース
ecauth-icon-50.png / @2x.png生成物オーナーズストア提出用アイコン(50×50 / 確認用 100×100)
ecauth-banner-338x252.svgマスター商品紹介バナーのソース。派生版はこれを複製して作る
ecauth-banner-338x252.png / @2x.png生成物オーナーズストア提出用バナー(338×252 / 確認用 676×504)
ecauth-banner-338x252-eccube2.svg派生版EC-CUBE 2系(2.17/2.25)対応バッジ付きバナーのソース。対応バージョン変更時はバッジ内 <text> のみ更新する
ecauth-banner-338x252-eccube2.png / @2x.png生成物ec-cube2-ecauth のオーナーズストア提出用バナー
ecauth-banner-338x252-eccube40.svg派生版EC-CUBE 4.0/4.1系対応バッジ付きバナーのソース。-eccube2 版の複製。対応バージョン変更時はバッジ内 <text> のみ更新する
ecauth-banner-338x252-eccube40.png / @2x.png生成物ec-cube4-ecauth(4.0 ブランチ / EcAuthLogin40)のオーナーズストア提出用バナー
ecauth-og-1200x630.svgマスターec-auth.io の OGP 画像のソース
ecauth-og-1200x630.png生成物ecauth-website の static/images/og-image.png へ複製して配信する

EC-CUBE ガイドライン要件(GL01 Ver.1.01 要約)

項目バナーアイコン
外形338×252px50×50px
コンテンツ余白外枠から各辺 15px(内寸 308×222px)外枠から各辺 5px(内寸 40×40px)
商品名必須(または連想キーワード)—(ブランドが一目でわかるイメージ)
形状長方形のまま変形しない(角丸・丸型禁止)、外枠線なし、静止画
禁止事項「**%引き」「キャンペーン中」等のセールス文言
セールス文言に注意

バナーの説明文は「EC-CUBE向けパスキー認証」のような機能説明のみとする。「5ユーザーまで無料」等の価格・キャンペーン訴求はガイドラインのセールス文言禁止規定に抵触しうるため記載しない。

派生版の作成手順(EC-CUBE 2系 / 4.0/4.1系 / 4.4系 等)

アイコンはバージョン文言を含まないため全派生版で共通流用できる。バナーのみ、対象バージョンごとに派生版を作る。

対応バージョンは左下の円形バッジで示す(-eccube2 版で確立した形式)。説明文は全派生版で「EC-CUBE向けパスキー認証」に揃え、バージョン表記はバッジだけが担う。したがって派生元はマスターではなく既存のバッジ付き派生版とし、バッジの文字だけを差し替える。

  1. 既存のバッジ付き派生版(例 ecauth-banner-338x252-eccube2.svg)を命名規則(下表)に従って複製する。
  2. 複製した SVG のバッジ内の対応バージョン <text> だけを変更する。マーク・サービス名・説明文・レイアウト・配色は変更しない。文字数が変わって収まりが悪いときに限り、その <text> の font-size を調整する。
  3. rsvg-convert で PNG(原寸と @2x)を出力し、バッジの文字が円からはみ出していないかを @2x で目視確認する。

diff で派生元と比べ、変更がコメント・バッジ <text> 以外に及んでいないことを確認するとよい。

# 例: EC-CUBE 4.0/4.1 系向けバナーの派生(実際にこの手順で作成した)
cd html/assets/logo
cp ecauth-banner-338x252-eccube2.svg ecauth-banner-338x252-eccube40.svg
# → バッジ内の「2.17/2.25」を「4.0/4.1」に変更
#   (7 文字に減って余白が空くため、その <text> の font-size のみ 16 → 18)

rsvg-convert -w 338 -h 252 ecauth-banner-338x252-eccube40.svg -o ecauth-banner-338x252-eccube40.png
rsvg-convert -w 676 -h 504 ecauth-banner-338x252-eccube40.svg -o ecauth-banner-338x252-eccube40@2x.png

# 派生元との差分がコメントとバッジ <text> だけであることを確認する
diff -u ecauth-banner-338x252-eccube2.svg ecauth-banner-338x252-eccube40.svg
対象ファイル名サフィックスバッジ表記状態
汎用(マスター)なしなしあり
EC-CUBE 2系-eccube22.17/2.25あり
EC-CUBE 4.0/4.1系-eccube404.0/4.1あり
EC-CUBE 4.2/4.3系-eccube434.2/4.3未作成(現状はマスターを流用)

サフィックスはプラグイン側の識別子に合わせる(-eccube40 は ec-cube4-ecauth の 4.0 ブランチ・プラグインコード EcAuthLogin40・リリースタグ 4.0-* に対応)。バッジ表記のほうは利用者が見る対応バージョンなので、識別子と一致しなくてよい(-eccube40 のバッジは「4.0/4.1」)。

OGP 画像の更新手順(ec-auth.io)

SNS カード(X / Facebook / Slack)用の画像。ecauth-website リポジトリの static/images/og-image.png が配信実体で、その生成元がここのマスター SVG。サイズは 1200×630px(1.91:1)で固定し、変更する場合は ecauth-website 側の hugo.toml(ogImage / ogImageAlt)と layouts/partials/head.html の og:image:width / og:image:height / og:image:type も合わせて更新する。

cd html/assets/logo
# 文言・レイアウトを変える場合は ecauth-og-1200x630.svg を編集してから出力する
rsvg-convert -w 1200 -h 630 ecauth-og-1200x630.svg -o ecauth-og-1200x630.png

# ecauth-website へ複製(配信実体)
cp ecauth-og-1200x630.png <ecauth-website>/static/images/og-image.png
キャッシュに注意

X / Facebook / Slack はいずれも OGP をキャッシュする。画像を差し替えても各プラットフォームのデバッガ(X Card Validator / Facebook Sharing Debugger)で再取得させるまで旧カードが表示され続ける。ファイル名を変えずに中身だけ差し替えた場合は特に残りやすい。

PNG 出力時のフォント要件

バナー SVG のテキストはフォント参照(サービス名: Noto Sans Bold / 説明文: Noto Sans JP → Noto Sans CJK JP → UDEV Gothic の順でフォールバック)でレンダリングされる。PNG を出力する環境に欧文の Noto Sans と、フォールバック候補のいずれかの和文ゴシックがインストールされていることを確認する。フォントが無い環境で出力すると字形が変わるため、出力後は必ず目視確認する。