フリーランスやおひとり法人のバックオフィス業務、大変だけど誰に何を頼めばいいの?
- コラム
- 個人事業主/ひとり法人で生きていくために大切なこと
- 連載
2017年ごろから画像、動画、アニメーションなどに、「ザザザッ!」というノイズのようなグリッチエフェクトが積極的に取り入れられはじめました。
それから2年が経ち、グリッチエフェクトに変わって人気を集めているのが、画像全体をゆがませる「歪みエフェクト(ディストーションエフェクト)」です。
今回は、スライドの画面切り替え効果などにも活用できる、画像をゆがませる歪みエフェクトを取り入れたWebデザイン8選をご紹介します。個性豊かな事例をとおして、最新のトレンドをチェックしましょう!
目次
最初にご紹介するのは、歪みをユニークに取り入れた事例。Webサイトにアクセスすると、背景画像がカーテンのようにたなびきます。
ミニマルなデザインにポイントで歪みを取り入れると、Webサイト全体が洗練された印象になりますね。
イタリアの自動車メーカーであるダラーラ社が初製作したスポーツカー、『ダラーラ・ストラダーレ』の公式プロモーションサイト。
モダンでスタイリッシュなこのWebサイトに取り入れられているのが、スポーツカーには欠かせないスピードを感じさせる、幻想的な歪みエフェクト。スクロールすると画面をゆがませるこのエフェクトは、各項目の移動にインパクトを与えています。
ホーム画面のカルーセルに取り入れられた歪みエフェクトは、なめらかで目をひく美しいデザイン。液体をゆらしたような演出が印象的です。宇宙を彷彿させるグラフィックデザインは、惑星を意味する『Planetary』という社名を反映しています。
世界的に有名なVFXプロデューサーであるマックス・コルト氏のポートフォリオサイトにも、歪みエフェクトが採用されています。1つ前の事例と同様に、カルーセルに液体をモチーフにしたエフェクトを取り入れているものの、すこし趣が異なりますね。
液体を思わせる歪みエフェクトが多いなか、こちらはひし形を中心とした幾何学的なデザインを採用しています。Webサイトに配置された幅広のパネルにぴったりですね。
静止画に歪みエフェクトをつけている事例もチェックしてみましょう。ダブルトーンの配色など、レトロな雰囲気の画像が印象的なこちらのWebサイトは、二重露光と組み合わせて歪みエフェクトを取り入れています。Webサイト全体に画像がうまくなじんでいますね。
液体のような歪みエフェクトを、ヒーローエリアに大胆に配した事例。「DINING」と「CLUBBING」という2つのキャッチフレーズのうえにカーソルを合わせると、ゆらめくエフェクトの焦点が合うデザインです。遊びごころを感じるデザインですね。
最後にご紹介するのは、個人のポートフォリオサイト。ヒーローエリアでカーソルを動かすと、グラフィックの痕跡がゆがんだ状態で残るというユニークなデザインです。こうした仕掛けがあると、滞在時間も伸びるでしょう。
歪みエフェクトは目を引くデザインを加えらる上に、さまざまなスタイルになじむ優れもの。
グリッチなどと同様、スライダーに入れるのはもちろん、マウスカーソルと連携させるなど、幅広く活用してみてください。
執筆:Nataly Birch
翻訳:Nakajima Asuka
編集:はつこ
こちらもおすすめ!▼
スプラッシュスクリーンでアプリ起動を劇的に!コードスニペット&事例19選
Workship MAGAZINE
火/炎を再現したコードスニペット8選。超リアルなエフェクトからイラスト風まで
Workship MAGAZINE
ネオン風Webデザイン事例12選!おしゃれなBARからSFチックなものまで
Workship MAGAZINE