Webデザインを制作する時は必ず、インターネットが生み出すあらゆる可能性を考慮しましょう。デザイナーの斬新なアイデアは、人々の交流や想像力の範囲を世界規模へと広げていきます。そうした例は、広告制作会社のWebサイトなど、時代の最先端をいく業界ではよくあることです。

この記事では、2015年に流行しそうな注目のWebデザイントレンドを厳選してご紹介します。これを読めば、真のイノベーションを理解し、新たなチャンスを見い出せるはずです。中には、”モダンなWebサイト”という概念を完全に覆すトレンドもあるかもしれません。

1. 大きく作る

Big_Really_Big

“大きく作る”というのは、今日のWebデザインにおいて最も重要な原則でしょう。とはいえ、この種のホームページに抵抗がある人は多くいます。具体的には、アバブ・ザ・フォールド(スクロールせずに閲覧可能な領域)。このタイプのデザインでは、画像や動画の上に短い言葉を並べたものだけをに表示します。中にはナビゲーションすら取り除いたものや、(少なくとも)小さなアイコンとして隠しているものもあります。

このWebデザインのトレンドは、”映画風”と”ブックカバー”の2種類に分類されます。映画やテレビの広告に着想を得た前者に対し、後者は書籍やカタログの表紙といった昔ながらのコンセプトを進化させたものです。

book

このトレンドを支えているのは、視覚的効果と実用性です。まず、サイトを訪れたユーザに、一瞬にして最大級のインパクトを与えることができます。さらにコーディングがしやすく、モバイル端末でもデスクトップパソコンのモニタでも正常に動作します(表示デバイスの画面サイズによらず、レイアウトは一定に保たれます)。

このような画像の全画面表示がはやり出したのは去年のことです(「2014年のwebデザイントレンド」という記事で紹介しました)。そして、高画質画像や高速化した技術の利用が増えるにつれ、Webサイトは”ブックカバー”のレイアウトから、さらなる進化を遂げようとしています。

Use_of_Java_Script_snow

“映画風”のトレンドで重要なのは、全画面(または、ほぼ全画面)に映し出された動画と、その上に表示される短い言葉や要素です。このスタイルを初めて取り上げたのは「2013年のWebデザイントレンド」という記事ですが、当時はまだ少数の代理店のWebサイトにしか使われていませんでした。

そのトレンドが今、勢いに乗っています。つい昨年、Paypalはホームページをアップデートして、背景に動画を全画面で表示するようにしました。これがきっかけとなり、このコンセプトは主流になっていったのです。

2. マルチメディアを体感させる

jack_daniels

マルチメディアのコンセプトは、かなり古いものです。マルチメディアという言葉自体が使い古され、誤用された結果、もはや本来の意味はほとんど残っていません。それにもかかわらず、デザイナーやプログラマーの多くは、もっと魅力的なマルチメディアを体感してもらおうと日々努力しています。

かつて、こうした手法にはFlashをプラットフォームとして使用していました。それが今ではHTML5のcanvas要素に変わり、いずれはこれでWebサイト上の視覚効果を、ほとんど作り出せるようになるでしょう。

street_view_inspire2

HTMLのcanvasを使って作成したインターフェースの例として、注目のサイトをもう1つ紹介しましょう。こちらはブルックリン在住のミュージシャンJonathan Dagan(j.viewz)が運営する、コミュニティー主導型のDNA projectのサイトです。視覚に訴える背景動画を始め、j.viewzが試作した曲(ユーザがダウンロード可能)や、コラボしている人たちがアップした動画や音楽、フィードバックなどがあり、j.viewzの新アルバムの制作予定が分かるようになっています。

Navigation

Website via Raise the River

さらにもう1つ、すばらしい例を挙げましょう。このRaise The RiverのWebサイトの特長は、最適な視覚的メタファーと、情報の見せ方にあります。程よい速度でアニメーションが進み、スクロールが無効になっていると、ユーザは必然的に一息ついて、このページの進行にペースを合わせることになります。

インターフェース設計においては、ユーザ側ですべて操作できるように設計するのが一般的です。しかし、このWebサイトを見ると、あえて一定時間ユーザ操作を無効にすることで、より良いユーザエクスペリエンスを実現できるケースもあることが分かります。

3. 視差効果で動きを生み出す/h3>

視差効果は、さまざまなアニメーションへと進化を遂げました。そのすべてに共通して言えるのは、「スクロールやマウスの動きに応じて、ページ内の要素やプロパティを動かす」ということです。よく見ると分かると思いますが、この記事で紹介しているWebサイトのほとんどに、この手法が使われています。では、もう少し他の例を挙げましょう。

スクロールイベントと手書きのアニメーション

Use_of_Java_Script

このMint Design Companyのサイトを見ると、昔のCSSスプライトの技術が独創的な手法で使われていることに気付くでしょう。その効果によって、簡素な企業Webサイトが、魅力あふれる個性的なサイトに見えるのです。

斬新なスクロール

quo_s3_opisy

Website via QUO+

QUO+のヘッドセットのページは、縦にも横にもスクロールします。このサイトを見ていると、まるで迷路の中を進んでいるようなワクワクした気分になります。さらにスクロールをすると、製品の色が変わっていく部分も楽しめます。

4. 動き出す絵本

akso3

このタイプのページは上の1つ目の例のように、ユーザが所定の位置までスクロールするとアニメーションのシーケンスが始まります。たいていは、数個の要素がページ内に滑り込んできたり、フェードイン効果で浮かび上がったりします。

BOLDKINGの製品ページ(上のサイト)では軽量化したSVGとJavaScriptを使い、視覚的メタファーを用いて製品の流れを説明しています。そのアイデアやアニメーションもさることながら、これを1.5メガバイト以下のページ容量で実現しているというから驚きです。JavaScriptのライブラリ1つで、そのくらいのサイズになるものもあります。なお、このアニメーションシーケンスの中には、操作できるものも1つあります。

collindewi

Colin and DewiのウェディングWebサイトは、単純ながらも効果的な方法で、ユーザに集中して物語を読んでもらえようにしています。一度に表示されるのは物語の一節のみです。次のパートを読むにはスクロールする必要があります。

普通のスクロール機能と変わらないような気もしますが、実際は3DのCSSアニメーションを使って、テキストの一部を表示したり隠したりすることで、話の続きを読みたいと思わせているのです。

ヘッダーとページに、マウス操作に連動した視差効果を使う

HABITAT

Website via HábitatWeb

この効果を使うと、3次元空間を見ているような錯覚を作り出すことができます。Habitat Web(上のサイト)やArchéologie de la Grande Guerreのページように、視覚から入る情報とマッチした効果を使うと良いでしょう。

この効果をセンス良く使えば、すばらしいサイトに仕上がります。とはいえ、このトレンドは大々的には広まらない気がします。もし大流行するようなことがあれば、すぐに安っぽく、うっとうしいと思われてしまうでしょう。

5. フラットデザイン

Flat_Dsign

Website via Colin and Dewi

ここ3年程、フラットデザインはデザイン界の”王様”として支持されてきました。特にアイコンやメニュー、イラストなどの小さな要素においては今でも大活躍しており、今後も人気は続くでしょう。

フラットデザインの要素は見栄えが良く(数年前まであらゆるWebサイトに使われていた光沢のあるWeb 2.0のアイコンより断然良い)、アイコンフォント技術のおかげで簡単に拡張や管理ができます。こちらのicomoon.ioは、誰でも無料で自由にオリジナルのアイコンフォントを作成できるオンラインサービスの一例です。

しかし、ここで重要なのは、フラットデザインが必ずしもフラットとは限らないということです。デザイナーは見る人をあっと言わせようと、わずかなグラデーション、テクスチャ、写真などを多く取り入れています。フラットデザインの一番のポイントは色のフラット感ではなく、いかに独創的な視覚的メタファーを感じ取ってもらうか、という点だと言えるでしょう。

実物を模倣するスキュアモーフィックデザイン(メモ帳アイコンであれば、紙の束を革表紙でとじた本物のメモ帳に似せる)と違い、フラットデザインでは、あらゆるサイズに対応した、合成的で記憶に残る楽しい画像でメモ帳という概念を伝えようとします。

このトレンドは今後、さらにコラージュ風になり、他のスタイルと一緒に使われるようになると予想しています。例えば、上述のHábitatWebのWebサイトのような感じです。

6. ボックスよ、さようなら

Webデザイナーは常に、「自分は型(ボックス)にとらわれず物事を考えている」と、さまざまな形で示そうとするものです。このトレンドは、「描いたボックスを突き破ってみろ」とでも表現したらいいでしょうか。Webデザインにおいては、フレームは必ず長方形の画面で(いまだに円形のモニタがあるとは聞いたことがありません)、ページ内のHTML要素もすべて長方形です。

しかしデザイナーは、大半の人と同じく制約されるのを嫌います。ではここで、「自分は長方形にはとらわれていない」と証明するための3つ方法を紹介しましょう。どれも今、人気上昇中のレイアウトです。

長方形の存在をかき消したページレイアウトにする

Circles_Hexagons_Iirregular_Shapes

円や六角形、ひし形などの変わった形も使えます。

rectangles

Lorenzo Bocchiのサイトには、不等角投影図法で描かれた歪んだ領域とWebサイトレイアウトのプレビューが表示されていて、広がりや動きが感じられます。

z_lotu_ptaka_realism

レストランRosaのホームページを見ていると目の錯覚が起きて、今にもクッキーの香りが漂ってきそうな感じがします。このページでは、数世紀前から続く騙し絵の最新技術を使って、モニタに表示される実際のデスクトップを再現しています。例えば、木のテーブルを背景にして、その上にすべてのオブジェクトを配置しています。

swiss2

長方形に対抗する究極の方法は、無限に広がる空間へユーザを連れ出すことです。そこでは、スクロールは単に上下する機能ではなく、空を飛べる機能になります。

Swiss Air Linesは、Webサイト操作の認識を覆そうとしています。このページを見ていると、自らの情報空間に対する認識がいかに月並みだったかに気づくでしょう。ここでは画面を上下に移動する代わりに、雲間を縫うように空を飛ぶことができるのです。

7. タイル

Tiles_Windows8

タイルに固執するのはつまらないと感じる方は、縁を不規則にジグザグにしたり、オブジェクトを入れ込んだり、境界線上にテキストを配置したりすると、レイアウトの幅が広がるかもしれません。

8. ナビゲーションウィジェット

dailybeast_s

デザイナーは長年にわたり、いろいろなナビゲーションを試すことに楽しみを見い出してきました。ナビゲーションで”遊ぶ”のが最もはやったのは、WebサイトがすべてFlash設計されていた頃です。その後、Flashの勢いが衰えると、アニメーションや一風変わった双方向性は失われていき、より落ち着いたメニューが使われるようになりました。

ところが最近、最新のナビゲーションが再び盛り上がりを見せています。その背景には、新たなWebデザインに秘められた可能性や、既存のナビゲーションモデルを複数デバイスで使う際の効率低下などがあります。さらにJavaの絶え間ない進化(フレームワークやプラグイン)によりJavaScriptが普及し、すべての主要ブラウザで同じように最新のCSSを解釈するようになってきたことも、この傾向を後押ししています。

では、ナビゲーションの新手法やトレンドをいくつか紹介しましょう。すでに広く使われているアイデアもあれば、これから新しい”モダンな”Webデザインになりそうなものもあります。

スティッキーメニュー

less_s

Less CCのWebサイト。このタイプのメニューは、スクロールの位置に応じて関連項目のサブメニューを展開表示するため、コンテンツの多いシングルページのサイトに使うと効果的。このLESSのマニュアルページは、数ある”マニュアル型”のWebページの中でも格段に使いやすい。

スティッキーメニューとは、スクロールをしても画面の上部や端に固定表示されるタイプのメニューです。好き嫌いはさておき、これはシングルページのデザインにおいて定番になりつつあります。

スティッキーメニューと一緒にscrollspyというスクリプトを使って、ページ内の正確な位置を示すウィジェットを作成する場合もあります。これは、長い階層メニューでは特に役に立ちます。

画面の四隅に固定されたスティッキーナビゲーション

HUM_1

Website via Hum

ストリートビュータイプのナビゲーション

pudelko_w_pudelku_nawigacja

Website via Oh Deer Games

OhDeer Gamesの制作者は、Googleマップの中でも、とりわけストリートビューの影響を受け、まるでGoogleのストリートビューを見ているようなナビゲーションを再現しました。これがトレンドになるかは、時期が来れば分かるでしょう。ストリートビュー風のナビゲーションや、ゲームでお馴染みの不等角投影図法を用いた”上空から見たような”ビューを追求しているページは、他にもあります。

そして、このトレンドは次に紹介する注目トレンドを生み出します。

9. Googleマップを取り入れる

street_view_inspire

これをトレンドとして取り上げた理由は、ずいぶん前から人気が出ている(あらゆるところで目にする)ことに加え、Googleのカスタマイズオプションが盛んに使われた結果、より目を引くデザインに進化したからです。

このトレンドに乗ったWebサイトの中には、マップというコンセプトを軸に、機能性や視覚的なアイデアを形作った非常に面白いサイトがあります。もちろんそこには、ページの外観や雰囲気に合うようカスタマイズしたGoogleマップが使われています。

10. マッシュアップ・インターフェース

その課題の解決策になり得るのが、マッシュアップ・インターフェースと呼ばれるものです。このレイアウトは、必要な機能やコンテンツに合わせて作った多数の”レイヤ”から構成されます。実を言うと、これは新しいコンセプトなどではありません。デスクトップのアプリケーションでは普通に使われていましたが、主流のインターネットでは、あまりはやらなかっただけです。しかし最近になって、このようなインターフェースの人気が上昇し、より上品で機能的にものに進化しています。

NecotransのWebサイトのアバブ・ザ・フォールドには、全画面表示された写真と、その上に表示された1文しかコンテンツがないように見えます。しかし実際は、画面の右側に小さなサイドメニューがあって、そこから同じ画面領域にあるすべての基本機能にアクセスできます。ユーザはこのメニューから、サイト検索ウィジェット(入力内容に応じて結果が表示される)やカスタマイズされたGoogleマップ、ニュースウィジェット、問い合わせフォームを使用できます。

11. 極力シンプルに

maemo_big_video2a

Website via Maemo

有名なKISSの原則(「Keep It Simple, Stupid(シンプルにしておけ!この間抜け)」、「Keep It Short and Simple(簡潔に単純にしておけ)」)は、軍隊やビジネス分野、政府などで1960年代から使われてきました。しかし、いくらシンプルなデザインにしようと努力しても、大概はさらにシンプルにできる余地が残っているものです。

レストランMaemoのサイトでは、極力シンプルな言葉を使い、確かな力強さを持った物語を伝えています。サイトの訪問者が取るべきアクションはたった1つ(”Book a table(席の予約)”)で、レストラン名の背景にはフィヨルドの冷たい霧が渦巻いています。

下にスクロールすると、写真が何枚かあります。レイアウトはカジュアルで、縦横方向に表示位置をそろえている感じはしません。この写真のテーマも、カジュアルな雰囲気です。とはいえ、このページには、見ている人の感覚に強く訴えるものがあります。余計なものをそぎ落としたフォームは写真の質を際立て、ミニマムデザインにすることで、表示されている短い文を、じっくりと格言のように読ませようとしています。

ここでの教訓は、視覚的に落ち着いた(静かな)Webデザインにしても、見栄え良く仕上がるということです。コンテンツやフォーム、色はできるだけ最小限に抑え、大きくリアリティのある動画を使って趣を持たせてみてはいかがでしょうか。

12. World Wide Wait(表示待ち時間)

loading

古いジョークですが、皆さんもWorld Wide Waitという言葉を聞いたことがあるのではないでしょうか。56kモデムでインターネット接続するのが主流だった90年代には、「WWW(World Wide Web)」の頭文字を、冗談で「World Wide Wait」と言っていたものです。しかし高速ネットワークの登場により、この言葉はほとんど忘れ去られてしまいました。

かつてないほどの高速通信が実現した今は、ひと昔前には考えられなかったWebサイトを作成できます。例えば、背景としてHD動画を流すようなサイトです。しかし前進には代償が付き物です。この場合の代償は時間、とりわけ読み込み時間です。

こうした背景があって、見た目の凝ったプリローダーが再流行の兆しを見せています。小規模のゲームに転向していったFlashの全盛期ほどの魅力はありませんが、プリローダーは今でも独立した芸術作品です。

13. デザイナーの自動化

thegrid1_

grid.ioのWebサイトのスクリーンショット。人間ではありえないようなミス(黒背景に黒文字を使っているので読めない)を犯していることが分かる。

この記事をまとめる前に、”The Grid“についてお話ししておかなくてはなりません。The Gridとは“自動化したデザイナー”を利用する興味深いアイデアで、ここ最近話題を呼んでいます。その目的は、プログラマーとデザイナーの代わりに人工知能を使うというものです。では今後、Webデザイナーの需要はなくなってしまうのでしょうか? 今のところはまだ何とも言えません。

現段階では、このシステムをテストできないので、使いやすさを評価するのは難しいでしょう。彼らのWebサイトは、単に自らの力を見せつけているだけにも見えます。全体的に見るとThe Gridは、ほぼすべての解像度で正しく動作していますが、こういった人工的な芸術作品を作ろうとする試みは、まるで今の時代を象徴しているかのようです。例えばThe Painting Foolという創造的なソフトウェアが描いた絵は、今でもアートギャラリーに残っています。

まとめ

ご紹介した13個のWebデザインのトレンドは、この1年でジワジワと人気が出てきたものです。おそらく2015年に登場するWebサイトは、これらに強く影響を受けた作品になるでしょう。とはいえ、今年のポイントをひと言でまとめると、「Webサイトをデザインする時は、”コンテンツファースト”を意識することが最も大事」と言えます。

これは揺るぎない指針です。しかし最近では、Webデザインの美しさを追求するあまり、デザインの準備段階(コンセプト、ナビゲーションフローの検討、ワイヤーフレーム作成など)のミスが露見するケースが多くあります。新たな技術を取り入れて視野を広げる際も、基本は忘れないようにしたいものです。

最新の流行をチェックしたい方は、こちらで2016年のWebデザイントレンド予測をご覧ください。