Windows 98風ボタンの境界線を観察する ― 古さの正体は「面」と「影」にある

Windows 98風のボタンは、一目見ただけで「古いUI」だと認識できる。だがその判断は一瞬で下されている割に、何がそう感じさせているのかを言語化するのは意外と難しい。この記事では、あのボタンを構成する境界線・立体感・余白・フォントを一つずつ観察し、ただのネタとしてではなく、現代のページに特徴として混ぜ込むための材料として整理する。

1. 実物プレビュー:古いボタン風

まず、最小構成でWindows 98風のボタンを再現する。

<button class="win98-button">OK</button>

.win98-button {
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  font-family: "MS Sans Serif", Tahoma, sans-serif;
  font-size: 12px;
  padding: 2px 10px;
}
.win98-button:active {
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

これだけで、あの独特の「押せそうな灰色の箱」が現れる。装飾らしい装飾は一切なく、境界線の色だけで立体感を作っている点がまず目を引く。

2. ソース断片:最小HTML/CSS

構造をさらに切り分けて確認する。HTMLは極めてシンプルで、ボタン要素一つに対してクラスを一つ付けるだけで成立する。

<button class="win98-button">OK</button>

CSS側では、立体感を担うのは境界線の四辺それぞれに異なる色を割り当てる部分だ。

.win98-button {
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
}

上と左を明るい色、下と右を暗い色にすることで、左上から光が当たっているかのような疑似的な立体感が生まれる。これはCSSのoutsetやinsetの考え方そのもので、実際にborder-style: outset;と指定するだけでも近い見た目を得られる。

.win98-button-simple {
  border: 2px outset #c0c0c0;
  background: #c0c0c0;
}

outsetは「盛り上がって見える」枠、insetは「へこんで見える」枠を表現するためのスタイルで、Windows 98当時のUIはこの仕組みをボタンだけでなく、パネルやテキストボックスの枠にも一貫して使っていた。

3. 観察:古く見える要素

このボタンが古く見える理由を分解すると、いくつかの要素が重なっていることに気づく。

まず面の単色さ。背景は#c0c0c0というグレー一色で、グラデーションや半透明のような「奥行きのある面」を一切使わない。現代のUIが光の反射や透明感で質感を作るのに対し、Windows 98は色そのものではなく境界線の配色で立体感を表現していた。これは当時のディスプレイの表示能力やレンダリング負荷を踏まえた、機能上の制約から生まれた表現でもある。

次に硬い影。ぼかしのない直線的な境界線は、今の目には「柔らかさがない」と映る。現代のシャドウはbox-shadowでぼかしを入れるのが基本だが、当時はぼかしという概念自体があまり使われず、輪郭がくっきりとした「硬い」立体感が標準だった。

さらに狭い余白。パディングは2px 10px程度と極めて小さく、文字と枠がほぼ密着している。これは画面解像度が低かった時代に、限られたピクセル数の中でできるだけ多くの要素を配置する必要があったことの名残りとも言える。

最後にフォント。MS Sans Serifのような太さの均一なビットマップ的書体は、なめらかな現代のシステムフォントと比べると、輪郭がやや粗く感じられる。フォント一つでも、時代の質感を大きく左右する要素になっている。

4. 現代的に整えた比較プレビュー

同じ「境界線で立体感を出す」という発想を残しつつ、現代的な可読性とクリック領域を確保した形に整えるとこうなる。

.modern-outset-button {
  background: #f3f4f6;
  border-radius: 8px;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #d1d5db;
  border-bottom: 1px solid #d1d5db;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: 14px;
  padding: 8px 20px;
}
.modern-outset-button:active {
  border-top: 1px solid #d1d5db;
  border-left: 1px solid #d1d5db;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

角丸を加え、境界線の色差を控えめにし、ごく薄いぼかし影を一枚足すだけで、同じ「押せそうな立体感」を保ちながら硬さが抜ける。パディングも余裕を持たせ、タップ領域を確保している。並べて見ると、Windows 98風のほうが情報として「操作可能であること」を強く主張しており、現代版はその主張を控えめにして全体のトーンに馴染ませていることがわかる。

5. 使いどころと避けたい使い方

この境界線表現は、ページ全体に敷き詰めるとただの再現ネタで終わってしまう。効果的なのは、あえて一箇所だけに残す使い方だ。たとえば懐かしさをテーマにした企画ページの中で、一つのボタンだけをこの質感にする、あるいはレトロゲームやOS風のUIを模した限定的なコーナーにだけ使う、といった具合に「異物感」を演出として機能させるのが向いている。

避けたいのは、フォームやナビゲーションなど、実際の操作性が重視される部分にそのまま持ち込むことだ。狭い余白や硬い境界線は、現代のタッチ操作を前提とした画面では押しにくさに直結する。懐かしさを狙うにしても、クリック領域と可読性だけは現代の基準まで引き上げたうえで、境界線の配色や硬さといった「見た目の成分」だけを借りる、という切り分けが実用的だ。

6. 関連するUI表現

境界線と立体感による古さの表現は、平成レトロな小窓や過密なリンク配置とも通じる部分がある。狭い余白や硬い輪郭線は、当時のUI全体に共通する制約から生まれた質感であり、ガラス感のような透明で丸みのある表現とは対照的な「角ばった古さ」の系譜としてまとめて見ていくと、平成期のUIが抱えていた複数の美意識がより立体的に見えてくるはずだ。

参考情報

• MDN: border-style
• MDN: box-shadow
• MDN: :active