(2022/4/12) 英語版を書きました。よろしければ拡散お願いいたします。
説明する必要も無いと思うが、阿部寛さんと言えば日本を代表する名優の一人であり、数々の作品でその巨躯以上の存在感を見せつける、映像業界にはなくてはならない存在だ。実写に疎い私ですら、「TRICK」のポンコツだがプライドは一人前な上田教授、「テルマエ・ロマエ」の『未来』の日本に驚嘆し、その工夫を当時の技術で貪欲に取り込むローマ人温泉技師ルシウス、「下町ロケット」の熱血でより良い製品の開発に力を注ぎ、町工場の高みを目指す佃社長と、その名演はふと思い出せるくらい、語らずにはいられないくらい記憶に刻まれている。
その阿部さんのホームページは、その懐かしいデザインと、軽量高速なことであまりにも知られている。ホームページ一つでここまでミームになるのは、海外でも「スペース・ジャム」の四半世紀前のページくらいだろう。
しかし、その速さというのは、ある種の逆転の発想でできている。実のところ、スペース・ジャム同様コード自体が古いのだ。佃社長のように技術を愛するものとして、かつ進歩主義者である私としては、見過ごすわけにはいかない。
テルマエ・ロマエIII.II
阿部寛のホームページは単にデザインが懐かしいだけではない。本来HTML仕様として破棄された要素の集合体である。使われているコードはHTML3.2相当だ。
禁忌その1：<frame>レイアウト
阿部寛のホームページのレイアウトの骨組みとして使われている<frame>要素および<frameset>要素は、HTML仕様上すでに廃止されている。MDNによると「パフォーマンスの問題やスクリーンリーダーを使用するユーザへのアクセシビリティの欠如といった欠点があるため（中略）<iframe>を推奨します。」とのことなので、<iframe>に切り替えれば更なる爆速化が狙えるかもしれない。
禁忌その2：スタイリングはHTML属性として直書き
阿部寛のホームページはCSSなんてはいからさんが通るようなものは使っていない。ましてやJSなんてTRICKは必要ない。全部をbgcolor、marginwidthといったHTML属性で賄っている。これが現代的でないことはWeb開発者ならご存知のことだろう。だがおそらくこれが、あのページの表示の速さにつながっているのではないか。言うならばプレ・クリティカルCSSだ。廃止された要素がそのように働くというのは皮肉だが、Webは行ったり来たりを繰り返しているのだ。
しかし、個人的には上記の2つは意外と見直されるのではないかと考えている。これからのWebは退行していくのではないかと考えている（人類が木星に着いたらピテカントロプスになったみたいな感じで）からだ。<frame>レイアウトは早すぎたSPAのように見えなくもない。
禁忌その3：<font>要素を使っている
なぜかGmailで使われている<font>要素だが、これもHTMLになぜ存在するのか分からない、廃止済みの要素である。そもそもどうして<div>とかにcolor属性付けなかったんだろう。
HTML 2000 ミレニアム
これから紹介するのは、モダンなWeb開発に於いてバッドプラクティスと呼ばれるものである。
テーブルレイアウト
全てをテーブルという枠組みでデザインする、神ExcelのHTML版である。<table>関連要素が当然現役のためあえて禁忌とは呼ばないが、そのまずさは「本来情報を伝えるための文書内に、その意味とは関係ない見た目を定義する」という点に集約される。編集のしづらさなども問題点だが、詳しいことはググってほしい。
ここで特にひどいのはメニューである。<ul>を使うべき要素を全部<table>レイアウトで表現しているばかりか、左端に空白の<td>、マーカーは<font>要素の文字で表現している。行間は1行丸々空の<tr>（律儀に<td>3つ分入れている！）で表現されている。そこ、height=32 valign="center"とかじゃないんだ（heightは適当だけれど、意味は分かるでしょう）。
また、トップページはテーブルの中にテーブルが入っていて単純にカオスである（サブグリッドかな？）。
やたらと<br>が入る
行を空けるために<br>が使われている。そもそもそういうタグじゃねーからこれ！ と言いたくなる。実際<br>はHTML界でも過去の遺物みたいな要素である。
なぜそこに<strong>？
所属欄のコロンになぜか<strong>が設定されている。セマンティクス的にはこのコロンは見た目だけのものであり、なぜこれを強調するのか、それが分からない。
テーブルを使うのが適切なところでも
例えば映画出演のページには正しい（使うべき場所という意味で）テーブルがあるが、なぜか<th>が設定されていない。全て<td>である。一番上に公開日・作品名・その他など振っても良いと思うのだが。
それよりすべてのセルにもれなく<strong>と振ってあって、作者の阿部寛愛がひしひしと伝わってくる。作者にとっては、阿部寛さんの一挙手一投足がすごいことなのだ。そんなホームページに負けないように、この記事も見出しなどに阿部寛さんの出演作をオマージュしてみたが、いかがだろうか。
アクセシビリティ的にはどうか
テーブルレイアウトはアクセシビリティの面で推奨されていないことはご存じだろうか。スクリーンリーダーこそ手元にないが、ソースの順番を読むことである程度「HTMLを表示通りに読めない人（盲目の阿部寛ファンも多数いることだろう。ケンシロウを演じたこともあるほどの力強い声だし）」にはどのようにページが見えるのかというのを推測できる。
トップページの見た目上のフローは以下のとおりである。
- タイトル
- 阿部さんの写真
- 最新情報欄
- 阿部さんの簡単なプロフィール
- 連絡先紹介（海外進出も視野に入れているのか英語）
- 所属
しかし、実際のフローは最新情報欄が一番最後である（1→2→4→5→6→3の順）。おそらくスクリーンリーダーが必要な人は最新情報の方が必要だろう。従って、サイトの構造が適切にオーガナイズされているとは言えない。
他のページは見た目通りのフローであるので問題は無さそうだ。
If it ain't broke, don't 来い、超常現象
だからと言って、このホームページを直すべきか。自分が作るならモダンなHTMLにするだろうが、先述のフローの問題を除けば、阿部さん本人がおっしゃる通りあえて直す必要は無いと思う。なぜか。ブラウザの後方互換性によりページの動作が保証されていること、俳優のプロフィールは名刺みたいなものなので、必ずしも最新のデザインは必要ないだろう（重要なのは過去と未来、すなわち今までの経歴と出演予定である）こと、そして何より、懐かしいデザインは阿部さん本人のファミリアを長年愛用する庶民派な性格を表現していると言えるからだ。また、先ほども述べた通り、ソースコードからも作者が阿部寛さんを神推ししていることが伝わってくる。無駄な要素を削るなどの整理をすればもっと早くなるかもしれないが、それをする必要性も感じられない。阿部寛のホームページは、JS過多になりつつあるフロントエンドの虚飾への警句と言えるかもしれない。
以前警察のWebページを槍玉にあげたが、それは警察が新鮮で機動的、かつ最新の情報犯罪にも精通している組織であることのアピールとしてWebサイトが重要だからだと考えたからだ。1990年代のデザインでサイバーとか言っても、それはあの頃に「マトリックス」を見て、あれを現実と思いこんだファンみたいに見えてしまう。しかし阿部寛さんは（電気工学科出身だが、在籍当時はまだプログラミングとかはやっていなかっただろうし）そこまで最新の技術を追いかける必要は無い。彼の最大の商売道具は演技だからだ。
そして、サイトの古臭さと阿部さんのキャラクターは絶妙にマッチしている。飾りっ気のないデザインはどっしりした質実剛健なキャラクターによく合っている。そしてファミリアの件など、古いものでも大事に扱う彼の性格をあのページが教えてくれる。
記事のタイトルの意味は説明しなくてもわかるだろう。ソースに<meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows">とあるが、明らかにそれ（Wikipedia曰くホームページ・ビルダー 20の発売は2015年）より古い技術で作られたページが、現代もメンテされて生きているからだ。この辺が26年前のミイラと言えるスペース・ジャムとの違いである。阿部さんもシーラカンスのごとく長生きして、老年の境地を見せてほしいという願いも込められている。ひょっとしたら、現代にタイムスリップしてきたルシウス・モデストゥスという方が、阿部さんのキャラに合っているかもしれない。
(2022/4/12) このページを見ていて大事なことは、「表現したい」という意欲に満ち溢れているという、Web黎明期の精神を伝えてくれるコードだということだ。Webがセマンティックに整理され、洗練されていく中で、大事な何かを失ったのかもしれない。いずれにせよ、各領域が際限なく拡張され、もはや個人の手におえるものではなくなってしまったのは間違いない。
「阿部寛のホームページ」はダモクレスの剣でもある 激闘の章
しかし、阿部寛のホームページが問題なく表示されるのは、ブラウザがレガシー要素に対応しているからだ。本来なら廃止されている要素を使っているのでので、阿部寛のホームページは壊れても文句は言えないあばら家だ。しかし幸いなことに、レガシーHTMLをいずれのブラウザも維持してくれている。ChromeやSafariなど、HTML4.01以降に登場したブラウザであってもだ（もっとも、彼らの共通の祖先―というよりChromiumがWebKitのフォークなわけだが―であるKHTMLが登場したのは1998年なので、対応しているのはおかしくないと言える）。
(2022/4/12) ただ、興味深いのは、AppleはiPhoneでFlash対応を見合わせていることだ（それがHTMLのモダン化につながった）。Flashはクローズな規格だったというのが大きいだろうが、HTML3.2の廃止要素や属性もまたNetscapeが勝手に定義したものである（勝手に定義したと言えばJavaScriptもだけど）。それらを黒歴史だと放棄しなかったのは実装コストがかからなかったからだろうか。今となっては廃止要素をサポートしたのはさりげない明断だと言える。
レガシー要素や属性はHTMLの歴史でもある。HTTPの謎コード「I'm a teapot」もそうだが、HTMLが様々な紆余曲折、創意工夫を経ていたことを如実に示すものだ。そして、覆水盆に返らず (Don't cry over spilt milk.) とも言う。I'm a teapotが保持されたのだから、レガシーHTMLが保持されるのは間違ったことではないだろう（<!DOCTYPE html>と宣言されていたら無効になるということにしなかったのはブラウザの対応が面倒だったし、やる利点の方が少なかったからだろうか）。
阿部寛のホームページはWebブラウザの命運を握るダモクレスの剣と言える。後方互換性の糸が切れたとき、Webブラウザも死を迎えるのだ。もっとも、IEという巨星が退場することで、過去の清算としてレガシー要素の排除が進むかもしれない。今は阿部寛のホームページやスペース・ジャムのページが永劫見られるように祈ろう。
(2022/4/12) 考えられる「過去の清算」プランとしては、EdgeのIEモードみたいにレガシーHTMLを開く専用のモードができて、古いソースはそちらで処理するという風に移行するということが考えられる。そうするとレガシーコードは本物の「過去」になってしまう。阿部寛のホームページは隔離された存在となり、表示スピードも遅くなってしまうだろう。それが本当に良いことなのか、Web全体で考えるべきではなかろうか。
(2022/4/14) 念のために補足しておくと、最新のWeb開発でこれらの「廃止済み」要素や属性を使えということではない。今ならもっとエレガントにコードを書けるやり方を我々は知っているはずだ。直接見た目を定義するならstyle属性を使った方がさらにきめ細かくできる。いや、<style>要素の方が疑似要素や疑似クラスを使える。ただ、古い書き方をブラウザが許しているなら、それが崩れたら問題だよね、という話である。ただ、オールドスタイルにも再考の余地はあると個人的には考える。