アイコンコード生成用
やさしい線画アイコン
丸みのある細い線で、統一感のあるアイコンセットを。
用途・説明
角を丸めた細い線で描くアイコンを、SVGコードとしてまとめて生成します。サービス紹介の特徴アイコンやナビゲーションに使え、線の太さやサイズが揃ったセットが手に入ります。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[アイコンのモチーフ]- 例：家、ハート、吹き出し、葉っぱ
プロンプト全文
あなたはアイコンデザイナーです。 以下の条件で、統一感のある線画アイコンをSVGコードで作成してください。 ## 作成するアイコン [アイコンのモチーフ]（1モチーフにつき1つ） ## デザインルール - viewBox="0 0 24 24"、表示サイズ24px基準で設計する - 線のみで描く（fill="none"）。stroke-width は 1.75 で全アイコン共通 - stroke-linecap="round"、stroke-linejoin="round" で角を丸める - 外側に1pxの余白を残し、描画範囲は 2〜22 の範囲に収める - 形は単純化し、1アイコンあたりのpath数は4本以内を目安にする - 細かすぎるディテールは入れず、16pxに縮小しても判別できること ## 配色 - stroke="currentColor" にして、CSSのcolorで色を変えられるようにする - 使用例では color: #1463F0 を指定する ## アクセシビリティ - 装飾目的のときは aria-hidden="true" を付ける前提で出力する - 意味を持たせる場合の例として、<title> を含めたバージョンも1つ示す ## 出力形式 - アイコンごとに、名前と完成したSVGコードを出力 - 最後に、全アイコンを横並びで確認できるHTMLのサンプルを1つ出力 - 各アイコンは同じ太さ・同じ角丸・同じ余白で揃っているか、自分で確認してから出力すること
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。