レトロな雰囲気を出せる!ノイズを使った「グリッチエフェクト」のホームページ12選
Apple製品のRetinaディスプレイでWebサイトを閲覧したり、テレビの4K ウルトラハイビジョンテレビで番組を見たりすると、まるでその世界にいるかのような臨場感を楽しむことができます。
一方で、ブラウン管テレビのような効果をあえて活用するシーンもあります。
今では実物のブラウン管テレビを見る機会も減りましたが、ノイズやストライプを入れることで、レトロな雰囲気を醸し出すことができます。
このようにわざとノイズや歪みなどをいれて古風に仕上げる手法を*「グリッチエフェクト」*(gritch effect)と呼びます。
従来は映像編集に使われていた技法で、テレビ番組やミュージックビデオでたびたび使われています。
最近では、Webデザインの一環として採用されることも珍しいくありません。
今回は、ノイズやストライプを表現する「グリッチエフェクト」を取り入れたホームページをご紹介します。
ノイズを使った「グリッチエフェクト」のホームページ
1. Active Theory
Active Theoryはカリフォルニアに拠点を構えるクリエイティブエージェンシーです。
ホーム画面で流れる動画はやや低解像度になっており、1980年代のブラウン管テレビを思い起こします。
一方でAIを用いたモーショングラフィックやVRを活用したゲームなど、最先端技術を用いた制作実績を残しています。
2. VinylCuts
https://www.vinylcuts.nyc/show/splash/
マーティン・スコセッシ氏とミック・ジャガー氏が総監督を務める、HBOプロダクションのドラマVinylの週間ガイドの特設サイトです。
昔のテレビゲームを思わせるようなレトロなロゴを中心にグリッチエフェクトがかかっています。
サイトに入ると雑誌の一覧のような画面が出てきますが、そのジャケットをクリックするとさらにグリッチエフェクトを楽しむことができます。
3. Future Ready
オーストラリアのメルボルンにあるクリエイティブエージェンシーFuture Ready Businessのホームページです。
最先端の技術を使ってビジネスを加速させていく、というイメージにぴったりな、エメラルドグリーンをアクセントカラーにした幾何学模様が印象的です。
冒頭の線画にはたまにノイズがかかります。
4. MOZZ TOKYO
サイバーエージェントの100%子会社でWeb動画制作・プロモーションに特化しているクリエイティブプロダクションMOZZ TOKYOのホームページです。
赤と青の色の歪みが印象的で、背景動画に使われているアニメーションがポップです。
横スクロール、音声が出るのも最近のトレンドをうまく取り入れています。
5. Retrominder
retrominderは画面に現れた俳優や有名人、キャラクターを推測して当てていくゲームです。
トム・ハンクスやビル・ゲイツもいれば、聖闘士星矢やスーパーマリオなども登場します。
古風なビデオゲームのような画面が、ゲームのコンセプトに適しています。
6. Arkade London
Arkade Londonは、WebVJに特化したサウンドレーベルです。
ブルーの3Dブロックがまわりに据えてある空間で、ディスクのジャケットを交換しながら音楽を試聴することができます。
たまに歪みが入りますが、モダンなカラーリングとの相性も抜群です。
7. HAKUHODO Future Me
https://future.h-mp-recruit.jp
HAKUHODO Future Meは、広告代理店の博報堂が、博報堂生活研究所の「未来年表」データベースを用いて新卒採用のキャンペーンを行なっているキャンペーンページです。
顔写真をアップロードすると、独自の顔分析テクノロジーを使って、未来の自分と未来の出来事を予測するという面白いコンテンツを提供しています。
テレビらしさもありながら、ビッグデータ時代を想像させるようなインタラクティブな構成になっています。
8. YOYO
YOYOは、ロンドンとケントに拠点を構えるクリエイティブエージェンシーです。
冒頭に20世紀後半を思わせるようなアニメーションがわずかに出現します。
2回目以降は、モダンな円形の3Dオブジェクトがキャッチコピーとともに出現しますが、リプレイを押すとアニメーションを再びご覧になれます。
9. UN-T NAGOYA
デジタルエージェンシーUN-T(アンティー)の名古屋オフィスのホームページです。
冒頭の背景動画はストライプを使ってレトロに演出しながら、ハイパーラプスなども取り入れた面白い作品に仕上がっています。
10. OXOTA
ロシアのドキュメンタリー番組OXOTAのホームページです。
全体的にアウトローな世界観を演出しており、ノイズを挟むことで「危ない」匂いを演出しています。
11. BIOHAZARD 7 resident evil
http://www.capcom.co.jp/biohazard7/
Playstation VRでもリリースされたと話題のホラーゲームBIOHAZARD 7 resident evilのトレーラーサイトです。
空気中に漂う塵なども、事細かに非常にリアルに再現されています。
ノイズがかかったゲーム映像が全画面で表示されるので、ホラーが苦手なひとは閲覧にご注意ください。
12. AbemaTV RECRUIT
スマホ専用のテレビ局Abema TVのリクルートサイトです。
テレビ局というだけに非常に美しい動画が流れますが、あえてドットのフィルターをかけてスタイリッシュに仕上げている点がポイントです。
スクロールすると右側にエレベーターメニューが出てくるのも面白いですね。
- ディスプレイ
- ディスプレイ(display)とは、文字や図形を表示する装置のことを言います。 テレビと同じ原理のCRTディスプレイや、設置面積が小さく消費電力の少ない液晶ディスプレイや、ガス放電を利用したプラズマディスプレイなど、種類も多くあります。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- コンセプト
- コンセプトとは、作品やサービスなどに一貫して貫かれている考え方をいいます。デザインと機能がバラバラだったり、使い勝手がちぐはぐだったりすると「コンセプトが一貫してないね」などと酷評されてしまいます。
- 広告
- 広告とは販売のための告知活動を指します。ただし、広告を掲載するための媒体、メッセージがあること、広告を出している広告主が明示されているなどの3要素を含む場合を指すことが多いようです。
- データベース
- データベースとは、複数のアプリケーションまたはユーザーによって共有されるデータの集合体のことです。特定のテーマに沿ったデータを集めて管理され、検索や抽出が簡単にできるようになっているものを指します。
- キャンペーン
- キャンペーンとは、インターネット上のサイトにおいて、ファン数を増やし、購買行動を促すためにおこなう懸賞キャンペーンなどのマーケティング活動のことです。キャンペーンにはファン数を増やすだけでなく、ファン獲得以上のリアル店舗の来店者数を増やす、資料請求者を増やす、実際の購買を増やすなどの目的があります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- ビッグデータ
- ビッグデータとは、一般に、インターネットの普及とITの進化によって生まれた、事業に役立つ知見を導くためのデータのことを指します。「データの多量性」だけでなく、「多様性」があるデータを指します。
- キャッチコピー
- キャッチコピーとは、商品などの宣伝の際に使用される文章のことです。 宣伝をする対象のイメージや特徴を簡潔にまとめつつ、見た人の印象に残る必要があります。一言で完結するものから数行になる文章など、実際の長さはバラつきがあります。 キャッチコピーの制作を職業とする人のことを、「コピーライター」と言います。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
おすすめ記事
関連ツール・サービス
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング