リキッド・デザインは2010年代終盤に台頭した、流体や液体のように滑らかに形を変える有機的なビジュアル表現です。3Dレンダリング技術やWebGLの進化を背景に生まれ、アメーバ状の3Dシェイプ、水銀のようなクローム光沢、オーロラカラーのグラデーションが特徴。ハイエンドなブランドやテック企業のWebサイトで、静的な画面に圧倒的な動的プレミアム感を与えるトレンドとして進化し続けています。
リキッド・デザインとは？
リキッド・デザインは2010年代終盤から2020年代初頭にかけて、3Dレンダリング技術の急速な進化とWebGLやShaderアニメーションの普及を背景に注目を集めたデジタルデザインの表現傾向です。単一の確立したスタイルというよりも、WebGLアニメーション・メッシュグラデーション・リキッドクローム・フルードモーフィングなど、流体・液体的なビジュアルに共通する複数の関連潮流を総称する言葉として使われることが多く、固定された形を持たずに有機的に変形・流動する表現が特徴です。
視覚的に際立つのは質感の表現です。水銀のような金属光沢を持つリキッドクローム、ガラスや油膜を想起させる虹色の偏光、滑らかで粘性のある3Dグロス感が、高い没入感とプレミアム感を生み出しています。スクロールやマウスの動きに追従してリアルタイムに変形するインタラクションは、Three.jsやWebGLシェーダーなどの技術によって実現されます。現在もハイエンドブランド、テック企業、クリエイティブスタジオのWebサイトにおける先端のデザイントレンドとして継続・進化しています。
主な視覚的特徴
- 色クローム調のシルバー、変幻自在なオーロラカラー、ディープブラック、サイケデリックなネオン。近未来的なグラデーションと偏光色の組み合わせ
- 形アメーバ状の有機的シェイプ（Blob）、歪んだ球体、波打つ3Dメッシュ、表面張力で引き合う水滴のようなメタボール
- 構図流動的なオブジェクトを中央または背景全面に配置。スクロールやマウスストーカーに追従してレイアウト全体が歪む・波打くインタラクティブな構成
- 書体歪みに負けない太い幾何学的なサンセリフ体、または流体の動きに同期して文字自体が伸縮・変形するバリアブルフォント
- テクスチャ水銀のような金属光沢（リキッドクローム）、ガラスやプラスチックの屈折、油膜のような虹色の偏光、滑らかで粘性のある3Dグロス質感
- 技術WebGL・Three.js・Shadersを用いたフレームレートの高いリアルタイムインタラクション。動きそのものがデザインの一部を担う
配色パレット
このスタイルでよく見られる傾向のあるカラーパレットです。リキッド・デザインは多様な配色を含むため、あくまでも一例として実際のWebデザインやグラフィック制作の参考にお役立てください。
このスタイルを採用したブランド・作品
- WebApple（アップル） / 一部の製品プロモーションページで流体的な3Dグラフィックスやモーフィングアニメーションが用いられていると言及されることがある。ただしApple全体のデザイン言語としての位置づけとは区別が必要
- WebStripe（ストライプ） / オンライン決済サービス。Webサイトの背景に滑らかに波打ち変化するグラデーション流体（リキッド・グラディエント）を採用し、テック系モダンデザインの参照例として挙げられることが多い
- WebVercel（ヴェルセル） / 開発者向けデプロイプラットフォーム。Webサイトのヒーローセクションに滑らかに変化する流体グラデーションアニメーションを用いており、テック系リキッドデザインの参照例として挙げられることがある
AI生成プロンプト
このスタイルのビジュアルをAIで生成するためのプロンプトです。英語版はMidjourney・Stable Diffusion向け、日本語版はGemini・Adobe Fireflyで使いやすい形式になっています。そのままコピーしてお使いください。
英語プロンプト
日本語プロンプト
Webデザインへの応用ヒント
リキッド・デザイン的な表現は、テック系スタートアップやクリエイティブエージェンシーのポートフォリオ、ハイエンドアパレル・コスメの特設プロモーションページなどで用いられることが多いスタイルです。ただしWebGLや重い3Dアセットの多用はモバイルデバイスのCPU/GPUに過大な負荷をかけ、表示速度の低下やカクつきを招くリスクがあります。まず静止画のビジュアルとして表現し、モーションは段階的に追加していくアプローチが安全です。組み合わせるならグラスモーフィズムやサイバーパンクとの親和性が高いです。
