いま,見ておきたいウェブサイト

第98回 2013年特別編 2012年の特徴,2013年の展望

この記事を読むのに必要な時間:およそ 4.5 分

新年あけましておめでとうございます。

『Lançamento - Website, What a Wonderful World!』を運営しているLançamento(ランサメント)です。

『いま,見ておきたいウェブサイト』では,2012年も国内外のウェブサイトをさまざまな方向から解説してきました。2013年の初回は「特別編」として,2012年に登場したウェブサイトの特徴を振り返りながら,2013年の展望を語っていきたいと思います。

特徴その1 パララックス表現の定番化

ウェブサイトにおける表現方法の一つとして,数年前から広がりを見せている「パララックス(視差)⁠表現。2012年には,より多くのジャンルで,その姿を見かけるまでになりました。

図1 ⁠MINI CROSSOVER.」の広い室内空間を紹介したMINI CROSSOVER. BIG POINTスペシャルコンテンツ

図1 「MINI CROSSOVER.」の広い室内空間を紹介した『MINI CROSSOVER. BIG POINTスペシャルコンテンツ』

credit:Frontage Inc.

以前から多くの事例が存在したプロモーションサイトだけでなく,大企業のウェブサイトや個人のポートフォリオ,モバイルサイトや特定のコンテンツを表現するために,幅広く使われ始めたのが大きな特徴です。

図2 モバイル端末にも対応しているRange Rover Evoque Special Edition With Victoria Beckham

図2 モバイル端末にも対応している『Range Rover Evoque Special Edition With Victoria Beckham』

credit:Blast Radius

現在では,ウェブサイトにおける "定番の表現方法"と言っても過言ではないほど,その事例が増加している「パララックス」表現ですが,その背景には,実装するためのjQueryプラグインなどの充実など,技術的な側面も関係しています。

図3 パララックス表現を実現するjQueryプラグインのひとつjQuery Scroll Path

図3 パララックス表現を実現するjQueryプラグインのひとつ『jQuery Scroll Path</a>』

ただし,⁠パララックス」表現を実現する技術的なハードルが低くなったことで,"コンテンツの中身とまったく関係なくても,ウェブサイトで採用される"という事例も増えています。今後はコンテンツを生かすための表現方法として,さらなる洗練が求められていくことでしょう。

特徴その2 本格化した「レスポンシブWebデザイン」

2010年5月,Ethan Marcotte氏がBlog「A List Apart」「Responsive Web Design」というエントリーを公開してから約2年,2012年は「レスポンシブWebデザイン」という言葉を,いろいろな場面で目にした年でもありました。

図4 ⁠レスポンシブWebデザイン」が提唱された,⁠A List Apart」「Responsive Web Design」

図4 「レスポンシブWebデザイン」が提唱された,「A List Apart」の「Responsive Web Design」

CSS3のMedia Queries(メディアクエリ)を用いて,画面幅に応じたCSSを適用することで,ウェブサイトをあらゆるデバイスに適応させるこの手法は,急増するスマートフォンなどの端末からアクセスするユーザーにも対応できることから,大企業のウェブサイトでも採用が始まっています。

図5 レスポンシブWebデザインに対応した日本マイクロソフト

図5 レスポンシブWebデザインに対応した『日本マイクロソフト</a>』

またユーザーだけでなく,ウェブサイトの制作側にとってもメリットがあることを考えれば,今後も「レスポンシブWebデザイン」に対応したウェブサイトが増えていくことが予想されます。

図6 Responsive Web Design JPのような国内の事例を紹介するサイトも登場している

図6 『Responsive Web Design JP』のような国内の事例を紹介するサイトも登場している

credit:加藤俊司

今後確実視される"モバイル端末によるアクセス数の大幅な増加"を考えれば,⁠レスポンシブWebデザイン」は"2012年だけのトレンド"では終わりません。2012年中に熱い議論が展開されたように,周辺環境の変化とともに,⁠レスポンシブWebデザイン」の立ち位置は,これからも変化していくでしょう。

著者プロフィール

Lançamento(ランサメント)

国内外のウェブサイトを日々紹介する Blog『Lançamento』を運営する,自称“フリーランスという名の無職”。目指すは“エクスペリエンスデザイナー”(O'REILLY『Web情報アーキテクチャ』11ページ参照)。2008年の“ジェフの奇跡的な残留”を目の前で見たサッカー好き。

コメント

コメントの記入