Blog スタッフブログ

WEB制作 デザイン

【WEBデザイン参考】どこか懐かしい!レトロモダンなWEBデザイン参考サイトまとめ【2023年版】

こんにちは、デザイナーのMです。

80年代~90年代風のノスタルジックなお洒落さが魅力的なレトロモダン系のデザイン。デザインに「レトロ」を取り入れる流れはここ数年でぐっと加速し、公共交通機関内や街中のポスターなどの広告、ホームページのデザイン、パッケージデザインなどでよく使用されています。

 

レトロモダンでよく採用されるデザイン

  • 80年代後半~90年代頃によく見られたビビットなカラー
  • 線が強調されたグリッドやフォント、イラスト
  • 手書き文字のような表現
  • 抽象的な幾何学図形
  • 書体やブロックに入るパキッとした影

現在(未来)の新しさと過去のノスタルジーを融合し、現代感覚で再構築して表現される「レトロモダン」は、高年層の郷愁だけでなく若年層の一周回った新鮮味をかきたて、エモーショナルな感情を呼び起こします。

 

レトロモダンが合うWEBサイト例

レトロモダンは特定の年齢層や性別、職業に限定されず、幅広い層の人々にポジティブに受け入れられるデザインなので、「昔ながら」「積み重ねた歴史」「懐かしさ」「ローテク」「不完全さ」「素朴さ」といった要素を活かしたいときにとても親和性が高いと言えます。

  • 長い歴史を持つ飲食店
  • 昔の建物のリノベーション
  • ファッション業界
  • 地方創生の促進
  • レトロなゲームや音楽 など
 

今回の記事では、そんな80~90年代のレトロデザインイメージをWEBデザインで活用しているページをいくつかまとめてみました。レトロモダンなホームページをデザインする上で参考になるホームページがたくさんありますので、よければ参考にしてみてください。

では、さっそく見ていきましょう!

 

※記事は2023年7月現在の内容になります。

 

ほろよい | サントリー

チューハイのほろよいシリーズについて紹介しているページ。手書き感のあるイメージが可愛い。モバイルファーストデザインが現代的でもあり、面白いサイトです。

ほろよい | サントリー

 
 

信州大学農学部 受験生向けサイト パカパーン!

ラボワークとフィールドワークを融合した教育を紹介する信州大学農学部のページ。ビビッドで少しサイケデリックなイメージとフォントがインパクト大です。

信州大学農学部 受験生向けサイト パカパーン!

 

FREAK MAG.

みんなの「好き」を集めて深める、新たな興味と関心を取り扱うウェブメディア。雑誌っぽさのある、独特な世界観に合うデザインとレイアウトが素敵です。

FREAK MAG.

 

札幌PARCO GO scramble SO ramble

札幌最大級のサウンド&ポップカルチャー、札幌PARCO7階の紹介ページ。パキッとしたグリッド、フォントや色使いがメリハリを効かせていてお洒落です。

札幌PARCO GO scramble SO ramble

 

CHAI GLOBAL

名古屋出身女性4人組バンドCHAIのグローバルオフィシャルサイト。テクノポップなカラーリングや幾何学的なメンフィススタイルといった視覚要素が心をくすぐります。

CHAI GLOBAL | ニュー・エキサイト・オンナバンド!NEOかわいい!コンプレックスはアートなり!

 

ニュー北九州シティ

北九州独自のストリートカルチャーを発信するメディアサイト。シティポップ調でキュートなキービジュアルのインパクトを中心に、サイトが構成されています。

ニュー北九州シティ | 古くて、新しい。未来につながる北九州カルチャーメディア

 

DENTSU INC. RECRUITING 2024 – 電通 新卒採用サイト

電通の2024年度新卒採用ページ。ラインアートや賑やかなビビッドカラーが個性的で可愛い。アニメーションで現代的な要素もちりばめられており、画面が楽しいです。

DENTSU INC. RECRUITING 2024 – 電通 新卒採用サイト

 

本と美容室

出版社アタシ社の新ブランド「本と美容室」の展開について紹介するページ。ノイズやグランジの効いたイラストがプロジェクトのコンセプトと非常にマッチしています。

本と美容室|美容室とセレクト書店を、面白きローカルへ

 

ディスプレイモニタの多い喫茶店

ディスプレイモニタやキーボード等の機材が揃う、みなとみらいの喫茶店紹介ページ。飾り枠と大きな写真を組み合わせることで、お店の魅力を大きくアピールしています。

ディスプレイモニタの多い喫茶店 | 横浜みなとみらい UNI COFFEE ROASTERY

 

リンゴアメ専門店 林檎堂

プロの目利きで本当においしい林檎を厳選するリンゴアメ専門店のページ。ノスタルジックな色とフォント、太めの線で区切られた表現が絶妙なコントラストを生んでいます。

リンゴアメ専門店 林檎堂

 

日本大学理工学部建築学科

学科や研究室の紹介、就職情報等を扱う日本大学理工学部建築学科のWEBサイト。セクションやリンク等をグリッドやそれぞれのテーマカラーで区切っていて分かりやすいです。

日本大学理工学部建築学科

 

いざ、居酒屋。ネオイザカヤ | niko and …

アパレル、飲食等を展開する「niko and …(ニコアンド)」による居酒屋企画のサイト。クラシックなピンク色と水色がパキッとしていてとっても可愛い!目にも楽しいサイトです。

いざ、居酒屋。ネオイザカヤ | niko and …

 

【公式】uniam(ユニアム)

美味しいも健康もこの一食で得られる、猫専門フレッシュフードuniam(ユニアム)公式サイト。ミニマムさとレトロな色使い、写真、イラストのバランスが絶妙です。

【公式】uniam(ユニアム) – 獣医師・栄養士監修ねこ専門のフレッシュフード

 

Large Diversity Songs|L&PEACE|フォーエル

大きいサイズのファッション専門店「フォーエル」の“多様性”のプロジェクトサイト。多数の情報量をフォントやあしらいで雑誌風にまとめています。賑やかなのに見やすい!

Large Diversity Songs|L&PEACE|フォーエル

 

 

いかがでしたでしょうか。
若者にとっては新鮮で、当時を知る人には郷愁を誘う……という良いとこどりが出来る「レトロモダン」は、幅広い世代にポジティブに受け入れられやすいため、ここ数年、様々なデザインの場面で見かけます。

……とはいえ、Z世代と呼ばれる若者が生きる「令和」という時代も、時が進めばいずれレトロモダンに組み込まれる時代が必ず来ると思うと、年月の巡りは面白いなあと思います。

世の中の流行りと最新の技術を絶妙の塩梅で組み合わせることで、トレンドをうまくWEBデザインに取り入れていけたらよいですね。この記事が少しでもその助けになっていれば幸いです。

 

大阪を拠点にWeb制作、アプリ開発、システム開発を行っている株式会社MIXでは、デザイン×テクノロジー×マーケティングにより、お客様の様々な課題にお応えすることが可能です。
地域密着型の制作会社として、Webデザインやチラシデザイン、アプリ開発、システム開発、キャラクターデザインなどの幅広い制作経験が多数ございます。ホームページの立ち上げまたはリニューアルをご検討中の方や、便利なアプリケーションやシステムが欲しいとお考えの方は、是非一度お気軽にご相談ください。
お打ち合わせは対面・非対面の両方に対応可能です。

株式会社MIXへのお仕事のご相談・ご依頼はこちらから
https://mixltd.jp/contact/