過去のサイトを覗き見できる「internet archive」でWebデザインの流行を紐解く

internet archiveというサイトをご存知ですか？これは、時系列で過去のサイトの状態を見ることができる便利なサイトです。

普段何気なく利用しているウェブサイトも、日々変化しています。デザインやレイアウトを参考にしていたサイトがリニューアルしてしまい、「保存しておけばよかった！」という時。このサービスを使えば、以前の状態をすぐに確認できます。また、ウェブサイトの新旧を見比べることで、ウェブデザインの変遷をたどることもできます。

今回は、internet archiveでウェブデザインの過去と現在を比較し、今の流行りを紐解いていきたいと思います。

internet archiveとは

internet archiveとは、世界中のデジタル情報をアーカイブするために1996年にアメリカで設立された非営利団体です。デジタル形式の資料を、研究者や歴史学者、世界中の人々が利用できるインターネットライブラリを構築することを使命にしているそうです。

当初はウェブ情報の保存に注力していましたが、現在は電子書籍・動画・音源などの保存にも取り組んでいます。

参考：internet archive
 
internet archiveは、ウェブサイト上で電子情報の閲覧・保存に関するサービスを提供しています。その中でも、さまざまなサイトのアーカイブ情報を見ることができるのが「Wayback Machine」というサービスです。

今回は、この「Wayback Machine」を活用し、ウェブデザインの今昔を比較します。

internet archive「Wayback Machine」の使い方

最初に、internet archive「Wayback Machine」の使い方を解説します。使い方は非常に簡単で、URLを入力してカレンダーをクリックするだけ。誰でも気軽に昔のサイトを見ることができます。

以下、花王株式会社のウェブサイトを例に説明します。ちなみに、2017年8月現在のトップページは、次のとおりです。

参考：花王株式会社
 
まず、「Wayback Machine」の検索窓にアーカイブ情報を閲覧したいURLを入力します。

※「Wayback Machine」の表示が出ない時は、画面左の「Web」アイコンをクリックしてください。

「Wayback Machine」で検索すると、以下のようなページが表示されます。時系列グラフを見ると、2009年からのアーカイブが保存されていることが分かります。カレンダー表示の中で、背景の色が変わっている日付をクリックすれば、その日のウェブサイトを見ることができます。

試しに、1年前（2016年7月31日）のアーカイブを見てみましょう。

現在のページとは、大きく印象が変わっていることが分かります。ページ上部に表示されている時系列グラフで閲覧したい日付を選択すれば、別の日のアーカイブを簡単に閲覧することができます。いろいろ試してみてください。

Webデザインの今と昔

internet archive「Wayback Machine」を使って、ウェブサイトの今昔を比較してみましょう。

Yahoo！JAPAN

現在

5年前

10年前

21年前

日本最大級の検索エンジンYahoo!JAPANも、さまざまな変遷を経ていることが分かります。今は、アイコンなども含めてシンプルなデザインが好まれているようです。PR（広告）が表示される部分が増えているのも大きな違いですね。

10年前、21年前と遡ると、表示される画像がどんどん少なくなっている点も違います。以前はテキストメインのサイトが多かったのが懐かしく思えます。データ通信技術も進化し、画像や動画を有効に活用することで、ウェブデザインも進化したことが分かります。

参考：Yahoo！JAPAN

通販生活

現在

5年前

10年前

写真を全面に押し出したレイアウトが印象的な通販サイト。スプリットスクリーンレイアウトが採用されていて、左のメイン商品の紹介は固定され、右側のコンテンツエリアのみスクロールできます。規則正しく並んでいるので読みやすく、カタログを見ているような印象も味わえます。

以前は、カテゴリエリア、コンテンツエリアに分かれたレイアウト。今も、ECサイトとしては一般的なレイアウトといえるかもしれません。ちなみに、10年前まで遡ると、ほぼテキストだけのサイトに。「インターネットでの通信販売」というのも、この数年で一気に日常生活に溶け込んできたということでしょうか。

参考：通販生活

サントリー株式会社

現在

10年前

現在のトップページでは、メイン画像部分に動画が流れて興味を惹かれます。サントリーのスローガンである「水と生きる」が印象的に伝わるようになっていて、ブランディングを強く意識していることが伝わります。

以前は、商品の紹介やキャンペーンの紹介が中心。ホームページの担う役割も変化しているということですね。

参考：サントリー株式会社

慶應義塾大学

現在

5年前

画面全体にに写真を表示し、ファーストビューで大きなインパクトを与えています。一見するとメニューも何も無いように感じますが、下にスクロールするとメニューが右から現れる仕組みになっています。ついついスクロールして、下のコンテンツに見入ってしまう構成です。

以前は、ファーストビューにさまざまな情報が詰め込まれていて、テキスト優位。この数年で、ビジュアルを全面に押し出したデザインへと方向転換されたようです。

参考：慶應義塾大学

富士急ハイランド

現在

10年前

ファースビューで大きなお知らせを伝え、スクロールするとグリッド表示でコンテンツが並ぶという構成です。単にカードが並ぶだけでなく、アトラクションの表示（赤四角で囲んだ部分）は動画が流れる仕組みで、クリックして詳細を見なくても雰囲気を読み取ることができます。

以前のサイトも、アトラクションの画像が印象的なレイアウト。遊園地らしく遊びゴコロがあるデザインです。ただ、今と大きく違うのは、トップページがスクロール無しで完結しているところ。複数ページのへの遷移が前提になっています。スマートフォンの普及に伴い、1ページに情報がまとまるほうが好まれるようになったことが分かります。

参考：富士急ハイランド

大塚製薬 オロナイン軟膏

現在

6年前

全面に写真を配置し、1枚の写真を見ているようなサイトレイアウトが印象的。マウススクロールすると、オロナイン軟膏がくるくる回転するパララックスデザインが取り入れられています。画面を下にスクロールすると、商品が色々なシーンに溶け込んでいる写真が次々登場し、使用シーンをビジュアルで印象づけています。情報を提供するだけでなく、見ているこちらが楽しくなるような仕掛けに満ちたウェブサイトです。

一方、6年前のサイトを見ていると、「商品紹介」に主眼をおいた、テキスト中心のサイト構成になっていますね。

参考：大塚製薬 オロナイン軟膏

2017年 流行のデザイン

デバイスの進化やユーザーの好みを取り入れ、ウェブデザインは日々進化を遂げています。トレンドの変化スピードも早いため、少し時間の経ったデザインは「時代遅れのサイト」という印象を与えてしまうかもしれません。

最新のクリエイティブなアイデアをデザインに反映させ、ユーザーエクスペリエンスと結び付けられれば、ウェブページの差別化に繋がります。常にユーザーに新鮮な印象を与えるサイトであるためには、最新トレンドを上手に取り入れていく必要があります。

ここからは、ウェブデザインの最新トレンドキーワードを紹介しますので、参考にしてくださいね。

パララックスデザイン

パララックスデザインとは、スクロールなどの動作に応じて、画面の要素が別々の動きをするデザイン手法のこと。パララックスデザインは、見た目のオシャレさがアップするだけでなく、ウェブサイトのパフォーマンス向上にもつながる優れたデザインです。例えば、オロナイン軟膏のウェブページで導入されています。下にスクロールすると、オロナイン軟膏の画像がくるくると回転し、目を引きます。

近年はスマートフォンの普及に伴い、ウェブページの構成は縦長デザインが好まれるようになっています。しかし、長いページは途中で飽きられ、離脱されてしまうというデメリットがあります。パララックスデザインは、ユーザーの興味を惹きつけることができるため、縦長デザインのウェブページと相性が良いです。スクロール自体に楽しさを加えることで、ページを最後まで見てくれる人も増え、コンバージョンにつながることが期待できます。

また、デザイン性も高く、遠近感を表現して奥行きのある魅せ方ができるようになります。

ミニマルデザイン

ミニマルデザインとは、余計なものを削ぎ落としたシンプルなデザインのこと。代表例としては、Appleのデザインが挙げられます。ページ数や構成要素などを最小限に抑えることで、ユーザーの意識を集中させ、コンテンツやメッセージの良さを直接伝えることができます。

例えば、ECサイトなどでミニマルデザインを取り入れると、取扱商品そのものの魅力を強く印象づけられます。情報が多く、広告に多くのスペースを割いているサイトとの差別化ができるというメリットもあります。

ただ、画面に表示される要素が少ない分、配色やレイアウト、タイポグラフィの組み合わせによってはダサさを感じてしまいます。簡単そうに見えて、非常に難易度が高いともいえます。

スプリットスクリーンレイアウト

スプリットスクリーンレイアウトとは、画面を2つのエリアに分割して表示をするレイアウトです。まだ日本では導入事例が少ないものの、今後増えていくことが予想されます。

上記で紹介した「通販生活」のサイトも、スプリットスクリーンレイアウトが採用されており、左半分でメイン商品の紹介スライドショー、右半分でコンテンツを紹介する仕組みになっています。

このレイアウトを採用すると、1つの画面で情報を多く伝えることができ、読み手に大きなインパクトを与えることもできます。アイデアと工夫次第で、オリジナリティの高いサイトデザインを生み出すことができるレイアウトだと思います。

シネマグラフ

近年は、GIFアニメーションもブラッシュアップされた形で活用されています。その中の1つが、シネマグラフ。シネマグラフとは、表示されている画像の一部だけをGIFアニメーションで動かす手法のことです。動画よりも容量が少ないので、ユーザーにとっても表示速度のストレスなく見ることができます。

以下のサイトでは、シネマグラフの例を多数紹介していますので、参考にしてください。

参考：cinemagraphs
 
シネマグラフのメリットは、ユーザーの興味を引くことができる点。人間は、動くものに自然と視線を向けてしまいます。かつ、静止画が動くという違和感を感じるので、全体が動く動画よりもユーザーの注意を引きつけることができるかもしれません。

グリッドレイアウト

グリッドレイアウトとは、コンテンツをタイルのように隙間なく並べるレイアウトの手法です。モジュールレイアウト、カードレイアウトと呼ばれることもあります。富士急ハイランドのサイトでは、アトラクションの紹介やイベント情報が羅列されており、視覚的にも大きなインパクトを与えています。

スマートフォンに慣れたユーザにとって、タイル型のレイアウトは「ついクリック（タップ）してしまいたくなる」という特徴もあります。タイルの大きさを変えることで、情報の重要度を伝えられます。また、画面の幅が狭いデバイスに表示する際は、縦に並べて表示すれば、簡単ににレスポンシブレイアウトに変更できます。

ストーリーテリング

「ストーリー」を意識するサイト構成も、ユーザーを引き込むために有効です。見た目のスマートさだけでなく、見る側に楽しんでもらえるかを重要視し、サイトコンテンツをストーリー仕立てで組み立てます。

今は、「共感」を生むコンテンツが好まれる事態です。SNSが一般的になり、「面白い」と思われたコンテンツはすぐにシェアされて広まっていきます。いかにシェアされるコンテンツを作成するか、という点を意識してみてください。

クロムなしのレイアウト

コンテンツを囲むクロム（枠）を排除したデザインで、画面いっぱいにコンテンツを配置します。まるで雑誌のようにスタイリッシュで美しい、自由度の高いレイアウトです。上記、オロナイン軟膏のサイトがクロムなしの一例です。

従来のウェブサイトと大きく印象が異なるため、ユーザー導線の設定に工夫が必要です。メッセージ性のあるデザインができるので、ストーリーテリングを意識したサイトと相性がいいです。

印象的な配色

サイトのイメージをより強烈に焼き付けるため、トップページに鮮やかな色の配色を充てるケースも増えています。画像の上に紫やオレンジなどのカラーを重ね、スタイリッシュさ、オシャレさを表現します。また、グラデーションを取り入れることで、よりサイトの印象を強く表現することができます。

最近のトレンドに共通するのは、「ユーザーの興味を引きつける」「モバイルでも見やすい」ということです。ウェブ上の情報が溢れ、ユーザーが「読みたいもの」を取捨選択して読む時代ですから、いかにユニークで飽きさせないデザインを取り入れるかが成功のカギになっています。上記で紹介したトレンドをすべて取り入れる必要はありませんが、この2点は意識しておきましょう。

おわりに

ウェブデザインには、その時代の雰囲気や技術を反映したトレンドが存在します。Internet Archivesで見比べても、わずか数年の間に大きな変化があることが明確でした。Internet Archivesを見ると、競合のサイトがどのような戦略でサイトをリニューアルしているのか分かるかもしれません。

トレンドを上手に取り入れながら、差別化できるウェブデザインを目指しましょう。