懐かしい！「Ten Years Ago」で10年前のサイトデザインを振り返ってみた。

【この記事の要約】

10年前のWebデザインを振り返り、現在のデザインといかに違うかを比較・考察した記事です。

10年前のデザインは、現実世界の質感を模倣した「スキューモーフィズム」が主流で、光沢のあるボタンや立体的なグラデーション、ドロップシャドウなどが多用されていました。一方、現在の主流は、装飾を排した「フラットデザイン」や「ミニマリズム」です。この記事では、具体的なサイトの比較を通じて、テクノロジーの進化やユーザーの価値観の変化が、いかにWebデザインのトレンドを大きく変えてきたかを浮き彫りにしています。

【よくある質問と回答】

【ここから本文】

WEBデザインは今も昔も運用や改善を繰り返し、より良いサイトとして日々変化しています。

それは、ナショナルブランドや有名企業サイトでも同じであり、十数年というときを経て現在のサイトがあります。

日々、WEBサイトの改善を積み重ねた結果、UI・UXの向上になっています。

今回はそんな有名企業の10年前のサイトが、どのようなものだったかを見ることができる『Ten Years Ago』というサイトで振り返ってみます。

1.代表サイト①　Youtube

まずはYoutubeからみていきます。

10年前のYoutubeといえば、Google に買収されて注目を浴びていた頃に近い時期です。

日本でも注目され始めて間もないころでした。そんな10年前のYoutubeが下記です。

左が10年前のサイトで、右が現在のサイトです。

変化したポイント

• グローバルナビゲーションの位置
• 動画の並び方とテキストボリュームの減少
• 画面幅が大きくなっている。

以上3つの変更が大きいと見えます。

グローバルナビゲーションの位置

グローバルナビゲーションの位置が画面上部から、画面左側に変更されています。

人間の視線の動きは『Zの法則』や『Fの法則』の順序で見ると言われています。

それを配慮した配置と、昨今のディスプレイ幅が大きくなったことを受けての変更と見受けられます。

動画の並び方とテキストボリュームの減少

10年前の動画の並び方は、『左揃え、縦並び』で配列されていましたが、現在では横並びで表示されています。

おそらく、『ネットワークの回線スピードが改善』されたことが変化の要因と考えられます。

ページ内で表示されるコンテンツが多ければ多いほど、ページ内の読み込みは大きくなります。

コンテンツの制御を行うためのレイアウトを10年前までは行っていたと仮定すれば、回線スピードが改善された現代ではWEBデザインも変わると考えられます。

画面幅が大きくなっている

10年前と現在では、利用されているディスプレイが正方形に近い形から横長の長方形に変化しています。

横幅が長い現在のディスプレイに合わせてWEBデザインも変化していったと考えられます。

2.代表サイト②　Amazon

２つのサイトはアマゾンです。

10年前のアマゾンは『Amazon Kindle』を発表し話題になっていた頃でした。

今と比べて、まだまだ国内での利用者は少なかったですが、サービスの強さは日本にも轟いていた頃です。

そんなアマゾンの10年前の画像が下記です。

変化したポイント

• カラム数の減少
• 商品販売の訴求からサービスの訴求へ
• コンテンツが減りシンプルな大分類の訴求に

以上3つの変更が大きいと見えます。

カラム数の減少

10年前のサイトは3カラムになっており、情報量や回遊先が多いサイト設計になっていました。

現在のサイトは1カラムで、導線もかなり絞られています。

これはサービスの拡大が大きな要因であり、EC販売にかぎらず、動画、音楽、デバイス販売とユーザーの興味関心が1つに絞られないことから導線を大分類に絞っていることが考えられます。

商品販売の訴求からサービスの訴求へ

前の文章でも紹介したとおり、商品販売にとどまらなくなったAmazonが、サービスごとの訴求をするようになりました。

サービスが広がることによってTOPの訴求方法が大きく変わることが見える参考でした。

コンテンツが減りシンプルな大分類の訴求に

商品販売からサービス販売になり、TOPからの導線が減りました。

今までのコンテンツは他者が制作したものをユーザーに見せ、”新商品”や、”値下げ”などが訴求ポイントでしたが、今後のアマゾンは幅広いサービスで”1アカウントでマルチサービス”を提供するサイトになりました。

新たなサービスに踏み込んでいくアマゾンなので、今後もWEBサイトは変わっていくでしょう。

3.代表サイト③　Apple

3つ目のサイトはAppleです。

10年前のAppleは『ipod touch』を発表し話題になっていた頃でした。ipod nanoが新しいデザインになった時期です。

当時から音楽ポータブルデバイスはウォークマンからipodになっていったと思います。

そんなAppleの10年前の画像が下記です。

変化したポイント

• 画面幅が大きくなっている
• スクロール無しで全体が把握できるページから縦長デザインに変更されている

以上2つの変更が大きいと見えます。

画面幅が大きくなっている

こちらはYoutubeで説明したものと同じ内容です。

デバイスの変換に伴うものなので、表示される画面幅の変更は他のサイトでも多いです。

スクロール無しで全体が把握できるページから縦長デザインに変更されている

AppleのWEBサイトは色使い等変更されているところは多少合ったのですが、大きく変更されたのは縦長のWEBデザインになったことです。

WEBデザインのトレンドによるものの可能性が高く、製品をよりインパクトのある見せ方で制作することを考え、現在のような縦長デザインに変化したのではないかと考えられます。

特にAppleの製品はシンプルなプロダクトデザインが多いので、よりインパクトのあるWEBデザインが求められることも要因ではないでしょうか。

4.おわりに

WEBデザインの変化はいかがでしたでしょうか。

10年前と現在では、各サービスの変化やデバイス、回線スピードなどさまざまな環境変化でWEBサイトの変化もしてきているのがご理解いただけたのではないでしょうか。

自社のサイトや、競合するサイトなども今回のブログを参考に見ていただくと、改善できる箇所が見えてくるかもしれません。皆様も是非お試しください。

【English summary】

This article looks back at web design from around 2009—ten years ago—and compares and considers how different it is from current design.

The mainstream design of ten years ago was "skeuomorphism," which imitated the texture of the real world, and glossy buttons, three-dimensional gradations, and drop shadows were used extensively. In contrast, the current mainstream is "flat design" and "minimalism," which eliminate decoration. Through a comparison of specific sites, this article highlights how the evolution of technology and changes in user values have significantly transformed web design trends.