フッターコード生成用
規約リンクだけの最小フッター
コピーライトと規約のリンクだけを、1行で。
用途・説明
コピーライトと、利用規約・プライバシーポリシーなどのリンクだけを1行に収めた、最小限のフッターを作成します。ログイン画面、決済の画面、ランディングページ、Webアプリの管理画面など、ほかのページへ移動させたくない画面に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- コピーライトに表示する名前
[リンク項目]- 例：利用規約、プライバシーポリシー、特定商取引法に基づく表記
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「規約リンクだけの最小フッター」を実装してください。 ## 表示内容 - リンク：[リンク項目] - コピーライト：© 年 [サービス名] ## レイアウト - 1行に中央揃えで並べる。リンクのあいだは「｜」ではなく、12px の余白と細い縦線（1px、高さ 10px）で区切る - リンクのあとに、同じ縦線をはさんでコピーライト - 上下 padding 20px - スマホ：リンクを折り返し、コピーライトは次の行に ## デザイン - 背景は付けない（ページの背景をそのまま使う）。上端に 1px solid #E2E8F0 - 文字：12px、色 #5F6D84 - リンクの hover：色 #1463F0、下線 - 区切りの縦線：色 #DCE4F0 ## 配置 - ページの内容が少なくても、フッターが画面の下端に来るようにする（body を flex の縦並びにし、main に flex: 1 を指定する方法を説明する） ## アクセシビリティ - footer 要素を使う。リンクは nav 要素（aria-label="規約"）のなかの ul / li - 区切りの縦線は、疑似要素で描く（読み上げの対象にしない） - 小さな文字でも、背景とのコントラスト比 4.5:1 以上 - リンクのタップ領域は、上下の padding で 44px の高さを確保する - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力 - コピーライトの年を自動で現在の年にする書き方をコメントで補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。