3分でわかる!フラットデザインとマテリアルデザインの違い

昨年は多くの新しいアイデアが生まれ、ウェブデザイナーにとって有意義な年でした。あるものは消え、あるものは成功して今後も影響を与え続けることになりました。 2013年に大ヒットしたトレンドは2014年には目新しさを失い、その一方で世界中のデザイナーが新しいトレンドに磨きをかけ続けるでしょう。 では、2014年はどんなウェブデザインのトレンドが待っているのでしょうか？　これからそれを紹介します。ご意見を、ぜひコメントに残してください。 1.フラットデザインの繁栄 Website: wistia.com フラットデザインなど一時的な流行に過ぎなかった思うなら、それは間違いです。フラットデザインは強力なミニマリストデザインです。デザインをシンプル、クリーン、現代的に保つ、ということです。これらは、ほとんどのクライアントからいつも聞かされる言葉です。 皆がフラットデザインを使う理由は、それに意味があるからです。無駄を削り、空白を有効利用し、全体として優れたユーザ体験を提供します。デザイナーは多くを使わずに大きな成果を達成することを余儀なくされ、フラットデザインは2014年の第1のトレンドになると私は考えます。 2.レスポンシブデザインは必須 Website: KasraDesign これは、間違いなく標準になります。クライアントは応答型デザインを要求し、開発者はコーディングに必要なものを学び、それを追求します。理由は単純に、「需要」です。スマートフォンやタブレットが飛ぶように売れている今、マーケティングの可能性は巨大です。あなたのクライアントが零細事業のオーナーであったとしても、他社のサイトで応答型の動作を目にすれば、このデザインを話題にするでしょう。 3.ウェブサイトの画質が向上 Website: Portraits 長年、デザイナー達は優れた画像を追求してきましたが、クライアント側では必ず問題が生じてきました。2014年には、より高品質で創造的でユニークな画像が手に入ります。その理由は、手ごろな価格にローディング速度の高速化、そしてどこからでも高画質の画像にアクセスできることです。 4.視差効果ウェブサイトの人気 Website: Hot Dog 遠い昔、960画素ウェブサイトの時代には、IE6で効果的に機能しなければなりませんでした。インパクトと効果的な文言がすべてでした。視差効果デザインはそれを、スクローリングの効果、パワフルな画像、力強く創造的なタイポグラフィで実現します。2014年には、特に有名ブランドが視差効果デザインを多用するようになるでしょう。 5. インフォグラフィックスは、やはり最良のデータ表現方法 Website: Gabriel Gianordoli インフォグラフィックスは小さなスペースに多くの情報が入り、人目を引きますが、低コストです。事業主がインフォグラフィックスを依頼する理由はそこにあります。エンドユーザがこれを好む理由は、インフォグラフィックスにはそれぞれ独自の個性があるからです。タイポグラフィや大胆な色づかいと形の組み合わせなど、少し風変わりで見る人の興味を引きます。 真面目に取り組むクリエイターなら必ず、正確な事実と数値を元にストーリーを作り上げます。視聴する人は子供時代の漫画の世界に入り込み、見ているだけで楽しめるかも知れません。でも、実はそのとき人はたくさんの情報を吸収しており、そして、人は情報が大好きなのです。インフォグラフィックスは大量のデータを伝えるための非常に効果的な方法であり、2014年には間違いなく、ますます多用されるようになるでしょう。 6.タイポグラフィが主役 Website: Crop The Block さよならGeorgia、さよならTimes New Roman、さよならHelvetica。2014年にようこそ。タイポグラフィに真面目に取り組むときが来ました。これまでも真面目に扱われていましたが、今ではタイポグラフィは主流になりました。人々は雪崩のように押し寄せるモバイルアプリケーションの中を泳ぎながら、ありとあらゆる素晴らしいタイポグラフィを見せつけられ、それが大きな要因となってフォントの使われ方への期待が高まっています。 高品質なフォントが手ごろな価格で入手できるようになり、もうArialでは不十分です。ユーザは相変わらずのHelvetiaを見ると何かが足りないと感じるようになり、事業主はフォントファミリー全体に高い料金を支払わなくなっています。 7.ウェブサイトはコンテンツを重視して単純化 Website: The New York Times ニューヨーク・タイムズは最近、ウェブサイトのデザインを一新しました。このデザインは、そのシンプルでクリーンな手法によって最新のトレンドの多くを語っています。新しい手法ではありませんが合理的な次のステップとして、ますます多くのウェブサイト、特に「重い」コンテンツのサイトがこの例に倣うでしょう。余計な飾りを取り払えば実質のコンテンツが輝いて見え、デザインが脚光を浴びようとするのではなく、本来の役目を果たすようになります。 8.ショートプレゼン動画の再来 Website: Goldee 2014年には、Vineの爆発的拡がりによって、プレゼンテーション動画が再来すると思われます。この6秒の動画には大流行の気配があり、簡単に作成でき、誰が見ても面白いようです。ここ数年、動画は短くなり続けていて、来年には30秒未満で要点を伝えるビデオクリップが躍進するでしょう。Vineに感謝です。 9.ニュースレターのデザインが引き続き向上 Newsletter: Miniboden Eメールはもはや視聴者への唯一の伝達手段ではありませんが、ユーザにコンテンツへの興味を持ち続けてもらうためのメディアとして健在です。2014年には、ニュースレターはさらに創造的・刺激的に進化して生き残るでしょう。好んで使われるチャネルではなくなっているとはいえ、Eメールがすぐに絶滅するわけではありません。賢い事業主は、この変化に気付いています。 10.固定されたナビゲーションが好まれる Website: TheoryDesign…

Webデザインを制作する時は必ず、インターネットが生み出すあらゆる可能性を考慮しましょう。デザイナーの斬新なアイデアは、人々の交流や想像力の範囲を世界規模へと広げていきます。そうした例は、広告制作会社のWebサイトなど、時代の最先端をいく業界ではよくあることです。 この記事では、2015年に流行しそうな注目のWebデザイントレンドを厳選してご紹介します。これを読めば、真のイノベーションを理解し、新たなチャンスを見い出せるはずです。中には、”モダンなWebサイト”という概念を完全に覆すトレンドもあるかもしれません。 1. 大きく作る “大きく作る”というのは、今日のWebデザインにおいて最も重要な原則でしょう。とはいえ、この種のホームページに抵抗がある人は多くいます。具体的には、アバブ・ザ・フォールド（スクロールせずに閲覧可能な領域）。このタイプのデザインでは、画像や動画の上に短い言葉を並べたものだけをに表示します。中にはナビゲーションすら取り除いたものや、（少なくとも）小さなアイコンとして隠しているものもあります。 このWebデザインのトレンドは、”映画風”と”ブックカバー”の2種類に分類されます。映画やテレビの広告に着想を得た前者に対し、後者は書籍やカタログの表紙といった昔ながらのコンセプトを進化させたものです。 このトレンドを支えているのは、視覚的効果と実用性です。まず、サイトを訪れたユーザに、一瞬にして最大級のインパクトを与えることができます。さらにコーディングがしやすく、モバイル端末でもデスクトップパソコンのモニタでも正常に動作します（表示デバイスの画面サイズによらず、レイアウトは一定に保たれます）。 このような画像の全画面表示がはやり出したのは去年のことです（「2014年のwebデザイントレンド」という記事で紹介しました）。そして、高画質画像や高速化した技術の利用が増えるにつれ、Webサイトは”ブックカバー”のレイアウトから、さらなる進化を遂げようとしています。 “映画風”のトレンドで重要なのは、全画面（または、ほぼ全画面）に映し出された動画と、その上に表示される短い言葉や要素です。このスタイルを初めて取り上げたのは「2013年のWebデザイントレンド」という記事ですが、当時はまだ少数の代理店のWebサイトにしか使われていませんでした。 そのトレンドが今、勢いに乗っています。つい昨年、Paypalはホームページをアップデートして、背景に動画を全画面で表示するようにしました。これがきっかけとなり、このコンセプトは主流になっていったのです。 2. マルチメディアを体感させる マルチメディアのコンセプトは、かなり古いものです。マルチメディアという言葉自体が使い古され、誤用された結果、もはや本来の意味はほとんど残っていません。それにもかかわらず、デザイナーやプログラマーの多くは、もっと魅力的なマルチメディアを体感してもらおうと日々努力しています。 かつて、こうした手法にはFlashをプラットフォームとして使用していました。それが今ではHTML5のcanvas要素に変わり、いずれはこれでWebサイト上の視覚効果を、ほとんど作り出せるようになるでしょう。 HTMLのcanvasを使って作成したインターフェースの例として、注目のサイトをもう1つ紹介しましょう。こちらはブルックリン在住のミュージシャンJonathan Dagan（j.viewz）が運営する、コミュニティー主導型のDNA projectのサイトです。視覚に訴える背景動画を始め、j.viewzが試作した曲（ユーザがダウンロード可能）や、コラボしている人たちがアップした動画や音楽、フィードバックなどがあり、j.viewzの新アルバムの制作予定が分かるようになっています。 Website via Raise the River さらにもう1つ、すばらしい例を挙げましょう。このRaise The RiverのWebサイトの特長は、最適な視覚的メタファーと、情報の見せ方にあります。程よい速度でアニメーションが進み、スクロールが無効になっていると、ユーザは必然的に一息ついて、このページの進行にペースを合わせることになります。 インターフェース設計においては、ユーザ側ですべて操作できるように設計するのが一般的です。しかし、このWebサイトを見ると、あえて一定時間ユーザ操作を無効にすることで、より良いユーザエクスペリエンスを実現できるケースもあることが分かります。 3. 視差効果で動きを生み出す/h3> 視差効果は、さまざまなアニメーションへと進化を遂げました。そのすべてに共通して言えるのは、「スクロールやマウスの動きに応じて、ページ内の要素やプロパティを動かす」ということです。よく見ると分かると思いますが、この記事で紹介しているWebサイトのほとんどに、この手法が使われています。では、もう少し他の例を挙げましょう。 スクロールイベントと手書きのアニメーション このMint Design Companyのサイトを見ると、昔のCSSスプライトの技術が独創的な手法で使われていることに気付くでしょう。その効果によって、簡素な企業Webサイトが、魅力あふれる個性的なサイトに見えるのです。 斬新なスクロール Website via QUO+ QUO+のヘッドセットのページは、縦にも横にもスクロールします。このサイトを見ていると、まるで迷路の中を進んでいるようなワクワクした気分になります。さらにスクロールをすると、製品の色が変わっていく部分も楽しめます。 4. 動き出す絵本 このタイプのページは上の1つ目の例のように、ユーザが所定の位置までスクロールするとアニメーションのシーケンスが始まります。たいていは、数個の要素がページ内に滑り込んできたり、フェードイン効果で浮かび上がったりします。 BOLDKINGの製品ページ（上のサイト）では軽量化したSVGとJavaScriptを使い、視覚的メタファーを用いて製品の流れを説明しています。そのアイデアやアニメーションもさることながら、これを1.5メガバイト以下のページ容量で実現しているというから驚きです。JavaScriptのライブラリ1つで、そのくらいのサイズになるものもあります。なお、このアニメーションシーケンスの中には、操作できるものも1つあります。 Colin and DewiのウェディングWebサイトは、単純ながらも効果的な方法で、ユーザに集中して物語を読んでもらえようにしています。一度に表示されるのは物語の一節のみです。次のパートを読むにはスクロールする必要があります。 普通のスクロール機能と変わらないような気もしますが、実際は3DのCSSアニメーションを使って、テキストの一部を表示したり隠したりすることで、話の続きを読みたいと思わせているのです。 ヘッダーとページに、マウス操作に連動した視差効果を使う Website via HábitatWeb この効果を使うと、3次元空間を見ているような錯覚を作り出すことができます。Habitat Web（上のサイト）やArchéologie de la Grande…