概要
展示会・イベント用の入場証HTMLテンプレートを、画面上の設定で作成・プレビューし、HTMLとして出力できるツールです。文字・色・背景・配置・条件表示などをノーコードで設定できます。
ページ上部へ戻るクイックスタート
初めての方は、以下の手順で3分以内にテンプレートを作成できます。
- ページ設定で「ページサイズ」と「1ページあたりのカード数」を選択
- 背景設定で背景タイプを選択（なし/単色/画像）
- 表示項目で必要な項目にチェック
- 右側のプレビューで確認し、「HTMLダウンロード」を押す
画面構成
左側に設定パネル、右側にプレビューエリアがあります。設定を変更するとプレビューに反映されます。
- 設定パネル: ページ設定、背景設定、表示項目、各種スタイルなど
- プレビューエリア: リアルタイムプレビュー、更新/印刷/保存ボタン
- ヘッダー: ツール名、バージョン表示
スクリーンショット
主要画面のスクリーンショットを貼り付けておくと、操作手順が伝わりやすくなります。
ページ設定
印刷する用紙サイズ、向き、1ページあたりのカード数などを設定します。
- ページサイズ: A4 / Letter / A5 / 名刺 / ハガキ / カスタム
- 向き: 縦向き / 横向き
- 1ページあたりのカード数: 1枚 / 2枚 / 4枚
- ハガキ→A4自動拡大: ハガキ設計をA4印刷に自動スケール
- A4・縦向き・1枚（初めての方に最適）
- A4・縦向き・2枚（コスト重視）
- ハガキ設計＋A4自動拡大（小さめデザインを拡大）
背景設定
カードの背景を単色、グラデーション、画像URL、画像アップロードで設定できます。
- 背景タイプ: なし / 単色 / グラデーション / 画像URL / 画像アップロード
- 画像プレビュー: URL指定時にプレビュー可能
- 画像形式変換ツール: WebP/SVG/GIF等をPNGへ変換
表示項目
カードに表示する項目を選択し、必要に応じて色帯を付けられます。
- イベント名 / 会社名 / 氏名 / 所属 / 役職 / 業種
- 割引コード / セミナーID / セミナー情報
- QRコード / カスタム項目
カスタムテキスト設定
カード内に自由なテキストを追加し、位置やサイズ、色、色帯の有無を設定できます。
- 内容: テキスト本文（改行も反映されます）
- 位置指定モード:
- 相対配置: 左寄せ/中央/右寄せ、上/中央/下の組み合わせで配置
- 絶対位置: X座標、Y座標を指定して任意の位置に配置
- テキスト配置: 左寄せ/中央揃え/右寄せ（絶対位置指定時にも設定可能）
- フォントサイズ/文字色
- 色帯: 背景色、文字色、パディング、幅（自動/全幅）
テキストエリアで改行すると、その改行がそのまま反映されます。複数行のテキストを入力する際に便利です。
- 相対配置: カード内の相対的な位置で配置したい場合（例: 上部中央、下部右寄せ）
- 絶対位置: ピクセル単位で正確な位置を指定したい場合（例: X=100px, Y=300px）
スタイル設定
全体のフォント、テキスト配置、色、QRサイズなどを設定します。
- フォント: Googleフォント/システムフォント
- 水平/垂直配置、テキスト色
- 氏名の「様」表示
- QRコードサイズ
- フッターテキストとフッター色帯
余白・間隔設定
カード内の余白や項目間隔を細かく調整できます。
- カード内余白（パディング）
- 要素間の間隔
- QRコード上部/下部の間隔
- 上下左右のマージン
印刷時の裁ち落としやズレを防ぐため、カード内余白は20px以上を推奨します。重要な情報（氏名/QR）はカード端から十分に離してください。
- 内側余白（カード内余白）: 20px〜30px
- 上下左右マージン: 0〜10px（必要に応じて）
- QRコードは上下に余白を確保
条件設定（高度な機能）
属性や業種、割引コード、セミナーIDなどに応じて背景や色帯、カスタムテキスト、オーバーレイ画像を切り替えます。
- 背景画像の条件切り替え
- 色帯の条件切り替え
- カスタムテキストの条件表示
- オーバーレイ画像の条件表示（新機能）
- セミナーIDはカンマ区切りにも対応
オーバーレイ画像
背景画像とは別に、条件に応じて表示される画像を任意の位置に配置できます。複数の画像を登録し、各画像に対して条件と位置を個別に設定できます。
基本的な使い方
- 「条件設定（高度な機能）」セクションで「オーバーレイ画像を使用」にチェック
- 「+ 画像追加」ボタンで画像を追加
- 各画像の設定:
- 画像ソース: URLまたはファイルアップロード
- 条件による表示/非表示（オプション）
- 位置とサイズ: X座標、Y座標、幅、高さ
条件による表示/非表示
- 判定基準: 属性、業種、職種、割引コード、セミナーID、備考2から選択
- 一致方法:
- 完全一致: 値が完全に一致する場合のみ表示
- 部分一致: 値に含まれている場合に表示
- 条件値: 単一の値、またはカンマ区切りで複数の値を指定可能（例:
A2-05,B2-05,C2-05） - 複数の条件値を指定した場合、どれかが一致していれば表示されます
- セミナーIDが「A2-05」または「B2-05」の場合に表示: 条件値に「A2-05,B2-05」と入力
- セミナーIDに「A2-05」が含まれている場合に表示: 一致方法を「部分一致」に設定
- VIP参加者専用のロゴを右上に配置: 条件値「VIP」、X座標=400px、Y座標=50px
画像は縦横比を保持したまま表示されます。幅と高さの設定は最大サイズとして機能します。
テストデータ
プレビューに表示するサンプルデータを入力します。実際の出力HTMLでは変数として埋め込まれます。
- イベント名、会社名、氏名、所属、役職
- 属性、業種、割引コード、セミナーID
- セミナー情報（!!区切り）
- QRコード画像URL、QRコードテキスト
- 備考2（色指定）
プレビューと出力
右側のプレビューエリアで、設定内容を確認できます。
- プレビュー更新
- HTMLダウンロード
- 印刷プレビュー
- 表示倍率の調整（縮小/拡大/リセット/フィット）
設定の保存/読み込み
現在の設定をJSONとして保存し、再読み込みできます。
- 設定を保存: JSONファイルをダウンロード
- 設定を読み込み: JSONファイルを選択
HTML編集モード
生成されたHTMLを表示し、編集モードを有効にすると手動修正が可能です。
- HTMLコード表示: モーダルで表示
- 編集モード: テキストエリアが編集可能に
- プレビュー: 編集内容を即時プレビュー
- HTMLファイルとして保存
よくある質問
Q. プレビューが更新されません
A. 右側の「プレビュー更新」ボタンを押すか、背景設定の「背景を更新」ボタンを使用してください。
Q. 印刷で2ページに分割されます
A. ページサイズと拡大設定を見直し、必要に応じて余白や倍率を調整してください。
Q. セミナーIDが一致しないのに表示されます
A. 入力値に余分な空白がないか確認し、カンマ区切りの形式を統一してください。
ページ上部へ戻る更新履歴の見方
ヘッダーのバージョン表示（例: v1.8.0-20251126）をクリックすると更新履歴が表示されます。
ページ上部へ戻る