はじめに ― 「色が動く」サイトという体験
通常のWebサイトは静止した背景の上にコンテンツが載っています。スクロールしてもページの色は変わりません。でも、『LIQUID（リキッド）』のページを開いた瞬間、あなたの画面にはネイビー、クリムゾン、イエロー、ターコイズが混じり合いながらゆっくりと流れる、生きた背景が広がります。
無料HTMLテンプレート『LIQUID』は、画面全体をグラスモードで覆うリキッドグラデーション（流体グラデーション）を背景に敷いたポートフォリオテンプレートです。15秒の周期で4色以上が滑らかに位置を入れ替え、同じ色の組み合わせは二度と再現されない。ページを開くたびに異なる表情を見せてくれる、一期一会のデザインです。
デザインの特徴とこだわり
リキッドグラデーション ― 止まらない色彩の呼吸
画面全体に固定された背景レイヤーには、紺、緋色、山吹、翡翠の4色が斜め45度に配置されたグラデーションが敷かれています。これが15秒周期で左上から右下へ、右下から左上へとゆらゆらと流れ続ける。しかも背景サイズは画面面積の4倍に設定されているため、色の移動範囲が極めて広く、同じパターンの繰り返しに見えにくいのです。
さらにこの背景には、フィルムノイズのテクスチャがうっすると重ねられています。デジタルグラデーション特有の「ヌルッとした滑らかさ」を適度に打ち消し、アナログな温度感を加える仕掛けです。
オーバーレイブレンドが生むアートな白文字
ヘッダーの名前や肩書きには「オーバーレイ」というブレンドモードが適用されています。これは背景色と文字色を合成する手法で、グラデーションの色味によって文字の見え方が微妙に変化します。背景が暗い位置では文字が透明感を帯び、明るい位置ではくっきりと浮かび上がる。文字が「景色の中に溶け込んでいる」ような独特の視覚体験です。
ギャラリー画像の「ガラス越し」感覚
ギャラリーの画像は初期状態で30%のグレースケールフィルターがかかり、透明度も80%に抑えられています。マウスを乗せるとカラーが100%に戻り、微かにズームする。この演出により、すべての画像がグラデーション背景とトーンの調和を保ちつつ、ホバーした1枚だけが「色を取り戻して」前面に出てくるような効果が生まれます。
こんな方・こんな用途におすすめ
デジタルアーティスト・モーションデザイナー
色彩と動きをテーマにした作品を扱うアーティストにとって、サイトの背景そのものがアート作品として機能する『LIQUID』は理想的な展示空間です。静止画のポートフォリオでありながら「動き」を感じさせる稀有なテンプレートです。
音楽アーティスト・DJのプロモーションサイト
流れる色彩はビジュアライザー（音楽の視覚表現）を連想させます。アルバムアートやライブ写真を並べれば、そのまま音楽活動の雰囲気が伝わるプロモーションページになります。
アロマ・化粧品・スパなどの感覚系ブランド
液体（リキッド）が溶け合うようなグラデーションは、アロマオイルやカラーコスメの世界観と自然に共鳴します。五感に訴えるブランドのイメージサイトとしても活用できます。
カスタマイズのヒント
グラデーションの配色を変更
デフォルトの4色は設定エリアで自由に変更可能です。ピンク×パープル×ブルーで「サイバーパンク風」に、アイボリー×ピーチ×モスグリーンで「ナチュラル風」に。配色だけでサイトのジャンルが完全に変わるのがこのテンプレートの面白さです。色の数そのものも増減可能で、2色にすればより落ち着いた波のような動きに、5色以上にすれば万華鏡のような華やかさになります。
ノイズテクスチャの強度調整
フィルムノイズの透明度を調整すると、サイトの質感が変化します。低くすればよりクリーンでモダンに、高くすれば古い35mmフィルムのような粗い温かさが加わります。
ギャラリーの段違い配置
ギャラリーは2カラムで構成されており、偶数列の作品が少し下にずれて配置される段違いレイアウトです。この配置が訪問者の視線を自然にジグザグに誘導し、すべての作品をまんべんなく見てもらう流れを作っています。ホバー時にはグレースケールが解除されてカラーに変わる演出も、作品への注目を集める工夫です。
まとめ ― 液体のように、形を変え続ける
『LIQUID』は、固定された「完成形」を持たないテンプレートです。背景は常に流れ、色は常に変化する。ページを開くたびに、昨日とは少し違う表情を見せてくれる。その「変化すること自体の美しさ」を愛するクリエイターに、このテンプレートを贈ります。
