フッターコード生成用
波形の上端を持つフッター
フッターの始まりを、なだらかな波のかたちに。
用途・説明
フッターの上端を、まっすぐな線ではなく波の形にするフッターを作成します。ページの終わりがやわらかい印象になります。保育園、子ども向けの教室、ベーカリー、ペット関連など、親しみやすさを大切にしたいサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- ロゴ部分とコピーライトに表示する名前
[リンク項目]- 例：コンセプト、メニュー、アクセス、お問い合わせ
[上のセクションの背景色]- 例：#FFFFFF
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSとSVGに詳しいフロントエンドエンジニアです。 以下の条件で「波形の上端を持つフッター」を実装してください。 ## 表示内容 - 波形の上端 - ロゴ（テキスト「[サービス名]」で代用） - リンク：[リンク項目] - コピーライト ## 波形の作り方 - フッターの上に、インラインSVGの波を置く。高さ 64px（スマホ 36px）、幅 100%、preserveAspectRatio="none" - 波の色は #1463F0（フッターの背景と同じ）。波の上の色は [上のセクションの背景色] - 山が2〜3つの、ゆるやかな波にする。左右の端の高さをそろえない（自然に見せるため） - SVGとフッターのあいだに 1px のすき間が出ないよう、1px 重ねる - SVGには aria-hidden="true" を付ける ## レイアウト - フッターのなかは中央揃え。上から ロゴ → リンク → コピーライト - 各段の間隔 24px、上 padding 24px、下 padding 48px ## デザイン - フッターの背景 #1463F0、文字 #FFFFFF - ロゴ：20px、font-weight 700 - リンク：14px、項目の間隔 28px、不透明度 0.9。hover で下線 - コピーライト：12px、不透明度 0.8 ## アクセシビリティ - footer 要素を使う。リンクは nav 要素（aria-label="フッターメニュー"）のなかの ul / li - 白い文字と #1463F0 のコントラスト比 4.5:1 以上。足りない場合は色の調整案を出す - フォーカスリングは白で表示する - スマホでリンクが入りきらない場合は折り返す ## 出力形式 - [使用技術]のコードを1つ出力 - 色・波の高さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。