フォーム・お問い合わせコード生成用
チャットアプリで相談するボタン
フォームより気軽に、ふだん使うアプリから相談してもらう。
用途・説明
メッセージアプリの公式アカウントから相談してもらうための、案内ボタンとQRコードのセットを作成します。スマホではボタン、パソコンではQRコードを見せて、どちらからでも友だち追加できます。美容室、整体、不動産、塾など、気軽な相談から始まるサービスに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[アプリ名]- 例：LINE
[友だち追加のURL]- 公式アカウントの追加用URL
[できること]- 2〜3個。例：予約、空き状況の確認、質問
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「チャットアプリで相談するボタン」を実装してください。 ## 表示内容 - 見出し：「[アプリ名]でも、お気軽にご相談ください」 - できること：[できること] - スマホ向け：ボタン「[アプリ名]で友だち追加」（リンク先：[友だち追加のURL]） - パソコン向け：QRコードと、「スマートフォンで読み取ってください」 ## レイアウト - 1枚のカード（最大幅 640px）。PCは左に見出しとできること、右にQRコード - スマホ：見出し → できること → ボタン の順に縦に並べ、QRコードは表示しない ## デザイン - カード：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 16px、padding 32px - 見出し：20px、font-weight 700、色 #1B2A44 - できること：15px、行頭にチェックマーク（色は #1463F0） - ボタン：幅 100%、高さ 56px、角丸 999px、背景 #1463F0、文字 #FFFFFF・16px・font-weight 700。左に吹き出しのアイコン - QRコード：160×160px、白い余白を 12px とり、枠線 1px solid #E2E8F0・角丸 12px - QRコードの下の文言：12px、色 #5F6D84 ## 表示の決まり - アプリのロゴやアイコン、色、ボタンの文言には、提供元が定めるガイドラインがある。公開前に必ず確認する旨を、出力の最後に書く - ロゴは仮のアイコンで置き、差し替える場所をコメントで示す - 返信できる時間帯（例：平日 10:00〜18:00）を、ボタンの下に必ず表示する ## アクセシビリティ - ボタンは a 要素。新しいタブ（またはアプリ）で開くことが分かるようにする - QRコードの alt は「[アプリ名]の友だち追加用QRコード」にし、同じ行き先のテキストリンクも用意する - 白い文字と #1463F0 のコントラスト比を確認し、足りない場合は文字を太くするなどの対応を書く ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。