インターネット考古学INTERNET ARCHAEOLOGY

Webデザイン史

昔のWebがあの見た目だったのは、趣味が古かったからではありません。 回線が遅く、画面が狭く、ブラウザができることが少なかった。 当時の見た目は、その条件から逆算された合理的な答えでした。

地層ごとのデザイン言語

1995 — 1999第1層 黎明期テーブルレイアウトフレーム背景タイル画像アニメーションGIF青いリンクアクセスカウンタ2000 — 2004第2層 ブロードバンド化ポータル型の高密度レイアウトグラデーション小型バナーFlashイントロ3カラム2005 — 2009第3層 SNS化Web 2.0光沢ボタン角丸タグクラウドRSS大きめのロゴ2010 — 2014第4層 スマートフォン化フラットデザインレスポンシブ大きなタップ領域無限スクロールカードUI2015 — 2019第5層 アルゴリズム化ダークモード縦型動画全画面カードマイクロインタラクション2020 — 現在第6層 生成AI時代会話型UIニュートラルな配色余白の多いレイアウト

画面構造の変遷

以下はすべて、実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。 スクリーンショットを転載しない代わりに、構造だけをHTMLとCSSで再現しています。

www.goo.ne.jp800px
検索
使い方の説明
関連サービス
1997年の画面構造カテゴリを敷き詰めたポータルとは対照的に、検索窓だけが中央にある画面。 「探すものが決まっている人が来る場所」という位置づけがそのまま構成に出ている。 ディレクトリ型が数万サイト単位で人手で分類していたのに対し、 ロボット型はページ単位で機械収集するため、扱う対象の桁がそもそも違っていた。※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
www.yahoo.co.jp800px
検索
カテゴリ
カテゴリ
新着情報
バナー広告 468×60
1997年の画面構造画像はロゴとバナーだけで、残りはすべてテキストリンク。カテゴリを2段組で並べ、 その下に新着情報が続く。ダイヤルアップの従量課金では、重いページは「遅い」ではなく「高い」ページだった。 軽さは美意識ではなく利用者の財布の都合であり、当時のレイアウトはその制約から逆算されている。800×600 のディスプレイを前提にした、横スクロールの出ない固定幅※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
www.geocities.co.jp/.../1234/800px
タイトル画像（自作GIF）
いらっしゃいませ！
メニュー
更新履歴
自己紹介
リンク集（相互リンク）
工事中
000000あなたは○○人目の訪問者です
BBS（掲示板）
1999年の画面構造タイトル画像、更新履歴、自己紹介、リンク集、工事中表示、そして最下部のアクセスカウンタ。 この並びが個人サイトのほぼ標準構成だった。カウンタが訪問者にも見えていたことが、 キリ番という交流の儀礼を成立させている。工事中表示が普通だったのは、 サイトを一度に完成させてから公開するという前提があったためである。背景に画像をタイル状に敷き詰めるのが標準的だった※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
www.rakuten.co.jp800px
商品検索
ジャンル
ジャンル一覧
特集バナー
新着ショップ
ランキング
出店案内
1999年の画面構造商品を横断して比較するのではなく、ジャンル → 店 → 商品という順路が優先されている。 「知らない相手から買って大丈夫か」という当時の警戒に対して、 店を選ばせるという設計で答えていた。フッタ近くに出店案内があるのは、 買う人と同じくらい売る人を集める必要があったからである。※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
iMenu（iモード公式メニュー）120px
iMenu
1 メニューリスト
2 料金照会
3 メール設定
4 お知らせ
ニュース／天気
着信メロディ
乗換案内
2000年の画面構造項目の頭に番号が振ってあるのは、カーソルで降りていくより数字キーを1回押すほうが速いからである。 片手で、歩きながら、数秒で目的に着く必要があった。 検索窓が無いのは技術的な制約ではなく、審査を通った公式サイトを階層で並べるという設計思想の結果で、 自由に広がるパソコンのWebとは前提そのものが違っていた。全角十数文字が数行という表示領域。横スクロールという概念自体が無い※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
キリ番報告のお願い800px
「キリ番を踏んだ方はご報告ください」
000000現在のカウント
キリ番の履歴（番号／踏んだ方／記念品）
「踏み逃げ禁止」の注意書き
報告用掲示板へ
2000年の画面構造カウンタの数字、これまでのキリ番の記録、そして報告先の掲示板。 数字が訪問者にも見えていること、到達に何か月もかかること、 サイト主と訪問者の距離が近いこと。この三つが同時に成立していた時期にだけ、 この画面は意味を持った。※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
2ch.net（スレッド表示）800px
スレッドタイトル
前100 次100 最新50
書き込み
書き込み
書き込み
書き込む
2001年の画面構造装飾がほとんどなく、1ページに数百件の書き込みが並ぶ。これは手抜きではなく、 低速回線でも読める形を優先した結果である。等幅フォントで表示されることが前提だったため、 記号を組み合わせて絵を描くアスキーアートが機能した。 文字だけの制約が、逆に独自の表現を育てた例といえる。等幅フォントで表示されることを前提にした画面※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
auctions.yahoo.co.jp（商品ページ）800px
カテゴリ ヘルプ マイ・オークション
商品タイトル
出品画像
現在価格／残り時間／入札件数／出品者
入札する
入札履歴
商品の説明（出品者が書いた文章）
出品者の評価を見る
2001年の画面構造最も目立つ位置にあるのは写真でも説明でもなく、現在価格と残り時間である。 通販のページが「買うかどうか」を判断させる構成なのに対し、 ここは「今いくらで、あと何分か」を伝える構成になっている。 出品者の評価へのリンクが商品説明と同じ重みで置かれているのは、 相手が事業者ではなく見ず知らずの個人だったため。※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
www.yahoo.co.jp1024px
バナー広告
検索
サービス
カテゴリ
主要ニュース
トピックス
オークション
広告
フッタリンク
2003年の画面構造常時接続の普及で1ページに載せられる情報量の上限が上がり、3カラムが完成した時期。 左にカテゴリ、中央にニュースと検索、右にオークションと広告という配置は、 以後10年近く日本のポータルの標準になる。現在の目には過密に見えるが、 横に広く縦に短い画面で、マウスで細かいリンクを正確に押せることが前提だった。1024×768 が標準になり、横幅の使い方が一気に変わった※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
mixi.jp（ホーム）1024px
ホーム 日記 コミュニティ
プロフィール画像
マイミクシィ
あしあと
最新の日記
コミュニティの新着
広告
おすすめ
2005年の画面構造中心にあるのは日記で、その周りに人間関係が配置されている。 左の「あしあと」は誰が自分のページを見たかの一覧で、読むだけでも相手に伝わった。 この設計は交流を促進する一方、見たのに反応しないことが気まずいという独特の緊張も生んだ。 角丸と淡い配色は、当時Web 2.0と呼ばれた視覚言語である。※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
www.nicovideo.jp（動画視聴ページ）1024px
ランキング 検索 マイリスト
流れるコメント
動画（この上をコメントが流れる）
コメントを書く
動画の説明
タグ
コメント一覧
2007年の画面構造通常の動画サイトが動画とコメント欄を上下に分けるのに対し、ニコニコはそれを重ねた。 右のコメント一覧は補助で、体験の中心は動画の上を流れる文字のほうにある。 別々の日に書かれた反応が同じ場面で同時に現れるため、非同期なのに同時に見ているように感じられた。※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。