あの「起動音」が聞こえてきそうなデザイン
スタートメニュー、灰色のウィンドウフレーム、メモ帳のテキスト入力欄、タスクバー。これらの言葉にピンと来る方は、1990年代のパソコン体験を覚えている世代でしょう。そしてその記憶がない若い世代にとっても、レトロPCのインターフェースは「ピクセルアートの世界」として新鮮な魅力を持っています。
無料HTMLテンプレート『RETRO（レトロ）』は、1990年代後半のパソコン画面をWebブラウザの中に忠実に再現したテンプレートです。デスクトップの壁紙のような背景に、作品がファイルアイコンとして並び、クリックするとウィンドウフレーム付きのポップアップで画像が開く。メモ帳風のエリアにはテキストが入力でき、タスクバーには「Start」ボタンが鎮座する。ノスタルジーとユーモアが融合した、遊び心あふれるデザインです。
デザインの特徴とこだわり
デスクトップ上のファイルアイコン ― 作品は「ファイル」
ギャラリーの画像は、正方形のサムネイルの下にファイル名ラベルが付いた「デスクトップアイコン」形式で画面に配置されます。90年代のOSでは画像をダブルクリックして開くのが基本操作でした。その体験をWebに移植するだけで、「作品を開く」という行為に独特のワクワク感が加わります。
クラシックウィンドウ ― 懐かしの3ボタン
アイコンをクリックすると、灰色の枠と3つのウィンドウ操作ボタン（最小化、最大化、閉じる）が付いたクラシックなウィンドウが開きます。画像はこのウィンドウの中に表示され、まるで「ビューアーソフトで写真を開いた」ような体験になります。
メモ帳風テキストエリア
テキストコンテンツは、白い入力欄にカーソルが点滅する「メモ帳」風のエリアに表示されます。等幅フォントで書かれた文章は、まさに notepad.exe で書き留めたメモを彷彿とさせます。プロフィールや活動記録をここに書き込めば、テーマの世界観を壊さずに自己紹介ができます。
VT323フォント ― ピクセルの一文字一文字
使用フォントの「VT323」は、ブラウン管モニターに表示されていたドット文字を再現した書体。日本語テキストには「DotGothic16」というドットフォントが使われます。フォントだけで90年代のPC画面を再現するのは難しいものですが、この2つの組み合わせがその難題を見事にクリアしています。
あの”立体感”は、たった2色の枠線でできている
Windows 95風の最大の特徴は、ボタンやウィンドウが画面からポコッと浮き上がって見える”立体感”です。これ、影でもグラデーションでも画像でもなく、たった2色の枠線だけで作っています。
仕組みはシンプルで、四角形の「左と上の辺を白」「右と下の辺を濃いグレー」にするだけ。人間の目は光が左上から当たっていると錯覚するので、左上が明るく・右下が暗いと「手前に飛び出している」ように見えるんです。逆に左上を暗く・右下を明るくすると、今度は「へこんでいる」ように見える。だから文字入力欄や画像の枠は凹ませて”くぼみ”を、ウィンドウやボタンは浮かせて”出っぱり”を表現しています。
芸が細かいのがボタンで、クリックして押し込んだ瞬間に明暗の向きが反転し、”へこむ”ように切り替わります。本物のボタンを押した感触まで、枠線の色だけで再現しているわけです。
こんな方・こんな用途におすすめ
ピクセルアーティスト・ドット絵クリエイター
作品もテンプレートも同じピクセルの言語で語られるため、完璧な調和が生まれます。ドット絵のキャラクターを「デスクトップアイコン」として並べるだけで、展示空間がそのまま作品の延長になります。
インディーゲーム開発者
レトロゲームの雰囲気を持つインディーゲームのプロモーションサイトにぴったり。スクリーンショットをウィンドウフレームの中に開く体験は、そのまま「ゲームのデモプレイ」のように感じられます。
90年代テーマのコンテンツクリエイター
ヴィンテージカルチャー、レトロテック、カセットテープやフロッピーディスクをテーマにした作品を作る方にとって、テンプレートそのものが「コンテンツの文脈」を提供します。
正直、”ネタが強い”テンプレートです
RETROは、開いた瞬間に「おっ」と思わせる力が抜群な反面、その遊び心（デスクトップごっこ）が前に出るぶん、万人向けではありません。ピクセルフォントやウィンドウだらけの画面は、長い文章や込み入った情報を落ち着いて読ませるのが苦手で、堅めの仕事やクライアント向けの信頼感が必要な場面では”悪ふざけ”に見えてしまうこともあります。世界観を楽しむ前提で、刺さる相手に向けて使うのが正解です。
ぴったりなのは、ピクセルアーティスト、インディーゲーム開発者、90年代カルチャーの発信者など、レトロPCの文脈そのものが自分の作品とつながっている人です。
もし「ギーク感は好きだけど、もう少し硬派で実務にも使いたい」なら、黒い端末画面の TERMINAL のほうが大人っぽく決まります。「賑やかで楽しい雰囲気は欲しいけど、もっと読みやすくしたい」なら、極太でポップな BOLD が扱いやすいです。自分の見せたい”ふざけ加減”に合わせて選んでみてください。
カスタマイズのヒント
壁紙風の背景色をカスタマイズ
デフォルトのティール（青緑色）はWindows 95のデスクトップの定番色ですが、他の色に変更すれば「別のOS」や「別の年代」を演出できます。紺色にすれば Windows 98 風に、パープルにすれば独自の世界観に。背景色を変えるだけで、デスクトップ全体の空気感が変わります。
タスクバーを活用する
画面下部のスタートバーは飾りではなく、時計やユーザー名が機能的に表示されます。「Start」メニューはリンク集としても機能しますので、SNSへの導線として活用できます。スタートボタンのクリックで開くメニューも、懐かしいウィンドウ操作の再現です。
メモ帳エリアでの自由な発信
テキストコンテンツの「メモ帳」エリアは、活動記録や自己紹介に最適です。等幅フォントで表示されるためプログラムコードの紹介にも適しており、クリエイターとしての多面的な活動を一つのエリアに集約できます。
配色は、90年代のPC画面を思い起こさせる”記憶のスイッチ”
このテンプレートの色は、なんとなくレトロっぽい色を選んだのではなく、あの時代のパソコン画面を象徴する定番の組み合わせを意識して選んでいます。デスクトップの青緑（ティール）、ウィンドウのシルバーグレー、タイトルバーの紺色。当時を知る人の記憶のスイッチを押すのは、こうした”見覚えのある配色”です。
背景色を変えれば、年代やOSの雰囲気を変えられます。紺色にすればより新しいPC風に、紫にすれば架空のレトロOSに。ここは自由に遊べる部分です。
一方で、触るときに気をつけたいのが「枠線の明るい色／暗い色」のペア（白と濃いグレー）です。これは前述の”立体感”を生む心臓部なので、似た明るさの色同士に変えてしまうと、ボタンやウィンドウが平べったくなって一気に安っぽくなります。AIに頼むなら「デスクトップの背景色だけ○○に変えて。枠線の明暗ペアは立体感が出るように残して」と伝えると、雰囲気を保ったまま色を変えられます。
まとめ ― 古いものは、新しい
『RETRO』は、「古臭い」のではなく「新感覚のレトロ」です。かつて毎日使っていたあのデスクトップ画面が、いまポートフォリオとして蘇る。90年代を知っている人には懐かしさを、知らない人には新鮮さを届けるテンプレートです。
