ナビゲーションコード生成用
言語を切り替えるメニュー
地球のアイコンから、表示する言語を選ぶ。
用途・説明
サイトの表示言語を切り替えるためのメニューを作成します。地球のアイコンといまの言語を表示し、押すとほかの言語の一覧が開きます。観光、宿泊、飲食、メーカーなど、海外からの訪問者がいるサイトのヘッダーやフッターに置けます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[対応言語]- 例：日本語、English、简体中文、한국어
[URLの形]- 例：/en/、/zh/ のようにパスで分ける
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「言語を切り替えるメニュー」を実装してください。 ## 表示内容 - 開くボタン：地球のアイコン、いまの言語名、下向きの矢印 - 一覧：[対応言語] - 各言語のページのURL：[URLの形] ## デザイン - 開くボタン：高さ 40px、左右padding 12px、枠線 1px solid #DCE4F0、角丸 999px、背景 #FFFFFF、文字 14px - 一覧：ボタンの下 6px、最小幅 160px、背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 10px、影 0 8px 24px rgba(27, 42, 68, 0.12) - 各項目：高さ 40px、左右padding 16px、文字 14px - いまの言語：文字 #1463F0・font-weight 700、右端にチェックマーク - hover：背景 #F1F5FC ## 表示の決まり - 言語名は、その言語で書く（「英語」ではなく「English」、「中国語」ではなく「简体中文」） - 国旗は使わない（言語と国は1対1ではないため） - 切り替えたら、いま見ているページの、その言語版へ移動する（トップページに戻さない） - その言語版がないページでは、項目を薄くして「未対応」と添える ## アクセシビリティ - 各項目は a 要素にし、lang 属性と hreflang 属性を付ける - 開くボタンは button 要素で、aria-expanded と aria-label="言語を選ぶ" を付ける - いまの言語には aria-current="true" - Esc キーで閉じ、フォーカスを開くボタンに戻す ## 出力形式 - [使用技術]のコードを1つ出力 - head に入れる hreflang の link タグの例もあわせて出力する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。