画像を使わずテクスチャー表現!サイト高速化のすすめ【CSS・HTML・SVG】

まずは下の2つの「大理石のテクスチャー画像」を比べてみてください

 

 

実は、①の画像はフリー画像であり、②はHTMLなどのコードで書かれたものです。

どちらも汎用的に使えそうなテクスチャー素材ですが、注目すべき点は上の画像は1.1MBのデータサイズなのに対して、コードで書かれた方はわずか4KBの容量という点です。

背景や装飾に使っているテクスチャー用の画像素材が重たくなってしまい、動きが重くなっているサイトをしばしば見かけます。

そのような場合、これらのテクスチャーをコードで代替することで、大きな軽量化が図れるのではないかと考えました。

もちろん、画像の方が細かい表現ができる場合も多いので、一概に軽量化すれば良いというわけではありません。

しかし、サイトの動きに影響が出るほど重たければユーザビリティを損ないますし、GoogleのSEO評価基準にもマイナスの影響がありそうです。

そこで、今回は「画像を使わずにコードだけでテクスチャの表現をしてみる」という企画です。

サイト運営やコンテンツの最適化に対して、選択肢を増やすことができたら幸いです。

目次

大理石

まずは冒頭で紹介した大理石テクスチャーです。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

 

上のコードを見てみると、 HTMLの中に<svg>というタグを使っているのがわかります。

通常、〇〇.svgのような画像拡張子の形式で見かけることの多いSVGですが、実はSVGはHTMLのようなコードの記述で表現されているデータです。

そのため、HTMLデータの中にこのSVGタグを入れることで、CSSだけで表現するよりもテクスチャ表現が豊かになります。

IllustratorやPhotoshopといった画像編集ソフト以外でSVGを扱うことは少ないと思うので、簡単にSVGタグについて説明します。

–SVGタグについて–

最初のviewBox=”0 0 300 300″という部分は、座標と範囲の指定です。

[x軸座標、y軸座標、width、height]の順番です。

例の場合だと座標はデフォルトの中央値となり、サイズは300px×300pxということになります。

次のfilterというタグが、エフェクトの宣言をするようなタグです。

続くfeTurbulenceが実際のエフェクト内容をコントロールするタグになっていて、2つはセットで機能するようになっています。

基本的には、feTurbulenceの中にあるbaseFrequencyプロパティの値を操作していくことで、ノイズ粒子の細かさを決めて質感を表現していきます。

粒子の細かさを設定したら、白黒にするためにCSSでfilter: grayscale(100%)を指定します。

このあたりでかなり大理石に近づいてきます。

最後にbackground-colorの指定をカラーコードではなくrgbaの指定にして、灰色感の調整をすれば完成です。

コルクボード

次はコルクボードの表現です。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

 

これも先程の大理石と同様、svgのノイズフィルターを重ねています。

コルクボードの場合は粒子が細かい質感なので、baseFrequencyは細かめに設定し、それを背景の茶色に重ねます。

要素を重ねる場合はposition:absoluteやtransform:translateなどのCSSで重ねれば問題ありません。

あとはborderで縁をつけて、擬似要素で縁の影をつければ完成です。

具体的な活用として、チェキ写真を重ねて結婚式のウェルカムボードのようにする、といったことも可能です。

今度は麻のような和のテクスチャー表現です。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

 

麻のテクスチャーは、background: linear-gradientと、background-sizeの指定を組み合わせることで表現することができます。

質感表現が細かいので、CODEPENの1×の大きさで見ないと麻の質感が見にくいかもしれません。

まずメインであるareaには好きな背景色を指定します。

この際、後から麻のテクスチャーを重ねたときに色が薄くなるので、かなり濃いめの色を背景に用意しておくと、ちょうどよく色が映えます。

次に、別で用意したバックグラウンド要素をメインと同じサイズに指定して、重ねていきます。

CSSは例の通りでなくても少し値を変えてアレンジすることが可能ですが、background-sizeは縦横同じ値にしないと網目状が崩れてしまいます。

まとめ

以上のように、SVGやCSSを組み合わせることによって、様々なテクスチャーの表現が可能です。

他にもいくつかのテクスチャーの例を載せておきます。

See the Pen Untitled by shinobi (@shinobi-hattori) on CodePen.

 

全体的な共通点としては、色や質感のレイヤーを分け、opacityなどを駆使して重ねていくことで、よりリアルな質感になっていくという点です。

リッチな表現とサイト軽量化、どちらもバランスよく、目的に合わせて実装していきたいですね。

以上、ハットリがお届けしました。@hattori_shinobi

参考にさせていただいたサイト
https://coliss.com/articles/build-websites/operation/work/grainy-gradients.html
https://liginc.co.jp/376776