「こんな雰囲気で」を探す、デザインの参考サイト集
AIにホームページや画像を頼むとき、いちばん伝わるのは「この雰囲気で」と見本を見せることです。 見本を探せるサイトを1つずつ開いて中身と料金を確かめ、使えるものだけを並べました。
見本はこう使う
- 気に入った画面を見つけたら、スクリーンショットを撮る
- AI(ChatGPT・Claude・Gemini など)に画像を渡して、「この雰囲気で、うちのお店のページを作って」と頼む
- 色・文字の大きさ・写真の置き方など、どこが気に入ったかを一言そえると、さらに近づく
見本の画面の著作権は、それぞれのサイトにあります。雰囲気の参考にとどめ、そっくりそのまま写したり、画像を自分の資料に転載したりはしないでください。
バナー・SNS画像の見本
インスタの投稿や告知の画像を作るときの見本です。チラシの雰囲気づくりにも使えます。
- バナーアーカイブ見るのは無料
広告バナーを業種・色・雰囲気・形で探せる見本集。
運営は制作会社で、制作の依頼の案内が出ます。
選んで集めたバナーを一覧で眺められる見本集。
色の参考
AIに色を伝えるときは「#1a5f8c」のような色の番号で頼むと、ずれません。
- 原色大辞典無料
色の名前と色の番号の一覧。和の色・パステル・配色の組み合わせも。
- 伝統色のいろは無料
日本の伝統色の由来と色の番号。和の雰囲気を出したいときに。
広告が入っています。
- Adobe Color基本は無料
1色から配色を作ったり、人気の配色を眺めたりできる道具(日本語で使える)。
一部の機能はアカウント登録や有料プランが要ります。
無料の写真・イラスト
商用でも使える無料素材です。条件はサイトごとに違うので、使う前に利用規約を読んでください。
海外のWebページの見本(英語)
ホームページやLP(1枚ものの案内ページ)を作るとき、「こんな雰囲気で」を探す場所です。
ページの一部分だけの見本(英語)
ページ全体ではなく、悩みやすい部分だけを集めた見本です。
- Supahero見るのは無料
開いて最初に見える画面(ヒーロー)だけの見本集。
- CTA Gallery見るのは無料
「申し込む」「予約する」など、行動をうながす部分(CTA)の見本集。
運営元のテンプレートの宣伝が混ざります。
- Footer見るのは無料
ページのいちばん下(フッター)だけの見本集。
細かい部分なので、慣れてきてからで十分です。
動きの見本(英語)
動きの名前は モーション演出ギャラリー にまとめています。こちらは実物の動きを眺める場所です。
背景の素材(英語)
グラデーションや背景の画像です。使う前に、それぞれの利用条件(ライセンス)を確かめてください。
- Backgrounds本体は有料・無料素材のページあり
背景画像・グラデーションの素材集。
まずは無料素材(Freebies)のページから。
- Grainient有料が中心
ざらつきのあるグラデーション背景の素材集。
有料が前提です。必要になったときの候補として。
AIでサイトを作るサービス(英語)
見本集ではなく、AIに頼んでサイトを作るサービスの一例です。
- Modulify無料プランあり(使うにはアカウント登録)
テンプレートを選んで、AIでサイトを作るサービス。
海外のサイトは英語です。料金・名前・中身は 2026年10月21日 に確かめたときのもので、変わることがあります。