CTA · CTAセクション
タイプライター手紙風のCTA
タイプライターで打たれた一通の手紙を再構築したCTA。修正線・赤鉛筆挿入・切手風ボタン・消印スタンプで「特別なあなただけに」の親密さを演出する尖った文書設計。
プレビュー
概要
現代のCTAは、誰に向けても同じ言葉で語りかけます。「今すぐ登録」「無料で始める」——効率的ですが、受け取る側は「これは全員に送られているメッセージだ」と即座に見抜きます。手紙は、その対極にある文書です。一通の手紙には宛名があり、差出人がいて、たった一人の読者を想定して書かれている。このCTAは、その「一対一」の感触を取り戻す試みです。
「不完全さ」が人間の証明になる
タイプライターで打たれた文字、取り消し線で消された言葉、その上に赤鉛筆で書き加えられた訂正——これらは一見ノイズですが、決定的な意味を持ちます。それは「この文章は人間が書いた」という証明です。完璧に整ったテキストはAIにも量産機にも書ける。しかし、迷い、書き直した痕跡だけは、その場に人がいたことを物語ります。訂正の痕は、欠点ではなく信頼の記号です。
物理的レイヤーが記憶に残る
切手、消印、万年筆の署名、紙の質感——これらの物理的な細部は、画面の中に「触れられそうなモノ」を作り出します。人の記憶は、抽象的な情報よりも、物として存在するものを強く保持します。スクロールで流れていく無数のバナーの中で、一通の手紙だけが「受け取った」という感覚を残す。それが、このCTAの忘れられにくさの正体です。
仕上げの判断軸
タイプライターフォント（Special Elite など）は欧文専用なので、和文は明朝体と組み合わせる——この混植はむしろ古文書らしい味になります。訂正の取り消し線・手書き挿入は1〜2箇所に絞ること。多用すると「演出」が透けて、かえって嘘くさくなります。VIP招待、創業者からのメッセージ、ニュースレター登録など、本当に親密さが武器になる場面でこそ使うべき様式です。
使いどころ
- ニュースレター登録誘導
- VIP・限定メンバーシップへの招待
- クラウドファンディング・寄付の訴求
- ブランドストーリー・創業者メッセージ
- 採用・引き抜きのオファー文書
このデザインの分類
- カテゴリ
- CTA
- スタイル
- エディトリアル / レトロ / ハンドクラフト / モノクロ / ウォーム
背景と狙いどころ
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 に。 署名を朱印（円形赤スタンプ）に置換。
よくある質問
修正線（取消＋手書き挿入）の意図は？
切手風ボタンの実装で穴模様（perforation）を作るには？
タイプライターフォントが日本語に効かない
関連するデザイン
御朱印帳・スタンプラリー風のCTA
御朱印帳とスタンプラリーを再構築したCTAセクション。朱印スタンプ・残り札所・巡礼ゲージで「あと少しでコンプリート」の達成欲求を喚起する、日本独自文化を武器にした尖った設計。
航空券スタイルのイベント告知CTAセクション
航空会社のボーディングパスをそのまま再現したCTAセクション。ゲート番号・搭乗時刻・QRコード・バーコード・ミシン目で「予約完了感」を演出する、旅・イベント・体験型サービスに刺さる尖った設計。
弾むアニメーションのCTAブロック
少し傾いたカードと厚い境界線、浮遊する絵文字、手書き風の矢印書き込みで構成した遊び心のあるCTAブロック。個人開発プロダクト・クリエイター系サービス・コミュニティ募集など、親しみの温度を優先したい局面向け。