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

Image Distortion Examples

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

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

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

1. Yuen Ye

Image Distortion Examples

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

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

Yuen Ye

2. Dallara Stradale

Image Distortion Examples

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

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

Dallara Stradale

3. Planetary

Image Distortion Examples

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

Planetary

4. Max Colt

Image Distortion Examples

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

Max Colt

5. Bizmates

Image Distortion Examples

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

Bizmates

6. Precision Run

Image Distortion Examples

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

Precision Run

7. Sass Café

Image Distortion Examples

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

Sass Café

8. Ada Sokol

Image Distortion Examples

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

Ada Sokol

おわりに

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

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

 

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

 

こちらもおすすめ!▼

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

33,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 33,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ