Preview
ここに文字を入力
HTML Code
CSS Code
(例:送料無料キャンペーン中！ 初めてでも安心のサポート！など)
20px
#000000
50px
3px
45°
#000000
「ボタンの上、あしらいと文字のマイクロコピージェネレーター」は、ボタンのデザインを引き立てるための便利なツールです。斜め線の装飾とマイクロコピーを組み合わせて、視覚的に魅力的なデザインを簡単に作成できます。
このジェネレーターを使えば、次のようなデザインがすぐに作れます：
- ボタン上部の左右に配置された斜め線（あしらい）
- 斜め線の太さ、色、長さ、角度を自由にカスタマイズ
- 中央に配置されるマイクロコピー（フォントサイズや色も調整可能）
マイクロコピーが思いつかない際は、「いい感じの「マイクロコピー」ない？」記事を参照ください。
バナーで使えるマイクロコピー例
- セールやキャンペーン
- 「今だけ！最大50％オフ！」
- 「期間限定、急いでチェック！」
- 「限定クーポン配布中！」
- 新商品・新サービスの告知
- 「話題の新作が登場！」
- 「今すぐ予約受付中！」
- 「これが次世代のスタンダード。」
- 行動を促すCTA（Call To Action）
- 「詳細を見る」
- 「今すぐ体験する」
- 「無料で試してみる」
- 「クリックして応募完了！」
- 特典やメリットを強調
- 「送料無料キャンペーン中！」
- 「会員登録で500ポイントプレゼント！」
- 「初回限定でお得にスタート！」
- 安心感を与えるコピー
- 「初めてでも安心のサポート！」
- 「選ばれる理由がここにある。」
- 「今すぐ始めても損しません！」
- 緊急性を出す表現
- 「残りわずか！早い者勝ち！」
- 「本日23:59まで！」
- 「在庫切れ前に手に入れよう！」
- 感情に訴えるコピー
- 「新しい毎日を、この一歩から。」
- 「心が弾むデザインをあなたに。」
- 「あなたの”欲しい”がここに。」
作成方法
- プレビューの確認
ジェネレーターの画面で、あしらいの線や文字を自由にカスタマイズできます。変更内容はリアルタイムでプレビューに反映されます。 - 各項目の設定
- マイクロコピー: 表示したい文字列を入力します。
- 線の太さ、長さ、角度: スライダーを使って直感的に調整できます。
- 色の変更: 線や文字の色をカラーピッカーで選択。
- フォントサイズ: マイクロコピーのサイズを調整。
- コードの取得
- CSS Code: ボタンをクリックしてCSSコードをコピーできます。サイトのスタイルシートに貼り付けて使用してください。
- HTML Code: 必要なHTMLコードもコピー可能です。
- サイトに適用
コピーしたコードを自分のWebプロジェクトに貼り付けるだけで、すぐに使用できます。
