レトロな90年代スタイルのウェブサイトやブログをデザインする方法

本物の90年代スタイルのウェブサイトを作りたいですか？現代のデザイナーの多くは90年代のウェブデザインの選択に憤慨しているが、当時のウェブサイトがもっと楽しかったことは否定できない！90年代のように手作業を知らなくても、ドラッグ＆ドロップのウェブサイトビルダーやテンプレート、ブログテーマを使えば、レトロなウェブ美学を手に入れることができます。このWikiHowでは、あなたのウェブサイトに90年代風の機能を追加する方法と、背景、ボタン、テンプレート、アニメーションGIFなどの90年代風の無料グラフィックを見つける方法を紹介します！

知っておくべきこと

• 90年代スタイルのウェブサイトは、にぎやかな背景、明るい色、アニメーションGIFやボタンで知られています。
• オリジナルの216色の「ウェブセーフ」パレットにこだわることで、あなたのウェブサイトが本物らしく見えるようになります。
• あなたのウェブサイトに90年代のレトロな美しさを与えるには、通常HTMLの知識が少し必要になります。

1

インスピレーションを得る

1. 90年代スタイルのウェブデザインの例を探しているなら、ラッキーです。レトロなウェブデザインが復活しつつある今、本物のウェブ1.0サイトのアーカイブや、90年代のウェブ美学を現代風にアレンジしたものを簡単に見つけることができる。

   • 忘れ去られたウェブデザインのトレンド」をテーマにしたこのウェブギャラリーには、1991年までさかのぼるウェブサイトのスクリーンショットが満載だ。
   • この無料ウェブホスティングサイトは、90年代のウェブサイトメガホストGeocitiesとサービスが似ているおかげで、大量の90年代スタイルのウェブサイト（そしていくつかのモダンなもの）の本拠地となっている。カラフルなComic Sansのテキストや低解像度の.NET Frameworkなど、90年代の最高の(最悪の？)特徴をすべて備えた、アクティブなレトロウェブサイトを大量に見つけることができる。
   • ジオシティーズといえば、この楽しいツールは、90年代にジオシティーズで公開されていたようなウェブサイトを表示してくれる。wikiHow.comで試してみよう！
   • このサイトでは、90年代の最もワイルドなウェブサイトの特徴を取り上げ、それらを1つのウェブページにまとめている。
   • 90年代の古いウェブサイトを見たい、あるいは現在のウェブサイトの古いバージョンを見たいなら、Archive.orgのWayback Machineが気に入るだろう。

2

適切なウェブホストを見つける

1. まだ90年代のウェブサイトのホームを決めていないのなら、まずそれをしましょう。ホストにお金を払うか、ホストを試してみるか、選択肢は無限です！ただ、自分のスキルレベルに応じて、テーマのカスタマイズやHTMLの直接編集ができるホストを選ぶようにしましょう。

   • WordPressは無料ブログの最新オプションだが、90年代にインスパイアされたWordPressテーマを使わない限り、WordPressブログを90年代風にするのは簡単ではない。最近のウェブサイト・ビルダーは、90年代には存在しなかったレスポンシブ・デザインに重点を置いている。本物の90年代風のブログを作りたいなら、HTMLを直接編集できるカスタマイズ可能なホストが必要だ。
   • もしあなたが90年代スピリットを持ったホストを探していて、ゼロからHTMLコードを書く（またはコピー＆ペーストする）ことを厭わないのであれば、Neocitiesはあなたの90年代ウェブサイトのニーズをすべてカバーするのに十分な機能を誇る無料ティアを提供している。また、HTMLに不慣れな人や、少し錆びついた人であれば、ジェネレーターのようなものでレイアウトをデザインし、そのコードを自分のサイトに貼り付けることができる！
   • あなたのホストがサポートしているなら、Comic Sansフォント、虹色、斜めのボタン、偽のプログレスバーなどが満載のウェブサイト・テンプレートを試してみよう。

3

90年代のフォントとフォントエフェクトを使いましょう。

1. 今日のシンプルなサンセリフフォントでは、レトロな美的感覚は得られない。その代わりに、すべてのテキストにComic Sansのようなオールドスクールなフォントを選ぼう。どうしてもComic Sansにこだわれない場合は、Times New Romanのようなセリフフォントにこだわろう。フォントは多ければ多いほどいい！

   • 現在、ウェブ上でフォントをカスタマイズするために、90年代にフォントをスタイル化していた古いHTMLタグの多くは、もはや機能しません（有名な<blink>タグを含む。

4

ウェブセーフ・カラーパレットの色だけを使いましょう。

1. 今日のデバイスは何百万色もの色を表示できますが、古いコンピューターは一度に256色しか表示できませんでした。そして、そのうちの216色だけがPCでもMacでもまったく同じように表示されたため、90年代のウェブ開発者は、自分たちのサイトがすべてのプラットフォームでまったく同じように見えることを保証するために、216色だけの「ウェブセーフ」カラーパレットに頼っていました。 ウェブセーフパレットはもはや必要ありませんが、テキスト、画像、HTML要素にこのパレットの色を使うことで、真の90年代の美学を手に入れることができます。

   • 16進コードと色名を見つけるには、ウェブで「ウェブセーフ・カラーパレット」と検索するか、このサイトをチェックしてください： 。
   • これらの色の16進コードは、, , , などに使用できます。

5

ビジーなタイル状の背景画像を選びましょう。

1. 90年代には、繰り返しパターンの背景画像が大流行しました。星空、虹の雲、レンガ、セメント、カラフルなフラクタル、木目、リサ・フランク風の動物プリントなど、シームレスに繰り返される画像であれば、どんなものでも背景画像として使えます。

   • Free repeating background」でウェブ検索して、何が出てくるか見てみよう。また、シームレスにタイル化された背景もチェックできます。
   • GIFフォーマットの3Dアニメーション背景テクスチャもチェックしてみよう。
   • 賑やかな背景でやりすぎたくなければ、黒一色の背景でも美的感覚を得ることができる。ただ、明るい色のテキストや画像をたくさん使うようにしましょう。

6

レトロなエフェクトでテキストグラフィックを作る

1. テキストグラフィックを使って、カラフルなスタイル化されたテキストベースのグラフィックを作りましょう。90年代のウェブサイトには、装飾的なフォントや未来的なフォントで作られた派手なテキストロゴがたくさんありました。サイトへの訪問者を歓迎するために、少なくとも1つはテキストベースのグラフィックが必要です！

   • グラフィック＆ロゴジェネレーターを使えば、90年代のスタイルを忠実に再現したテキストロゴを無料で作成できます。
   • 90年代の無料ロゴ作成テンプレートもあります。
   • 90年代スタイルのMicrosoft Word WordArtロゴをブラウザ上でデザインできます。

7

アニメーションボタンやGIFをあなたのウェブサイトに。

1. 90年代のGIFアニメは、現在のものほど高品質ではありませんでした。幸いなことに、レトロなGIFサイトや検索エンジンがたくさんあり、ソーシャルメディアでは見られないような派手なピクセルの背景をダウンロードすることができる。気に入ったものや嫌いなものをウェブサイト用に保存しておこう。

   • 本物の90年代GIFを見つけるのに最適な場所の1つは、Internet Archiveの.button」で検索すると、あらゆる種類の方向ボタン（「Next」や「Back」など）を見つけることができ、「cat」で検索すると、あらゆる種類のくだらない猫関連のGIFを見つけることができる。
   • Web 1.0直系の無料GIFがたくさんあるので、チェックしてみてください！
   • .GIFのような無料のオンラインエディターを使って、自分だけのピクセルアートアニメーションを作ることができます。
   • キラキラのアニメーション背景、仕切り、アイコン、バナー、ボタンなど、キラキラしたものなら何でもあります。
   • 90年代にウェブサイトのボタンとして最も一般的だった88x31pxのボタンが何百種類も見つかります。
   • また、.NETでは、あらゆる種類のツールやトピックの無料バッジを大量に見つけることができます。

8

ページのどこかにヒットカウンターを設置する。

1. 今日のウェブサイトのほとんどは、バックグラウンドで訪問者を追跡しているが、90年代のウェブサイトは、ページ上にヒットカウンターを大胆に表示していた。幸いなことに、.NETや.NETのようなサイトのおかげで、今でもあなたのウェブサイトに本物そっくりの訪問者カウンターを追加することができます。ページ上で最も不合理なカウンタを選択し、あなたのURLをフィールドに追加して、「無料のヒットカウンタHTMLコードを生成する」をクリックするだけで、あなたのウェブサイトに追加するために必要なコードを入手することができます。

9

あなたのウェブサイトが "工事中 "のままであることを確認しましょう。

1. 1つ以上の「工事中」のグラフィックがなければ、90年代のウェブサイトとは言えません。今、ウェブ上でこれらの遺物を見つけるのは難しいが、アーカイブ・チームのあるアーキビストは、すべての「工事中」グラフィックを収集し、.NETに追加した。 これらは無料でダウンロードできるので、いくつか手に入れよう！

10

HTMLテーブルを使ってウェブサイトをレイアウトしよう。

1. CSSが登場する以前、ウェブデザイナーはウェブサイトをレイアウトするために不便なテーブルを使っていました。幸いなことに(残念ながら？)、テーブルは時代遅れではありません。HTMLに慣れていて、コードに手を汚すことができるのであれば、90年代のリアルなウェブサイトのレイアウトを作成するのに使うことができます。

   • 90年代のHTMLテーブルには太いベベルボーダーがあり、ページ上のテキストやオブジェクトとボーダーとの間にパディングが多すぎる（あるいは少なすぎる）ことがよくあった。
   • テーブルをいじくり回したくなければ、Divタグに適用して同じ効果を得ることができます-特にborder-style: insetプロパティです。

11

バックグラウンドでMIDIサウンドファイルを再生する。

1. ローファイな曲をバックグラウンドに埋め込めば、訪問者が本当に没頭できるようになります。HTML5の<audio>タグを使えば、訪問者がページを読み込むと自動的に音楽を再生することができます。 Internet Archiveから、本物のレトロな曲ファイルをチェックしましょう。

12

JavaScript アニメーションを使いすぎる。

1. 90年代のウェブサイトでマウスを動かして、くだらないカーソルアニメーションに気づいたことはありませんか？あるいは、流れ星や雨粒がテキストを横切っていくとか？ウェブデザイナーは、マウスカーソルをハート、星、スマイルに変えるなど、あらゆる種類の動く画像やエフェクトをウェブサイトに追加するためにシンプルなものを使っていた。 ウェブサイトのHTMLコードを直接編集できる限り、これらの90年代のエフェクトをそのままあなたのページにもたらすJavaScriptコードを簡単にコピーすることができる。

   • 虹や雪の結晶を含む9つのシンプルなカーソルエフェクトがあります。
   • 無料のマウス、テキスト、グラフィックエフェクトがたくさんあり、どんなウェブサイトにも簡単に追加できます。
   • マウスを追いかけるネコのマウスカーソルのアニメーションもあります。

13

長いリンクページやセクションを追加する。

1. すべての90年代のウェブサイトは、ウェブ上の他の素晴らしいサイトへのリンクを誇らしげに表示していました。メインページに自分の権利を追加するにしても、お気に入りのウェブサイト専用のページを作るにしても、他の90年代にインスパイアされたウェブサイト（もちろんwikiHow.comも）でリンクセクションを埋めるようにしてください。

14

訪問者にゲストブックにサインするよう伝えましょう。

1. ブログのコメントができる前は、人々はバーチャルなゲストブックにコメントを残していた。90年代のゲストブックのプロバイダーはもう存在しないかもしれませんが、あなたの90年代風のウェブサイトの目立つところにリンクできる、簡単に追加できるゲストブックはまだ見つかります。

この記事は、CC BY-NC-SAの下で公開された「 How to Design a Retro 90s Style Website or Blog 」を改変して作成されました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。