背景コード生成用
等高線もようの背景
地図の等高線のような細い曲線で、静かな奥行きを。
用途・説明
地図の等高線のように、細い曲線が何重にも重なる背景を作成します。アウトドアや旅行、建築、コンサルティングなど、落ち着きと広がりを感じさせたいサイトのファーストビューや区切りのセクションに向いています。線を淡くしているので、文字の邪魔になりません。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSとSVGに詳しいフロントエンドエンジニアです。 以下の条件で「等高線もようの背景」を持つセクションを実装してください。 ## 仕様 - ベース色：#FFFFFF - 線：#C5D8FA の25%の淡い色、太さ 1.5px、塗りなし - 山が2つある地形をイメージし、それぞれの中心から外へ向かって5〜6本の閉じた曲線を、およそ 18px 間隔で描く ## 実装方法 - インラインSVGを position: absolute でセクション全体に敷く（preserveAspectRatio="xMidYMid slice"） - 曲線は円ではなく、少しゆがんだなめらかな閉じた path にする。内側の線ほど小さく、形を少しずつ変える - 2つの山は左下と右上に置き、中央は線が少なくなるようにする - SVGには aria-hidden="true" を付け、pointer-events: none にする ## 読みやすさ - 見出しは #1B2A44、補足文は #5F6D84 - 文字は中央に置き、線と重なる部分が少なくなるようにする - サンプルとして、見出し・補足文を含むセクションを1つ用意する ## レスポンシブ・その他 - スマホでも線の太さは変えない - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 線の色・太さをCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。