CTA · CTAセクション

タイプライター手紙風のCTA

タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。

保存した一覧を見る 0 →

このブラウザー内に保存します。別の端末との同期はなく、サイトデータを消すと保存も消えます。

印刷時は見本を静止画にし、プロンプトと解説を出力します。PDF保存はブラウザーの印刷画面から選べます。

Vibehaus · デザイン資料
https://vibe.itlibra.com/design/typewriter-letter-cta/
完全無料・著作権フリー（CC0）· 料金¥0 · 商用利用・改変自由

PUBLISHED — 2026年4月28日 UPDATED — 2026年10月18日 CATEGORY — CTA LICENSE — CC0 1.0

プレビュー

AIへの指示文

プロダクト紹介の招待状CTAを、タイプライターで打たれた一通の手紙として作ってください。

要件:
- 配色: 木製机 #4a3826 / #2e2014（背景）+ 紙 #f4ead0 / #d8c89c + 墨 #1a1410 / 褪色 #4a3a28 + 朱赤 #b8281c + 海軍青 #1e3a6b（万年筆）+ 切手茶 #b04c30。
- 全画面に木目: 90度方向のストライプ（repeating-linear-gradient 2px / 6px）+ 中央近傍のラジアル暗影 + 全体ラジアル vignette。
- 中央に1枚の手紙（rotate -0.6deg、box-shadow 厚め、最大幅 880px）:
  - 紙地はクリームベージュ、薄い罫線（38px間隔の薄青）+ 下端に赤マージン線
  - 上下端にマスキングテープ的な貼り紙（::before / ::after、半透明 + ストライプ）
  - 左端に6個の穴パンチ装飾（黒丸、絶対配置）
- 手紙ヘッダー: 差出人住所（左、太字3行）+ 日付（右、明朝大字「令和八年 四月二十七日」）。1px 点線で下区切り。
- 宛名: 大型明朝「未来のあなたさま へ」（あなたを赤強調）+ 下線。
- 本文: 段落 6個、行間 1.95、letter-spacing 0.04em。
  - <strong>: 黄色マーカー風 background linear-gradient（下60%）
  - <em>: 万年筆青、Special Elite フォント斜体
  - <span class="strike">忙殺されて</span><span class="insert">没頭できて</span>: タイプライター打字後の修正風（赤線取り消し + 手書き赤字 Caveat 挿入、↑記号）
- 結句行: 1px 点線で上区切り、2 カラム grid:
  - 左: 「敬具。」+ 大型 Caveat 万年筆署名（rotate -2deg、青下線）+ 役職メタ
  - 右: 切手風 CTA ボタン
    - 200px 幅、border 2.5px 茶 + box-shadow 多重で切手の縁ギザギザ（4隅 radial-gradient で穴模様）
    - rotate 3deg、hover で 0deg + scale 1.04
    - 「完全無料のデザイン集を見る」（明朝太字22px）+ サブ「— FREE FOREVER —」+ 「¥0」（明朝900、32px）+ 小字「NO SIGN-UP」
- PS 注釈: 手紙の最下部、1px ボーダー + 薄赤背景、「P.S.」を Caveat 大きい赤字で。
- 右下に円形消印（postmark）: 110×110px、2.5px 茶ボーダー、二重円（::before dashed）、上下にローマ字「VIBEHAUS · POST」「TOKYO 104」中央に明朝大字「壱」+ 日付。rotate -14deg、半透明。
- フォント: 本文 Special Elite / Courier Prime（タイプライター）+ 宛名・日付・手紙の見出しは Yu Mincho / Hiragino Mincho ProN + 署名は Caveat / Klee One。
- JS不要、フルレスポンシブ（closing は1カラムへ、postmark は隅に縮小）。

バリエーション

速達（特急）版

切手周辺に赤い「速達」スタンプ + 斜めの赤帯を追加。
紙地を白寄りに、消印を青に変更。

古文書・和文公文書版

紙を和紙に変更、本文フォントを Yu Mincho 縦書き + writing-mode: vertical-rl に。
署名を朱印（円形赤スタンプ）に置換。

このプレビューのコード

HTMLとCSSの1ファイルです。外部依存・広告・解析コードはありません。架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。

CC0 · 改変・商用利用自由 · revision 45924a5afacd

コードを表示

<!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,nofollow">
<title>typewriter-letter-cta preview</title>
<style>
  :root {
    --desk: #4a3826;
    --desk2: #2e2014;
    --paper: #f4ead0;
    --paper-edge: #d8c89c;
    --ink: #1a1410;
    --ink-faded: #4a3a28;
    --red: #b8281c;
    --blue: #1e3a6b;
    --stamp: #b04c30;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--desk);
    color: var(--ink);
    font-family: "Special Elite", "Courier Prime", "Courier New", "Yu Mincho", "Noto Serif JP", serif;
    line-height: 1.85;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    background-image:
      radial-gradient(circle at 25% 30%, rgba(0,0,0,0.25), transparent 50%),
      radial-gradient(circle at 75% 75%, rgba(0,0,0,0.3), transparent 60%),
      repeating-linear-gradient(90deg,
        rgba(0,0,0,0.05) 0 2px, transparent 2px 6px,
        rgba(255,255,255,0.025) 6px 7px, transparent 7px 14px),
      linear-gradient(135deg, var(--desk), var(--desk2));
  }
  body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0,0,0,0.45) 100%);
    z-index: 0;
  }
  .stage {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 56px);
    z-index: 1;
  }

  /* Letter paper */
  .letter {
    background: var(--paper);
    background-image:
      linear-gradient(to bottom, transparent 0, transparent calc(100% - 4px), rgba(184,40,28,0.15) 100%),
      repeating-linear-gradient(to bottom, transparent 0 38px, rgba(30,58,107,0.08) 38px 39px),
      radial-gradient(circle at 12% 15%, rgba(74,58,40,0.06), transparent 30%),
      radial-gradient(circle at 88% 85%, rgba(74,58,40,0.08), transparent 35%);
    color: var(--ink);
    padding: 56px 64px 64px;
    position: relative;
    box-shadow:
      0 30px 80px -20px rgba(0,0,0,0.7),
      0 8px 24px -4px rgba(0,0,0,0.5),
      0 0 0 1px var(--paper-edge) inset;
    transform: rotate(-0.6deg);
    min-height: 980px;
  }
  .letter::before, .letter::after {
    content: "";
    position: absolute;
    background: rgba(74,58,40,0.18);
    background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,0.4) 8px 9px);
    height: 22px;
    width: 110px;
  }
  .letter::before {
    top: -10px; left: 32px;
    transform: rotate(-3deg);
    background-color: rgba(244,234,208,0.85);
    background-image:
      repeating-linear-gradient(90deg, transparent 0 8px, rgba(0,0,0,0.06) 8px 9px),
      linear-gradient(rgba(176,76,48,0.15), rgba(176,76,48,0.05));
  }
  .letter::after {
    top: -8px; right: 48px;
    transform: rotate(2.5deg);
    background-color: rgba(244,234,208,0.85);
    background-image:
      repeating-linear-gradient(90deg, transparent 0 8px, rgba(0,0,0,0.06) 8px 9px),
      linear-gradient(rgba(30,58,107,0.15), rgba(30,58,107,0.05));
  }

  /* Letter head */
  .letter-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px dashed var(--ink-faded);
    padding-bottom: 18px;
    margin-bottom: 24px;
    font-size: 12px;
    letter-spacing: 0.15em;
    color: var(--ink-faded);
  }
  .letter-head .from {
    line-height: 1.6;
  }
  .letter-head .from b {
    display: block;
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 0.2em;
    margin-bottom: 2px;
  }
  .letter-head .date {
    text-align: right;
    line-height: 1.5;
  }
  .letter-head .date b {
    display: block;
    color: var(--ink);
    font-size: 14px;
    margin-top: 2px;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  }

  /* Recipient */
  .to {
    margin: 0 0 26px;
    color: var(--ink);
    font-size: 18px;
    line-height: 1.4;
    transform: rotate(-0.3deg);
  }
  .to .name {
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--ink);
    border-bottom: 1px solid var(--ink-faded);
    padding-bottom: 2px;
  }
  .to .name b { color: var(--red); }

  /* Body */
  .body {
    margin: 0 0 32px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.95;
    letter-spacing: 0.04em;
  }
  .body p {
    margin: 0 0 16px;
  }
  .body strong {
    background: linear-gradient(180deg, transparent 60%, rgba(184,40,28,0.35) 60%);
    padding: 0 2px;
    font-weight: 700;
    color: var(--ink);
  }
  .body em {
    font-style: normal;
    color: var(--blue);
    font-weight: 400;
    font-family: "Special Elite", monospace;
  }

  /* Sender corrections (handwritten edits) */
  .strike {
    text-decoration: line-through;
    text-decoration-color: var(--red);
    text-decoration-thickness: 2px;
    color: var(--ink-faded);
  }
  .insert {
    color: var(--red);
    font-family: "Caveat", "Klee One", cursive;
    font-size: 1.4em;
    font-weight: 700;
    margin: 0 4px;
    line-height: 0.5;
    transform: rotate(-2deg);
    display: inline-block;
  }
  .insert::before {
    content: "↑ ";
    font-size: 0.7em;
    margin-right: 1px;
  }

  /* CTA "stamp" + signature */
  .closing {
    border-top: 1px dashed var(--ink-faded);
    padding-top: 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: end;
  }
  @media (max-width: 720px) {
    .closing { grid-template-columns: 1fr; }
  }

  .signature {
    margin: 0;
    color: var(--blue);
  }
  .signature .greet {
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 14px;
  }
  .signature .name {
    font-family: "Caveat", "Klee One", "Hiragino Maru Gothic Pro", cursive;
    font-size: 36px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
    transform: rotate(-2deg);
    display: inline-block;
    border-bottom: 1.5px solid var(--blue);
    padding-bottom: 2px;
  }
  .signature .role {
    margin-top: 14px;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    color: var(--ink-faded);
    line-height: 1.5;
  }

  /* CTA button (postage stamp) */
  .stamp-cta {
    text-align: center;
    position: relative;
  }
  .stamp-cta a {
    display: inline-block;
    background: rgba(244,234,208,0.7);
    color: var(--stamp);
    border: 2.5px solid var(--stamp);
    padding: 18px 22px 14px;
    text-decoration: none;
    width: 200px;
    box-shadow:
      0 0 0 4px var(--paper),
      0 0 0 5px var(--stamp);
    background-image:
      radial-gradient(circle at 0 0, transparent 6px, rgba(176,76,48,0.08) 6px 7px, transparent 7px),
      radial-gradient(circle at 100% 0, transparent 6px, rgba(176,76,48,0.08) 6px 7px, transparent 7px),
      radial-gradient(circle at 0 100%, transparent 6px, rgba(176,76,48,0.08) 6px 7px, transparent 7px),
      radial-gradient(circle at 100% 100%, transparent 6px, rgba(176,76,48,0.08) 6px 7px, transparent 7px);
    transform: rotate(3deg);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .stamp-cta a:hover {
    transform: rotate(0deg) scale(1.04);
    box-shadow:
      0 0 0 4px var(--paper),
      0 0 0 5px var(--stamp),
      0 8px 18px rgba(0,0,0,0.3);
  }
  .stamp-cta .row1 {
    display: block;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.1;
    color: var(--stamp);
    margin-bottom: 4px;
  }
  .stamp-cta .row2 {
    display: block;
    font-size: 9px;
    letter-spacing: 0.4em;
    color: var(--stamp);
    margin-bottom: 8px;
  }
  .stamp-cta .price {
    display: block;
    font-family: "Yu Mincho", serif;
    font-weight: 900;
    font-size: 32px;
    color: var(--stamp);
    line-height: 1;
  }
  .stamp-cta .price small {
    display: block;
    font-family: "Special Elite", monospace;
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--stamp);
    margin-top: 4px;
  }

  /* Round postmark */
  .postmark {
    position: absolute;
    bottom: 24px;
    right: 56px;
    width: 110px;
    height: 110px;
    border: 2.5px solid var(--stamp);
    border-radius: 50%;
    color: var(--stamp);
    display: grid;
    place-items: center;
    text-align: center;
    transform: rotate(-14deg);
    line-height: 1.2;
    background: radial-gradient(circle, transparent 38%, rgba(176,76,48,0.15) 39%, transparent 40%);
    opacity: 0.85;
  }
  .postmark::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed var(--stamp);
    border-radius: 50%;
  }
  .postmark .pm-top, .postmark .pm-bot {
    position: absolute;
    font-size: 8.5px;
    letter-spacing: 0.3em;
    width: 100%;
    text-align: center;
    color: var(--stamp);
  }
  .postmark .pm-top { top: 14px; }
  .postmark .pm-bot { bottom: 14px; }
  .postmark .pm-mid {
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-weight: 900;
    font-size: 18px;
    line-height: 1.1;
    color: var(--stamp);
  }
  .postmark .pm-mid small {
    display: block;
    font-family: "Special Elite", monospace;
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.18em;
    margin-top: 2px;
  }

  /* PS bottom */
  .ps {
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid var(--ink-faded);
    background: rgba(184,40,28,0.04);
    font-size: 12.5px;
    color: var(--ink-faded);
    letter-spacing: 0.04em;
    line-height: 1.7;
  }
  .ps b {
    color: var(--red);
    font-family: "Caveat", "Klee One", cursive;
    font-size: 22px;
    margin-right: 6px;
    letter-spacing: 0;
    line-height: 0;
  }

  /* Hole punch decoration on left */
  .holes {
    position: absolute;
    top: 0; bottom: 0;
    left: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 80px 0;
    pointer-events: none;
  }
  .holes span {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--desk);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
  }
[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">
    <article class="letter">
      <div class="holes" aria-hidden="true">
        <span></span><span></span><span></span><span></span><span></span><span></span>
      </div>

      <header class="letter-head">
        <div class="from">
          <b>Vibehaus 編集部</b>
          東京都 中央区 京橋 1-04-26<br>
          〒104-0031
        </div>
        <div class="date">
          ご機嫌よう。<br>
          <b>令和八年 四月二十七日</b>
        </div>
      </header>

      <p class="to">
        <span class="name">未来の<b>あなた</b>さま</span> へ
      </p>

      <div class="body">
        <p>拝啓、桜も散り、初夏の風が <strong>窓を叩く</strong> 季節となりました。</p>
        <p>突然のお手紙、失礼いたします。あなたは今、<em>本当にやりたい仕事</em> に <span class="strike">忙殺されて</span><span class="insert">没頭できて</span> おりますでしょうか。</p>
        <p>もしも、コードを書く時間より、無料素材を探す時間のほうが長いと感じていらっしゃるなら——どうか、このお手紙を最後まで読んでくださいませ。</p>
        <p><strong>Vibehaus は、74 のWebデザイン×AIプロンプトを、すべて完全無料・著作権フリーで公開しております。</strong>会員登録もメールアドレスも一切不要、コピー&ペーストでお使いいただけます。</p>
        <p>「いいデザインに出会う」ことが、あなたの一日の小さな <em>休符</em> になれば幸甚に存じます。</p>
        <p>末筆になりましたが、季節の変わり目、どうかご自愛のうえお過ごしくださいませ。</p>
      </div>

      <footer class="closing">
        <div class="signature">
          <p class="greet">敬具。</p>
          <span class="name">Y. 朝岡</span>
          <p class="role">VIBEHAUS · EDITORIAL<br>朝岡 雄介 / Yusuke Asaoka</p>
        </div>
        <div class="stamp-cta">
          <a href="#demo-link-0">
            <span class="row1">完全無料の<br>デザイン集を見る</span>
            <span class="row2">— FREE FOREVER —</span>
            <span class="price">¥0<small>NO SIGN-UP</small></span>
          </a>
        </div>
      </footer>

      <div class="ps">
        <b>P.S.</b>このお手紙のデザインも、もちろん収録パターンの一つでございます。手紙ごと、あなたのプロジェクトに転用してみてくださいませ。
      </div>

      <div class="postmark">
        <span class="pm-top">VIBEHAUS · POST</span>
        <span class="pm-mid">壱<small>2026.04.27</small></span>
        <span class="pm-bot">TOKYO 104</span>
      </div>
    </article>
  </div>
<aside class="demo-notes" aria-label="この見本について">
<h2>この見本について</h2>
<p>架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。配布HTMLはCC0・利用料¥0。外部素材やライブラリの取得は不要です。</p>
<section id="demo-link-0" tabindex="-1">
<h3>完全無料の デザイン集を見る — FREE FOREVER — ¥0 NO SIGN-UPの見本</h3>
<p>主ボタンから次の案内へ進める配置の例です。ここにある料金・特典・開催条件は架空で、申込み・契約・購入・参加枠の確保は行いません。</p>
</section>
<noscript>
<p>JavaScriptなしでも初期表示と説明リンクを利用できます。絞り込み・入力確認・演出の切替は無効です。</p>
</noscript>
</aside>
</body>
</html>

2026年10月14日、Chromiumで320・390・768・1280pxの描画とキーボードのフォーカス表示を確認しました。他のブラウザは未確認です。利用先のブラウザと実データでも確認してください。

概要

現代のCTAは、誰に向けても同じ言葉で語りかけます。「今すぐ登録」「無料で始める」——効率的ですが、受け取る側は「これは全員に送られているメッセージだ」と即座に見抜きます。手紙は、その対極にある文書です。一通の手紙には宛名があり、差出人がいて、たった一人の読者を想定して書かれている。このCTAは、その「一対一」の感触を取り戻す試みです。

崩れる形今すぐ登録・無料で始める

誰に向けても同じ言葉です。効率的ですが、受け取る側はこれは全員に送られていると即座に見抜き、そのぶん反応も鈍ります。

効く形宛名と差出人のある一通

手紙には宛名があり、差出人がいて、たった一人の読者を想定して書かれています。この一対一の感触が、定型のCTAには出せない反応を生みます。

「不完全さ」が人間の証明になる

タイプライターで打たれた文字、取り消し線で消された言葉、その上に赤鉛筆で書き加えられた訂正——これらは一見ノイズですが、決定的な意味を持ちます。それは「この文章は人間が書いた」という証明です。完璧に整ったテキストは量産できます。しかし迷い、書き直した痕跡だけは、その場に人がいたことを物語る。訂正の痕は、欠点ではなく信頼の記号です。

物理的レイヤーが記憶に残る

切手、消印、万年筆の署名、紙の質感——これらの物理的な細部は、画面の中に「触れられそうなモノ」を作り出します。人の記憶は、抽象的な情報よりも、物として存在するものを強く保持します。スクロールで流れていく無数のバナーの中で、一通の手紙だけが受け取ったという感覚を残します。それが、このCTAの忘れられにくさの正体です。

仕上げの判断軸

タイプライターフォント（Special Elite など）は欧文専用なので、和文は明朝体と組み合わせる——この混植はむしろ古文書らしい味になります。

訂正の取り消し線と手書き挿入は1〜2箇所まで。多用すると演出が透けて、かえって嘘くさくなります。

VIP招待、創業者からのメッセージ、ニュースレター登録など、本当に親密さが武器になる場面でこそ使うべき様式です。

見本で試せる範囲

架空のサービスや企画への案内です。日付・人数・価格・特典・利用条件は表示例です。リンクは構成の説明へ移動し、申込み・予約・決済・発券・招待は行いません。作品・記事・サービス名や数値は表示のための設定です。リンク先には、このHTMLに含まれる範囲と利用先で接続する処理を説明しています。配布HTMLはCC0・利用料¥0で、保存した1ファイルだけで表示できます。