Style · 90年代
90年代Webデザインの参考例とAIプロンプト
初期Webのtable組み・アニメGIF・MS Paint感を愛でる90年代風AIプロンプト集。
90年代について
初期Webの荒々しさ・未熟さを意匠化した表現。table組み、アニメGIF、MS Paint感、ダイヤルアップ時代の配色、Geocities風バナーなど。ブルータリストとは別方向の愛おしい不完全さを持ちます。効くのは、その時代を知る世代への懐かしさと、知らない世代への物珍しさが同時に成立する場面。ただし実装まで90年代に戻す必要はありません。見た目だけを借り、構造はセマンティックなHTMLで組み、キーボード操作とスクリーンリーダーは現代の水準を守ってください。
90年代の視覚パラメータ
- #C0C0C0 地
- #000080 文字
- #FF00FF 強調
- #00FF00 副強調
- 書体
- Times / MS Pゴシック。ブラウザ既定のまま使う
- 形
- ベベルの立体枠。角丸は付けない
- 動き
- アニメGIFの等速ループ
よく使われる場面
- ネット文化を扱うコンテンツ
- アンダーグラウンド音楽・アート
- レトロゲーム・同人文化
- 実験的なアート作品
- パロディ・風刺コンテンツ
成功のポイント
- Comic Sans や 16色パレットを恐れない
- アニメGIFアイコンで動きを出す
- border の二重化・ビーズ装飾を使う
- マーキー・ブリンクはCSSで再現
- スマホで見ても楽しい範囲に調整
このスタイルのデザイン
アーケード筐体UI風の料金プラン
80年代ゲームセンターのアーケード筐体UIを再現した料金プラン。"INSERT COIN"、ピクセルスコアボード、ハイスコア表で「コインを入れて始める」ノスタルジーをCTAに変換する尖った設計。
Memphis Group調・幾何カオスのCTAセクション
1980年代 Memphis Group の意匠を引用した、原色・波線・幾何形のカオスが踊るCTAセクション。退屈なフラットデザインを破壊して「楽しさ」を直接ぶつける尖った選択。
Y2Kクロームベベルとオーブの料金プラン
2000年代初頭の Frutiger Aero / Mac OS X Aqua / 透明クロームを再構築した Y2K 風料金プラン。鏡面ベベル・色付き光沢オーブ・虹色グラデで「ソフトウェアパッケージ」感を演出する。
ピクセルアート調の404ページ
深紫の宇宙を背景に、点滅する星・浮遊するピクセルキャラクター・グリッチするタイトルを組み合わせたレトロゲーム風の404ページ。冷たいエラー画面の代わりに、離脱の瞬間を小さな温度に変える。