·26分で読めます·笠原 元輝

昔のホームページ デザインの特徴とリニューアル判断ガイド

ホームページ制作Webデザインリニューアル
昔のホームページ デザインの特徴とリニューアル判断ガイド

「昔のホームページのデザインがどんなものだったかを知りたい方」と「古い自社サイトをそろそろ作り直すべきか迷っている方」の両方に向けて、昔・レトロなデザインの特徴を整理しつつ、判断の目安までをまとめます。最初にお伝えしたいのは、懐かしさを"演出として取り入れる"話と、作りが古いまま"運用し続ける"話はまったくの別物だということです。前者はデザインの選択であり、後者は表示速度や安全性といった実害につながりかねない技術的な課題です。この2つを混同したまま「レトロ=古くて悪い」「古いサイトも味があるからそのままで良い」と決めてしまうと、判断を誤りやすくなります。

本文では、まず日本のWebの起点から「昔のホームページ」の輪郭をたどり、90年代に共通した見た目の特徴、昭和レトロ・平成レトロ・ニューレトロ・和デザインの違い、レトロ風を今のサイトで活かすコツを順に解説します。そのうえで、作りが古いサイトを使い続けるリスクを表示速度・安全性の一次情報で確かめ、リニューアルで何が変わるのか、今すぐ作り直すべき人とまだ待てる人をどう見分けるかまで掘り下げていきます。

昔のホームページ・レトロデザインとは(日本初のホームページから振り返る)

昔のホームページとは1990年代から2000年代初頭の作りを指し、日本のWebは1992年9月30日に始まりました。日本で最初に公開されたホームページは、茨城県つくば市の文部省高エネルギー物理学研究所(KEK、現在の高エネルギー加速器研究機構)の研究者だった森田洋平氏による「KEK Information」で、ドメイン名「kek.jp」のサーバーから発信された日本初のWWW(World Wide Web)ページです(出典: 日本記録認定協会)。研究機関の情報発信として生まれたこの一枚が、日本のインターネットの出発点にあたります。

この起点からの流れをつかむと、「昔のホームページ」が指す時代の感覚が見えてきます。株式会社LIGが90年代と現在のデザインを比較した年表によれば、World Wide Web が誕生したのが1990年、Yahoo! が設立されたのが1995年、Google が設立されたのが1998年です。つまり1990年代は、Webという仕組みそのものが生まれ、検索サービスが整い、企業や個人がこぞってホームページを持ち始めた黎明期にあたります。

簡単に時系列を並べると、次のようになります。

  • 1990年: World Wide Web が誕生し、Webページという概念が生まれる
  • 1992年9月30日: 日本初のホームページ「KEK Information」が公開される
  • 1995年: Yahoo! が設立され、ディレクトリ型で情報を探す文化が広がる
  • 1998年: Google が設立され、検索エンジン中心の情報収集へ移っていく
  • 2000年前後: 個人サイト文化が成熟し、Flash を使った表現が全盛を迎える

この時期のホームページは、回線が細く、ブラウザの表現力も限られ、スマートフォンも存在しない環境で作られていました。だからこそ、文字と素朴な画像を中心に、限られた技術の範囲で工夫を凝らした独特の見た目が生まれています。「昔のホームページ」「レトロなホームページ」という言葉は、厳密な規格ではなく、こうした黎明期から成長期にかけての作りや雰囲気をまとめて指す呼び方だと捉えると分かりやすくなります。

補足すると、「ホームページ」という言葉自体も、本来はブラウザを開いたときに最初に表示されるページ、つまり閲覧の起点となるページを指す言葉でした。それがいつしかサイト全体を指す呼び方として日本で広く定着し、今では企業や店舗の公式サイトをまとめて「ホームページ」と呼ぶのが一般的です。1990年代当時は、電話回線を使ったダイヤルアップ接続が主流で、通信速度は今とは比べものにならないほど遅く、画像を1枚読み込むだけでも時間がかかりました。大きな画像や凝った装飾を避け、文字と軽い素材を中心に組み立てられていたのは、こうした通信環境の制約があったからです。当時のデザインの素朴さは、美意識というより、限られた条件のなかで情報を届けるための合理的な選択だった側面があります。

日本初のホームページが研究機関から生まれたことも象徴的です。Webはもともと研究者同士が論文や情報を共有するための仕組みとして始まり、そこから一般企業や個人へと広がっていきました。1990年代後半になると、企業が会社案内や製品情報を載せる「公式ホームページ」を持つことが珍しくなくなり、個人も趣味や日記を発信する場としてサイトを開設するようになります。検索エンジンやリンク集をたどって知らないサイトに出会う、という今につながる体験が形になったのもこの頃です。こうした成長の過程で生まれた見た目や作り方が、現在「昔のホームページ」「レトロなデザイン」として振り返られる対象になっています。次の節では、その見た目に共通していた具体的な要素を見ていきます。

90年代のホームページに共通したデザインの特徴

90年代のホームページはテーブルレイアウト・タイル状の壁紙・点滅GIF・工事中アイコンが定番でした。インターネットが一般に広がり始めた頃のページはとにかくシンプルで、テーブルレイアウトでページを分割し、背景にはタイル状の壁紙画像を敷き詰めるのが定番だったとロリポップ!(GMOペパボ)は説明しています。同じ媒体によると、キラキラと点滅するGIF画像や「工事中」アイコンもよく見られ、背景は無地ではなく星柄やチェック柄などをタイル状に繰り返した、少しチープにも見える壁紙が好まれました。

レイアウト面では、画面の左側に固定メニューを置いた「本文+サイドバー」の2カラム構成がよく使われていました。さらに「あなたは〇〇人目の訪問者です」と表示する訪問者カウンターは、当時を象徴する存在だったとロリポップ!は振り返っています。アクセス数を誇らしげに掲げ、キリの良い番号(キリ番)を踏んだ訪問者を「おめでとう」と祝う文化も、この頃ならではの光景でした。

見た目の細部については、リブロワークスがレトロなWebサイトの特徴を具体的に挙げています。同社によると、左カラムにメニューがある2カラムレイアウト(しかも境界線がはっきり見える)、上下左右に動いたり点滅したりする文字、心なしか荒いフォント、そしてアクセスカウンターとキリ番といった要素が代表的です。リンクはブラウザの初期設定で青色になるため、特別な指定をしなくても「デフォルトの青いリンク」が並びます。こうしたサイトはCSSによる装飾も少なく、記述自体も複雑ではないため、比較的簡単に再現できるとリブロワークスは述べています。

これらの要素を整理すると、おおむね次のように分けられます。

  • タイル状に繰り返す壁紙画像: 星柄・チェック柄などで背景を埋める。今は"演出素材"として部分的に使える要素
  • 点滅・移動するGIFや文字: 視線を引く装飾。当時は手軽な動きの表現で、今はあえて使う演出向き
  • 「工事中」アイコン: 未完成ページを示すお約束。現在は使う場面がほぼ無い当時特有の表現
  • 本文+サイドバーの2カラム: 情報を左右に分ける構成。考え方自体は今も通用する基本レイアウト
  • 訪問者カウンター・キリ番: 来訪数を可視化する文化。今は解析ツールが担う役割で、見た目はレトロ演出の象徴
  • テーブルレイアウト: 表組みタグでページ全体を区切る手法。見た目は再現できても、作りとしては後述のリスクを抱える

ロリポップ!が示す年代区分のとおり、同じ90年代でも前半と後半で雰囲気は変わります。前半は初期の素朴さが前面に出ていましたが、後半から2000年前半にかけては個人サイト文化が花開き、Flashを使ったアニメーションやインタラクティブな演出が全盛を迎えました。トップページで音楽が流れたり、派手なオープニングアニメーションが再生されたりするサイトも珍しくありませんでした。個人サイト同士をつなぐリンク集や相互リンク、掲示板でのやり取りといった交流も盛んで、訪問者カウンターやキリ番の文化は、こうした「サイトに人が集まること自体を楽しむ」空気と結びついていました。これらは今の視点ではレトロ演出の象徴ですが、当時は最先端の表現やコミュニケーションの形だった点を押さえておくと、どの要素を懐かしさとして活かせるかが見極めやすくなります。

見た目の背景にある技術的な事情にも触れておきます。当時はページのレイアウトを整える専用の仕組みが乏しく、本来は表を作るための表組みのタグを使って、画面を縦横に区切って要素を配置するのが一般的でした。これがテーブルレイアウトです。背景にタイル状の壁紙を敷くのも、小さな画像を繰り返し並べることで、少ないデータ量で画面全体を埋められるという利点がありました。点滅やアニメーションも、簡単に動きを付けられる軽い画像形式で実現されていました。つまり90年代の特徴の多くは、限られた技術と通信環境のなかで、できるだけ軽く手早く表現するための工夫だったわけです。この「作りの事情」と「見た目の雰囲気」を分けて捉えることが、後半で扱うリスクの話にもつながっていきます。

ここで押さえておきたいのは、これらの要素が「今あえて演出として使えるもの」と「当時の技術的な制約から生まれたもの」に分かれる点です。壁紙や点滅文字、カウンター表示は雰囲気づくりの素材として今も遊べますが、テーブルで全体を組む作り方そのものは、表示速度やスマートフォン表示の面で後々の課題になります。見た目の懐かしさは演出として自由に楽しみつつ、裏側の作りは最新の土台へ作り直す——この二段構えが、レトロを安全に活かすうえでの基本になります。

昭和レトロ・平成レトロ・ニューレトロ・和デザインは何が違うのか

昭和レトロはくすみ色の温かみ、平成レトロは原色ポップ、ニューレトロは昔の雰囲気を現代の作りで再構成した様式、和デザインは時代より「和」の様式感を軸にした表現です。「レトロ」とひとくくりにされがちですが、どの時代の空気を映すか、どんな色やモチーフを使うかで印象は大きく変わります。まずは全体像を比較表で整理します。

様式年代感色・モチーフの傾向合うサイト・業種の例
昭和レトロ昭和(おおむね1950〜80年代)の空気くすんだ暖色や生成り色、手描き風の書体、喫茶店や商店街を思わせるモチーフ老舗の飲食店、和菓子店、純喫茶、昔ながらの宿
平成レトロ1990〜2000年代前半のポップな空気原色やビビッドな配色、丸いフォント、プリクラやゲーム機を思わせる要素雑貨店、アパレル、若年層向けのイベントやカフェ
ニューレトロ昔の雰囲気を今の作りで再構成懐かしい色や質感を残しつつ、余白や可読性は現代的に整えるデザイン性を打ち出したいブランド、ギャラリー、クリエイター
和デザイン時代より「和」の様式感藍・朱・金などの和色、和紙や市松などの和モチーフ、縦組みの要素和食店、旅館、神社仏閣、工芸・伝統産業

昭和レトロは、彩度を落とした暖かい色合いと手仕事を感じさせる書体が特徴で、どこか懐かしく落ち着いた印象を作ります。一方の平成レトロは、1990年代から2000年代前半の、原色を多用したにぎやかでポップな雰囲気が持ち味です。ロリポップ!が90年代を「前半=初期の素朴さ」「後半〜2000年前半=個人サイト文化とFlash全盛」と区分しているように、同じ"昔"でも前半と後半で温度感が異なります。昭和レトロが「ノスタルジックで温かい」方向だとすれば、平成レトロは「にぎやかで元気」な方向と覚えると見分けやすくなります。

ニューレトロは、この2つとは少し立ち位置が違います。昔の色づかいや質感を取り入れつつも、文字の読みやすさや余白、情報の並びは現代の作法で整える「今風に再構成したレトロ」です。リブロワークスが指摘したように、レトロな見た目はCSSの装飾が少なくても再現しやすいため、現代の土台に懐かしい要素を"乗せる"形で成立します。ニューレトロが支持されるのは、懐かしさの魅力を残しながら、今のユーザーが使いやすい状態を両立できるからです。

関連して「レトロポップ」という呼び方もよく使われます。これは平成レトロのポップな方向性をさらに強調したもので、原色やパステル、ドット柄やうねるような文字など、遊び心のある要素を前面に出すスタイルです。雑貨やスイーツ、イベント告知など、楽しさや親しみやすさを打ち出したい場面で選ばれます。様式を選ぶときは、名前の響きで決めるのではなく、自社が伝えたい印象(落ち着き・にぎやかさ・格式・親しみ)と、来てほしいお客様の層を基準にすると、ちぐはぐな仕上がりを避けられます。たとえば格式を大切にしたい老舗が平成レトロの原色ポップを全面に出すと、本来の落ち着いた魅力が伝わりにくくなります。様式はあくまで印象を伝える手段であり、自社の実態と来店客の期待に合うかどうかが選択の軸になります。

見分けに迷いやすいのが、昭和レトロとニューレトロの境目です。両者とも「懐かしさ」を扱いますが、昭和レトロは当時の色や質感をできるだけそのまま再現しようとするのに対し、ニューレトロは懐かしい要素を引用しつつ、全体は今の読みやすさに合わせて整えます。たとえば同じくすみ系の配色でも、文字が小さく詰まっていれば昭和レトロ寄りの再現、十分な余白と大きめの文字で整っていればニューレトロ寄り、と考えると区別しやすくなります。平成レトロと和デザインは、前者が時代(1990〜2000年代前半)を軸にするのに対し、後者は時代より「和」という様式を軸にする点が異なります。どれが正解というものではなく、伝えたい印象に最も近い様式を選び、必要なら複数を少しずつ掛け合わせるのが現実的な進め方です。

和デザインは、特定の年代というより「和」という様式そのものを軸にした表現で、藍や朱、金などの和色や、和紙・市松模様といったモチーフと組み合わせます。レトロ表現とは相性が良く、昭和レトロの温かさに和の要素を重ねれば老舗らしさが、ニューレトロの作りに和モチーフを合わせれば現代的な和ブランドの雰囲気が出せます。自社の業種や伝えたい雰囲気に、どの様式が近いかを考えるところから始めると、方向性がぶれにくくなります。今風のトレンドも踏まえて比較したい場合は、今のデザイントレンドもあわせて確認すると、レトロと現代的な表現のバランスを取りやすくなります。

レトロ風デザインを今のサイトでうまく活かすコツ

レトロ風は全面再現せず、高速表示とスマホ対応という現代の土台の上に、演出として部分的に載せるのがコツです。90年代の作りをそっくりそのまま再現すると、懐かしさは出せても、表示の重さや読みにくさといった当時の弱点まで一緒に抱え込んでしまいます。狙いたいのは「当時の雰囲気」であって「当時の作り」ではない、という切り分けが出発点です。

具体的な進め方として、取り入れたいポイントと避けたいポイントを整理します。

取り入れたいポイント(Do)は次のとおりです。

  • 全面ではなく一部に効かせる: 背景のタイル柄やあしらい、見出し周りの装飾など、ポイントを絞ってレトロ感を出す
  • 色数とコントラストを管理する: 懐かしい配色でも、本文と背景のコントラストは確保し、文字が読める状態を保つ
  • 現代の土台に乗せる: 後述する表示速度やスマートフォン表示を満たした作りの上に、演出としてレトロ要素を重ねる
  • 書体で雰囲気を作る: 荒いフォントや手描き風の書体を見出しに使い、本文は読みやすい書体にして役割を分ける

避けたいポイント(Don't)は次のとおりです。

  • 画面全体を点滅・移動させる: 動く要素を多用すると、読みづらく、人によっては目が疲れる。使うなら一箇所に絞る
  • 重い画像を敷き詰める: 最適化していない大きな画像を背景一面に使うと、表示が遅くなる原因になる
  • 装飾で情報を埋める: 懐かしい素材を詰め込みすぎると、肝心の商品やサービスの情報が埋もれてしまう
  • 可読性を犠牲にする: 雰囲気優先で小さすぎる文字や低コントラストにすると、読者が内容を読めなくなる

リブロワークスが述べているように、レトロな見た目はCSSの装飾が少なく記述も複雑ではないため、演出そのものは比較的軽い手数で足せます。裏を返せば、重くなる原因の多くは「レトロ演出」ではなく「古い作り」や「未最適化の素材」の側にあります。だからこそ、土台を現代化したうえで雰囲気だけを足すという順番が有効です。

業種ごとに、どこにレトロ感を効かせるかの勘所も変わります。飲食店や喫茶店なら、看板メニューの写真や店構えの雰囲気を主役にしつつ、背景のあしらいや見出しの書体で昭和レトロの温かさを添えると、味わいと情報のバランスが取れます。雑貨やアパレルなら、商品一覧は見やすく整えたうえで、キャンペーンのバナーや特集ページで平成レトロのポップさを効かせると、商品の魅力を損なわずに世界観を出せます。旅館や工芸のような和の業種では、和デザインの落ち着いた配色を土台にし、写真でしっかり実物を見せる構成にすると、格式と分かりやすさを両立できます。いずれの場合も、トップページの第一印象で雰囲気を伝え、詳細ページでは読みやすさと情報の正確さを優先する、という役割分担を意識すると、演出と実用のどちらも犠牲にせずに済みます。

演出を足すときの実務的な注意点も挙げておきます。レトロ風の素材やフォントを使う際は、商用利用が許可されているかどうかを必ず確認してください。無料で配布されている素材でも、利用できる範囲が限られている場合があります。また、点滅や動きのある表現は、見やすさの観点から控えめにし、どうしても使うときは一時停止できるようにするなど、さまざまな利用者に配慮する姿勢が望まれます。懐かしさを演出する目的は、あくまで商品やサービスの魅力を引き立てることにあります。装飾が主役になって肝心の情報が伝わらなくなっては本末転倒なので、迷ったら「この演出は読者の理解を助けているか」を基準に取捨選択すると、過不足のない仕上がりに近づきます。

どんな装飾を選ぶかの前に、そもそもサイトをどんな構成にするかが決まっていると、レトロ要素を置く場所も決めやすくなります。作り直しを視野に入れているなら、作り直すときのホームページ構成で全体の骨組みを押さえ、業種別にデザインを選ぶで自社の業種に合う方向性を確認してから、演出としてのレトロを重ねていく流れがスムーズです。

その"昔のサイト"を今も使い続けるリスク(演出のレトロとは別物)

作りが古いサイトは表示が遅く、改ざん・情報漏えいの危険という実害を抱え、スマートフォンでも見づらくなりがちです。ここで改めて強調したいのは、懐かしさを狙った「演出」と、技術的に古い「作り」はまったく別物だということです。あえてレトロに見せているサイトと、何年も更新されず古い作りのまま放置されているサイトは、見た目が似ていても中身の課題がまるで違います。両者の違いを表で整理します。

観点懐かしさを"演出"として取り入れる場合作りが古いまま"放置"している場合
表示速度現代の土台の上で軽い演出を足すため、速度を保ちやすい重いテーブルレイアウトや未最適化画像で表示が遅くなりやすい
安全性最新の仕組みで作り直したうえで装飾するため管理しやすい古いCMS・ソフトの未更新やHTTPS未対応で改ざん・漏えいの危険がある
スマホでの見やすさレスポンシブな作りを前提に演出を乗せられる画面幅に合わず文字が小さく崩れ、読者が離れやすい
更新のしやすさ編集しやすい仕組みの上にあり、運用を続けやすい作った人しか触れず、更新が止まったまま放置されやすい

表示速度から見ていきます。Webページの表示速度には公式の目安があり、良好な体験を提供するにはLargest Contentful Paint(LCP、ページの主要なコンテンツが表示されるまでの時間)を2.5秒以下に収めることが望ましいとweb.devは示しています。表組みでページ全体を組んだ重いレイアウトや、サイズを最適化していない大きな画像を多く抱えた古い作りは、この2.5秒という基準を満たしにくくなります。表示が遅いと、読者は内容を見る前に離れてしまいかねません。

次に安全性です。これは「なんとなく心配」で終わらせてよい話ではなく、具体的な被害につながります。IPA(情報処理推進機構)は、ウェブサイトの脆弱性や運用管理の不備を悪用された情報漏えいやウェブページの改ざんなどの被害が多数発生しており、被害が起きるとビジネスやサービスの中断・停止、損失補償など事業に直接的な影響が生じる恐れがあると注意を促しています。具体的な対策としてIPAは、ウェブアプリケーションを構成するソフトウェアやCMSに脆弱性が見つかった場合は適宜バージョンアップすること、不要になったアプリケーションは削除すること、通信内容をHTTPS化(暗号化)して盗聴・改ざん・なりすましを防ぐことを挙げています。さらに、管理できていないウェブサイトは閉鎖の検討をとも述べています。つまり、古いCMSやソフトを更新していない、HTTPSにも対応していないまま放置されたサイトは、改ざんや情報漏えいのリスクを抱えているということです。

スマートフォンでの見やすさは、安全性ほど定量的な基準で語れるものではありませんが、使い勝手の面で無視できません。古いサイトはパソコンの画面を前提に作られていることが多く、スマートフォンで開くと文字が小さすぎたり、レイアウトが横に崩れたりしがちです。今は多くの人がスマートフォンからサイトを訪れるため、スマホで読みにくいサイトは、それだけで読者が離れる原因になります。見た目のレトロさとは関係なく、画面に合わせて快適に読めるかどうかは、作りの新しさに左右される部分です。

これらのリスクは、個別に見ると小さく感じられても、重なると事業への影響が大きくなります。たとえば、検索から訪れた見込み客がスマートフォンでサイトを開き、表示が遅くて数秒待たされ、ようやく表示されても文字が小さくて読めない、という状態では、商品やサービスを知ってもらう前に離脱されてしまいます。さらに、HTTPSに対応していないサイトでは、ブラウザが「保護されていない通信」と警告を出すことがあり、それを見た訪問者が不安を感じて問い合わせをためらう、という間接的な機会損失も起こり得ます。改ざん被害に至れば、復旧の手間や信頼の回復にかかる負担は、日頃の更新の手間とは比べものにならないほど大きくなります。古い作りのサイトを放置するコストは、目に見えにくいだけで確実に積み上がっていく、と捉えておくほうが現実的です。

すぐに全面的な作り直しが難しい場合でも、優先的に手を付けたい対策があります。IPAが挙げるとおり、まずは通信のHTTPS化と、CMSやソフトを最新の状態に保つこと、使っていない古いアプリケーションやページを削除することが、改ざん・情報漏えいのリスクを下げる基本です。あわせて、スマートフォンで最低限読める状態になっているか、主要なページがすぐ表示されるかも確認しておきたいところです。これらは「見た目を新しくする」話とは別に、安全に運用を続けるための土台にあたります。土台が危うい状態でレトロ演出だけを足しても、根本の課題は残ったままなので、演出と作りの手当ては切り分けて進めるのが賢明です。

Webサイト品質スコアチェッカー

URLを入力するだけで、パフォーマンス・SEO・アクセシビリティを無料診断

無料で診断する

安全性への対策は、HTTPS化だけで完結するものではありません。どんな方針で運用を管理していけばよいかの考え方は、情報セキュリティ方針の例で、IPAが示す確認項目とあわせて整理しています。古い作りのサイトを「味がある」と残しておくこと自体は否定しませんが、その場合でも、表示速度・安全性・スマホ表示という実害の部分は切り分けて対処しておく必要があります。

リニューアルすると何が変わるのか(今すぐ作り直すべき人・まだ待てる人)

リニューアルで表示速度・スマホ対応・常時SSLが標準になり、レトロ演出も安全な土台の上で活かせるようになります。作り直しは「見た目を今風にする」ためだけのものではなく、前の節で挙げた表示速度・安全性・スマホ表示という実害を、まとめて解消するための手段でもあります。古いサイトの課題と、作り直し後の土台を対比すると次の図のとおりです。

古いサイトの課題と作り直し後の土台の比較

図のように、今の古いサイトが抱える「表示が遅い・改ざんリスク・スマホで見づらい」という課題を、作り直しによって「表示が速い(LCP2.5秒以下を狙える)・常時SSL・スマホ対応」という標準的な土台へ置き換えるのがリニューアルの本質です。この土台が整っていれば、昭和レトロや平成レトロ、ニューレトロといった懐かしい演出も、安全で速いサイトの上で安心して楽しめます。

具体的に何が変わるかを挙げると、まず表示の速さです。重い作りを整理し、画像を適切なサイズに最適化すれば、主要なコンテンツが表示されるまでの時間を短くでき、先に触れたLCP2.5秒以下という目安にも近づけられます。次に安全性です。常時SSL(HTTPS)に対応すれば通信が暗号化され、ブラウザに「保護されていない通信」と警告されなくなり、訪問者が安心して閲覧や連絡ができる状態になります。そして、画面幅に合わせて表示が変わる作り(レスポンシブ)にすれば、スマートフォンでも文字が読みやすく、ボタンも押しやすくなります。これらはいずれも、見た目の好みとは別の、サイトの基礎体力にあたる部分です。レトロな演出を楽しむにしても、この基礎が整っているかどうかで、訪問者の体験は大きく変わります。

ここで大切なのが、「今すぐ作り直すべき人」と「まだ待てる人」を切り分けることです(年数ではなく表示速度・検索評価・事業の変化から判断する詳しい目安は、ホームページの作り直しタイミングで解説しています)。今すぐ作り直しを検討したほうがよいのは、たとえば次のような状態のサイトです。アドレスが https:// で始まらない(HTTPSに未対応)、スマートフォンで開くとレイアウトが崩れて読めない、長年CMSやソフトを更新しておらず管理できていない——これらはいずれも、表示速度・安全性・スマホ表示という実害に直結します。一方、まだ待てるのは、見た目に軽微な不満があるだけで、表示速度・安全性・スマホ表示に実際の支障が出ていない場合です。この場合は、慌てて全面的に作り直さなくても、演出や文言の調整から着手する選択肢があります。

作り直して終わりではなく、公開したあとに自分たちで更新を続けられるかどうかも重要です。古いサイトが放置されがちなのは、作った人しか触れず、少しの修正にも業者への依頼と費用が必要、という状態に陥りやすいからです。シタミの場合、公開後はページ上の文章や写真をクリックして直接書き換えられ、営業時間やメニューの変更、「お客様の声」の追加なども自分で行えます。配色やフォント、余白もコードに触れずに調整できるため、季節やキャンペーンに合わせて手を入れやすくなっています。更新のしやすさは、作り直しのリスクを下げる要素でもあります。せっかく新しくしても更新が止まれば、また同じように情報が古くなり、やがて作りも取り残されてしまうからです。

作り直しを決める前に悩ましいのが「完成イメージが分からないまま発注してよいのか」という点です。一般的な制作会社では、見積もりや契約を済ませ、費用を払って1〜3ヶ月待ち、そこで初めて完成品を見ることになります。これに対してシタミ(衣株式会社が開発・運営するホームページ自動生成サービス)は、業種や好きな雰囲気など3分ほどの入力をするだけで、完成したホームページを実物のURLで無料で確認できます。モックアップや構成案ではなく、そのまま公開できる本物のサイトが届き、店名や色などをその場で試せます。費用を払う前に完成品で確かめられるため、「イメージと違った」という失敗を避けやすくなります。

自社の業種だと、どんなサイトになるのか見てみませんか

業種や雰囲気を3分ほど入力すると、完成したホームページを実物のURLで無料で確認できます。モックではなく、そのまま公開できる本物のサイトが届きます。

完成品を無料で見てみる

本文で参照した情報源と、それぞれ何を調べるのに向くかを整理します。

  • リブロワークス: レトロなWebサイトの再現手順を具体的に解説しており、CSSの記述も簡素だと示しています。手早くレトロ"演出"を試したい人が、作り方の勘所をつかむのに向いています。
  • 株式会社LIG: Web誕生(1990年)、Yahoo!(1995年)、Google設立(1998年)という年表で昔と今のデザインを比較しています(2016年の記事)。昔から現在までのデザインの変化の全体像をつかみたい人に向いています。
  • ロリポップ!(GMOペパボ): 90年代のホームページの特徴を網羅的に列挙しています。当時の要素を一覧で理解したい人に向いています。
  • シタミ(完成品を無料で確認してから選ぶ): 業種を入力すると実物URLの完成品を無料で確認でき、相談や見積もりを前提にしません。作り直しを決める前に、自社の業種での完成イメージを実物で見てから進めたい人に向いています。

作り直しをためらう理由として多いのが、「載せる写真や文章が手元にない」という不安です。シタミでは、写真が手元になくても、ページの内容に合わせたイメージ写真を入れた状態でサイトが届きます。スタッフの写真が用意できないうちは仮のイメージ写真を置いておき、公開前にご本人の写真へ差し替える、といった進め方ができます。手持ちの写真があれば、作成時にアップロードするか、購入後の編集画面でクリックして差し替えられます。完成イメージが分からないまま発注する不安と、素材が揃っていない不安の両方を、実物を見ながら埋めていけるのが、入力して完成品を無料で確認する進め方の利点です。

費用の目安が気になる場合は、料金プランで構築費と月額の内訳を確認できます。なお、各プランには常時SSL(通信の暗号化)や訪問者からの連絡を受け取れるフォーム、コードを書かずに画面を見ながら更新できる編集機能が含まれており、作り直したあとの運用まで一人で回せる設計になっています。

状況別・次に読むべきものが分かる早見表

取り入れたいなら様式の比較へ、古い作りが不安ならリスクの節へ、作り直したいなら完成品の確認へと進むのが近道です。ここまでの内容を、自分の状況に合わせて次の一歩へつなげられるよう、2列で整理します。

当てはまる状況次に読むセクション・アクション
レトロ風の雰囲気を自社サイトに取り入れたい「昭和レトロ・平成レトロ・ニューレトロ・和デザインは何が違うのか」の様式比較と、今のデザイントレンドで方向性を固める
どんな構成で作り直すか、業種に合う見せ方を知りたい「レトロ風デザインを今のサイトでうまく活かすコツ」と、作り直すときのホームページ構成・業種別にデザインを選ぶを確認する
今のサイトの作りが古いことが不安「その"昔のサイト"を今も使い続けるリスク」で表示速度・安全性を確かめ、情報セキュリティ方針の例で対策の考え方を押さえる
そろそろ作り直したいが完成イメージが分からない業種を入力して完成品を無料で確認するで、自社の業種での仕上がりを実物で見る
作り直しにかかる費用の目安を知りたい「リニューアルすると何が変わるのか」を読み、料金プランで構築費と月額の内訳を確認する

自分がどの状況に近いかで読む順番を変えると、必要なところへ早くたどり着けます。雰囲気づくりが目的なら様式とコツの節、作りの古さが心配ならリスクの節、作り直しを具体的に進めたいなら完成品の確認へと進んでください。

作り直す前に確認したいチェックリスト

HTTPS対応・スマホ表示・表示速度・更新状況・問い合わせ導線・情報の鮮度の6点を点検すれば、作り直しの要否を見極める手がかりになります。次の項目を自分のサイトで順に確認してみてください。該当が多いほど、作り直しを前向きに検討する目安になります。

  • アドレスが https:// で始まるか: http:// のままで、ブラウザに「保護されていない通信」と出る(HTTPS未対応)なら、通信が暗号化されておらず、盗聴・改ざんの危険が残ります
  • スマートフォンで崩れずに読めるか: 文字が小さすぎる、横にはみ出す、ボタンが押しにくいといった状態なら、スマホからの読者が離れやすくなります
  • 主要なページがすぐ表示されるか: 開くまでに何秒もかかるようなら、LCP2.5秒以下の目安から離れている可能性があります
  • CMSやソフトを更新しているか: 長年バージョンアップしておらず、誰も管理していないなら、脆弱性を突かれるリスクが高まります
  • 問い合わせや予約への導線があるか: 連絡先やフォームが分かりにくいと、せっかくの訪問が成果につながりません
  • 画像や情報が最新か: 古い価格・営業時間・写真のままなら、内容面でも信頼を損ないかねません

これらを点検して気になる項目が見つかったら、まずは自社の業種でどんなサイトになるかを実物で見てみると、作り直しのイメージが具体的になります。

よくある質問(FAQ)

日本で一番古いホームページは何ですか?
日本記録認定協会によると、日本で最初に公開されたWWWページは1992年9月30日の「KEK Information」です。茨城県つくば市の研究機関KEKに在籍した森田洋平氏が公開したもので、サーバーのドメインはkek.jpでした。
昭和レトロと平成レトロのデザインは何が違いますか?
大きな違いは色とモチーフの温度感です。昭和レトロはくすんだ暖色や手描き風の書体で懐かしく落ち着いた印象を作り、平成レトロは1990〜2000年代前半の原色やビビッドな配色でにぎやかでポップな雰囲気を出します。
ニューレトロデザインとは何ですか?
昔の色づかいや質感といった懐かしい要素を取り入れつつ、文字の読みやすさや余白、情報の並びは現代の作法で整える、今風に再構成したレトロ表現です。懐かしさと使いやすさを両立させたいときに向いています。
和デザインはレトロ表現とどう組み合わせますか?
藍・朱・金などの和色や和紙・市松模様といった和モチーフを軸にし、昭和レトロの温かさに重ねれば老舗らしさが、ニューレトロの現代的な作りに合わせれば今風の和ブランドの雰囲気が出せます。和食店や旅館、工芸系と相性が良い表現です。
90年代のホームページにはどんな特徴がありましたか?
テーブルレイアウトでの分割、タイル状に繰り返す壁紙画像、点滅するGIFや「工事中」アイコン、本文とサイドバーの2カラム構成、訪問者カウンターなどが定番でした。限られた技術のなかで工夫された、黎明期ならではの見た目です。
レトロ風にすると古くさく見えませんか?
全面的に昔の作りを再現すると古く見えがちですが、高速表示やスマホ対応といった現代の土台の上に、演出としてレトロ要素を部分的に載せれば、懐かしさを魅力として活かせます。可読性とコントラストを保つことが古く見せないコツです。

関連記事

ホームページ、できてから決めませんか?

業種・好み・屋号と一言説明を入れ、登録すると下見を作ります。カードは不要です。完成の目安は60〜100分で、メールでお知らせします。購入は完成品を見てから決められ、購入前は店名・文字・配色を試せます。

無料で下見する →