阿部寛さんのＨＰ（ＨＰは全角表記がふさわしい）は，圧倒的な存在感を放っており，多くの人を魅了し続けている。ウェッブな連中が参照すべき手本として，このままの状態での存続を願う。
この記事では阿部寛さんのホームページを，webdesignの視座からどこよりも詳しく解説する。（※以下のデータは2014年4月14日現在のもの）
[Sponsored link][ad]
まず，http://homepage3.nifty.com/abe-hiroshi/の基本スペックを確認しよう。
- ホームページビルダーで作成
- フレーム＆テーブルで牧歌的な表現を演出
- 壁紙から自作するのが基本
- nifty会員用のサーバーに設置（現在は新規募集していないので注意されたい）
- .htmlではなくて.htmなのはホームページビルダーの仕様で，拡張子3文字時代の牧歌的雰囲気を細部からも演出
- アクセス解析の類いが見当たらない（ニフティにそんなサービスはないしあったとしてもタグを貼り付ける必要がある）
- 現在もまめに更新されている
- 189cm75kg，中央大学理工学部 電気工学科卒（サイズと学歴は個人サイトで最も重要な情報）
無駄をそぎ落としたシンプルなデザインにその美しさを求める者もいるが，htm(l)のソースを確認すると，むしろ装飾的な要素がふんだんに搭載されていることがわかり，webサイトを作る楽しさを思い出させてくれる。
以下はフレームでデザインされたトップページの右側に表示されるtop.htmの分析である。
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.0.2 Trial for Windows">
<style type="text/css"> <!-- .style1 {color: #FF0000} --> </style>
メタタグの記述によって，ホームページビルダーの体験版を駆使して作られたことがわかる。ビルダーが勝手に吐き出すジェネレーター タグは昔から評判が悪かったけれども，これはむしろ評価ポイント。スタイルシートはhtm(l)に直接記述し，クラス指定されている
CSSで暮らす指定された「style1」は 「New!」を赤色に装飾するためだけに使われている。もちろんこれはCSSを使わなくても<font color>タグでできるのだが，別言すれば阿部氏のホームページの多くの部分はCSSに記述して表現することも可能である。
一つの技術に集約するのではなくて，複数の方法できることなら，むしろ全部を使って表現したくなるものだ。webサイトを作る楽しさを知る者ならこの感覚はよくわかる。
<p> 所属<strong>:</strong><br> 茂田オフィス<br> 107-0052<br> 東京都港区赤坂9-5-29 <br> 赤坂ロイヤルマンション303<br> TEL : 03-5410-8585<br> FAX : 03-5410-0588</p>
「所属:」とコロンをストロングタグで強調しているのは，おそらく，適当に割り当てられた番号にすぎない「TEL : 」や「FAX : 」と「所属:」が同列ではないことをはっきりと見た目で示すためのデザイン面の配慮であろう。さらにいえば，半角スペースがTELやFAXの後にあるのに所属の後にはないのも，コロンが必要以上に目立ってしまわないための配慮だと思う。
<img src="abe-top2-4.jpg" width="256" height="304" border="0">
画像のサイズが中途半端なのはホームページビルダー上でリサイズするから。しかしabe-top2-4.jpgのオリジナルが314px×366pxなので もともと中途半端。
これは画像編集ソフトでリサイズとトリミングをしてから、さらにホームページビルダーでもう一回修正を加えるという，ギリギリまで適正サイ ズを追求した管理人の妥協なき姿勢の痕跡。
どさくさ紛れに縦横の比率を変えてスリムに仕上げられているが，じつに示唆的である。常に美しくあらねばならない芸能人は，時に残酷なまでのデジタル加工を受け入れなければならないことを教えてくれる。
ちなみにabe-top2-2.jpgとabe-top2-3.jpgもサーバー上に存在していて，それぞれ大きさや写っている範囲が違う。当然のように http://homepage3.nifty.com/abe-hiroshi/abe-top.jpg の存在を疑うのがウェッブの正しい見方であり，こちらもしっかりと存在する。
abe-top.jpgはイケメン成分を多めに含んでいてマニア向けの隠しファイルとして用意されたものだと思う。abe-top2-4という示唆的なファイル名は比較的簡単に隠しファイルの存在に気づかせてくれる。ネット初心者にも優しいユーザビリティ重視のweb作り。
保存済みのabe-top.jpg（直リンはしてないよ）
最も理解を困難にさせているのが，ソース最上部に記述された下記の2行だ。
<!-- saved from url=(0022)http://internet.e-mail --> <!-- saved from url=(0022)http://internet.e-mail -->
どうやら web上のhtm(l)ファイルをローカルに保存した時にIEが勝手に挿入するメタタグらしいが，これはよくわからない。
クリエイティビティの巨大な見本市であり，オリジナリティのかたまりである阿部寛のホームページが，デザインの盗用目的で保存した他人のファイルを出発点にしているわけがないということだけは，冗談抜きに断言できるし見れば誰でもわかる。
まあ，管理人のマイドキュメントフォルダが一時的にカオスでtop.htmが行方不明になってしまったことがあって，ゆっくり探したくても迅速な更新が要求される阿部氏の「エッチピー」でそれは許されないから，自らオンライン上のファイルを保存したとかそんな感じだと思う。
ftpで安心と信頼の@nifty サーバーに接続してダウンロードすれば済む話かもしれないけれど，コアファイルのtop.htmが行方不明なパニック状態で冷静な判断は無理だし結果が同じならどの方法を選ぼうがおーるおっけーなのである。
おしまい