流行は繰り返すものです。少なくとも、Webサイトデザインにおいてはそうでしょう。
数十年前のデザインコンセプトが、現在のデジタルの世界で影響を与えています。つまり、印刷物のために作られたアイデアやデザインが、デジタルの世界で復活しているのです。
レトロなデザインスタイルが効果的なのは、ユーザーが視覚的なノスタルジアを感じるからです。ノスタルジアと現代のインターフェイスやユーザーパターンを組み合わせれば、ユーザーは間違いなく操作したくなるでしょう。
実際にレトロモダンデザインはその人気からニューヨークタイムズ紙からも注目されています。
1990年代半ばから2000年代初期にかけて生まれたミレニアル世代やジェネレーションZは、AltaVistaやGeoCitiesが使われていた時代のインターネットを覚えていないかもしれません。しかし、レトロデザインは、昨今の90年代カルチャーの再燃に乗じています。『Twin Peaks』や『Will & Grace』といったTV番組のリメイクや、90年代のバンドTシャツの人気を見れば自ずとわかるでしょう。
さらに上の世代にとっては、それらのサイトは、彼らが若かった頃のインターネット、つまりモバイルに最適化され、ベータテストによってUIが現在のWebデザインのようにすっきりと統一される前のインターネットを思い起こさせます。
ダイアルアップ接続のモデムの時代を真似たようなノスタルジックなWebサイトは、おしゃれでテクノロジーギークなオンラインコミュニティで人気を博しているのです。
それでは、レトロモダンデザインのトレンドとはどのようなものか見ていきましょう。
時代の逆行
実は、レトロにはさまざまなものが含まれます。現在もっとも流行っているレトロモダンデザインの１つは、1980年代と1990年代を彷彿とさせるデザインです。（もっとも、レトロと呼べるほど昔のことではないではないと思う人もいるかもしれません。）
また、配色に関して、1970年代を参考にするデザイナーもいます。
レトロデザインの魅力は、書体やファッション、出来事に加えて、初期のコンピュータの要素を参考にできることです。たとえば次のようなものがあります。
- 1990年代：この年代の特徴としては、大胆なアニメーションの色で塗られた太字や、情報を伝えるためだけの最小限のデザインなどが挙げられます。当時のデザイナーは、ビジュアルやグラフィックデザインの新しいデジタル時代を迎える中で、自身のスタイルを確立しようとしていました。
- 1980年代：画面の解像度が上がり、MTVやビデオゲームの鮮やかなネオンカラーは、この年代のデザイン要素に強い影響を与えました。
- 1970年代：落ち着いた色と太字の書体が、主に印刷物のデザインではユーザーの注目を集めていました。ただ、テレビ画面はこの限りではありませんでした。
どのようなレトロスタイルを機能させるにしても、インターフェイスが現代のユーザビリティ基準を満たしていなければなりません。これから紹介する控えめなカラーパレットのハンバーガーメニューや、簡単なスワイプアクションを使ったピクセルゲームといった例では、実際に新しい要素と古い要素が共存している様子がわかるでしょう。
古風なタイポグラフィ
凝った筆使いと色使いで、大きな太字のレタリングは、一瞬でユーザーを懐かしい気分にさせます。太い線で粗削りな筆記体のスタイルでも同様の効果があるでしょう。
この２つのスタイルが再び注目されている理由は、レトロなタイポグラフィの人気が再燃しているからです。こういったWebサイトデザインの多くは、注目を集める映画ポスターのようなスタイルを手本にしています。
こういった古風な字体をもっとも効果的に使うためには、そのほかのタイポグラフィはシンプルにするべきです。装飾目的で１つレトロな字体を選んだら、本文は読みやすいように、シンプルなセリフ体かサンセリフ体を使ってください。
このような古風なタイポグラフィと古いスタイルの画像を組み合わせてみてはどうでしょうか。レトロな字体には、現代的すぎる画像と組み合わせると奇妙に見えるものもあります。レトロスタイルで重要な点の１つは、その時代の気分を呼び起こすことだということを忘れないでください。上記の例はどちらも、ドットを使った写真や映像が流行っていた1970年代や1980年代のデザインスタイルにタイポグラフィを組み合わせるために、画像のドットゲインが大きくなっています。
くすんだ色使いか鮮明な色使いか
フラットデザインとマテリアルデザインによって派手な色が再び人気を集めていますが、レトロモダンデザインでは逆に、落ち着いた色相やオーバーレイを使う傾向にあります。
赤系、黄色系、オレンジ系が特に有名です。1970年代や80年代の雰囲気を出したいのなら、青系や緑系の色は淡くなります。こういった色の選択肢の多くは、実際の写真よりも、イラストなどの画像と組み合わせられます。
しかし、昔にタイムスリップするには、色だけでは足りないこともあります。その場合、ほかの視覚的な刺激が必要になります。
1990年代初期の雰囲気を出すネオンカラーを使ってみてください。かすかな動きよりも、強めのぎらぎらしたアニメーションを使えば、ユーザーはどの年代を訪れたのか確実にわかるでしょう。しかし、この系統の色はノスタルジア以外の場面でも使われることが多いので、タイポグラフィやテクスチャ、勾配といったほかの視覚的な要素と組み合わせる必要があります。
テクスチャとグラデーション
現在と過去のデザインを結びつける際に、背景のパターンは大事な視覚的要素になり得ます。数年前に流行ったばかりの、スキュアモーフィックデザインを覚えていますか？
テクスチャとグラデーションにおいては、異なる２つのスタイルがあります。
- Webサイトに現実の質感を再現するために、デザインにテクスチャをたくさん盛り込んだスタイル
- デザイン要素を最小限まで省いた、ミニマルなスタイル
どちらのスタイルも便利で、活用する方法はたくさんあります。しかし、凝ったテクスチャをたくさん使うと暖かく快適な雰囲気になり、逆にミニマルなデザインは固く冷たい雰囲気になるというように、まったく異なる雰囲気に仕上がります。
テレビゲームスタイル
テレビゲームと聞いて、「スーパーマリオブラザーズ」を思い浮かべる人はどのくらいいるでしょうか？ このように連想する人が多いことが、テレビゲームスタイルのレトロデザインパターンが人気な理由の１つでもあります。
HDの要素があふれる現代の世界において、わざとピクセルの荒いスタイルを用いれば注目を集めます。
上記の２つは、このようなテレビゲームのノスタルジアを異なる方法で用いた事例です。The Most Decisive Gameは、古めかしい直線的なデザインですが、時代遅れのインタラクションはありません。Leonardi’s portfolioには昔ながらのマリオブラザーズのような色や雰囲気が使われていますが、画像の線は滑らかですっきりしており、現代風に仕上がっています。
どちらのWebサイトも、古い要素と新しい要素を上手に組み合わせて、レトロモダンの効果を実証しています。
「醜い」グラフィック
現在ユーザーが使い慣れているような洗練されたスタイルのWebサイトが作られる以前には、たくさん質の悪いWebサイトデザインが存在しました。では、そのような醜いグラフィックを魅力的に思うことはあるのでしょうか？
そのような醜いデザインを好むユーザーもいるのです。
昔のようにテレビがチカチカするを見ると、瞬時に懐かしい気持ちになります。この懐古する感情が、デザイナーが「醜い」スタイルを活用すべき理由です。このような画像に胸がときめくユーザーはたくさんいます。
「醜い」デザインが新鮮であり続けるのは、昔のデザイン対する感情、つまり最新のクリックやタッチアクション、ナビゲーションなどのユーザー要素を操作することで昔にタイムスリップしたいという欲求があるからです。Everything Nowではビデオの視聴、iTunesやSpotifyのダウンロード、コンサートの日付の確認が１回のクリックで実行できます。
Retro Minder TVは、素早く問題が出題されるクイズサイトです。過去の画像とモダンなゲーミフィケーションを駆使することで、すぐに良い結果を出したいというユーザーに共通する欲望をそそります。
まとめ
モダンなレトロは、少し風変わりなトレンドです。
レトロデザインを効果的に使うには、ただ古臭く見えるだけのデザインにならないよう、現代の要素を織り交ぜることが必要です。Million Dollar Homepageのようなページを作りたいとは思わないでしょう。
メッセージが伝わりやすくなるように、ノスタルジアを想起させる画像とデザインスタイルを使うよう心掛けてください。そして、ユーザーの感情を動かし、デザインの操作方法を簡単に理解することができるように、現代のフレームワークを使ってデザインをしましょう。
もしレトロデザインを追求したいと考えているのであれば、真似したいスタイルと年代を具体的に選ぶことが大切です。上記の例をすべて混ぜ合わせるようなことは避けましょう。１つ確かなレトロデザインを選べば、それだけで十二分です。
また、すべてのレトロモダンスタイルが、いつでもどのブランドにも効果的であるわけではありません。そのため、このトレンドは、小さなブランドのWebページやマイクロサイトに最適でしょう。現在のトレンドが将来的にレトロデザインとして流行するかもしれません。適切なビンテージスタイルを選べるように、そのようなトレンドの変化を敏感に感じ取ることも重要です。
