内容を読みやすくするための背景
薄いグリッドは、数値を作らずにダッシュボードの雰囲気を試したいときに使えます。ドットはページの見出し領域、ストライプはワイヤーフレームの画像予定領域、グラデーションは写真やイラストが未定の大きな画像枠に向いています。
Webページやデザインツールに使う
- パターンを選び、画像の幅と高さを指定します。
- 2色を選びます。文字を重ねる場合は、薄い背景色と近い色の模様から試してください。
- CSSをコピーしてスタイルに指定するか、SVGを保存してデザインツールに取り込みます。
- 同じ背景を編集してもらう場合は、設定リンクをコピーして共有します。
サイズと繰り返しの扱い
SVGには幅・高さ・viewBoxを設定しています。コピーするCSSでは、指定した幅と高さをbackground-sizeに使います。CSSの背景は初期状態で繰り返されます。1枚の画像で領域を埋める場合は、background-repeat: no-repeatとbackground-size: coverを追加してください。グラデーションを繰り返すと境目が見えるため、1つの連続した背景にはno-repeatを使います。
.placeholder-card {
/* 生成したbackground-imageをここに貼り付けます。 */
background-repeat: no-repeat;
background-size: cover;
}装飾で文字を読みにくくしないために
このツールは文字のコントラストを判定しません。背景の明るい部分と暗い部分の両方で文字を読み比べ、読みにくい場合は模様と背景の色差を小さくしてください。装飾にはCSS背景が使えます。img要素で純粋な装飾として置く場合はaltを空にし、意味のある画像には内容が伝わる代替テキストを付けます。
設定リンクで共有する内容
URLの#以降に、パターン・幅と高さ・色・間隔・太さ・角度を入れます。名前、アップロードしたファイル、外部の画像は含めません。生成はブラウザ内で行うため、保存したSVGをプロジェクトに置いて使えます。サイトのアクセス解析・広告と、生成する画像は別のものです。