SUMMONER CARD — サモナーカード作成メーカー

https://summonercard.com/

League of Legends の自己紹介カード（サモナーカード）をブラウザだけで作れる無料ツールです。

• サモナーネーム / タグ / レベル / アイコン（サモナーアイコン・チャンピオン・画像アップ＋トリミング）
• ランク、ロール4段階（メイン / サブ / ノマなら可 / NG）
• 得意チャンピオン最大5体（ロール付き、スキン画像からアイコン切り抜き）
• プレイスタイルタグ（自作も可）、活動時間、Discord / X / Twitch / YouTube
• テーマ15種（ハロウィン・クリスマス・地雷系・量産型・Y2K・ゲーミング・和風なども）、スキンや自分の画像を背景に（位置・拡大・暗さを調整）
• PNG保存 / コピー / Xシェア、宣伝バナー（1800×600）の生成
• 日本語 / English / 한국어 / 简体中文 / 繁體中文 / ไทย / Tiếng Việt / Español / Português / Deutsch / Français（ブラウザの言語で自動選択、左上で切り替え。画面の文言は js/lang/<言語>.js、ランク名などは js/i18n.js）。/en/ /th/ などはその言語のプレビュー画像（og-*.jpg）付きのページ

入力内容はブラウザの localStorage にだけ保存され、サーバーには送信されません。

構成

ビルド不要の静的サイト（HTML / CSS / ES Modules）を GitHub Pages で配信しています。カード画像は Canvas でブラウザ内で描画します。

パス	内容
index.html, js/app.js	カード作成ツール本体
js/card.js, js/fairy.js	カードの描画（ゆめかわ系テーマの飾りは fairy.js）
js/banner.js	宣伝バナーの描画
js/cropper.js	画像のトリミング
js/analytics.js	Google Analytics（GA_ID が空の間はオフ）
guide/ templates/ banner/ faq/ privacy/ terms/ about/	説明ページ（生成物）
tools/build-pages.mjs	説明ページと sitemap.xml の生成スクリプト

説明ページの文章は tools/pages/<言語>.mjs にあります（ja / en / ko / zh-cn / zh-tw / th / vi / es / pt-br / de / fr）。変えたら次を実行してください。

node tools/build-pages.mjs

素材：Riot Games「Data Dragon」、Community Dragon、Google Fonts

ローカルで動かす

ES Modules を使うため file:// では動きません。静的サーバーで開いてください。

npx serve .

免責

SUMMONER CARD isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot Games or anyone officially involved in producing or managing Riot Games properties. Riot Games, and all associated properties are trademarks or registered trademarks of Riot Games, Inc.