kaze風

Watermark

透かし表示

プレビュー

このコンテンツの上に透かしが表示されます。機密文書やプレビュー画面などに使用できます。

社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘社外秘

使いどころ

使う場面

社外秘、サンプル、下書きなど、内容の扱いを画面全体に示す
本文の読みやすさを優先して薄くする。既定の opacity は 0.08。濃くしても 0.15 程度まで
囲んだ領域の上に、クリックを通すかたちで重なる（pointer-events: none）。中の操作は妨げない

使わない場面

情報漏えいを防ぐ手段としての利用。画面の写真や DOM の操作で消せるので、抑止と注意喚起にとどめる
重要な内容の伝達。aria-hidden で読み上げられない。重要な状態は Badge や Alert で文字として伝える
広告やブランドの装飾。読みづらくなる

使い方

<Watermark text="社外秘">
  <div>コンテンツ</div>
</Watermark>

プロパティ

名前	型	デフォルト	説明
`text`必須	`string`	なし	透かしテキスト（必須）
`fontSize`	`number`	`16`	フォントサイズ（px）
`rotate`	`number`	`-22`	回転角度（度）
`gap`	`number`	`100`	透かし間の間隔（px）
`color`	`string`	なし	透かし文字の色
`opacity`	`number`	`0.08`	透かしの不透明度
`children`	`ReactNode`	なし	透かしを重ねる中身

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

ウォーターマークは aria-hidden で、支援技術には伝わらない。「社外秘」のような情報は、見出しや本文にも書く
テキストは userSelect: none で選択できない。コピーされる内容には影響しない

文言

text は短く（「社外秘」「SAMPLE」）。1 つの画面で複数の語を混ぜない