背景コード生成用
図形を散らした背景
丸・三角・四角を端に散らして、楽しい雰囲気に。
用途・説明
セクションの四隅や端に、丸・三角・四角・十字などの図形を散らした背景を作成します。子ども向け、教育、イベント、採用ページなど、明るく楽しい雰囲気にしたいセクションに向いています。図形は中央の文字に重ならない位置に置きます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはCSSに詳しいフロントエンドエンジニアです。 以下の条件で「図形を散らした背景」を持つセクションを実装してください。 ## 仕様 - 背景色：#FFFFFF - 図形の色：#1463F0、#1463F0 の淡い色、#F4C9A8 - 図形：塗りの丸、線だけの輪、三角、角丸の四角、十字を合わせて6〜8個。大きさは 16〜64px ## 実装方法 - 図形はインラインSVG、またはCSS（border-radius、clip-path）で描く。画像ファイルは使わない - 図形は position: absolute で、セクションの四隅と左右の端に配置する。中央のコンテンツ幅（最大 720px）には置かない - 図形を入れる装飾用の要素には aria-hidden="true" を付け、pointer-events: none にする - サンプルとして、見出し・本文・ボタンを含むセクションを1つ用意する ## 読みやすさ - 見出しは #1B2A44、本文は #5F6D84 - 図形が文字に重ならないこと。重なる画面幅では、その図形を非表示にする ## レスポンシブ・その他 - スマホでは図形を3〜4個に減らし、上端と下端だけに置く - 図形をゆっくり上下に揺らすアニメーションの例も併記する（prefers-reduced-motion で無効化） - 横スクロールが出ないよう、はみ出した図形は overflow: hidden で隠す - 印刷時（@media print）は背景を非表示にする ## 出力形式 - [使用技術]のコードを1つ出力 - 色と図形の位置を調整しやすいよう、CSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。