【Webデザイントレンド】レトロモダンスタイル

最近のWebデザインでトレンドとなっているのが、レトロモダンスタイルのデザインです。
レトロモダンスタイルとは、1980〜1999年頃に一般的だった配色や装飾を取り入れたちょっと懐かしいデザインと、最新のWebデザインスタイルを組み合わせたデザイントレンドです。こうした「懐かしいけどスタイリッシュ」と感じさせるデザインは、Webの領域だけにとどまらず、インテリアやファッションでも流行しており、今年を象徴するトレンドの一つといえそうです。

レトロモダンスタイルWebデザインのメリット・デメリット

では、レトロモダンスタイルでWebサイトをデザインした場合どのようなメリットとデメリットが考えられるでしょうか。
まずメリットは、懐かしさと先進感の両方を表現できる点です。流行しているとはいえ実際にトレンドを取り入れたページは少数ですから、ユニークなデザインで他社と差別化ができ、トレンド感の出たおしゃれなWebサイトとしてユーザーの印象に残るでしょう。
デメリットは好みが分かれやすい点です。レトロ、といってもわずか30年程度前になるので、懐かしさのさじ加減を間違うとただの古臭いデザインになってしまいます。スタイリッシュどころかただの流行遅れのデザインになるだけです。
またユーザビリティを損なわないようデザインにも注意が必要です。見た目の良さだけを重視するのではなくWebサイトの目的を果たせるかを考慮し、必要であれば分かりやすさ・使いやすさへの配慮も忘れないようにしてください。

レトロモダンスタイルに適したWebサイトの例

レトロモダンスタイルの特徴を理解したところで、どのようなWebサイトがレトロモダンスタイルに適しているのか具体例を示しながら考察していきます。
レトロモダンスタイルを効果的に使用しているWebサイトを3つ紹介します。

事例１：色でレトロモダン

メディアアートの教科書（http://www.idd.tamabi.ac.jp/art/museum/art_and_media_program/）

 
ぱっと見でインパクトのある、ビビットな色を組み合わせた配色のデザインになっています。
パソコンが家庭で普及し始めたばかりの頃、どのようなOS/デバイスなどのユーザー環境でも同じように表示される216色の「Webセーフカラー」でデザインされたWebサイトがたくさんありました。ちょっと目が痛くなるような配色のWebサイトを思い起こされる方もいらっしゃるのではないでしょうか。
Webセーフカラーは良く言えば鮮やか、悪く言えば「キツイ色」なのでWebセーフカラーだけしか使わないと当然、キツイ印象のデザインになってしまいます。
現在ではほとんどの環境でフルカラーに対応しているため、Webセーフカラー以外の色も自由に使えるようになりました。
 
背景のアニメーションも「こんなサイトあったな〜」と当時の記憶が蘇る、絶妙な塩梅です。
 

事例２：テクスチャーでレトロモダン

Enid.fm（https://enid.fm/）

こちらのサイトは打って変わって落ち着いた色合いのデザインです。
メニューをクリックすると通常のWebサイトのページ遷移とは異なり、コンテンツエリアがアコーディオンのように上方向に伸びて表示されます。Webサイトでありながら、紙面をめくってコンテンツを読んでいるような体験ができる仕様になっています。
よく見ると全体的にうっすら砂嵐のようなスタイルが適用されていて、古い映像を再生しているかのようです。写真にもノイズやぼかしを加えられており、あえて画質を落とすことによって古めかしさやレトロ感が表現されています。
一方で、文字を装飾するアニメーションや細い線で描かれたイラストなど最新の技術やスタイルも取り入れられ、まさにレトロとモダンが融合したWebサイトといえるでしょう。
 

事例３：ドット絵でレトロモダン

frank body（https://www.frankbody.com/us/）

90年代というよりも、80年代に近いですが昔懐かしのあのゲームを彷彿とさせる、ドット絵の装飾が印象的なWebサイトです。「ここぞ！」という重要なポイントだけでドット絵を使うことによって、効果的に視線を誘導しています。
レトロなモチーフを用いつつ、全体的にはすっきりとした今風のデザインになっています。
 

まとめ

トレンドのデザインを取り入れつつもWebサイト本来の目的を見失わずに、ユーザビリティに配慮しながら、魅力的なレトロモダンデザインを作ってみましょう。