MAKE SOMETHING GOOD.
つくりたいデザインが、見つかる。
見出しからアイコンまで。サイト制作に使えるプロンプト集。
テキスト
素材
UIパーツ
ページ構成
Toollyのプロンプト集について
AIにサイトのパーツを作ってもらうとき、「いい感じの見出しを作って」のような短い指示では、毎回ちがう見た目になったり、スマホで崩れたりしがちです。 思いどおりの結果を得るには、レイアウト・配色・余白・文字サイズといった条件をひととおり伝える必要がありますが、それを毎回書くのは手間がかかります。
Toollyのプロンプト集は、その「伝えるべき条件」をあらかじめ書き込んだプロンプトを、完成イメージと一緒に並べたものです。 見出し・キャッチコピー・ボタン・カード・フォーム・ファーストビュー・料金表・FAQ・フッターなど、サイト制作でよく使うパーツをカテゴリ別にまとめています。 デザインの専門用語を知らなくても、見た目で選んでコピーするだけで使えます。
使い方
- 1
完成イメージから選ぶ
見出し・ボタン・料金表など、つくりたいパーツのカテゴリを開きます。どのプロンプトにも仕上がり例を載せているので、言葉で説明しにくいデザインも見た目で選べます。
- 2
色とサイズを合わせる
カラーコードとサイズを選ぶと、仕上がり例とプロンプトの両方に反映されます。サイト名や文言など［ ］で囲んだ部分は、各プロンプトのページにある「書き換える項目」を見ながら書き換えます。
- 3
コピーしてAIに渡す
「プロンプトをコピー」を押して、お使いのAIにそのまま貼り付けます。レイアウト・配色・余白・レスポンシブ・アクセシビリティまで条件を書いてあるため、短い指示より意図に近い結果が返ってきます。
よくある質問
どのAIで使えますか？
Claude・ChatGPT・Geminiなど、文章で指示できるAIであれば使えます。コード生成用・文章作成用のプロンプトは特定のAIに依存しない書き方にしています。画像生成用のプロンプトは、画像を生成できるAIでお使いください。
料金や会員登録は必要ですか？
必要ありません。すべてのプロンプトとアイコン素材を、登録なし・無料で利用できます。AIサービス自体の利用料金は、各サービスの料金体系に従います。
プロンプトや、生成した結果は商用利用できますか？
掲載しているプロンプトは、個人・商用を問わず、コピーしてご自身のサイト制作にお使いいただけます（プロンプト集そのものの転載・再配布はご遠慮ください）。AIが生成したコード・文章・画像の利用条件は、お使いのAIサービスの利用規約によって異なりますので、公開前にご確認ください。
仕上がり例と同じものが出力されますか？
仕上がり例は目安です。AIの種類やバージョン、書き換えた内容によって出力は変わります。違いが気になる場合は、「余白を広く」「角丸を小さく」のように続けて指示すると近づけられます。
HTML/CSS以外の技術でも使えますか？
使えます。コード生成用のプロンプトには［使用技術］という書き換え箇所があり、「HTML/CSS」「React + Tailwind CSS」「Vue」など、使っている技術を書くとその形式で出力されます。
アイコン素材はどのように使えますか？
アイコンをクリックすると、色・線の太さ・サイズを変えて、SVG・PNG・コードで取得できます。オープンソースのLucideアイコンを利用しており、商用利用も可能です。ライセンスは「サイトについて」のページに掲載しています。