ボタンコード生成用
外部アカウントでログインするボタン
ロゴと文言をそろえた、ソーシャルログイン用のボタン。
用途・説明
「Googleでログイン」「Appleでログイン」のような、外部アカウントでログインするためのボタンを縦に並べて作ります。ロゴの位置と文言の書き方をそろえ、メールアドレスでの登録との区切り線まで含めています。会員登録やログインの画面にそのまま置けます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス一覧]- 例：Google、Apple、LINE
[文言の形]- 例：〇〇でログイン、〇〇で登録
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「外部アカウントでログインするボタン」を実装してください。 ## 表示内容 - 対応するサービス：[サービス一覧] - 文言の形：[文言の形] - ボタンの下に、区切り線と「または」の文字、その下にメールアドレスで続ける導線を置く ## デザイン - 各ボタン：横幅 100%（最大 360px）、高さ 48px、背景 #FFFFFF、枠線 1px solid #DCE4F0、角丸 10px - ロゴ：20px、左端から 16px の位置に固定。文言はボタンの中央 - 文字：15px、font-weight 700、色 #1B2A44 - ボタンどうしの間隔 12px - 区切り線：1px solid #E2E8F0 の中央に「または」（12px、色 #5F6D84） - hover：背景 #F7F9FC ## ロゴの扱い - ロゴは仮のSVG（丸や四角）で置き、差し替える場所をコメントで示す - 各サービスのロゴと文言には、提供元が定めるガイドライン（色・余白・文言）がある。公開前に必ず確認する、という注意を出力の最後に書く ## アクセシビリティ - button 要素を使い、ロゴは aria-hidden="true" - 処理中は aria-busy="true" にして、二重に押せないようにする - focus-visible のスタイルを用意する - タップ領域は最低44×44px ## 出力形式 - [使用技術]のコードを1つ出力 - サービスを配列で渡して繰り返し表示する形にする（認証の処理そのものは含めない）
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。