Hero Patternsの使い方｜方眼の背景と読みやすい説明を分ける

今回の使用例

Hero PatternsはSteve Schoger様の繰り返し背景用SVG素材集です。今回はGraph Paperの未装飾SVGを選び、背景へ配置しました。文字は白い面に分け、模様そのものへ直接重ねない自作例です。

Graph Paperを背景へ配置し、白い面の上で説明を読めるようにした自作例 — SVGを実際に読み込んだ画面です。模様の表示と非表示、100pxと200pxのサイズ変更を確認しました。タップして拡大できます。

Graph Paperを保存する

公式サイトのGraph Paperを選びます。
開いた画面で素材名がGraph Paperになっていることを確認し、「Download unstyled SVG」を押します。
保存されたgraph-paper.zipを展開します。今回使うファイルはgraph-paper.svgです。補助フォルダーの__MACOSXは作例に含めていません。
HTMLとSVGを同じフォルダーに置き、背景として読み込みます。作例ではSVG自体を変更せず、CSSで不透明度を0.18にしています。

Hero PatternsでGraph Paperを選び、SVGダウンロードへのリンクを開いた実画面 — 公式ページの選択画面。ZIPの実ファイルを保存し、SVGの内容を確認しました。タップして拡大できます。

.pattern {
  background-image: url("graph-paper.svg");
  background-repeat: repeat;
  background-size: 100px 100px;
  opacity: .18;
}

文字も同じ要素へ置くと、opacityで文字まで薄くなることがあります。今回の作例は模様専用の層へ指定し、その上の説明文は白い面に置いています。200pxへ切り替えるとSVG1枚の表示が大きくなるので、方眼の間隔も広がります。

作者・出典・変更内容を残す

公式サイトの素材ライセンスはCC BY 4.0です。作者、出典、ライセンスへのリンク、変更した場合の説明を残します。この作例では「Graph Paper — Steve Schoger / Hero Patterns、CC BY 4.0。SVGは変更せず、CSSで不透明度と表示サイズを変更」と記しました。

クレジットのテキストとライセンス全文をZIPにも同梱しています。自作HTML・CSS・JavaScriptはCC0ですが、元のSVGをCC0へ変更していません。作者がこのサイトを推薦しているような表現も避けます。

2026年10月17日、PCで素材選択・公式ZIP保存・展開・SVGの配置・模様の切り替え・サイズ変更を確認しました。スマホ実機、全素材、全ブラウザでの表示は未確認です。最近の流行や作者のAI利用は断定しません。