背景を用意すると、本番の素材がなくてもカード、見出し領域、空の状態の雰囲気を試せます。まずは控えめな模様で、本文の配置も見やすい状態から始めます。AnyPlaceholderはドット、グリッド、ストライプ、グラデーションをブラウザ内で生成します。出力は図形と色で構成し、写真素材や画像生成APIは使いません。
1. 調べたい画面に合う模様を選ぶ
- ドット・グリッド：カードの周囲やダッシュボードの背景で、余白を試します。
- ストライプ：装飾の方向と密度を試します。
- グラデーション：見出しや広い領域の背面で、なだらかな色の変化を試します。
まず1200×630ピクセルで始め、背景色と図形の色を選びます。必要に応じて間隔、太さ、角度を変えます。グラデーションでは繰り返す図形がないため、間隔と太さは無効になります。実際に使う見出しやボタンの文字と並べ、設定を1つずつ変えて確かめてください。
2. CSSとSVGファイルを使い分ける
| 出力 | 使う場面 | 見るところ |
|---|---|---|
| CSS | 背景の指定をスタイルシートへ貼り付けたい場合。 | 生成された宣言をまとめて使います。SVGはdata URLに含まれます。 |
| SVG | 編集できるソースや、プロジェクトで版を管理するファイルが必要な場合。 | 保存したファイルやSVGソースを、SVG対応のツールで使います。 |
| 設定リンク | 他の人に同じ生成設定を開いてもらいたい場合。 | 編集画面へのリンクであり、画像そのもののURLではありません。 |
CSSを使う場合は、自分のスタイルシートにクラスを作り、その中へコピーした宣言を貼り付けます。要素の寸法は画面側のレイアウトで指定します。サイトのContent Security Policyでdata URLを許可していない場合は、SVGをプロジェクトへ保存して参照してください。背景を表示するためにポリシーを緩める必要はありません。
3. 狭い画面・広い画面・拡大表示で調べる
狭いカードと横長のバナーの両方に背景を当ててみます。模様が密になりすぎないか、縦横比が変わってもグラデーションの方向が合うか、本文が読みにくくならないかを調べます。SVG自体にも寸法があり、CSSでの拡大・切り抜き・繰り返しによって見え方が変わります。生成画面のプレビューだけで判断せず、使う画面で確認してください。
4. 情報を背景だけで伝えない
重要なラベル、状態、操作説明はページの本文として置きます。CSSの背景画像には支援技術へ伝える代替テキストがありません。画像自体が情報を伝える場合は、内容を表す画像と代替テキストを使ってください。背景の明るい部分と暗い部分で、本文やフォーカス位置を読めるかも調べます。
背景の描画とアクセシビリティ上の扱いは、MDNの background-imageの説明を参照できます。
5. ファイルを残してから設定を共有する
スクリーンショット比較やデザイン確認で見た目を固定したい場合は、SVGを保存してください。設定リンクは調整に便利ですが、生成処理は将来変わる可能性があります。プロジェクトにファイルと色・寸法を残し、別の案を作るために設定リンクも添えると再利用しやすくなります。前面に配置する画像には、 画像プレースホルダー生成を使えます。