CTA · CTAセクション
航空券スタイルのイベント告知CTAセクション
航空会社のボーディングパスをそのまま再現したCTAセクション。ゲート番号・搭乗時刻・QRコード・バーコード・ミシン目で「予約完了感」を演出する、旅・イベント・体験型サービスに刺さる尖った設計。
このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。
印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。
Vibehaus · デザイン資料
https://vibe.itlibra.com/design/boarding-pass-cta/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由
プレビュー
画面に合わせる
指定幅で実際に組み替えて表示します。表示領域より広い場合は、この枠の中で横へスクロールできます。
AIへの指示文
イベント・カンファレンスの告知CTAセクションを、航空会社のボーディングパスのデザインで作ってください。 要件: - 配色: 紙白 #f5f1e8 + 墨黒 #0d0d0d + 1色アクセント（深青 #1d3557）。 - 全体を航空券のフォーマット風に：左に大きなフライト情報、右に切り取り片（QRコード・搭乗者名）。 - ミシン目（dashed border）で左右を分割。 - 上部に「BOARDING PASS」「TICKET」のヘッダ + イベントロゴ。 - 中央に「FROM ◯◯ → TO ◯◯」の大型タイポ（FlightNumber風の航空券タイポ）。 - 各情報フィールド（GATE / SEAT / BOARDING TIME / DATE）を等幅モノスペースで整列、ラベルは上小さく値は下大きく。 - 右側の切り取り片に大きなQR風グラフィック（CSS grid のドットパターン）+ 搭乗者名 + バーコード（CSS の繰り返し縦線）。 - 下部にバーコードと "VBHX-2026-04-26-001" のような搭乗番号、SECURITY CHECK 風のパンチ穴。 - フォントは航空業界標準のモノスペース：JetBrains Mono / IBM Plex Mono、見出しは Helvetica Neue Black。 - JS不要、フルレスポンシブ。スマホでは縦に分割。
バリエーション
コンサートチケット版
ヘッダを "ADMIT ONE" に変更、ステージ番号・席番・開演時刻にラベル変更。 色をビビッドに（赤・黒）してエンタメ感を強める。
鉄道乗車券版
JR の特急券フォーマットに変更：列車名・号車・席番・有効期限。 日本語縦書きを併記して旅感を強める。
このプレビューのコード
HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。
コードを表示
<!doctype html>
<!-- Vibehaus · CC0 · 架空の表示・操作見本。外部素材・送信・永続保存なし。 -->
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>航空券スタイルのイベント告知CTAセクション — Vibehaus プレビュー</title>
<style>
:root {
--paper: #f5f1e8;
--paper-2: #ebe5d4;
--ink: #0d0d0d;
--muted: #4a4a4a;
--quiet: #8a8580;
--blue: #1d3557;
--red: #c8312b;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: "Inter", "Helvetica Neue", "Noto Sans JP",
"Hiragino Kaku Gothic ProN", sans-serif;
background: linear-gradient(180deg, #ddd0b8 0%, #c4b59a 100%);
color: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
min-height: 100dvh;
padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem);
}
.stage {
max-width: 920px;
margin: 0 auto;
}
.super {
text-align: center;
font-family: "JetBrains Mono", monospace;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink);
opacity: 0.65;
margin-bottom: 1rem;
}
.super b { color: var(--red); }
/* Boarding pass card */
.ticket {
position: relative;
background: var(--paper);
border: 1px solid var(--ink);
box-shadow:
0 32px 60px -20px rgba(0, 0, 0, 0.35),
0 14px 30px -10px rgba(0, 0, 0, 0.18);
display: grid;
grid-template-columns: 7fr 3fr;
min-height: 360px;
font-feature-settings: "tnum", "kern";
}
@media (max-width: 720px) {
.ticket { grid-template-columns: 1fr; }
}
/* Paper grain */
.ticket::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
opacity: 0.06;
mix-blend-mode: multiply;
}
/* Hole punch on left edge */
.ticket::after {
content: "";
position: absolute;
top: 50%; left: -8px;
width: 16px; height: 16px;
background: linear-gradient(180deg, #ddd0b8 0%, #c4b59a 100%);
border-radius: 50%;
transform: translateY(-50%);
border: 1px solid var(--ink);
}
/* Main side */
.main-side {
padding: 1.85rem 1.85rem 1.5rem;
position: relative;
border-right: 2px dashed var(--ink);
}
@media (max-width: 720px) {
.main-side { border-right: 0; border-bottom: 2px dashed var(--ink); }
}
.head-row {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--ink);
margin-bottom: 1.5rem;
}
.airline {
display: inline-flex;
align-items: center;
gap: 0.55rem;
font-weight: 800;
letter-spacing: -0.02em;
font-size: 1.05rem;
}
.airline::before {
content: "✈";
font-size: 1.4rem;
color: var(--blue);
transform: rotate(-8deg);
display: inline-block;
}
.pass-label {
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
letter-spacing: 0.2em;
color: var(--muted);
font-weight: 700;
}
.pass-class {
background: var(--ink);
color: var(--paper);
padding: 4px 10px;
font-family: "JetBrains Mono", monospace;
font-size: 0.68rem;
letter-spacing: 0.16em;
font-weight: 700;
}
.route {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.place {
font-family: "Helvetica Neue", "Inter", sans-serif;
font-weight: 900;
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1;
letter-spacing: -0.04em;
color: var(--ink);
}
.place .full {
display: block;
font-size: 0.22em;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--muted);
margin-top: 0.6em;
}
.place.r { text-align: right; }
.arrow {
font-size: 1.6rem;
color: var(--blue);
}
.info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding-block: 1.25rem;
border-block: 1px solid var(--ink);
margin-bottom: 1.25rem;
}
@media (max-width: 540px) {
.info-grid { grid-template-columns: repeat(2, 1fr); }
}
.info {
font-family: "JetBrains Mono", monospace;
}
.info .lab {
font-size: 0.62rem;
letter-spacing: 0.16em;
color: var(--muted);
text-transform: uppercase;
margin-bottom: 0.3rem;
}
.info .val {
font-size: 1.25rem;
font-weight: 800;
color: var(--ink);
line-height: 1.1;
letter-spacing: -0.01em;
}
.info .val small {
display: block;
font-size: 0.5em;
color: var(--quiet);
font-weight: 600;
letter-spacing: 0.04em;
margin-top: 0.4em;
}
.barcode {
display: flex;
gap: 1px;
height: 38px;
margin-bottom: 0.6rem;
align-items: stretch;
}
.barcode i {
background: var(--ink);
display: block;
}
.ticket-number {
font-family: "JetBrains Mono", monospace;
font-size: 0.78rem;
letter-spacing: 0.16em;
color: var(--ink);
font-weight: 700;
}
.ticket-number small { color: var(--muted); margin-right: 0.5rem; font-weight: 500; }
/* Stub side (right) */
.stub-side {
padding: 1.5rem 1.35rem 1.35rem;
background: var(--paper-2);
position: relative;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.stub-side::before {
/* Diagonal stamps */
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(135deg,
transparent 0 14px,
rgba(13, 13, 13, 0.04) 14px 16px);
pointer-events: none;
}
.stub-head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--ink);
}
.stub-head .airline {
font-size: 0.86rem;
}
.stub-head .airline::before {
font-size: 1.05rem;
}
.stub-head .stamp {
background: var(--red);
color: var(--paper);
padding: 3px 8px;
font-family: "JetBrains Mono", monospace;
font-size: 0.62rem;
letter-spacing: 0.16em;
font-weight: 700;
transform: rotate(2deg);
}
/* QR code (CSS grid of dots) */
.qr {
margin: 0 auto;
width: 130px;
height: 130px;
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
gap: 1px;
background: var(--paper);
padding: 4px;
}
.qr i {
background: var(--ink);
display: block;
}
.qr i.b { background: var(--paper-2); }
.stub-row {
font-family: "JetBrains Mono", monospace;
}
.stub-row .lab {
font-size: 0.6rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 0.25rem;
}
.stub-row .val {
font-size: 0.9rem;
font-weight: 800;
color: var(--ink);
line-height: 1.2;
}
.stub-cta {
margin-top: auto;
background: var(--ink);
color: var(--paper);
text-align: center;
text-decoration: none;
padding: 0.85rem 1rem;
font-family: "Helvetica Neue", "Inter", sans-serif;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: background 0.15s;
}
.stub-cta:hover { background: var(--red); }
/* Footer notes */
.notes {
margin-top: 1.5rem;
text-align: center;
font-family: "JetBrains Mono", monospace;
font-size: 0.7rem;
letter-spacing: 0;
color: var(--muted);
text-transform: uppercase;
}
.notes b { color: var(--red); }
[hidden]{display:none!important}
a,button,input,summary{min-width:44px;min-height:44px}
a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid currentColor;outline-offset:4px}
nav a{display:inline-flex;align-items:center;justify-content:center}
nav{flex-wrap:wrap}
header.bar{flex-wrap:wrap;gap:1rem}
input{max-width:100%}
.demo-notes{position:relative;z-index:10;box-sizing:border-box;max-width:1080px;width:calc(100% - 2rem);margin:2rem auto;padding:clamp(1rem,3vw,2rem);background:#f6f1e8;color:#211c17;border:1px solid currentColor;text-align:left;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:13px;line-height:1.8;letter-spacing:0;overflow-wrap:anywhere}
.demo-notes h2{font-size:18px;line-height:1.5;margin:0 0 .75rem}
.demo-notes h3{font-size:15px;line-height:1.5;margin:0 0 .4rem}
.demo-notes p{font:inherit;color:inherit;opacity:1;margin:0 0 1rem;max-width:none;letter-spacing:0}
.demo-notes section{margin-top:1.25rem;scroll-margin-top:1rem}
.demo-notes button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;padding:.4rem .75rem}
.demo-notes a{color:inherit}
.demo-notes .demo-motion{margin-bottom:1rem}
.demo-notes section:focus{outline:3px solid currentColor;outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}
</style>
</head>
<body>
<div class="stage">
<p class="super">— DesignFest 2026 — <b>FREE EVENT</b> · 限定 200 名 ·</p>
<article class="ticket" aria-label="ボーディングパス風 CTA">
<!-- Main -->
<div class="main-side">
<div class="head-row">
<div class="airline">VIBE AIRLINES</div>
<span class="pass-label">— Boarding Pass —</span>
<span class="pass-class">FREE / OPEN</span>
</div>
<div class="route">
<div class="place">TYO<span class="full">Tokyo · Daily Routine</span></div>
<div class="arrow">→</div>
<div class="place r">DSF<span class="full">DesignFest 2026</span></div>
</div>
<div class="info-grid">
<div class="info">
<div class="lab">Date</div>
<div class="val">06/15<small>2026 · MON</small></div>
</div>
<div class="info">
<div class="lab">Boarding</div>
<div class="val">10:00<small>JST · DOORS</small></div>
</div>
<div class="info">
<div class="lab">Gate</div>
<div class="val">A12<small>SHIBUYA</small></div>
</div>
<div class="info">
<div class="lab">Seat</div>
<div class="val">14F<small>FREE-ZONE</small></div>
</div>
</div>
<div class="barcode" aria-hidden="true">
<i style="width:3px;"></i><i style="width:1px;"></i><i style="width:2px;"></i><i style="width:5px;"></i><i style="width:1px;"></i><i style="width:3px;"></i><i style="width:1px;"></i><i style="width:4px;"></i><i style="width:1px;"></i><i style="width:2px;"></i><i style="width:6px;"></i><i style="width:1px;"></i><i style="width:1px;"></i><i style="width:3px;"></i><i style="width:1px;"></i><i style="width:5px;"></i><i style="width:1px;"></i><i style="width:2px;"></i><i style="width:4px;"></i><i style="width:1px;"></i><i style="width:3px;"></i><i style="width:2px;"></i><i style="width:1px;"></i><i style="width:6px;"></i><i style="width:1px;"></i><i style="width:3px;"></i><i style="width:1px;"></i><i style="width:2px;"></i><i style="width:5px;"></i><i style="width:1px;"></i><i style="width:4px;"></i><i style="width:1px;"></i><i style="width:1px;"></i><i style="width:3px;"></i><i style="width:1px;"></i><i style="width:6px;"></i><i style="width:1px;"></i><i style="width:2px;"></i><i style="width:4px;"></i><i style="width:1px;"></i><i style="width:3px;"></i><i style="width:1px;"></i><i style="width:5px;"></i>
</div>
<p class="ticket-number"><small>BOARDING №</small>VBHX—2026—04—26—042</p>
</div>
<!-- Stub -->
<div class="stub-side">
<div class="stub-head">
<div class="airline">VBA</div>
<span class="stamp">¥0 · FREE</span>
</div>
<div class="qr" aria-hidden="true">
<!-- 15x15 = 225 cells, manually placing some black/white -->
<i></i><i></i><i></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i>
<i></i><i class="b"></i><i class="b"></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i>
<i></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i>
<i></i><i class="b"></i><i></i><i class="b"></i><i></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i></i><i></i><i></i><i class="b"></i><i></i>
<i></i><i class="b"></i><i class="b"></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i class="b"></i><i></i><i></i><i></i><i></i><i></i>
<i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i>
<i></i><i></i><i class="b"></i><i></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i>
<i></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i></i><i></i><i></i><i></i><i class="b"></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i>
<i></i><i class="b"></i><i class="b"></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i>
<i></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i></i><i class="b"></i><i></i><i></i><i></i><i class="b"></i><i></i>
<i></i><i class="b"></i><i class="b"></i><i class="b"></i><i></i><i class="b"></i><i></i><i class="b"></i><i></i><i></i><i></i><i></i><i></i><i class="b"></i><i></i>
</div>
<div class="stub-row">
<div class="lab">Passenger</div>
<div class="val">YOUR / NAME</div>
</div>
<div class="stub-row">
<div class="lab">Group</div>
<div class="val">PRIORITY · 01</div>
</div>
<a class="stub-cta" href="#demo-link-0">無料で発券する →</a>
</div>
</article>
<p class="notes">
※ <b>料金 ¥0</b> · 当日キャンセル可 · オンライン参加もOK · 飲食付き
</p>
</div>
<aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>無料で発券する →の見本</h3>
<p>主ボタンから次の案内へ進める配置の例です。ここにある料金・特典・開催条件は架空で、申込み・契約・購入・参加枠の確保は行いません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>
2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。
概要
搭乗券（ボーディングパス）は、世界でもっとも「次の行動が決まっている」紙のひとつです。それを手にした人は、もう行くことを決めている——この心理状態をCTAに借用するのが、この設計の核心です。
「申し込む」を「発券する」に変える
通常のCTAボタンは「申し込む」「登録する」と書かれ、読者に決断のコストを突きつけます。搭乗券フォーマットは、その同じ行為を「発券」という事務的で軽い動作に翻訳する。ゲート番号・搭乗時刻・座席が具体的に印字された券面を見ると、人はイベント参加を「これから検討すること」ではなく「すでに予定に入っていること」として処理しはじめます。日付や時刻という具体性が、抽象的な誘いを確定した約束へと変えるのです。
崩れる形申し込む・登録する
読者に決断のコストを正面から突きつける言葉です。まだ決めていない人にとっては、押すこと自体が結論を出す行為になり、そこで手が止まります。
効く形発券する
同じ行為を事務的で軽い動作に翻訳します。ゲート番号・搭乗時刻・座席が印字されていると、人はイベントをすでに予定に入っていることとして処理しはじめます。
当事者性とシェア誘発
券面に参加者の名前が入る。たったそれだけで、汎用的な告知が私のチケットに変わります。所有感が生まれると、人はそれをスクリーンショットし、SNSに貼りたくなる。ミシン目・QRコード・バーコードといった本物の券の記号は、この完成度を支える細部です。装飾ではなく拡散の燃料として機能します。
仕上げの判断軸
券面は1枚で完結した強いオブジェクトなので、上下のセクションや広告とのあいだに十分な余白を取り、孤立させること。
ミシン目の破線はAdSenseの広告境界と紛れやすいので、券のカード内で閉じた装飾に留めてください。
印刷を意識した @media print を用意すれば、本物の搭乗券のように「手元に出力できる」体験まで作り込め、イベントへの参加意欲を一段押し上げられます。
見本で試せる範囲
架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。 作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。
CTAの構成要素
使いどころ
- 旅行・航空・宿泊予約サービスのキャンペーン
- カンファレンス・イベントの参加登録
- ライブ・コンサートの告知
- 体験型サービス（クッキング・ワークショップ）
- 限定イベントの招待状
このデザインの分類
背景と狙いどころ
よくある質問
QRコードは実際に動く？
装飾用なら CSS の grid + 黒/白セルで十分。実際にスキャンする QR にしたい場合は SVG QR ライブラリ（qrcode.js等）で生成して埋め込みます。
印刷時のレイアウトは？
ボーディングパスは元々印刷を意識した設計なので、@media print で 横向き A4 に最適化すると本物っぽくなります。
ミシン目が AdSense の広告境界と紛らわしい？
紛らわしいです。ボーディングパスのカード自体が完結したセクションになるので、広告との間に十分なマージンを取ること。
この画面を実装する
動くサンプルとコピペできるコードを、技術別にまとめています。
関連するデザイン
タイプライター手紙風のCTA
タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。
Memphis Group調・幾何カオスのCTAセクション
1980年代 Memphis Group の意匠を引用した、原色・波線・幾何形のカオスが踊るCTAセクション。退屈なフラットデザインを破壊して「楽しさ」を直接ぶつける尖った選択。
御朱印帳・スタンプラリー風のCTA
御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。