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