【トレンド再熱中！】レトロなホームページのデザイン事例まとめ

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

この記事では、そんなレトロなデザインを作成するためのポイントを、事例も踏まえて紹介していきます。
これからホームページを作ろうと思っている方や、デザインに悩んでいる方の参考になる内容となっているかと思いますので、ぜひ最後までご覧ください。

今なぜレトロなデザインが良いの？

近年、「昭和レトロ」や「平成レトロ」という言葉が若者を中心に流行し、いわゆる「エモさ」を感じさせるようなコンテンツがブームとなっています。
懐かしさと温かみを感じさせるレトロな雰囲気が「癒し」や「安心感」を与えてくれるのが人気となった一つの理由のようです。
このブームに伴い、Webデザインでもレトロ感のあるデザインを多く見かけるようになりました。

今流行っているレトロデザインは古くてダサいイメージから払拭され、おしゃれなデザインとして認識されており、今後も様々な分野で活躍していくと予想されます。

この記事を参考にして、レトロなデザインを作成していきましょう！

レトロなホームページを制作する際のポイントとは？

レトロなホームページは、懐かしい要素を取り入れつつ、現代の技術と融合させることでおしゃれなデザインにすることができます。
事例を見ていく前に、レトロなデザインのホームページを制作する際に押さえておきたい以下の4つのポイントを解説します。

1. 時代設定を明確にする

2. レトロ感を感じるデザイン要素の選定

3. アニメーションや機能への工夫

4. 現代技術との融合

時代設定を明確にする

ひとことで「レトロ」と言っても、時代によってデザインの特徴が違うので、時代設定を明確にすると表現がブレずにデザインを作りやすくなります。

それぞれの年代の特徴はこのような感じです。

レトロ感を感じるデザイン要素の選定

フォントやグラフィック、配色など時代設定と合わせてレトロ感を感じるものを選ぶことも重要です。
ドットフォントや昭和風のポスター、ピクセルデザインや原色を組み合わた配色などとても特徴的な要素が多いので、作りたいホームページの目的からズレてしまわないように注意しましょう。

アニメーションや機能への工夫

懐かしさを感じる機能をあえて取り入れてみたり、昔ながらの構成を取り入れた設計にするのもレトロ感を出すためには有効な手段です。
メニューをサイドバーにしたり、ホバーでGIFが少し動く仕掛けをつけるなど工夫してみましょう。

現代技術との融合

見た目のデザイン要素はレトロでも、機能面まで古くなってしまっては使いづらいホームページになってしまいます。
レトロな要素は取り入れつつ、レスポンシブ対応などはしっかりと考慮した設計にしましょう。
また、現代的なアイコンやシンプルなアニメーションを用いて、レトロ感を持たせつつも新鮮さを取り入れたデザインにするのもおすすめです。

これらのポイントを抑えることで、より理想的なレトロなホームページを作成できます。
ポイントを意識しつつ、他社のホームページの良い部分を参考にして取り入れていきましょう！

飲食・食品系のレトロなホームページ事例

丸亀製麺 もちもち きもち 研究所

https://jp.marugame.com/mochi-mochi-lab/

丸亀製麺の特設サイトです。アニメーションやオブジェクトなど様々な要素から「もちもち」というテーマが伝わってくる楽しいホームページになっています。
昭和のポスターやパッケージで使われていたようなフォントや、柔らかさがありつつ少しコミカルなイラストなどがレトロ感を表現しています。非常に目を引く配色も参考にしたいポイントです。

しろプリン

https://himeji-pudding.com/

プリン専門店のしろプリン公式サイトです。現代的なデザインとレトロな要素が絶妙に融合しており、ユーザーに温かみと懐かしさを感じさせるデザインのホームページです。
サイトの各所に配置された手描き風のイラストやアイコンが、昭和の広告やパッケージデザインを彷彿とさせます。見出しで使われている丸みを帯びたフォントも昭和レトロを感じさせる雰囲気を演出しています。

ドラマチックカリー ゴールデン中崎

https://dramatic-curry.com/

スパイスカレー専門店 ドラマチックカリー ゴールデン中崎の公式サイトです。特徴的なフォントのタイポグラフィが印象的なデザインになっています。
写真のフィルム感や配色、ページ全体にかけられたノイズなどレトロ感にある要素を多く組み合わせていますが、モバイルファーストのデザインであったりシンプルなアニメーションを取り入れることで現代的なデザインと上手くバランスの取れている、参考にしたいホームページです。

お食事処 まんだら

https://www.yaohiko.co.jp/mandara/

名古屋市のお食事処 まんだらの公式サイトです。食材のシルエットを組み合わせて作られた名古屋城のイラストが印象的なホームページです。
落ち着いたゴールドを基調とした配色や、背景にさりげなくあしらわれたオブジェクトがレトロな雰囲気を演出しています。見出しに使われている少し線の繋がった筆運びが見えるフォントもシンプルながらもレトロな要素の1つとなっています。

雑貨系のレトロなホームページ事例

45R デニム祭り

https://45r.jp/ja/denim-matsuri/

45R デニム祭りの特設サイトです。ファーストビューの、ロゴのように組まれたデニム祭りの題字が目を引きます。藍染のような色合いと少し色褪せたような色味の配色が特にレトロ感を感じさせますね。カードデザイン部分も、シンプルながらグラデーションの色味にこだわりが感じられる素敵なホームページです。

COCOLO

https://cocolo-gift.jp/

様々なギフトサービスを提案するCOCOLO（ココロ）の公式サイトです。ファーストビューの大胆な風呂敷の柄がインパクトのあるホームページですね。
サイト全体を通してシンプルな構成ですが、柔らかさを感じる明朝体のフォントや色鮮やかな商品小物を写した写真、漢数字を使用している点など細かい要素で和風でレトロな雰囲気を演出しています。
レトロな雰囲気を少し取り入れたい場合などは、このホームページのように小さい要素などでデザインを取り入れると、上手くバランスが取れたデザインになるかと思います。

観光・建築系のレトロなホームページ事例

常陸国ロングトレイル

https://hlt.pref.ibaraki.jp/

茨城県北部の自然や歴史、文化を体感できるロングトレイルを紹介するために制作された常陸国ロングトレイルの特設サイトです。ホームページ全体を通して大胆に用いられたイラストが印象的です。
ページ中盤「郷土物語」のコンテンツの巻物や掛け軸のようなデザインや、「物語を探す」のコンテンツのテキストと写真を合わせたレイアウトが、レトロな要素と現代的なデザインを上手く融合させており、参考にしたいホームページです。

西武園ゆうえんち

https://www.seibu-leisure.co.jp/amusementpark/index.html

西武園ゆうえんちの公式サイトです。昭和レトロな世界観を現代風に表現した魅力的なデザインが特徴的で、ホームページを訪れただけで遊園地の世界観が伝わってきます。
サイト全体のデザインに昭和の時代を感じさせる要素が多く取り入れられており、訪問者に懐かしさを感じさせます。配色やイラストのタッチに合わせ、サイト内の写真も黄色味がかった色合いへ調節しイラストのように見える加工が施されているなど、徹底して世界観が創り上げられていて、細かい部分までのこだわりは参考にしたいポイントです。

その他のレトロなホームページ事例

caroa Web制作のための発注＆パートナーシップ構築ガイド

https://caroa.jp/design/book/web-partnership

caroa（カロア）のWeb制作ガイドページです。銭湯モチーフのデザインやノイズのかかったグラデーションがレトロ感がありつつも洗練されたデザインのホームページです。
イラストや配色は昭和の看板のようなデザインを感じますが、ページ内に出てくる吹き出しのデザインや「カロアについて」のセクションのアニメーションは現代的なデザインで新鮮な印象があります。銭湯に入っている人のイラストに少し動くアニメーションがついているなど、遊び心も感じられる楽しいデザインですね。

転職サファリ 今昔仕事図鑑

https://tenshoku-web.jp/retro-career/

転職サファリ 今昔仕事図鑑のランディングページです。サイト全体を通して、昭和時代を感じるレトロなイラストやカラーが使用されており、懐かしさや温かみを感じます。
文中にイラストを入れたり、カルタをめくることでモーダルが出現するなどの見ても触っても楽しい工夫が施されていて、思わず下まで読みたくなる構成ですね。このような細かい部分のこだわりを参考にして取り入れると、より魅力的なホームページになるかと思います。

まとめ

いかがでしたか？
今回は業界別に10個のレトロなホームページを紹介させていただきました。

まだまだレトロなデザインは流行りそうなので、今回ご紹介したそれぞれのホームページの特徴やデザインのポイントを参考にして、ホームページを作成してみてください。

最後までご覧いただきありがとうございました。

※このブログに掲載させていただいているサイトの掲載取り消しをご希望の場合はご一報ください。迅速に対応いたします。