今回はデザイナー視点からWEBサイトのトレンドを、事例と海外ブログの翻訳を交え紹介いたします。
2012年は何と言っても「直感型」のWEBサイトが流行するでしょう。理由はスマートフォンやタブレット端末の普及にあります。その結果、デザインに求められる要素としては以下の3点になるはずです。

• 視認性が高く直感的に理解できる。

• スマートフォン的なルック＆フィール。

• 高いグラフィック力が求められる。

ここからは、上記3点を検証するうえでも、Jake Rocheleauのブログの秀逸な記事の中から、『WEBに求められる10個のキーワード』を紹介したいと思います。

１．反応型ウェブデザイン

著者はまだこのコンセプトは新しいと言いつつも、各ブラウザ・プラットフォームに柔軟に対応できる反応型デザインが、今後のキーワードのひとつになるだろう紹介している。
＊この反応型とはブラウザ幅やそれぞれのプラットフォームによってデザインレイアウトが柔軟に適応できる形式である。

実際に制作する上で、PC用、モバイル用、スマートフォン用、それぞれのデザインを制作する作業が本当に必要なのだろうか？
時間もコストも十分にあれば話は別だが、できればひとつのソースですべてのプラットフォームに対応したデザインがあれば理想的だろう。

こちらのサイトでブラウザ幅を広くしたり狭くしたときに、デザインレイアウトがどのように変化しているか確認してほしい。

 

２．固定位置のナビゲーション

著者は必要なナビゲーションを固定表示にすることで、そのウェブサイトのパファーマンスは向上するとしている。今まではこうした固定表示にはJavaScriptの技術が必要とされ、さらにクライアントサイドの設定にも依存されるため、こうした機能を持つことはリスクがあったのかもしれない。jQueryの使用によりその問題が解決できた。

左側のナビゲーションが固定されている。

 

中央のナビゲーションが固定されている。

こうしたナビゲーションを設定するには、各情報のカテゴライズ化や情報設計がより重要度を増してくるだろう。

 

３．サークル（円）

web 2.0 のブームの中、DTPっぽいドロップシャドウや、角丸デザインなどが流行りCSS3によってその効果を表現することがより簡単に実現できるようになった。さらに、サークル（円）型の表現の増加が目立ってきているようだ。使い方によってはコンテンツの差別化を図ることができ、よりクリッカブルの効果をあげることができるだろう。

多少読み込みに時間がかかるが、視覚的な楽しさと各コンテンツへの誘導機能を備えたサイトデザインである。

サークル（円）をシンボリックに使用することで、メリハリのあるサイトデザインになっていると思う。

 

４．大きいサイズのベクターアート

著者によると、数年前までは下記のサンプルであるようなキャラクターをサイト内で大きく取り扱うことが少なかったようだが、ここ最近ではキャラクターを使用しサントブランディングを向上させる効果がではじめている。

以前のmozillaサイトではロゴが強調されたデザインだった。現在はキャラクターを登場させ、よりフレンドリーな印象にもなった。

著者はこのキャラクターを使ったデザインを、新しいウェブサイトデザイン領域としている。視覚的なポイントを持たせつつ、次のクリック導線をそのキャラクターが紹介しているような印象も受ける。

 

５．複数コラム型のメニュー構成

今まではリンク項目が数多くある場合、カテゴリを整理し上部メニュー＋サイドメニューとしてレイアウトすることが多かったと思う。このサンプルではその数多くあるメニューをコラム分けを行い掲載。ユーザーテストの結果ページ上部へ配置することが良い結果であったと著者は述べている。

 

ロゴを中心に、メニューをまわりに配置。デザイン的にもバランスが良い。

たしかに上部のメニューから、そのカテゴリ以下にあるサイドメニュー項目を想像するのは難しいケースもあるだろう。こうした一覧表示によってよりクリック数が少なく目的ページへの誘導も可能になるのではないかと思う。

 

６．jQuery/CSS3/HTML5　アニメーション

すべてのブラウザーに対応していないとはいえ、以前に比べjQueryを使用することでアニメーション効果が簡単に実現できるようになり、今後はそのアイデアをどう発展させていくか著者は期待している。

http://addyosmani.com/blog/css3transitions-jquery/
こちらのサンプルにあるように、スライドショーや、棒グラフアニメーションなどコンテンツによっては非常に効果的な視覚表現としてアニメーションを展開することができるだろう。但し、やみくもに多用することは、逆効果にもなるため使い方には注意を払いたい。

 

７．リボン＆バナー　グラフィック

リボン系の素材を使用したデザインが多くみられる理由のひとつとして、各デザイナーが
チュートリアルを公開したり、フリー素材として提供されはじめたことが要因のひとつとして取り上げられている。

参考：素材ダウンロードサイト
Corner Ribbon　→　http://365psd.com/day/2-162/
Dark Slider with Featured Ribbon　→　http://365psd.com/day/2-147/
Colorful Ribbons　→　http://365psd.com/day/2-183/
Green Corner Ribbon Templates　→　http://365psd.com/day/2-23/
Simple Product Box　→　http://365psd.com/day/2-78/

デザイン的な表現効果としては、これらの装飾は通常の生活の中でも目慣れしているモチーフであり、自然と視線の誘導を導くことができるのではないかと思う。さらに、フリー素材を使用することはオリジナル性にかける意味で抵抗のあるデザイナーも多いのではないかと思う。スケジュールやコストの制限を踏まえ、これら素材を柔軟に利用した方が良いと思う。

 

８．カスタムフォントフェイス

Typekitを使用することで、ブログやワードプレスなどにユニークなスタイルのWEBフォントを表示することが可能であった。今ではGoogle Web Fontsによって、そのフォントライブラリを参照しCSSのfont-familyプロパティを指定することで、より簡単にユニークなスタイルをWEBフォントを表示できるようになった。

こうしたWEBフォントのスタイルが増え、文字の表現幅が広がってくることで、ブログなどの記事コンテンツがメインである媒体にはメリハリが効いた表現ができるだろう。懸念点と言えば乱雑にカスタムフォントスタイルの使用によって、見づらい・読みづらい表現になってしまうことだろうか。

 

９．インフォグラフィックス

インフォグラフィックスは情報やデータ、概念的情報などを視覚的に表現したものである。
主に、地図、路線図、統計図、天気予報や天体図などの媒体として表現されていた。

Data Visualization: Modern Approaches
http://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/

著者によれば、このインフォグラフィックスが、ウェブ媒体の中でも情報共有の場として急速に広がっていると言われている。

著者も言うとおり、このインフォグラフィックはただ単にグラフィック力があれば実現できるモノでもなく、ある情報に対してどう視覚化し伝えやすくするかが重要なポイントだと思う。

 

１０．簡素化

著者によれば、人気のあるWEBデザインのトレンドは、ミニマリズムのサイトから生じているらしい。

http://webdesignledger.com/inspiration/25-fresh-examples-of-minimalist-web-designs
ここで言うミニマリズムというのは、表示要素を必要最低限としたサイトと捉えています。

ウェブサイトのゴールとして、以下にユーザーの目的地へ、A地点からB地点へ誘導できるかがポイントになるため、ウェブサイトの簡素化によってはその目的を達成しやすくはなるだろう。但し、サイトのコンテンツ情報によっては、その簡素化の作業に膨大な時間をとられるかもしれない。

 

以上の内容から、

●視認性が高く直感的に理解できるポイントとしては、
５．複数コラム型のメニュー構成
９．インフォグラフィックス
１０．簡素化

●スマートフォン的なルック＆フィールのポイントとしては、
２．固定位置のナビゲーション
６．jQuery/CSS3/HTML5　アニメーション

●高いグラフィック力が求められるポイントとしては
４．大きいサイズのベクターアート
９．インフォグラフィックス

の項目がそれぞれ当てはまるかと思います。

基本的にデザインをするということは、ユーザー側の要求や欲求を汲み取り、形やサービスにするプロセスであり、今の時代はその要求として「直感的」にすぐに理解できることの重要性がより高くなっていると考えられます。その中でも特に、デザインのトレンドという意味では「インフォグラフィックス」は、今後デザイナーがデザイナーとしての力を発揮できるポイントになるのではないかと思います。
インフォグラフィックスについては、また別の機会に紹介いたします。

2012年のWEBトレンドをとらえ、WEBマーケティングを成功に導いてください。