Vibehaus AIに伝わる、デザインの型。
プロンプト指示文作成 技術別 背景素材

サイト内を検索

見た目の参考、実装のコード、背景画像をまとめて探せます。

Backgrounds · Wallpapers

文字を置ける背景。
毎日使える壁紙。

Webサイトの背景にも、PC・スマホの壁紙にも。5種類のAI生成画像を、横長・縦長で用意しました。完全無料・著作権フリー、料金¥0。

01 / PREVIEW使う場所に重ねてみる。

Webの見出しとボタンを重ねた見本です。文字・アイコンはダウンロード画像に含まれません。

02 / SELECT気に入った画像を選ぶ。

1枚なら個別に取得。複数ならチェックしてまとめて。

0枚選択

横長・縦長をそれぞれ選べます。

チェックした画像だけをZIPにまとめます。見本や形式を変えても選択は残ります。

琥珀色の布の横長画像。文字のための余白を広くとった構図。

琥珀色の布

光を含んだ薄い布と、深い茶色の余白。白い文字を使うブランド紹介や、温かな壁紙に。

Web用のHTML・CSSを見る

下のWebPを2枚取得し、CSSと同じフォルダーへ置いてください。640px以下では縦長の画像に切り替わります。

横長WebPを取得 ↓縦長WebPを取得 ↓
HTML
<section class="vh-bg-amber-silk">
  <div>
    <h2>余白から、伝える。</h2>
    <p>背景を静かにすると、言葉が届く。</p>
  </div>
</section>
CSS
.vh-bg-amber-silk {
  box-sizing: border-box;
  display: grid;
  align-content: center;
  min-height: clamp(28rem, 70svh, 48rem);
  padding: clamp(2rem, 6vw, 6rem);
  font-family: system-ui, "Yu Gothic", sans-serif;
  color: #ffffff;
  background-color: #141414;
  background-image: url("./amber-silk-desktop.webp");
  background-size: cover;
  background-position: center;
}
.vh-bg-amber-silk > div {
  min-width: 0;
  max-width: 32rem;
  overflow-wrap: anywhere;
}
.vh-bg-amber-silk h2 {
  color: inherit;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.4;
}
.vh-bg-amber-silk p {
  color: inherit;
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
}
@media (max-width: 640px) {
  .vh-bg-amber-silk {
    min-height: 40rem;
    align-content: start;
    padding-block-start: 3rem;
    background-image: url("./amber-silk-phone.webp");
  }
}

画像生成プロンプトを見る

深い焦げ茶の静かな空間に、琥珀色と銅色の薄い絹が滑らかにうねる抽象写真。繊細な織り目、柔らかな斜光、控えめな艶。横長版は右下に布を集めて左側60%を暗い余白にし、縦長版は下部に布を置いて上側55%を静かに保つ。それぞれ構図から作る。文字、数字、ロゴ、透かし、人物、端末、画面枠は入れない。

木漏れ日の壁の横長画像。文字のための余白を広くとった構図。

木漏れ日の壁

白い漆喰に、淡いオリーブの葉影。濃い文字を使うお店の紹介や、明るいロック画面に。

Web用のHTML・CSSを見る

下のWebPを2枚取得し、CSSと同じフォルダーへ置いてください。640px以下では縦長の画像に切り替わります。

横長WebPを取得 ↓縦長WebPを取得 ↓
HTML
<section class="vh-bg-sunlit-wall">
  <div>
    <h2>余白から、伝える。</h2>
    <p>背景を静かにすると、言葉が届く。</p>
  </div>
</section>
CSS
.vh-bg-sunlit-wall {
  box-sizing: border-box;
  display: grid;
  align-content: center;
  min-height: clamp(28rem, 70svh, 48rem);
  padding: clamp(2rem, 6vw, 6rem);
  font-family: system-ui, "Yu Gothic", sans-serif;
  color: #17212b;
  background-color: #f3f0e8;
  background-image: url("./sunlit-wall-desktop.webp");
  background-size: cover;
  background-position: center;
}
.vh-bg-sunlit-wall > div {
  min-width: 0;
  max-width: 32rem;
  overflow-wrap: anywhere;
}
.vh-bg-sunlit-wall h2 {
  color: inherit;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.4;
}
.vh-bg-sunlit-wall p {
  color: inherit;
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
}
@media (max-width: 640px) {
  .vh-bg-sunlit-wall {
    min-height: 40rem;
    align-content: start;
    padding-block-start: 3rem;
    background-image: url("./sunlit-wall-phone.webp");
  }
}

画像生成プロンプトを見る

温かい白の漆喰の壁に、小さなオリーブの葉の影が差し込む静かな昼下がりの写真。淡いセージグリーンを含む柔らかな影と、細かな漆喰の粒。横長版は葉影を右下へ寄せて左側65%を明るい余白にし、縦長版は下部に葉影を置いて上側55%を静かに保つ。それぞれ構図から作る。植物の実物、家具、窓枠、文字、ロゴ、透かし、人物、端末は入れない。

藍色の山と霧の横長画像。文字のための余白を広くとった構図。

藍色の山と霧

深い藍の空と、小さく重なる山の稜線。白い見出しや時計を上側に置きたいときに。

この背景を使ったヒーローの実装例を見る →

Web用のHTML・CSSを見る

下のWebPを2枚取得し、CSSと同じフォルダーへ置いてください。640px以下では縦長の画像に切り替わります。

横長WebPを取得 ↓縦長WebPを取得 ↓
HTML
<section class="vh-bg-ink-mist">
  <div>
    <h2>余白から、伝える。</h2>
    <p>背景を静かにすると、言葉が届く。</p>
  </div>
</section>
CSS
.vh-bg-ink-mist {
  box-sizing: border-box;
  display: grid;
  align-content: center;
  min-height: clamp(28rem, 70svh, 48rem);
  padding: clamp(2rem, 6vw, 6rem);
  font-family: system-ui, "Yu Gothic", sans-serif;
  color: #ffffff;
  background-color: #141414;
  background-image: url("./ink-mist-desktop.webp");
  background-size: cover;
  background-position: center;
}
.vh-bg-ink-mist > div {
  min-width: 0;
  max-width: 32rem;
  overflow-wrap: anywhere;
}
.vh-bg-ink-mist h2 {
  color: inherit;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.4;
}
.vh-bg-ink-mist p {
  color: inherit;
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
}
@media (max-width: 640px) {
  .vh-bg-ink-mist {
    min-height: 40rem;
    align-content: start;
    padding-block-start: 3rem;
    background-image: url("./ink-mist-phone.webp");
  }
}

画像生成プロンプトを見る

深い藍と青灰色の、静かな山並みと霧の背景画像。架空の風景を写真に近い質感で描く。山並みは下部に小さく置き、広い暗い余白を残す。横長版は左側60%、縦長版は上側40%を静かに保つ。文字、ロゴ、人物、建物、太陽、月は入れない。

青いガラスの波の横長画像。文字のための余白を広くとった構図。

青いガラスの波

透明な青いガラスを下側へ。製品紹介の背景や、落ち着いたデスクトップに。

Web用のHTML・CSSを見る

下のWebPを2枚取得し、CSSと同じフォルダーへ置いてください。640px以下では縦長の画像に切り替わります。

横長WebPを取得 ↓縦長WebPを取得 ↓
HTML
<section class="vh-bg-glass-tide">
  <div>
    <h2>余白から、伝える。</h2>
    <p>背景を静かにすると、言葉が届く。</p>
  </div>
</section>
CSS
.vh-bg-glass-tide {
  box-sizing: border-box;
  display: grid;
  align-content: center;
  min-height: clamp(28rem, 70svh, 48rem);
  padding: clamp(2rem, 6vw, 6rem);
  font-family: system-ui, "Yu Gothic", sans-serif;
  color: #ffffff;
  background-color: #141414;
  background-image: url("./glass-tide-desktop.webp");
  background-size: cover;
  background-position: center;
}
.vh-bg-glass-tide > div {
  min-width: 0;
  max-width: 32rem;
  overflow-wrap: anywhere;
}
.vh-bg-glass-tide h2 {
  color: inherit;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.4;
}
.vh-bg-glass-tide p {
  color: inherit;
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
}
@media (max-width: 640px) {
  .vh-bg-glass-tide {
    min-height: 40rem;
    align-content: start;
    padding-block-start: 3rem;
    background-image: url("./glass-tide-phone.webp");
  }
}

画像生成プロンプトを見る

深い紺の空間に、透明な青緑のガラスの波をひとつ置く。上質な3Dレンダリング、繊細な屈折、自然な階調。造形は下部に限定し、見出しや時計のための余白を広く残す。横長と縦長をそれぞれ構図から作る。文字、ロゴ、画面枠、粒子、人物は入れない。

白い紙の砂丘の横長画像。文字のための余白を広くとった構図。

白い紙の砂丘

紙の繊維と柔らかな影。黒い文字を使うWeb背景や、明るい壁紙に。

Web用のHTML・CSSを見る

下のWebPを2枚取得し、CSSと同じフォルダーへ置いてください。640px以下では縦長の画像に切り替わります。

横長WebPを取得 ↓縦長WebPを取得 ↓
HTML
<section class="vh-bg-paper-dunes">
  <div>
    <h2>余白から、伝える。</h2>
    <p>背景を静かにすると、言葉が届く。</p>
  </div>
</section>
CSS
.vh-bg-paper-dunes {
  box-sizing: border-box;
  display: grid;
  align-content: center;
  min-height: clamp(28rem, 70svh, 48rem);
  padding: clamp(2rem, 6vw, 6rem);
  font-family: system-ui, "Yu Gothic", sans-serif;
  color: #17212b;
  background-color: #f3f0e8;
  background-image: url("./paper-dunes-desktop.webp");
  background-size: cover;
  background-position: center;
}
.vh-bg-paper-dunes > div {
  min-width: 0;
  max-width: 32rem;
  overflow-wrap: anywhere;
}
.vh-bg-paper-dunes h2 {
  color: inherit;
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.4;
}
.vh-bg-paper-dunes p {
  color: inherit;
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
}
@media (max-width: 640px) {
  .vh-bg-paper-dunes {
    min-height: 40rem;
    align-content: start;
    padding-block-start: 3rem;
    background-image: url("./paper-dunes-phone.webp");
  }
}

画像生成プロンプトを見る

オフホワイトの紙がゆるやかな砂丘のように重なる、抽象的なペーパーアート。温かい灰色の柔らかな影、細かな紙の繊維、マットな質感。ひだは下部だけに置き、上部を明るく静かな余白にする。横長と縦長をそれぞれ構図から作る。文字、ロゴ、物体、人物、植物は入れない。

PREVIEW

文字・アイコンは見え方の確認用です。ダウンロード画像には含まれません。

この画像を取得

03 / GUIDE背景を選ぶときは、載せるものから考える

背景画像は、それだけで目立つ必要はありません。Webサイトなら見出しとボタン、PCならファイル名、スマホなら時計や通知が主役です。画像だけでは気に入っていても、文字を重ねると読みにくくなることがあります。このページでは、同じ画像に用途ごとの文字とアイコンを重ねて、使ったときの見え方を確かめられます。

横長と縦長は、別の構図で制作しています。横長の画像を中央で切り抜くだけでは、主役が消えたり時計の後ろへ重なったりします。横長版では左側に、縦長版では上側に広い余白を置きました。ただし、端末の画面比率や壁紙の拡大設定によって、見える範囲は変わります。設定したあとも時計やアイコンが読めるか確認してください。

Webサイトの背景として使う

各素材の「Web用のHTML・CSSを見る」からコードとWebPの横長・縦長を取得できます。画像はCSSファイルと同じフォルダーへ置いてください。HTML内のstyle要素にCSSを貼る場合は、HTMLと同じフォルダーへ画像を置きます。背景は640px以下で縦長に切り替わり、文字色も素材に合わせて設定されます。画像を別の場所へ置くときは、CSS内の画像パスを書き換えてください。

Web用には軽いWebPを選べます。背景を表示する要素に高さを決め、CSSのbackground-size: coverで領域を埋めます。coverは画像の一部を切り取るため、画面幅に応じて表示位置も調整してください。文字の下が明るくなりすぎる場合は、薄い暗色の面を重ねる方法もあります。見本の読みやすさだけで判断せず、実際の文章量と画面幅でも確認します。

PC・スマホの壁紙として使う

壁紙には、幅広い端末で扱いやすいJPGを用意しました。画像を保存し、端末の壁紙設定から選びます。横長はPC、縦長はスマホが目安です。ダウンロード欄に実際のピクセル数を記載しています。高解像度の画面では拡大表示になる場合があるので、輪郭や質感が用途に合うか確かめてください。端末への設定操作は、画像のダウンロードとは別です。

利用条件と生成プロンプト

掲載画像はAIで制作した架空の風景・抽象表現です。Vibehausが提供する画像は完全無料・著作権フリー（CC0）で、商用利用・改変・再配布ができます。クレジット表記は不要です。各画像の生成プロンプトも併記しています。同じプロンプトでも生成結果は毎回変わり、外部の生成サービスで作った画像には、そのサービスの条件が適用されます。

素材の追加に合わせてこの一覧を更新します。選択ダウンロードは、その時点の画像ファイルを取得してまとめるため、あらかじめ用意したセットを探す必要はありません。通信に失敗した場合は、選択を残したまま再試行できます。個別のダウンロードも併用してください。