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プロジェクトに貼り付けるだけで、すぐに使用できます。