レトロなホームページの作り方とは？初心者でも簡単にできるデザインのコツと年代別の特徴

ホームページをはじめとするネット上のコンテンツにおいて、昭和や平成といった懐かしいのに新しい、古き良きデザインを取り入れるケースが増えています。シンプルなHTMLだけで再現できる手軽さもあれば、WordPressを使って今風にカスタマイズする方法もあります。

しかしながら、どんな要素を選び、どう取り入れれば古臭いではなく、レトロでおしゃれに仕上がるのか、迷いがちなポイントです。

この記事では、年代ごとのレトロデザインの特徴から、実際に使えるデザイン要素、そしてホームページやブログに落とし込む具体的な方法まで、順を追って紹介します。はじめて挑戦する方でも安心して楽しめるよう、わかりやすくまとめました。

なぜ今「レトロなホームページ」が注目されているのか

インターネットが広がりはじめた90年代。色鮮やかな背景や動くGIF画像、訪問者カウンターといったデザインは、当時の象徴ともいえるものでした。ところが近年、これらの要素をあえて取り入れた「レトロなホームページ」を見かけるようになってきました。

理由はいくつかありますが、大きく分けて次の2つがあげられるのではないでしょうか。

• 懐かしさ
  幼いころや学生時代に触れた雰囲気を再び体験できるという安心感があります。
• 個性
  整然とした現代のテンプレートサイトの中で、レトロデザインは強烈な印象を残します。単なる古さではなく「遊び心」や「オリジナリティ」として評価されているのです。

レトロなデザインにはどんな種類があるのか？年代別の特徴まとめ

「レトロ」とひとことで言っても、時代ごとに雰囲気は違います。90年代初期の素朴さと、2000年代のきらびやかさでは印象が大きく変わるのです。ここでは代表的な年代を3つに分け、それぞれの特徴を紹介します。

1. 90年代前半：初期の素朴さ
2. 90年代後半～2000年前半：個人サイト文化とFlash全盛
3. 2000年代後半：Web2.0的レトロ

1. 90年代前半：初期の素朴さ

インターネットが一般に広がりはじめた頃のホームページは、とにかくシンプル。テーブルレイアウトでページを分割し、背景にはタイル状の壁紙画像を敷き詰めるのが定番でした。キラキラと点滅するGIF画像や「工事中」アイコンもよく見られました。素朴で荒削りですが、独特の温かみを感じさせます。

2. 90年代後半～2000年前半：個人サイト文化とFlash全盛

少し時代が進むと、個人が趣味で作ったホームページがブームに。ボタン風の画像リンクや、BGMが流れるページも多く登場しました。さらにFlashが普及し、アニメーションや派手な動きが加わります。独自性を競い合う文化が盛んだったため、遊び心のあるデザインが豊富でした。

3. 2000年代後半：Web2.0的レトロ

この時期は「シンプルさ」と「光沢感」の両立がキーワード。角丸のボタン、グラデーション、ドロップシャドウがあしらわれたWeb2.0風のボタンが象徴的です。SNSやブログ文化が加速し、タグクラウドやRSSアイコンといった要素もホームページの顔になっていました。現在見ると懐かしくもあり、新鮮にも映ります。

レトロなホームページを作る手順

レトロデザインを取り入れるときは「どの年代の空気感を再現したいのか」を最初に決めるのが大切です。そこから選ぶ要素や演出方法が変わってきますので、次の手順で、ひとつずつ取り組んでみましょう。

1. ターゲット・目的を明確にする
2. レトロデザインの年代を決める
3. 必須コンテンツを決める
4. コンテンツの配置を考える
5. デザイン要素を考える
6. ホームページを作成する手段を決める

1. ターゲット・目的を明確にする

誰に見てほしいのか、見た人にどう感じてほしいのかが決まると、トーンも要素も迷いません。問い合わせや購入を後押ししたいのか、物語を伝えたいといった目標が決まれば、ボタンの配置の仕方や導線も自然と見えてきます。作成するジャンルや業種に合わせて明確にしましょう。

2. レトロデザインの年代を決める

90年代前半の素朴さか、Web2.0の光沢感かなど、年代をひとつに絞り、参考にするホームページや当時のデザインを3〜5例集めてみましょう。配色、フォント、装飾の「やること」と「やらないこと」を分類し、過剰になりそうな要素は抑えるなど、懐かしさと使いやすさの境目を先に定義しておくと失敗しにくいです。

3. 必須コンテンツを決める

土台がないと、デザインが良くても情報が伝わりません。ブランドのホームページならトップ、製品やサービス、ストーリー、ニュース、問い合わせ。ブログやメディアなら記事一覧、カテゴリ、タグ、プロフィール、検索のように、まずは必須の項目を確定しましょう。後から「あると楽しい」レトロ要素を足す順番で考えると情報の優先度が整理され、迷いが減ります。

4. コンテンツの配置を考える

洗い出したコンテンツをトップに表示するのか、下層ページに表示するのかなど、おおまかな配置を考えます。
また、90年代風なら左ナビ＋右本文、ブログやメディアなら本文＋サイドバーの2カラムのように年代に合わせたレイアウトも考えておくと良いでしょう。

なお、本文幅は読みやすい範囲に絞ったり、スマートフォンでは1カラムにするなど、現代の閲覧環境への配慮も必要です。

5. デザイン要素を考える

背景テクスチャ、GIFアイコン、立体ボタン、訪問者カウンターなど、年代に合う小物を数点だけ厳選し、使いどころを決めます。派手な動きは見出しやバナーなどに留めるとバランスが良くなるでしょう。配色は当時風の原色もよし、彩度を少し落として現代の可読性に寄せるのも手です。代替テキストなど、基本設定もおさえておきましょう。

6. ホームページを作成する手段を決める

どのようにホームページを作るかを決めることで、必要なツールが見えてきます。まずは、次のような「作り方」を決めたうえで、続いて必要になる「レンタルサーバー」や「独自ドメイン」といったツールを準備していくと良いでしょう。

なお、レンタルサーバーサービスの多くはWordPressを簡単にインストールできる機能を用意しています。初めて自分で作ってみるという方にも、チャレンジしやすくなっています。

▼参考
ロリポップ！レンタルサーバー WordPress簡単インストールの利用方法

レトロなホームページを作るときに欠かせないデザイン要素

レトロ感を出すには、当時のホームページに欠かせなかった「要素」や「仕掛け」を取り入れることで雰囲気が生まれます。ここでは代表的な要素をピックアップしました。

ただし、現代のホームページでレトロ感を演出するには、ただ昔の雰囲気をまねするのではなく、企業や商品の世界観に合わせて要素を選び、バランスよく配置することがポイントになります。

背景画像や壁紙テクスチャ

90年代のホームページといえば、無地ではなくタイル状に繰り返す星柄やチェック柄など、チープにも見える背景など柄が入った壁紙が定番でした。現代風に使うなら、単色の背景にあえて柄やテクスチャを敷くと、一気にレトロな雰囲気が漂います。とはいえ派手にしすぎると読みにくくなるので、本文部分はシンプルに保つのがコツです。

GIFアニメーションやアイコン

「工事中」の看板GIF画像や「NEW」アイコン、キラキラ光る星、炎文字など、動くパーツはレトロ感を一気に高めます。ただし常に表示すると安っぽく見えるため、キャンペーンや期間限定ページのアクセントとして利用すると、遊び心として受け止めてもらいやすいでしょう。

ボタンやリンクのデザイン

ただのテキストリンクではなく、立体的なボタン風画像や影付きのリンクテキストが多用されていました。現代のCSSでも簡単に再現できるので、見出しやメニュー部分に取り入れると一気に雰囲気が変わります。

2カラムレイアウトとサイドバー演出

90年代のホームページには、画面の左側に表示される固定メニューがよく使われていました。「本文＋サイドバー」の2カラム構成です。サイドバーに「お気に入りホームページへのリンクバナー」を置くと、一気に昔ながらの雰囲気になるでしょう。今の感覚で取り入れるなら、シンプルな縦メニューと大きめのロゴを組み合わせると、懐かしさと分かりやすさの両立が可能です。

記事タイトルやフォント選びの工夫

記事タイトルは少し装飾的なフォントにしたり、背景色を変えたりするだけでも印象が変わります。当時を思わせるフォントを部分的に使うのも効果的ですが、可読性を高めたい場所には読みやすい標準フォントを使うと、懐かしさと実用性のバランスが保てます。

訪問者カウンターやBGM

「あなたは〇〇人目の訪問者です」というカウンターは当時の象徴ともいえる存在。今見ると可愛らしく、ノスタルジーを誘います。また、自動再生されるBGMもよく使われていました。ただし現代ではユーザー体験を損なう場合もあるため、使うなら控えめにするのが良いでしょう。

これらのレトロ演出は「使いすぎないこと」で効果的になります。世界観を損なわず、細部に遊びを取り入れることで、ブランドそのものの魅力を高める仕掛けになります。

レンタルサーバー＋WordPressで「レトロなホームページ」を作る方法

記事や商品情報を更新しながらレトロな雰囲気を出したい場合、レンタルサーバー上でWordPressを使う方法はとても便利です。この章では、特におすすめの「レンタルサーバー＋WordPress」を使った構築方法を紹介していきます。テーマやプラグインを活用すれば、レトロな空気を演出できます。

テーマ選びとレトロ風カスタマイズ

まずはシンプルな無料テーマをベースに選びます。見出しや背景色、ボタンデザインをCSSで少し変えるだけで、90年代の個人サイト風になります。テーマ自体を派手にする必要はなく、余白の多いデザインを選んで懐かしい要素を差し込む形にすると使いやすいでしょう。

CSSの知識がない場合は、記述方法を学ぶ手間はかかりますが、検索すれば解説しているページも多数あります。

プラグインで演出できる昔風ギミック

訪問者カウンターやBGMプレイヤーなどは、プラグインで簡単に追加できます。現在の利用者体験を損なわないよう、ページの端やサイドバーにさりげなく配置するなど、見る人の視点での配慮は必要です。動くGIF画像を挿入できるプラグインを使えば、より本格的なレトロ感を演出できます。

ブログ・メディア用テンプレートを90年代風にアレンジ

ブログやメディアとして使う場合、記事一覧のタイトル部分に装飾的なフォントや背景色を加えると一気に昔らしさが増します。サイドバーに「プロフィール欄」「リンクバナー」を設ければ、個人ホームページのような温かみを再現できます。更新性はそのままに、デザインだけをタイムスリップさせることができます。

WordPressなら「懐かしさ」と「更新のしやすさ」の両立が可能です。ホームページにもブログにも、柔軟に取り入れられるのが魅力です。

参考にしたい！レトロなホームページ事例と探し方

実際のホームページを見てみると、どんな要素が効果的なのかがすぐに分かります。ここでは、ロリポップの利用有無は問わず、参考になる事例を紹介します。

「現代のホームページで表現するレトロさ」が、デザインの方向性をつかむヒントになります。
「レトロ　ホームページ　デザイン」などで検索し、自分のホームページの目的に合った事例を参考にすると良いでしょう。

まとめ

レトロなホームページを魅力的に見せるポイントは、昔のままに再現するのではなく必要な要素を現代のホームページ運営に合う形で取り入れることがカギになります。背景やボタン、GIFアニメーションなど、ほんの少しの要素を丁寧に選び取ることで、古さではなく「懐かしさ」と「遊び心」が表現できます。

特定のジャンルや業種のホームページであれば世界観に寄り添ったロゴや背景を、ブログであればサイドバーやリンクバナーをといったように目的に合わせて要素を加えることで、訪れる人に心地よい違和感や温かさを届けられるはずです。

ロリポップ！レンタルサーバー＋WordPressでレトロなホームページ作成にチャレンジしてみませんか。