開発 へ戻る
バーコード生成 — JAN / EAN / UPC / CODE128 / CODE39

バーコード生成 — JAN / EAN / UPC / CODE128 / CODE39

数字や文字列を 1 次元バーコード (JAN-13 / EAN-13・JAN-8 / EAN-8・UPC-A・CODE128・CODE39・ITF・Codabar/NW-7・MSI) に変換し、PNG / SVG として保存できます。バーの太さ・高さ・色・余白や、下部の数字表示の有無を細かく調整可能。チェックディジットの検証も自動で行います。生成はすべてブラウザ内で完結し、入力した値が外部に送信されることはありません。

開発生成画像

使い方

まず上部でバーコードの種類 (JAN-13 / EAN-13・JAN-8 / EAN-8・UPC-A・CODE128・CODE39・ITF・Codabar/NW-7・MSI) を選びます。選んだ種類に応じて入力欄のサンプルとプレースホルダ、必要な桁数の説明が切り替わります。値を入力すると、入力途中でもバーコードが自動で生成されます。出力形式 (PNG / SVG)、バーの太さ・高さ・色・背景色・余白、下部の数字表示の有無を細かく調整できます。チェックディジットを含む形式 (JAN / EAN / UPC) は、チェックディジットを省いた桁数 (12 桁 / 7 桁 / 11 桁) を入れると自動計算して付与します。完成したバーコードは PNG / SVG としてダウンロード、またはクリップボードに直接コピーできます。

よくある質問

入力した値はサーバーに送られますか?
送られません。バーコードのエンコードと画像化はすべて jsbarcode (npm) によってブラウザ内で行われ、ネットワーク通信は一切発生しません。
JAN コードと EAN コードの違いは何ですか?
JAN (Japanese Article Number) は日本国内での呼び名で、規格としては EAN (International Article Number) と同一です。13 桁の標準タイプ (JAN-13 / EAN-13) と、面積の小さい商品向けの 8 桁短縮タイプ (JAN-8 / EAN-8) があります。先頭 2〜3 桁の「45」「49」が日本に割り当てられた国コードです。
チェックディジットは自分で計算する必要がありますか?
必要ありません。JAN-13 / EAN-13 は 12 桁、JAN-8 / EAN-8 は 7 桁、UPC-A は 11 桁を入力すると、最後の 1 桁 (チェックディジット) を自動で計算して付け足します。すでにチェックディジットを含む完全な桁数を入れた場合は、その桁が正しいかどうかを検証します。
どの種類を選べばよいか分かりません。
市販する商品なら JAN-13 / EAN-13 (北米向けは UPC-A)、社内の管理ラベルやバリエーション豊富な文字列なら CODE128、工場・FA の現場で古くから使われているなら CODE39、段ボールの集合包装には ITF、宅配便の伝票番号には Codabar (NW-7) が一般的です。各種類を選ぶと下に用途のヒントが表示されます。
PNG と SVG はどう使い分けますか?
PNG はラベル印刷や画像としての貼り付けに手軽です。SVG はベクター形式なので拡大・縮小しても線がぼやけず、ラベルサイズが変わる用途や、Illustrator / Inkscape での再編集に向きます。印刷時はバーがかすれないよう、十分なバー幅 (2px 以上) と余白を確保してください。
生成したバーコードを商用利用できますか?
バーコードの画像生成自体は自由に利用できます。ただし JAN / EAN / UPC として実際に流通させるには、GS1 (日本では一般財団法人流通システム開発センター) から自社の事業者コードの貸与を受ける必要があります。任意の番号で作った JAN は店頭 POS で他社商品と衝突する恐れがあるため、社内利用にとどめてください。

類似のツール

QR コード生成 — テキスト / URL / ロゴ画像入り

QR コード生成 — テキスト / URL / ロゴ画像入り

テキストや URL を QR コード (PNG / SVG) に変換します。サイズ・誤り訂正レベル・前景色 / 背景色を細かく指定でき、中央にロゴ画像 (PNG / JPG / SVG) を重ねることも可能。ロゴを乗せる場合は誤り訂正レベル H 推奨。生成と画像合成はすべてブラウザ内で完結し、入力テキストもアップロードしたロゴも外部に送信されません。

開発生成画像
進数変換 — 2 / 8 / 10 / 16 進数を相互

進数変換 — 2 / 8 / 10 / 16 進数を相互

10 進数を 2 進・8 進・16 進数に、その逆も一発変換。入力進数 (Mode) を切り替えると、その値を残り 3 つの進数で同時表示。0b / 0o / 0x プレフィックス付き表示や、4 桁ごとの区切りもオプションで切替できます。すべてブラウザ内の BigInt 演算で精度を保証。

開発計算変換
CSS シャドウ ビルダー — box-shadow / text-shadow を GUI で組み立て

CSS シャドウ ビルダー — box-shadow / text-shadow を GUI で組み立て

CSS の box-shadow と text-shadow を GUI で組み立てるツール。Mode で box / text を切り替え、offset-x / offset-y / blur / spread (box のみ) / color / inset (box のみ) をスライダーと数値入力で調整。多重シャドウ (カンマ区切りで複数重ね) に対応し、Material Design 風の影や Neumorphism / 文字の縁取り / 蛍光グロー など 9 種類のプリセットからワンクリックで開始。ライブプレビュー (実 div / 実テキスト) + 値だけ / 宣言付き コピー切替対応。gradient-css の対称ツールとして CSS スタイル系のロングテール需要を満たします。すべてブラウザ内で処理。

開発生成
ダイスローラー — 2d6+3 / 4d6kh3 表記対応 (Web Crypto)

ダイスローラー — 2d6+3 / 4d6kh3 表記対応 (Web Crypto)

2d6+3 や 1d20-2、4d6kh3 (上位 3 つ残し) のような TRPG / ボードゲームでよく使うダイス表記をパースして振る、ブラウザ完結のダイスローラー。乱数は Web Crypto API (crypto.getRandomValues + 拒否サンプリング) で完全に均等分布。プリセット (d4 / d6 / d8 / d10 / d12 / d20 / d100 / 3d6 / 4d6kh3 …) も用意。直近 20 回までのロール履歴をブラウザ内に保持します。サーバー送信なし。

開発生成