Apple製品のRetinaディスプレイWebサイトを閲覧したり、テレビの4K ウルトラハイビジョンテレビで番組を見たりすると、まるでその世界にいるかのような臨場感を楽しむことができます。

一方で、ブラウン管テレビのような効果をあえて活用するシーンもあります。
今では実物のブラウン管テレビを見る機会も減りましたが、ノイズやストライプを入れることで、レトロな雰囲気を醸し出すことができます。

このようにわざとノイズや歪みなどをいれて古風に仕上げる手法を「グリッチエフェクト」(gritch effect)と呼びます。
従来は映像編集に使われていた技法で、テレビ番組やミュージックビデオでたびたび使われています。
最近では、Webデザインの一環として採用されることも珍しいくありません。

今回は、ノイズやストライプを表現する「グリッチエフェクト」を取り入れたホームページをご紹介します。

ノイズを使った「グリッチエフェクト」のホームページ

1. Active Theory

1_activetheory.jpeg
http://activetheory.net

Active Theoryはカリフォルニアに拠点を構えるクリエイティブエージェンシーです。
ホーム画面で流れる動画はやや低解像度になっており、1980年代のブラウン管テレビを思い起こします。
一方でAIを用いたモーショングラフィックやVRを活用したゲームなど、最先端技術を用いた制作実績を残しています。

2. Cryptaris Mission

2_cryptaris.jpeg
http://www.cryptarismission.com

Cryptarisとはアメリカの陸軍が行なっている教養演習で、科学・技術・エンジニアリング・数学を通じて問題解決能力を鍛えていくトレーニングのことです。
このサイトではそのCryptarisに挑戦することができます。

画面全体にグリッチエフェクトがかかっており、まるでバーチャル空間でトレーニングを受けるSF映画のようでもあります。

3. VinylCuts

3_vynalcuts.jpeg
https://www.vinylcuts.nyc/show/splash/

マーティン・スコセッシ氏とミック・ジャガー氏が総監督を務める、HBOプロダクションのドラマVinylの週間ガイドの特設サイトです。
昔のテレビゲームを思わせるようなレトロなロゴを中心にグリッチエフェクトがかかっています。

サイトに入ると雑誌の一覧のような画面が出てきますが、そのジャケットをクリックするとさらにグリッチエフェクトを楽しむことができます。

4. Future Ready

4_futureready.jpeg
http://future.moworks.com.au

オーストラリアのメルボルンにあるクリエイティブエージェンシーFuture Ready Businessのホームページです。
最先端の技術を使ってビジネスを加速させていく、というイメージにぴったりな、エメラルドグリーンをアクセントカラーにした幾何学模様が印象的です。
冒頭の線画にはたまにノイズがかかります。

5. MOZZ TOKYO

5_mozz.png
https://mozztokyo.jp

サイバーエージェントの100%子会社でWeb動画制作・プロモーションに特化しているクリエイティブプロダクションMOZZ TOKYOのホームページです。
赤と青の色の歪みが印象的で、背景動画に使われているアニメーションがポップです。

横スクロール、音声が出るのも最近のトレンドをうまく取り入れています。

6. Retrominder

6_retrominder.jpeg
http://retrominder.tv

retrominderは画面に現れた俳優や有名人、キャラクターを推測して当てていくゲームです。
トム・ハンクスやビル・ゲイツもいれば、聖闘士星矢やスーパーマリオなども登場します。

古風なビデオゲームのような画面が、ゲームのコンセプトに適しています。

7. Arkade London

7_arkade.jpeg
http://arkade.london

Arkade Londonは、WebVJに特化したサウンドレーベルです。
ブルーの3Dブロックがまわりに据えてある空間で、ディスクのジャケットを交換しながら音楽を試聴することができます。
たまに歪みが入りますが、モダンなカラーリングとの相性も抜群です。

8. HAKUHODO Future Me

8_hakuhodo.jpeg
https://future.h-mp-recruit.jp

HAKUHODO Future Meは、広告代理店の博報堂が、博報堂生活研究所の「未来年表」データベースを用いて新卒採用のキャンペーンを行なっているキャンペーンページです。

顔写真をアップロードすると、独自の顔分析テクノロジーを使って、未来の自分と未来の出来事を予測するという面白いコンテンツを提供しています。
テレビらしさもありながら、ビッグデータ時代を想像させるようなインタラクティブな構成になっています。

9. YOYO

9_yoyodesign.jpeg
http://www.yoyodesign.com

YOYOは、ロンドンとケントに拠点を構えるクリエイティブエージェンシーです。
冒頭に20世紀後半を思わせるようなアニメーションがわずかに出現します。

2回目以降は、モダンな円形の3Dオブジェクトがキャッチコピーとともに出現しますが、リプレイを押すとアニメーションを再びご覧になれます。

10. UN-T NAGOYA

10_unt.jpeg
http://www.un-t.com/nagoya/

デジタルエージェンシーUN-T(アンティー)の名古屋オフィスのホームページです。
冒頭の背景動画はストライプを使ってレトロに演出しながら、ハイパーラプスなども取り入れた面白い作品に仕上がっています。

11. OXOTA

11_oxota.jpeg
http://tv-oxota.ru

ロシアのドキュメンタリー番組OXOTAのホームページです。
全体的にアウトローな世界観を演出しており、ノイズを挟むことで「危ない」匂いを演出しています。

12. BIOHAZARD 7 resident evil

12_biohazard.png
http://www.capcom.co.jp/biohazard7/

Playstation VRでもリリースされたと話題のホラーゲームBIOHAZARD 7 resident evilのトレーラーサイトです。
空気中に漂う塵なども、事細かに非常にリアルに再現されています。

ノイズがかかったゲーム映像が全画面で表示されるので、ホラーが苦手なひとは閲覧にご注意ください

13. AbemaTV RECRUIT

13_abema.jpeg
https://recruit.abematv.co.jp

スマホ専用のテレビ局Abema TVのリクルートサイトです。
テレビ局というだけに非常に美しい動画が流れますが、あえてドットのフィルターをかけてスタイリッシュに仕上げている点がポイントです。
クロールすると右側にエレベーターメニューが出てくるのも面白いですね。

まとめ

一口にノイズがかかっているとは言っても、単に懐かしいレトロな世界観を演出するだけでなく、場合によっては不安恐怖を演出するのにも向いています。

もともとは映像編集に使われていたので、画像や映像に使うのが効果的です。

今回はあまり紹介できませんでしたが、もし気軽にグリッチエフェクトを試してみたいのなら、myGlitch.js(Github / CodePen)を使ってみてください。
わずかなコードでグリッチエフェクトを実装することができます。