あの頃みんな若かった。国内有名16サイトの2008年→2014年のデザイン比較

こんにちは、結婚式で悪友に高校時代のポエム的なものを晒されたゆうすけです。
そういうの、本当勘弁してほしいんだよな。

先日Macの古いデータを整理していたところ、2008年頃のウェブサイトのキャプチャー画像を大量に発見。当時はWebデザイナーではなくエディトリアルデザイナーだったのですが、デザインの練習（模写）のために取り溜めていた様子。
あの頃の自分は結構真面目だったのかもしれない。

やっぱり今とだいぶ違うなー。具体的にどこが変わったのかな？と結構楽しく眺めていたのですが（どうしてアナログデジタル問わず、掃除をすると懐かしくて手が止まってしまうのか！）、せっかくなので記事としてまとめてみることにします。

当時の担当デザイナーがもしこれを見たら、恥ずかしくてたまらないかもしれないですけどね。一度世に出したものですからね。しょうがないね。

大阪府知事に橋下徹氏が就任し、船場吉兆があの伝説的な記者会見で日本を失笑の渦に巻き込み、秋葉原の無差別殺傷事件で歩行者天国が廃止され、福田首相が「あなたとは違うんです！」と叫び、北京五輪で星野監督率いる野球日本代表が惨敗し、リーマンショックで世界同時不況が勃発し、大統領に就任したバラク・オバマ氏が「チェンジ！」と高らかに宣言した2008年。

日本のインターネットはこんな感じだった。

Eコマース系


Apple Store


2008年のApple Store


[caption id="" align="alignnone" width="1015"]
2008年のApple Store[/caption]

2014年のApple Store


[caption id="" align="alignnone" width="1032"]
2014年のApple Store[/caption]
  • 横幅は変わらず980px
  • 背景色が白→グレーへ
  • 全体的にフォントサイズが大きく

細かな変更はあるものの、おおまかなガイドラインはあまり変更ない様子。
とはいえ、「NEW」マークあたりの描画に時代を少し感じますね。

Apple Store（日本）

ユニクロ


2008年のユニクロ


[caption id="" align="alignnone" width="858"]
2008年のユニクロ[/caption]

2014年のユニクロ


[caption id="" align="alignnone" width="1010"]
2014年のユニクロ[/caption]
  • 横幅800px→960px
  • ロゴ変更
  • ロゴ変更に伴って配色変更
  • 全体的にフォントサイズ大きく
  • フラットデザイン採用

佐藤可士和氏のあの明るいロゴ以降、メリハリの効いたポップなデザインになりました。

ユニクロ

無印良品


2008年の無印良品


[caption id="" align="alignnone" width="759"]
2008年の無印良品[/caption]

2014年の無印良品


[caption id="" align="alignnone" width="946"]
2014年の無印良品[/caption]
  • 横幅700px→880px
  • サブメニューが右→左に

デザインのお手本として必ず挙がる無印良品。横幅の変更などはありますがデザイン自体はほとんどブレません。すごい。

無印良品

通販のディノス


2008年のディノス


[caption id="" align="alignnone" width="758"]
2008年のディノス[/caption]

2014年のディノス


[caption id="" align="alignnone" width="1038"]
2014年のディノス[/caption]
  • 横幅740px→950px
  • 商品カテゴリをグローバルメニューとサブカラムに移動
  • FLASH廃止
  • メインボディの空いた部分には特集
  • 全体的にフォントサイズ大きく

カタログサイトらしくびっしり情報の詰まったデザインでしたが、横幅拡大&コンテンツの整理で見やすくなりました。

通販のディノス

ポータルサイト系


クックパッド


2008年のクックパッド


[caption id="" align="alignnone" width="899"]
2008年のクックパッド[/caption]

2014年のクックパッド


[caption id="" align="alignnone" width="1044"]
2014年のクックパッド[/caption]
  • 横幅840px→970px
  • 背景が淡いベージュに変更
  • 各アイコンがシンプルでフラットなデザインに
  • 全体的にフォントサイズ大きく

主婦などWebに不慣れなユーザーを多く抱えるだけに、デザイン刷新のたびにいろいろ物議を醸すクックパッド。右上のイラストアイコンやドロップシャドウ付き背景画像に時代が…。

クックパッド

ゼクシィ


2008年のゼクシィ


[caption id="" align="alignnone" width="950"]
2008年のゼクシィ[/caption]

2014年のゼクシィ


[caption id="" align="alignnone" width="986"]
2014年のゼクシィ[/caption]
  • 横幅910px→940px
  • ロゴ含め全体的に淡いトーンに
  • フラットなデザインに
  • FLASH廃止
  • 全体的に写真配置をダイナミックに
  • 全体的にフォントサイズ大きく

結婚情報誌ってとにかく情報量が多いのですっきりまとめるので詰め込むデザインになりがちですが、今のデザインはページを小分けにしたりアコーディオンを使ってうまく見やすさと情報量を両立させていますね。

ゼクシィ

ホットペッパー


2008年のホットペッパー


[caption id="" align="alignnone" width="852"]
2008年のホットペッパー[/caption]

2014年のホットペッパー


[caption id="" align="alignnone" width="1002"]
2014年のホットペッパー[/caption]
  • 横幅800px→950px
  • ロゴ変更
  • フラットなデザインに
  • 全体的に写真配置をダイナミックに
  • 全体的にフォントサイズ大きく

飲食店はまず写真！それを詰め込むためにキツキツになっていた旧デザインに対して、現在はLightboxを使うなどして写真枚数を確保しつつレイアウトに余裕を持たせられています。

ホットペッパー

ホットペッパー ビューティ


2008年のホットペッパー ビューティ


[caption id="" align="alignnone" width="850"]
2008年のホットペッパー ビューティ[/caption]

2014年のホットペッパー ビューティ


[caption id="" align="alignnone" width="1018"]
2014年のホットペッパー ビューティ[/caption]
  • 横幅766px→950px
  • ロゴ変更
  • FLASH廃止

サービス開始が2007年なのでデザインテイストは比較的変わらない。リクルートポイント制度に対応して右カラムを追加しています。むしろ2008年版の方が今っぽい気も。

ホットペッパー ビューティ

an


2008年のan


[caption id="" align="alignnone" width="869"]
2008年のan[/caption]

2014年のan


[caption id="" align="alignnone" width="1026"]
2014年のan[/caption]
  • 横幅800px→950px
  • FLASH廃止
  • 緑基調→赤基調へ
  • 全体的にフォントサイズ大きく

メインカラーになっていた緑をバッサリ捨てていますね。ロゴの赤・オレンジが主体に。

an

ぐるなび プレミアム


2008年のぐるなび プレミアム


[caption id="" align="alignnone" width="858"]
2008年のぐるなび プレミアム[/caption]

2014年のぐるなび プレミアム


[caption id="" align="alignnone" width="1018"]
2014年のぐるなび プレミアム[/caption]
  • 横幅740px→950px
  • ロゴ&サイト名変更
  • FLASH廃止
  • 紺基調→ゴールド基調へ
  • 全体的にフォントサイズ大きく

2008年時点では画像で特集タイトル作ったりしてますが、今は基本的にHTMLですね。（画像使う場合は写真と合わせて思い切りリッチに）

プレミアムレストラン（ぐるなび）

オリコンスタイル


2008年のオリコンスタイル


[caption id="" align="alignnone" width="1015"]
2008年のオリコンスタイル[/caption]

2014年のオリコンスタイル


[caption id="" align="alignnone" width="1024"]
2014年のオリコンスタイル[/caption]
  • 横幅970px→976px
  • FLASH廃止

デザインは大きく変わってはいないですが、コンテンツ自体が結構様変わり。オリコンなのにCDランキングが一番上にないという…（音楽不況…）

オリコンスタイル

企業・ブランドサイトなど


サントリー


2008年のサントリー


[caption id="" align="alignnone" width="757"]
2008年のサントリー[/caption]

2014年のサントリー


[caption id="" align="alignnone" width="1314"]
2014年のサントリー[/caption]
  • 横幅720px→960px
  • ロゴと全体の配色変更
  • 全体的に写真、画像配置をダイナミックに
  • 全体的にフォントサイズ大きく

…えーと、なんか色々アレだったのをいい感じに刷新。

サントリー

ライオン株式会社


2008年のライオン株式会社


[caption id="" align="alignnone" width="836"]
2008年のライオン株式会社[/caption]

2014年のライオン株式会社


[caption id="" align="alignnone" width="966"]
2014年のライオン株式会社[/caption]
  • 横幅710px→900px
  • 全体的に写真、画像配置をダイナミックに
  • 全体的にフォントサイズ大きく

みずほ銀行


2008年のみずほ銀行


[caption id="" align="alignnone" width="804"]
2008年のみずほ銀行[/caption]

2014年のみずほ銀行


[caption id="" align="alignnone" width="1038"]
2014年のみずほ銀行[/caption]
  • 横幅750px→960px
  • 全体的に写真、画像配置をダイナミックに
  • 全体的にフォントサイズ大きく
  • フラットデザイン
  • グリッドデザインの採用

幅広いメニューに対応するためか、Windows8的な典型的なグリッドレイアウト。

みずほ銀行

モスバーガー


2008年のモスバーガー


[caption id="" align="alignnone" width="766"]
2008年のモスバーガー[/caption]

2014年のモスバーガー


[caption id="" align="alignnone" width="966"]
2014年のモスバーガー[/caption]
  • 横幅740px→910px
  • 全体的に写真、画像配置をダイナミックに
  • 全体的にフォントサイズ大きく

濃いベタのグローバルナビゲーションが少なくなってきているのも最近のトレンドかも。

モスバーガー

ナチュラルローソン


2008年のナチュラルローソン


[caption id="" align="alignnone" width="581"]
2008年のナチュラルローソン[/caption]

2014年のナチュラルローソン


[caption id="" align="alignnone" width="1062"]
2014年のナチュラルローソン[/caption]
  • 横幅740px→980px
  • 背景色 白→ベージュ
  • 全体的に写真、画像配置をダイナミックに
  • 全体的にフォントサイズ大きく

背景色にベージュを敷くことで、力強い線や強い色を使わなくても情報をセグメントしやすくなっています。フラットデザイン、グリッドレイアウトの流行に伴って、このパターンも多い気が。

ナチュラルローソン

2008年のWEB業界はどういう感じだった？


今見ると、えーっと、いろいろアレですね。なんだか少しこっ恥ずかしくなりませんか？ちなみにこちらの記事によると、2008年のブラウザシェア率は下記のようだったそうです。IE7全盛期…。
  • 68.15% - IE ↓(IE7 46.77%↓, IE6 20.46%↓, IE8 0.82%↑)
  • 21.34% - Firefox↑(Firefox3 17.18%↑, Firefox2 3.77%↓)
  • 7.93% - Safari↑
  • 1.04% - Chrome↑
  • 0.71% - Opera

そして当時のWeb制作周りの主なトピック。
  • 2008年3月 Safari 3.1リリース
  • 2008年6月 Firefox 3.0リリース
  • 2008年7月 iPhone（3G）が日本初上陸
  • 2008年9月 Google Chrome ベータ版公開（12月正式リリース）

時代を感じる…。

2008→2014のWebデザインの変遷


サイトの横幅の拡大


2008年といえばかの"ネットブック"全盛期。当時のサイトサイズも700〜800pxあたりがスタンダードでした。
その後スマートフォンやタブレット端末の普及に伴いネットブックブームは過ぎ、かたやデスクトップやノートPCではディスプレイの大型化。自然とWebサイトのサイズも大型化し、現在では900〜980pxあたりが標準となっています。

スマートフォン、タブレット端末の普及


2008年最大の話題といえば、iPhoneの日本初上陸でしょう。当時はアーリーアダプターの注目を集めるにとどまりましたが、翌年のiPhone3GS、翌々年のiPhone4あたりから、ガジェットマニアのみならず一般ユーザーへ爆発的に普及していき、いまやPCよりスマホからのトラフィックが多いのが当たり前の時代となったことはご承知の通り。
それに伴いWebデザインの考え方も変わっていきます。PC向けによりリッチにディテールを作りこんだデザインよりも、CSSで再現可能なシンプルなデザインへの切り替えが徐々に進んでいきました。

HTML5、CSS3、jQueryなどの普及


上記のハード市場の変遷と並行して、Web制作技術にも変革が訪れます。最新仕様のHTML5&CSS3が徐々に導入され始め、今までは画像を使わなければ実現できなかった表現がコードを書けばできるようになりました。またjQueryを使った様々なアクション（スライド画像、タブメニュー、アコーディオンメニュー、ツールチップetc...）が容易に実装できるように。膨大な情報量（テキスト、画像）を、ページ遷移せずにページ内に隠しておけることにより、レイアウトの自由度が高まりました。
スマートフォン対応、メンテナンス性の高いソースを要望する声、徐々にターゲットから外れていくクラシックブラウザ、など諸々の環境因子もあり、これらの技術が一斉に花開いた6年とも言えるでしょう。
それらの詳しい状況については、前述の書評で紹介した現場のプロが教えるWeb制作の最新常識をご参照いただければ、より理解が得られると思います。

まとめ


いかがでしたでしょうか。

たった数年もすれば技術もデザインも時代遅れになってしまうこの世界。
以前の書評でも書きましたが、ただ漫然と流行を追うだけでなくどうしてそのデザインが流行ったのかを、ハード/ソフト両面の環境因子を把握した上で理解し、自身の制作物に取り入れていくことが制作者の姿勢として非常に大事なのだと、今回の記事をまとめるにあたり感じた次第です。

おまけ


2008年のわたし


[caption id="attachment_3800" align="aligncenter" width="225"]
2008年のわたし。鎌倉ミルクホールにて。[/caption]

この頃はWebデザイナーじゃなかったしジャラジャラしたアクセが好きだったし独身だったし新しいカメラ（初代GR DIGITAL）買ってウッキウキで鎌倉まで行くガッツもあった。6年あれば人もデザインも結構変わっちまうね。





ゆうてん's Ownd

0コメント

  • 1000 / 1000