アナログなテクスチャを背景として美しく実装するには

ZEROBASEでウェブデザインとイラスト制作をしている kalo です。

ウェブサイトのデザインにおいて、フラットなベタ塗りやグラデーションだけでなく、「紙の繊維」や「水彩の滲み」といったアナログなテクスチャ（質感）を取り入れることで、よりクオリティの高い世界観を演出することができます。

しかし、ただキャンバスに描いた絵をスキャンしてウェブに貼り付けるだけでは、サイトの表示速度が極端に落ちたり、高精細なモニターで見たときに画質が粗く見えたりと、ユーザー体験（UX）を損なう原因になってしまいます。

今回は、イラストレーターとしての視点も交えつつ、アナログの繊細な美しさをウェブ上で「軽く、美しく、スマートに」実装するための最適解をご紹介します。

1. 書き出しは「2倍（2x）」にします

Figmaなどのデザインツールでウェブサイト全体のレイアウトを作成する際、基本となるキャンバス幅は「1920px（等倍/1x）」で設計します。しかし、テクスチャやイラストといった画像素材を書き出す（エクスポート）際は、必ず「2倍（2x）」のサイズで書き出す必要があります。

現在のスマートフォン（iPhoneなど）やPC（MacのRetinaディスプレイなど）は、非常に高精細なディスプレイを搭載しています。そのため、等倍の画像を引き伸ばして表示させてしまうと、水彩のエッジや紙の質感がぼやけてしまい、せっかくの美しいテクスチャが野暮ったい印象になってしまいます。表示領域の2倍のピクセルを持たせることで、アナログ特有の質感をうまく画面上で再現できます。

2. フォーマットは「WebP（ウェッピー）」一択

2倍のサイズで高精細な画像を書き出すと、当然ながらデータ容量は重くなります。重いサイトは離脱率を高め、SEOの観点でも大きなマイナスです。

そこで現在のスタンダードとなっているのが「WebP（ウェッピー）」という画像フォーマットです。
水彩の不規則なノイズや滲みは、JPEGで保存すると「ブロックノイズ」という汚い劣化が起きやすく、かといってPNGで保存するとファイルサイズが重くなってしまいます。WebPであれば、PNGのように背景を透過させつつ、JPEG並みかそれ以上にファイルサイズを劇的に軽く圧縮することができます。

3. CSSを駆使したインテリジェンスな実装

これが最も重要なポイントです。画面全体にアナログな質感を敷きたい場合、画面サイズの巨大な画像を1枚読み込ませるのは、Webデザインにおいてスマートとは言えません。

手法A：シームレスパターンのリピート
512×512px程度の「上下左右が繋がるテクスチャ画像」を作成し、CSSの background-repeat を使ってタイルのように敷き詰めます。これにより、どれだけ巨大なモニターで見ても画質は落ちず、データの読み込みは1枚の小さな画像だけで済みます。

手法B：mix-blend-mode による乗算
さらに高度で柔軟な手法として、「モノクロ（白黒）のテクスチャ画像」を用意する方法があります。

これをCSSの mix-blend-mode: multiply;（乗算）を使って、ベースとなる背景色の上に重ね合わせます。この設計の素晴らしいところは、「後からWeb上で背景色（カラーコード）だけを自由に変更できる」という点です。季節のキャンペーンなどでサイトのテーマカラーを変えたい時も、画像をいちいち作り直す必要がありません。