インターネット考古学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 — 2021第5層 アルゴリズム化ダークモード縦型動画全画面カードマイクロインタラクション2022 — 現在第6層 生成AI時代会話型UIニュートラルな配色余白の多いレイアウト

画面構造の変遷

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

PC-VAN（SIG の一覧）640px
ログイン後の案内（お知らせ・未読件数）
SIG（話題別の掲示板）を選ぶ
番号 + SIG名（パソコン／音楽／将棋／地域…）
選択：番号を入力
電子会議室の発言（発言番号・ハンドル・日付・本文）
1990年の画面構造一覧が画面に収まりきらないため、続きは改ページではなく「上へ流れて消える」。 読み返すには受信内容をファイルに保存しておく必要があり、 ログを取るという習慣はここから来ている。 番号を覚えている常連ほど短時間で用を済ませられ、 操作の習熟度が通話料の差として現れた。 これは実際の画面の複製ではなく、構成を説明するための模式図である。通信ソフトが表示する文字端末の画面。ページという概念がなく、上から流れて消えていく※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
NIFTY-Serve（端末画面）640px
接続中の表示（通信速度・経過時間）
NIFTY-Serve メインメニュー
番号付きの項目（電子メール／フォーラム／ニュース／ショッピング）
コマンド入力欄（GO＋フォーラム名で直接移動）
フォーラムの会議室一覧
未読の発言（一括受信してから回線を切って読む）
1995年の画面構造Webのページではなく、通信ソフトが表示する文字だけの画面である。 画像も配色もなく、移動は番号かコマンドで行う。上部に接続時間が出ているのは装飾ではなく、 そこに表示されている数字がそのまま料金だったからである。 よく使う場所へ一発で飛ぶ GO コマンドが重宝されたのは、 階層をたどる時間そのものが課金対象だったことの裏返しだった。 これは実際の画面の複製ではなく、構成を説明するための模式図である。ブラウザではなく通信ソフトの画面。80桁×24行の文字端末を前提にした表示※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
アクセスポイント一覧（つなぐ前に見る画面）640px
アクセスポイント一覧
※ お住まいの地域から区域内通話でかけられるかをご確認ください
都道府県／設置場所／電話番号
※ 区域内通話の区域外からは、通話料金が別途かかります
※ アクセスポイントは予告なく追加・変更・廃止されることがあります
接続設定の手順 ／ よくあるご質問 ／ サポート窓口
1996年の画面構造料金表ではなく電話番号の一覧が、契約を決める資料だった。 月額料金が同じでも、自分の住所から区域内通話で届く番号があるかどうかで、 実際に払う額がまったく違ってくる。 1996年10月現在、ダイヤルアップIP接続用のアクセスポイントは全国に282か所。 全国3,255市町村のうち区域内通話でつなげたのは2,126市町村で、 残りの約3分の1は、つなぐたびに市外通話の料金が乗った。 下の但し書きも当時の性格を示している。 一覧は固定されておらず、追加も廃止もある。 利用者は接続先の番号を自分で管理し、変わるたびに設定を直していた。 いまの回線契約に「どこへ電話をかけるか」という項目は無い。 つなぐという作業が利用者の側に残っていたことが、この一枚に出ている。 これは実際の画面の複製ではなく、構成を説明するための模式図である。契約前に確認し、契約後も手元に置いておく一覧。紙で配られることも多かった※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
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年の画面構造商品を横断して比較するのではなく、ジャンル → 店 → 商品という順路が優先されている。 「知らない相手から買って大丈夫か」という当時の警戒に対して、 店を選ばせるという設計で答えていた。フッタ近くに出店案内があるのは、 買う人と同じくらい売る人を集める必要があったからである。※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
個人サイトのCGIチャット640px
部屋の名前と「現在○人」の表示
発言ログ（新しい順に上から積まれる）
ハンドル入力
発言入力欄
色・アイコンの選択
発言する
ローカルルール（初めての方はお読みください）
2000年の画面構造自動更新の仕組みが無かったため、上半分のフレームだけを数秒おきに再読み込みして 新しい発言を取りに行く作りが一般的だった。読み込むたびに通信が発生するので、 部屋を開いているだけで課金が進む。 発言欄のとなりにハンドル入力が置かれているのは、ログイン機能を持たず、 毎回名乗ってから話す形式だったからである。 下部のローカルルールは飾りではなく、管理人が一人で秩序を保つための唯一の手段だった。 これは実際の画面の複製ではなく、構成を説明するための模式図である。フレームで上下に分割し、上だけを数秒おきに再読み込みして更新を取る構成※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
iMenu（iモード公式メニュー）120px
iMenu
1 メニューリスト
2 料金照会
3 メール設定
4 お知らせ
ニュース／天気
着信メロディ
乗換案内
2000年の画面構造項目の頭に番号が振ってあるのは、カーソルで降りていくより数字キーを1回押すほうが速いからである。 片手で、歩きながら、数秒で目的に着く必要があった。 検索窓が無いのは技術的な制約ではなく、審査を通った公式サイトを階層で並べるという設計思想の結果で、 自由に広がるパソコンのWebとは前提そのものが違っていた。全角十数文字が数行という表示領域。横スクロールという概念自体が無い※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
キリ番報告のお願い800px
「キリ番を踏んだ方はご報告ください」
000000現在のカウント
キリ番の履歴（番号／踏んだ方／記念品）
「踏み逃げ禁止」の注意書き
報告用掲示板へ
2000年の画面構造カウンタの数字、これまでのキリ番の記録、そして報告先の掲示板。 数字が訪問者にも見えていること、到達に何か月もかかること、 サイト主と訪問者の距離が近いこと。この三つが同時に成立していた時期にだけ、 この画面は意味を持った。※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
個人サイトのリンク集640px
LINK ── リンクについて（無断リンクはご遠慮ください）
当サイトへのリンクはこちらのバナーをお使いください
自サイトのバナー（保存してお使いください）
■ 相互リンク
相手サイトのバナー
サイト名と管理人からの紹介文
相手サイトのバナー
サイト名と紹介文
相手サイトのバナー
サイト名と紹介文
相手サイトのバナー
サイト名と紹介文
■ 参考にさせていただいたサイト（片道リンク）
2000年の画面構造リンク集は名簿であると同時に、自己紹介の一部だった。 どこと相互リンクしているかが、そのサイトの立ち位置を示している。 紹介文が一件ずつ手書きなのは、申請と了承のやりとりが実際にあったからで、 機械的に集めた一覧では成立しない。 上部の注意書きと自前のバナーがひと組で置かれているのも作法だった。 リンクを歓迎する意思と、その条件を、同じ場所で示す。 検索の精度が低く、探す手段が人の手のリンクしかなかった時代、 この1ページが流入経路そのものだった。 これは実際の画面の複製ではなく、構成を説明するための模式図である。相互リンクを申請して了承を得た相手が、ここに並んでいく※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
オンライン書店の商品ページ800px
検索窓（和書／洋書／すべて）
書影
書名／著者／出版社／発売日
価格（和書は定価。洋書は割引率つき）
在庫あり ── 24時間以内に発送
カートに入れる
目次・内容紹介
書評（雑誌からの転載／出版社の概要）
カスタマーレビュー（読者が投稿）
この本を買った人はこんな本も買っています（※ 開設から2〜3か月後に稼働）
2000年の画面構造実店舗の棚で分かるのは、書名と表紙と値段と厚みくらいである。 この画面はそこに目次・内容紹介・雑誌の書評・読者のレビューを積み上げた。 在庫の有無と発送の目安まで、買う前に画面に出ている。 値段の欄が二種類あるのが日本固有の事情だった。 和書は定価での販売、洋書は最大30%の割引。 同じ店の中で、扱う商品によって値付けの自由度が違う。 値引きで競えない側では、上に積んだ情報の量が競争の中身になる。 最下部の推薦は、開設時には動いていない。 購買履歴が溜まるまで実装は2〜3か月後になる、と当時の記事に書かれている。 推薦は最初から在る機能ではなく、利用者の行動が材料になって初めて動く。 この一行が、後の日本のインターネットで起きることを先に説明している。 これは実際の画面の複製ではなく、構成を説明するための模式図である。実店舗の棚では見えない情報を、1ページに全部並べる※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
2ch.net（スレッド表示）800px
スレッドタイトル
前100 次100 最新50
書き込み
書き込み
書き込み
書き込む
2001年の画面構造装飾がほとんどなく、1ページに数百件の書き込みが並ぶ。これは手抜きではなく、 低速回線でも読める形を優先した結果である。等幅フォントで表示されることが前提だったため、 記号を組み合わせて絵を描くアスキーアートが機能した。 文字だけの制約が、逆に独自の表現を育てた例といえる。等幅フォントで表示されることを前提にした画面※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
EZweb トップメニュー120px
EZweb
1 カテゴリ検索
2 EZ公式サイト
3 メール
着信メロディ
ニュース／天気
乗換案内
2001年の画面構造iモードの公式メニューと見た目はほとんど変わらない。番号を押して階層を降りる操作も同じ。 違いは利用者からは見えないところにあり、中身を記述する規格が別系統だったため、 サイトを作る側は同じ内容を二度用意する必要があった。 日本の携帯Webが開始直後から分裂していたことを示す画面である。iモードとほぼ同じ表示領域。違いは中身を記述する規格のほうにあった※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
メールマガジンの本文（等幅・全角35文字）560px
━━━━━━━━━━（罫線）━━━━━━━━━━
誌名／第○○号／発行日
━━━━━━━━━━━━━━━━━━━━━━━
■ 今週の目次（1. … 2. … 3. …）
［PR］広告（無料メルマガの発行費用をまかなう）
■ 1. 本文
■ 編集後記
発行者／バックナンバー／購読の解除
2001年の画面構造装飾が使えないので、区切りは罫線と記号で作る。 全角35文字前後で手で改行するのは、受信側のソフトが折り返してくれるとは限らなかったためで、 読み手の環境を作り手が想定して整えるという作法がここにあった。 構成は紙の雑誌をそのまま持ち込んでいる。誌名と号数、目次、本文、編集後記、奥付。 末尾に必ず解除の案内が置かれるのは、 読者が自分で登録し、自分で降りられることがこの形式の前提だったからである。 個人が「創刊」を名乗れた最初の形式が、この見た目をしていた。 これは実際の画面の複製ではなく、構成を説明するための模式図である。HTMLではなくプレーンテキスト。全角35文字前後で手で改行するのが作法だった※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
「はじめにお読みください」ページ640px
はじめにお読みください
■ リンクについて（トップページへお願いします）
■ 画像の直リンクはご遠慮ください
■ 画像・文章の無断転載を禁じます
■ 掲示板でのお願い（初めての方は自己紹介を）
■ 推奨環境（800×600 / IE5以上 / JavaScript ON）
ご意見・ご感想はメールまたは掲示板へ
同意して入る ／ 戻る
2001年の画面構造規約ではなく「お願い」の形で書かれているのが、このページの性格を決めている。 法的な効力を主張しているわけではなく、 管理人が困ることを先に伝えておくという趣旨だった。 並んでいる項目は、どれも当時の技術的・経済的な制約に対応している。 直リンクは転送量の負担、推奨環境はブラウザ間の互換性、 掲示板の作法は管理人ひとりで秩序を保つための手当てである。 マナーの問題に見えるものの多くが、実際には誰がコストを払うかの問題だった。 これは実際の画面の複製ではなく、構成を説明するための模式図である。本文より先に読ませたい約束事を、1ページにまとめて置いた※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
レンタル掲示板（借りてきた部品）600px
提供元の広告（無料版の条件）
○○の掲示板　── 管理人：○○
お名前 ／ メール ／ タイトル ／ 本文（入力欄）
投稿する
［1234］ タイトル　投稿者：○○　2001/○/○
└ Re: タイトル　投稿者：管理人
［1233］ タイトル　投稿者：○○
［前の10件］［次の10件］［記事番号で検索］［管理用］
提供元の広告
2001年の画面構造上下を広告に挟まれているのが、無料で借りる条件だった。 そしてドメインが自分のサイトと違う。 リンクを踏んだ瞬間に別のサイトへ移った感覚があり、 見た目も自分のページとは揃わない。 それでも使われたのは、掲示板を自分で設置するより桁違いに簡単だったからである。 管理人の返信が本文に混ざって並ぶのがこの形式の性格を示している。 管理人は上位の権限を持つが、画面上では一人の書き手として同じ列に並ぶ。 荒らしへの対応も、書き込みを消すのも、この人の判断だった。 数十人から数百人という規模だからこそ成立していた運用である。 右端の［管理用］が、その権限の入口にあたる。 借りた本人だけが入れる小さな管理画面があり、 そこで削除も禁止も設定した。 秩序を保つ仕組みが、サービスではなく個人の手元に置かれていた。 これは実際の画面の複製ではなく、構成を説明するための模式図である。自分のサイトとは別のドメインで開く。見た目も自分のサイトとは揃わない※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
テキストサイトの本文ページ600px
サイト名（小さく、上端に固定）
更新日と、その日の題
本文（3〜4行）
本文（1行だけ置く）
本文（3〜4行）
本文（落とす一行）
前の日 ／ 目次 ／ 次の日
000000あなたは 012345 人目の訪問者です
掲示板 ／ メール ／ リンク集 ／ 過去ログ
2001年の画面構造この模式図で見てほしいのは、置いてあるものではなく置いていないものである。 画像も、見出しの装飾も、余白を作る飾りも無い。 それでも読ませるために使える道具は、改行と空行と1行の長さしか残っていない。 段落のあいだに空行が入り、ときどき1行だけが単独で置かれているのが要点になる。 ここが間であり、紙の文章には無い、画面を前提にした設計だった。 横幅を画面いっぱいに広げないのも同じ理由で、 1行が長すぎると目が次の行の頭に戻れなくなる。 下端にカウンタと掲示板が並ぶのは、反応が届く経路がこの二つしか無かったからである。 どちらも本文とは別の場所にあり、置くかどうかを書き手が選べた。 文章の下に反応が自動で並ぶ形式は、まだ存在していない。 これは実際の画面の複製ではなく、構成を説明するための模式図である。画面いっぱいに広げず、1行を短く保つために横幅を自分で絞っていた※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
auctions.yahoo.co.jp（商品ページ）800px
カテゴリ ヘルプ マイ・オークション
商品タイトル
出品画像
現在価格／残り時間／入札件数／出品者
入札する
入札履歴
商品の説明（出品者が書いた文章）
出品者の評価を見る
2001年の画面構造最も目立つ位置にあるのは写真でも説明でもなく、現在価格と残り時間である。 通販のページが「買うかどうか」を判断させる構成なのに対し、 ここは「今いくらで、あと何分か」を伝える構成になっている。 出品者の評価へのリンクが商品説明と同じ重みで置かれているのは、 相手が事業者ではなく見ず知らずの個人だったため。※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
bb.yahoo.co.jp（会員向けポータル）800px
会員向けブロードバンド・ポータル
映像／音楽／ゲーム／オンライン教育
動画コンテンツ（提携企業の配信）
ネットワーク対戦ゲーム
接続状況・回線速度の案内
課金・決済（コンテンツ料金をまとめて請求）
サポート・工事の案内
2002年の画面構造ダイヤルアップ時代のページが「軽さ」を最優先に作られていたのに対し、 ここでは映像・音楽・対戦ゲームが最初から一列に並んでいる。 つないでいる時間が課金されなくなったことで、 重いものを置いても読者が逃げないという前提に変わったことがそのまま画面に出ている。 もうひとつの要点は課金の欄で、コンテンツ料金を回線の請求にまとめる仕組みが ポータル側に組み込まれていた。 これは実際の画面の複製ではなく、構成を説明するための模式図である。常時接続を前提に、動画や音楽の帯を並べられるようになった最初期の画面構成※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
Flash作品を置いたページ800px
サイト名 ── 作品置き場
※ 再生には Flash Player が必要です（お持ちでない方はこちら）
作品の表示領域（固定サイズ・読み込み中の表示から始まる）
再生 ／ 停止 ／ 音量
作品一覧（題名／容量／更新日）
※ 容量が大きいため、回線の速い環境でご覧ください
掲示板 ／ リンク ／ 作者について
2003年の画面構造一覧に容量が書いてあるのがこの形式の性格を決めている。 作品は自分のサーバに置き、読み込みの負担も転送量の費用も作った側が持つ。 何メガバイトあるかは、見る側にとっては待ち時間、 置く側にとっては請求額だった。 冒頭の但し書きも欠かせない。再生にはプラグインが要り、 入っていない環境では何も表示されない。 作る側は常に「見られない人がいる」ことを前提に置いていた。 この一文が要らなくなった代わりに、後にプラグインごと消えて全部が見られなくなる。 表示領域が固定の大きさで置かれているのも当時の作り方で、 画面幅に合わせて伸縮させるという発想がまだ一般的でない。 作品の側が寸法を決め、閲覧環境がそれに合わせていた。 これは実際の画面の複製ではなく、構成を説明するための模式図である。作品の表示領域は固定の大きさで作る。画面に合わせて伸縮させる発想が無い※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
www.yahoo.co.jp1024px
バナー広告
検索
サービス
カテゴリ
主要ニュース
トピックス
オークション
広告
フッタリンク
2003年の画面構造常時接続の普及で1ページに載せられる情報量の上限が上がり、3カラムが完成した時期。 左にカテゴリ、中央にニュースと検索、右にオークションと広告という配置は、 以後10年近く日本のポータルの標準になる。現在の目には過密に見えるが、 横に広く縦に短い画面で、マウスで細かいリンクを正確に押せることが前提だった。1024×768 が標準になり、横幅の使い方が一気に変わった※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
ブログ記事の下半分（コメントとトラックバック）800px
記事本文（日付・タイトル・カテゴリ）
Posted by 管理人 | カテゴリ | Permalink
コメント（3）
ハンドル＋日時＋本文
ハンドル＋日時＋本文
コメントを書く（名前・URL・本文）
トラックバック（2）
参照している記事のタイトルと要約
この記事へのトラックバックURL
2005年の画面構造記事より下のほうが縦に長い、という構成がこの時期のブログの特徴だった。 下半分は他人が書き足す領域である。 コメントは読者が直接書き込み、トラックバックは別のブログが機械的に登録していく。 隅に置かれた「この記事へのトラックバックURL」は、 他のサイトから通知を送るための宛先で、 記事ごとに接続用の住所が公開されていたことを示している。 個人ホームページが玄関からしか入れなかったのに対し、 ブログは記事1本ごとに出入口を持っていた。 これは実際の画面の複製ではなく、構成を説明するための模式図である。本文より下に、反応と接続のための区画が積み上がっていた時期の構成※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
GREEモバイル（携帯電話向けSNSのメニュー）120px
GREEモバイル
1 友達の最新日記
2 友達の最新フォトアルバム
3 コミュニティの最新掲示板
4 アクセス履歴
5 受信メール
6 記入したコメント履歴
7 プロフィール
8 友達の検索
書く（日記／メール／コメント）
2005年の画面構造並び順がそのまま設計思想になっている。 上から三つは他人の更新で、自分のページはずっと下にある。 細切れの時間に開いて「誰かが何か書いたか」だけを確認して閉じる、 という使われ方を前提に組まれた画面である。 上位に「アクセス履歴」が置かれているのも同じ理由で、 誰が自分を見に来たかが、次に開く動機になる。 パソコン版の機能をそのまま縮めたのではなく、 小さい画面で最初に見せるべきものを選び直した結果がこの順序だった。 もうひとつ、この形式の性格を決めているのが始め方である。 利用開始にはパソコンから専用ページを開いて自分の携帯メールアドレスを登録する必要があり、 携帯だけでは始められなかった。 一方で一度端末情報を登録すれば次回からログインは省略される。 入口はパソコン、日常の利用は携帯という、この時期に特有のねじれがここに出ている。 これは実際の画面の複製ではなく、構成を説明するための模式図である。全角十数文字が数行。パソコン版と同じ内容を、この幅に入れ直す作業が要った※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
本文の語が、そのままリンクになる日記700px
2005-○-○　日記のタイトル
本文（ふつうの文章）
本文（語に自動でリンクが付く ── 書き手は張っていない）
本文
この語を含む日記へ ／ 語の説明ページへ
コメント（○件）
前の日 ／ 次の日 ／ 月別 ／ 一覧
2005年の画面構造画面の見た目は同時期のブログとほとんど変わらない。 違いは、本文の中のリンクを誰が張ったかにある。 ここでは書き手がリンクを張っていない。 語を書いただけで、その語が自動的に説明のページへつながり、 同じ語を書いた他の人の日記へ辿れるようになる。 同じころ、[相互リンク](/culture/sougo-link)は申請して了承を得る手続きだったし、 [トラックバック](/culture/trackback)は書いた側が相手へ通知を送る仕組みだった。 どちらも人が決めてつなぐ。ここでは語彙がそのまま経路になっている。 この設計は、用語の多い分野ほど強く効いた。 技術の話を書けば、専門語のすべてが自動的に他の書き手とつながる。 一方で、日常の言葉ばかりの文章では意図しない語まで拾われる。 つなぐ判断を機械に任せたことの利点と副作用が、同じ仕組みから出ている。 これは実際の画面の複製ではなく、構成を説明するための模式図である。見た目は当時のブログと変わらない。違うのは本文中のリンクを誰が張ったか※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
携帯電話の画面に作った個人ホームページ120px
☆★ ○○のおへや ★☆
ようこそ！　来てくれてありがとう(^^)
1 プロフィール
2 日記
3 掲示板
4 アルバム
5 リンク
000000あなたは 01234 人目
キリ番踏んだら掲示板に書いてね！
2005年の画面構造部品の並びが、パソコンの個人サイトとほとんど同じである。 挨拶、プロフィール、日記、掲示板、アルバム、リンク、そしてカウンタ。 画面の幅は10分の1以下で、入力手段も数字キーしかない。 それでも同じ構成に落ち着いたということは、 この形が画面の都合ではなく「自分の場所を持つ」という形式から出ているということになる。 最下部の一行が要点である。 訪問者の数が見えていて、切りのいい数字を踏んだ人が名乗り出る。 1990年代のパソコンの画面で育った作法が、 まったく別系統の端末の上で、独立に同じ形をとった。 そして項目に番号が振ってあるのは、当時の携帯Webに共通する作法だった。 カーソルで降りるより、数字キーを1回押すほうが速い。 作る側は、その速さを前提に自分のページの構成を決めていた。 実際に2000年3月に採取された当時のトップページを確認すると、 項目は [1] から [0] まで番号が振られ、 文字は半角カタカナで書かれている。 全角では1文字ぶんの幅を、半角なら半分で済む。 十数文字しか入らない画面では、濁点や小書きの読みにくさより、 1行に収まることのほうが優先された。 これは実際の画面の複製ではなく、構成を説明するための模式図である。全角十数文字が数行。この幅の中に、パソコンの個人サイトと同じ部品が一式入っている※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
mixi.jp（ホーム）1024px
ホーム 日記 コミュニティ
プロフィール画像
マイミクシィ
あしあと
最新の日記
コミュニティの新着
広告
おすすめ
2005年の画面構造中心にあるのは日記で、その周りに人間関係が配置されている。 左の「あしあと」は誰が自分のページを見たかの一覧で、読むだけでも相手に伝わった。 この設計は交流を促進する一方、見たのに反応しないことが気まずいという独特の緊張も生んだ。 角丸と淡い配色は、当時Web 2.0と呼ばれた視覚言語である。※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
mbga.jp（携帯電話の画面）240px
サイト名とログイン中のハンドル
アバター（自分の分身）
ミニメール（3）／日記／サークル／伝言板
ゲーム一覧（無料）
モバゴールドの残高
［1］戻る ［5］ホーム
2006年の画面構造横幅が240ピクセル前後しかないため、段組みという発想が最初から無い。 すべてを縦一列に積み、数字キーで項目を選ばせる構成になる。 上部にアバターが置かれているのは飾りではなく、 文字数を割けない画面で自分が誰かを一目で示す手段がそれしか無かったからである。 パソコン向けのSNSがプロフィール文で自己紹介していたのに対し、 携帯では絵で名乗るほうが早かった。 これは実際の画面の複製ではなく、構成を説明するための模式図である。携帯電話の縦長画面。全角で十数文字が数行しか入らず、縦に積むしか選択肢がない※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
www.nicovideo.jp（動画視聴ページ）1024px
ランキング 検索 マイリスト
流れるコメント
動画（この上をコメントが流れる）
コメントを書く
動画の説明
タグ
コメント一覧
2007年の画面構造通常の動画サイトが動画とコメント欄を上下に分けるのに対し、ニコニコはそれを重ねた。 右のコメント一覧は補助で、体験の中心は動画の上を流れる文字のほうにある。 別々の日に書かれた反応が同じ場面で同時に現れるため、非同期なのに同時に見ているように感じられた。※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
プロフィールのページ（質問に答えて埋める）120px
○○のプロフ
写真
名前　　　： ○○
誕生日　　： ○月○日
血液型　　： ○型
性格　　　： ○○○
好きな音楽： ○○○
ひとこと　： ○○○○○
1 このプロフにコメントする
2 友達のプロフ一覧
000000アクセス 0123
2007年の画面構造左に質問、右に答え。この構造が最初から用意されていることが要点である。 個人サイトなら、何を書くかを決めるところから始めなければならない。 ここでは項目が並んでいて、埋めれば完成する。 書く力も、構成する力も要求されない。 埋める形式だからこそ、読み比べが成立したとも言える。 同じ項目に別の答えが入っているだけなので、 友達のページを次々に開いて差分だけを見ていく読み方ができる。 パケット定額制が広がった時期にこの遊び方が流行したのは、 1ページあたりが軽く、たくさん開くことが前提だったからでもある。 同時に、この形式は公開範囲を選ぶ仕組みを持っていなかった。 誕生日も、通っている学校の話も、同じ一枚に並んで誰からでも読める。 見せる相手を刻むという発想が入ってくるのは、これより後になる。 これは実際の画面の複製ではなく、構成を説明するための模式図である。携帯電話の縦長画面。上から下へ質問と答えが交互に並ぶだけの構造※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
動画ページ（映像とコメントを分ける形）960px
検索窓 ／ 動画 ／ カテゴリ ／ メンバー登録
動画プレーヤー
再生 ／ 音量 ／ 全画面
タイトル／投稿者／再生回数／評価
説明文
コメント欄（投稿順に上から並ぶ）
関連動画
広告
2007年の画面構造映像とコメントが上下に分かれている。 これがこの時期の標準的な作りで、他の多くの動画サイトも同じ形をとっていた。 読むには視線を下へ移す必要があり、 どのコメントがどの場面についてのものかは、読み手が推測するしかない。 同じ2007年に日本で広がっていた別の形式は、ここを重ねた。 文字を映像の上に流すと、別々の日に書かれたコメントが同じ場面で同時に現れる。 一人で見ているのに大勢と見ているように感じる、という体験の差はここから出ている。 どちらが優れているという話ではない。 分けた側は映像そのものを邪魔せず、後から読み返せる。 重ねた側は同時に見ている感覚を作るが、映像は文字で隠れる。 日本で二つの動画の場所が長く並び立ったのは、 この一点の設計が違っていたからである。 これは実際の画面の複製ではなく、構成を説明するための模式図である。映像が上、文字が下。上下に分けるのがこの時期の標準的な作りだった※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
Facebook の投稿欄とニュースフィード960px
検索／ホーム／プロフィール／アカウント
顔写真
実名
ニュースフィード／メッセージ／イベント／友達
「いまなにしてる？」入力欄
［投稿］　［公開範囲 ▼ 全員／友達／カスタム］
友達の投稿（実名＋顔写真＋本文）
いいね！ ／ コメント ／ シェア
友達の投稿（写真アルバムを追加しました）
いいね！ ／ コメント ／ シェア
広告
知り合いかも
2010年の画面構造この画面でいちばん日本のSNSと違ったのは、投稿ボタンの隣にある公開範囲の選択だった。 設定画面に一度だけ入って決めるのではなく、 書くたびにその場で「誰に見せるか」を選ぶ。 電話番号や住所や出身校まで登録できる前提とセットで、 どこまで出すかを項目ごとに刻むという設計思想がここに出ている。 その前提が実名である。実名で登録し、実際に知っている相手とつながる。 日本のネットはこの時点ですでに、 パソコン通信のハンドルから匿名掲示板の名無しまで、 名乗りを薄くする方向に20年積み上げてきたあとだった。 同じ画面が、来た土地によって別の意味を持つ例といえる。 これは実際の画面の複製ではなく、構成を説明するための模式図である。3カラム。左に自分、中央に流れてくるもの、右に広告という配置※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
twitter.com（タイムライン）900px
ホーム／@つながり／検索
投稿欄（いま何してる？／残り文字数）
ハンドル＋短文＋相対時刻（3分前）
ハンドル＋短文＋相対時刻
ハンドル＋短文（他人の投稿の引用）
ハンドル＋短文＋相対時刻
もっと読む
プロフィール（フォロー／フォロワーの数）
トレンド
おすすめのユーザー
2010年の画面構造掲示板がスレッドという器を先に用意し、SNSが相互の承認を先に求めたのに対し、 ここには選ぶ工程が画面上に無い。 投稿欄のすぐ下に、購読している相手の発言が時刻順にそのまま流れてくる。 何を読むかは、読む前ではなくフォローした時点で決まっている。 右側のトレンドとおすすめは、その選択を後から補正するために置かれた枠である。 相対時刻（「3分前」）が使われているのも、 過去を辿るのではなくいまを見る画面だったことの現れといえる。 これは実際の画面の複製ではなく、構成を説明するための模式図である。本文の1カラムと、右側の補助情報。読む対象を選ぶ操作が画面上に無い※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
LINE（スマートフォンのトーク画面）320px
＜ 友だちリスト｜相手の名前
相手の発言（左寄せの吹き出し）
自分の発言（右寄せの吹き出し・既読表示）
送信した画像
相手の発言
メッセージ入力欄
送信
スタンプ／画像／位置情報
2011年の画面構造発言が左右に振り分けられた吹き出しで積まれる形式は、掲示板ともチャットルームとも違う。 掲示板は誰の発言かを名前で示し、チャットルームは行頭にハンドルを置いた。 ここでは位置と色だけで話者を区別するため、名前を書く必要がない。 相手が特定されている会話にしか使えない代わりに、1行あたりの文字数を最大限に使える。 画面の狭さと、相手が既知であることの両方が、この形を決めている。 これは実際の画面の複製ではなく、構成を説明するための模式図である。指で押す前提の画面。1画面に収める代わりに、階層を浅くして戻る回数を減らす※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
まとめ記事（引用の積み重ね）720px
広告
煽り気味の見出し
引用（元の書き込み1）
引用（元の書き込み2）
広告
引用（元の書き込み3）
まとめた人の一言（数行）
広告
関連記事（同じサイト内へ戻す導線）
2015年の画面構造自分で書いた文はごくわずかで、画面のほとんどが引用と広告で埋まっている。 この配置は手抜きではなく設計である。 書く手間をかけずに縦に長いページを作れば、 読者がスクロールする回数だけ広告の表示が増える。 もうひとつの要点は末尾の関連記事で、 読み終えた人を外へ出さず同じサイト内へ戻す。 読み物として完結させないほうが、指標の上では成績が良くなる。 元の書き手には何も返らないまま、並べ直した側だけが収入を得るという構造が、 そのまま画面の形になっている。 これは実際の画面の複製ではなく、構成を説明するための模式図である。スマートフォンで縦に読み進める前提。1画面に1〜2件だけが入る密度※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
Instagram の投稿画面（正方形に切って、選ぶ）375px
＜ 戻る　　新規投稿　　次へ ＞
正方形に切り取られた写真
フィルターを選ぶ（横に並んだ小さな見本を左右に送る）
フィルター ／ 編集（明るさ・彩度・傾き）
キャプション
#ハッシュタグ #ハッシュタグ #ハッシュタグ
場所を追加 ／ 人物をタグ付け
シェアする
2017年の画面構造完成までの工程が選ぶだけで終わるのがこの画面の要点である。 正方形に切る、見本を送ってフィルターを決める、投稿する。 構図を考える段階も、書く段階も、必須ではない。 当時のスマートフォンのカメラは解像度が高くなかったが、 フィルターは粗さを隠すのではなく様式に変えるので、 うまく撮れないことが不利にならなかった。 正方形という制約も効いている。一枚を鑑賞させる形ではなく、 格子に並べたときに揃う形であり、 投稿は最初から一覧の一マスとして設計されている。 下部のハッシュタグは、後から性格を変えた部分である。 当初は分類の印だったものが、日本では探すための入口になり、 ハッシュタグ検索の回数は世界平均の3倍に達した。 言葉で引く検索から、写真で引く検索へ移った場所がここにある。 これは実際の画面の複製ではなく、構成を説明するための模式図である。縦長のスマートフォン画面。パソコンで作る工程が一つも無い※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。