GIGAOM:最新のウェブデザインについてデザイナーに聞きました。パララックススクロールから大胆な色使いまで、5つの注目トレンドを紹介します。

最近のスタートアップはデザインでブレークする、けれど

問題はウェブサイト、モバイルアプリ、コネクテッドデバイス版(PCやスマホ、タブレット)のデザインをどう改良すればいいのかが不明確だということ。単純に無駄を省いてクリーンなデザインにすればいいわけではないのです。

そこで、何人かのテックデザイナーにインタビューを行い、これから重要になる5つのトレンドをリストアップしました。大きい括りでいえば、これらはすべて「シンプルさ」に分類されますが、サイトを煩雑でないものにすることは、すなわち重要な部分を引き立たせることを意味するのです。

クリーンなアイコン

130729WebDesign2.jpg

ここではあえて、フラットデザインという表現は使いません。デザイナーのHenri Liriani氏の記事によると、「フラット」とは、どことなくシンプルまたはイージーであることを意味するそうです。でも、貴重な部分を削りながら、エレガンスさを表現するのはイージーではありません。

デザイナーは今後、iOS 7のデザインの影響で、好む好まないにかかわらずクリーンなアイコンを使うことを余儀なくされるでしょう。なぜなら、Appleのクリーンなインターフェースの中では、いろいろな素材を組み合わせて作り込んだデザインは、悪趣味に見えてしまうから。プラットフォームやカラーホイールを超えてかんたんに認識できるような、研ぎ澄まされたアイコンが主流になるでしょう。

大胆な色使い

130729WebDesign3.jpg

アプリを埋もれさせないためには色使いが重要です。最近では、アイコンの色は水色が多いのではないでしょうか。

一方で、Appleの新デザインは、カラー理論家にとって面白いものとなっています。ぱっと見では不快なパステルカラーなど、色相の幅を大きく広げることで「調和」を軽視しているのです。従来のアプリに多い青色は信頼性を連想させるものですが、同時に古臭さを感じさせます。そこで明るい色を使うと、新しい何かへの期待が膨らむのです。

個人的にはYahoo!の紫は好きではありませんが、少なくとも話題になったことは確かです。こうなったら、赤紫なんてのもありかも?

データ統合

130729WebDesign4.jpg

デザイナーはこれから、「D3.js」(上の画像を参考)のようなツールを使って、データを直接ウェブデザインに取り込むようになっていくでしょう。データの可視化を別のソフトで行ってウェブサイトにアップするのではなく、最初からデータがウェブページの一部になります。

その結果、データは可視化され、インタラクティブでクロールでき、検索エンジンにもひっかかるようになります。このようなツールにより、データをデザインプロセスに取り込むトレンドは続くでしょう。

ウェブタイポグラフィ(ウェブフォント)

130729WebDesign5.jpg

華麗な印刷用フォントの表現に使用されるウェブフォントは、スクリーン表示のためにシンプルにデジタル化されています。つまり、印刷で文字を美しくするためのデザイン要素のほとんどが、ピクセル上では表現しきれていません。最近ではHoefler & Frere-JonesAdobe(上の写真)などのフォント会社が、どんなスクリーンにも対応可能なウェブフォントを開発しています。ウェブで表示できるフォントが浸透すれば、コンテンツだけでなくフォント自身に魅力を持たせるという新しい可能性も開けるでしょう。今後のフォントの表現力向上とフォントサイズの拡大に注目です。

パララックススクロール

130729WebDesign6.jpg

パララックススクロール(Parallax scrolling)とは、背景の画像が前面のテキストよりもゆっくり動くというアニメーションで使われるトリックで、とてもトリッキーな動きをします。うまくやらないとウェブサイトが目まぐるしくなってしまうので要注意。

でも、New York Timesの「Snowfall」やThe Vergeのアーケードゲームに関する記事のように、うまくやれば、実体験のような感覚を生み出したり、ストーリーの間に「休憩」や「視覚的ヒント」を入れる句読点のような役割を果たしたりもできます。

テクノロジーの世界ではいつでもそうですが、過ぎたるは及ばざるがごとし。いくらパララックスクロールが便利で流行っているからといって、使い過ぎには注意が必要です。

5 web-design trends tech companies should watch | GIGAOM

Rani Molla(訳:堀込泰三)

Photo by Janitors.