LAYER 4 — 2010〜2014

スマートフォン化

インターネットに触れる時間の主戦場が、机の前からポケットの中へ移った層。 画面が縦長になり指で操作するようになったことで、情報密度の高いポータル型レイアウトが 成立しなくなった。日本ではガラケー向けWebが急速に消えた層でもある。

スマートフォンアプリLINEInstagramレスポンシブデザインガラケーWebの終焉

この層で何が変わったか

この層の構造変化は物理的である。画面が小さく縦長になり、マウスカーソルの代わりに指が来た。 これによって、それまで10年以上かけて洗練されてきたレイアウトの作法が一斉に無効になった。 細かいリンクを敷き詰めたポータル型の画面は、指では押せない。ロールオーバーで開くメニューは、 ホバーのない環境では動かない。結果として、要素は大きく、少なく、縦に並ぶ方向へ一斉に動いた。 フラットデザインの流行は美意識の変化として語られがちだが、小さい画面で押せる面積を確保する という要請が先にあった。日本ではもうひとつの断絶が同時に起きている。iモードなどの ガラケー向けWebという、世界的にも独自だった生態系が、この層のあいだにほぼ消滅した。 この層の終わりに、統計の上で一度だけ起きたことがある。 2014年、インターネット利用者数が調査開始以来はじめて前年を下回った。 普及そのものが飽和し、残った伸びしろが年齢の下端と上端にしか無くなったということである。 ここが次の層への入口になる。 使う人の数で伸ばせなくなったとき、事業の側が次に取りにいくのは 一人あたりの時間しかない。何人に届けるかではなく、どれだけ長く見てもらうか。 次の層が推薦の層になるのは、技術が進んだからというより、この飽和の帰結だった。

この層のデザイン言語

フラットデザインレスポンシブ大きなタップ領域無限スクロールカードUI

この層の年

2010数が伸びなくなり、中身が入れ替わりはじめた年2010年末の利用者数は9,462万人、人口普及率78.2%。前年からの伸びはわずか0.6%で、 「まだ使っていない人」がほぼ居なくなった。ここから起きるのは人数の増加ではなく、 同じ人が何をどの端末で見るかの入れ替わりだった。2011スマートフォンは16.2%しかなかった3月11日の東日本大震災で、ソーシャルメディアが全国規模の情報伝達手段になった年。 被災地域の自治体アカウントのツイート数は震災前の約10倍に達した。 この年末のスマートフォン利用率は16.2%で、多くの人はパソコンか携帯電話でそれを見ていた。2012スマートフォンがまだ3割だった、入れ替わりの途中2012年末の利用者数は9,652万人、人口普及率79.5%。端末別ではパソコン59.5%に対し スマートフォンは31.4%で、まだ少数派だった。 作る側が「両方に対応する」という重い判断を迫られていた時期。2013買い替えではなく、買い増しだった2013年末、スマートフォンの世帯保有率は62.6%で前年から13.1ポイント上がった。 それでもスマートフォンを除いた携帯電話の世帯保有率は76.5%のまま。 一台に統合されたのではなく、二台が同時に家にある状態が広がった年である。2014利用者数が初めて減った2014年末のインターネット利用者数は10,018万人で、前年より26万人減少した。普及率は82.8%で横ばい。 一方スマートフォンの世帯保有率は64.2%まで伸びている。新しく入ってくる人がいなくなり、 すでにいる人の端末だけが入れ替わる段階に入った年である。

この層の主役

この層の画面

実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。

携帯電話の画面に作った個人ホームページ120px
☆★ ○○のおへや ★☆
ようこそ! 来てくれてありがとう(^^)
1 プロフィール
2 日記
3 掲示板
4 アルバム
5 リンク
000000あなたは 01234 人目
キリ番踏んだら掲示板に書いてね!
2005年の画面構造部品の並びが、パソコンの個人サイトとほとんど同じである。 挨拶、プロフィール、日記、掲示板、アルバム、リンク、そしてカウンタ。 画面の幅は10分の1以下で、入力手段も数字キーしかない。 それでも同じ構成に落ち着いたということは、 この形が画面の都合ではなく「自分の場所を持つ」という形式から出ているということになる。 最下部の一行が要点である。 訪問者の数が見えていて、切りのいい数字を踏んだ人が名乗り出る。 1990年代のパソコンの画面で育った作法が、 まったく別系統の端末の上で、独立に同じ形をとった。 そして項目に番号が振ってあるのは、当時の携帯Webに共通する作法だった。 カーソルで降りるより、数字キーを1回押すほうが速い。 作る側は、その速さを前提に自分のページの構成を決めていた。 実際に2000年3月に採取された当時のトップページを確認すると、 項目は [1] から [0] まで番号が振られ、 文字は半角カタカナで書かれている。 全角では1文字ぶんの幅を、半角なら半分で済む。 十数文字しか入らない画面では、濁点や小書きの読みにくさより、 1行に収まることのほうが優先された。 これは実際の画面の複製ではなく、構成を説明するための模式図である。全角十数文字が数行。この幅の中に、パソコンの個人サイトと同じ部品が一式入っている※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。
iMenu(iモード公式メニュー)120px
iMenu
1 メニューリスト
2 料金照会
3 メール設定
4 お知らせ
ニュース/天気
着信メロディ
乗換案内
2000年の画面構造項目の頭に番号が振ってあるのは、カーソルで降りていくより数字キーを1回押すほうが速いからである。 片手で、歩きながら、数秒で目的に着く必要があった。 検索窓が無いのは技術的な制約ではなく、審査を通った公式サイトを階層で並べるという設計思想の結果で、 自由に広がるパソコンのWebとは前提そのものが違っていた。全角十数文字が数行という表示領域。横スクロールという概念自体が無い※ 実際の画面の複製ではなく、当時の構成を説明するために作成した模式図です。

この層で始まったサービス

この層のネット文化

出典

  1. 公的資料平成30年版 情報通信白書 「インターネットの利用状況」(総務省)
    端末別インターネット利用状況の推移。スマートフォン利用がパソコンを上回る過程が示されている
    確認日: 2026-08-15