”歪みエフェクト”を取り入れたWebデザイン事例8選。グリッチエフェクトの後継者！

2017年ごろから画像、動画、アニメーションなどに、「ザザザッ！」というノイズのようなグリッチエフェクトが積極的に取り入れられはじめました。

それから2年が経ち、グリッチエフェクトに変わって人気を集めているのが、画像全体をゆがませる「歪みエフェクト（ディストーションエフェクト）」です。

今回は、スライドの画面切り替え効果などにも活用できる、画像をゆがませる歪みエフェクトを取り入れたWebデザイン8選をご紹介します。個性豊かな事例をとおして、最新のトレンドをチェックしましょう！

1. Yuen Ye

最初にご紹介するのは、歪みをユニークに取り入れた事例。Webサイトにアクセスすると、背景画像がカーテンのようにたなびきます。

ミニマルなデザインにポイントで歪みを取り入れると、Webサイト全体が洗練された印象になりますね。

Yuen Ye

2. Dallara Stradale

イタリアの自動車メーカーであるダラーラ社が初製作したスポーツカー、『ダラーラ・ストラダーレ』の公式プロモーションサイト。

モダンでスタイリッシュなこのWebサイトに取り入れられているのが、スポーツカーには欠かせないスピードを感じさせる、幻想的な歪みエフェクト。スクロールすると画面をゆがませるこのエフェクトは、各項目の移動にインパクトを与えています。

Dallara Stradale

3. Planetary

ホーム画面のカルーセルに取り入れられた歪みエフェクトは、なめらかで目をひく美しいデザイン。液体をゆらしたような演出が印象的です。宇宙を彷彿させるグラフィックデザインは、惑星を意味する『Planetary』という社名を反映しています。

Planetary

4. Max Colt

世界的に有名なVFXプロデューサーであるマックス・コルト氏のポートフォリオサイトにも、歪みエフェクトが採用されています。1つ前の事例と同様に、カルーセルに液体をモチーフにしたエフェクトを取り入れているものの、すこし趣が異なりますね。

Max Colt

5. Bizmates

液体を思わせる歪みエフェクトが多いなか、こちらはひし形を中心とした幾何学的なデザインを採用しています。Webサイトに配置された幅広のパネルにぴったりですね。

Bizmates

6. Precision Run

静止画に歪みエフェクトをつけている事例もチェックしてみましょう。ダブルトーンの配色など、レトロな雰囲気の画像が印象的なこちらのWebサイトは、二重露光と組み合わせて歪みエフェクトを取り入れています。Webサイト全体に画像がうまくなじんでいますね。

Precision Run

7. Sass Café

液体のような歪みエフェクトを、ヒーローエリアに大胆に配した事例。「DINING」と「CLUBBING」という2つのキャッチフレーズのうえにカーソルを合わせると、ゆらめくエフェクトの焦点が合うデザインです。遊びごころを感じるデザインですね。

Sass Café

8. Ada Sokol

最後にご紹介するのは、個人のポートフォリオサイト。ヒーローエリアでカーソルを動かすと、グラフィックの痕跡がゆがんだ状態で残るというユニークなデザインです。こうした仕掛けがあると、滞在時間も伸びるでしょう。

Ada Sokol

おわりに

歪みエフェクトは目を引くデザインを加えらる上に、さまざまなスタイルになじむ優れもの。

グリッチなどと同様、スライダーに入れるのはもちろん、マウスカーソルと連携させるなど、幅広く活用してみてください。

執筆：Nataly Birch
翻訳：Nakajima Asuka
編集：はつこ

こちらもおすすめ！▼