このページの本文へ

フラットデザインはもう飽きた!デザイナーが押さえるべき2016年のトレンドはコレ!

2016年05月11日 08時27分更新

文●Gabrielle Gosha

  • この記事をはてなブックマークに追加
本文印刷
フラットデザインやミニマリズムが主流を占めた、ここ数年のWebデザイントレンド。2016年はその反動から、もっとユニークで魅力的なものになりそうです。ヒントはイラスト。

2016年のデザイントレンドを見てみると、3つの特徴が予測できます。

  • 明るい色の復活
  • 分割表示レイアウト
  • イラストレーションの利用

Webデザインにイラストレーション(訳注:以降、イラスト)を利用するのは新しいコンセプトではありません。実際に、2012、2013、2014年は、イラストの利用が増えると予想されていました。デザイナーのイラスト作成能力に磨きがかかったからです。

実際にイラストの利用は増えたでしょうか。答えは、イエスです。しかし、デザイナーが他人が真似できない従来とは異なった手法を好む傾向にあるため、今年はこれまでとは違った年になるでしょう。

イラストは初の世界共通語

01

イラストの歴史は、文章技法が考案されるよりもずっと古いものとなります。例えば、洞窟の壁画などがそれで、具体的にはラスコーやアルタミラの壁画などが挙げられます。イラストには少なくとも4万年以上の歴史があり、人間は文化や生い立ちに関係なく、イラストと深く長い関係があるのは明らかです。

犬に関するサイン

文章技術は、しばしば上流階級で利用されたツールでした。しかし、歴史上、文字を使用しない多くの人々にとっての最適なコミュニケーション法はイラストでした。絵画や彫刻、ステンドグラスの窓、モザイク画などは歴史を記録し、人々に法、危険、道徳、その他の慣習を広めたり伝えたりするのに役立ちました。

実際に、イラストの利用法は、古代から現在まで大きな違いがありませんでした。

イラストのトレンド

03

今世紀初頭は、数多くのアイコン型のカラフルなアートワークや明るい色のマスコットを目にしました。陰影のある三次元のキャラクターやしっかりとレンダリングされたフォルムが大流行しました。

今年は、より独自性があり自然なものが好まれています。特定のWebサイト専用にカスタマイズされ、低いトーンの色を利用し、手書きを特徴とするものが以前にも増して人気で、少なくとも今年中はこの傾向が続くことが予想されます。

特注デザインは、よりユニークで自由な、子供っぽくさえある質感になっていくでしょう。Webサイトでは、フラットデザインやミニマリズムが流行したことで、似たようなデザインを見かけることが多かったのですが、より魅力的なものになるでしょう。

大きな中心人物を描いたイラスト

04

Webデザインではイラストを多くの部分で利用できます。顧客を素早く引きつけるためには、中心人物を設定し、描いたイラストが一番良いかもしれません。

大きな中心人物を描いたイラストは、他のイラストよりもニッチ市場に適しています。大きな中心人物を描いたイラストを利用するデザイン会社やサーフショップは、たいていの場合、法律事務所や政府機関よりも顧客を惹きつけます。再度確認しておきますが、大きな中心人物を描いたイラストに決まったルールがあるというわけではありません。

climateunderpressure.com

大きな中心人物を描いたイラストが素晴らしいのは、アイコンを作るときに、思ったよりも詳細な事項を盛り込めるということです。

コツ

  • 必ず関連性を持たせましょう。関連性のないデザインは、中心人物が描かれた部分はおろか、Webサイト上のどこにも行き場がありません。
  • 細かいところまで配慮しましょう。顧客の注意を引きつけて、好印象を与えるためにも、細部まで検証する努力をしましょう。
  • すっきりとしたデザインにしましょう。詳細が素晴らしくても、雑然としないように十分配慮しているか注意してください。

アイコンを使う

06

イラストを使うべき場所を見つけるのは、ときには難しいかもしれません。特に、Webサイトが使用するイラストのような装飾的なものではなかったり、またはカラフルではない場合です。しかし、イラストとして追加したい場合は、アイコンを利用したい場合と同様に簡単に考えればよいのです。

アイコンや類似のUI要素こそ、Webサイトをデザインする際に個性を表現したり工夫したりするのに最適なアイテムです。ただし、既存の要素とうまく融合していることが重要です。DesignBundleにあるように、アイコンはちょっとしたシンプルな個性を加えられ、選べるスタイルは数多くあります。「フラットデザイン」が流行していますが、いろいろなテクスチャを選択し、掘り下げていくことを恐れないでください。

designerbundle.com

アイコンはカスタマイズできますし、カスタマイズするべきですが、そのやりすぎは良くありません。芸術的に表現しようとするあまり、肝心なデザインやメッセージが犠牲になってしまっては元も子もありません。

コツ

  • 必ずカスタマイズしましょう。自分のアイコンですので、多少型破りでも大丈夫です。他と違っていることが良いのです。
  • 使いすぎないようにしましょう。アイコンがありすぎてユーザーが迷ってしまうようでは問題です。
  • 一貫性を保つこと。アイコンは新しいことを試すには良いツールですが、Webサイト全体のデザインに反しないことを忘れないようにしましょう。

動きを加える

トレンドの素晴らしいところは、思うままに組み合わせて、結果として人目を引きつけられることが挙げられます。凝った動画やイラストは組み合わせると相乗効果があります。以前よりもこの2つを組み合わせて作品にしているWebサイトを目にする機会が多くなっています。

動画化されたイラストは多くの場所で利用できますが、最適な場所はインタラクティブな手描き要素を使う場面です。DHLスロバキアのWebサイトでは、躍動感を与えるのに3つまたは4つのシンプルな動画だけで十分でした。また、動画をゆっくり再生し、自分が見たいページが分かっているユーザーの気をそらさないようにしています。DHLの自動運転トラックについては、不安を感じますけどね。

DHL Slovakia

もちろん、動画の動きを抑えて、複雑にしないことが大切です。まだ動画を試したことがないのであれば、デザインに動画を利用する4つのヒントをぜひ参考にしてください。

コツ

  • 必ずホバーを利用しましょう。ホバー動画は、Webサイトに必ず追加したいものです。そうすれば、インタラクティブとはどういうことかを理解できるようになりますよ。
  • 複雑にしすぎないようにしましょう。イラストは、目的を持って動画化しましょう。1サイクル5秒以上の動画は避けること。
  • いろいろ試してみましょう。ありきたりなフェードイン効果や小刻みな拡大縮小(訳注:原文ではbouncing)のアニメーション以外も試してみましょう。同じことの繰り返しは、蛇口から水が滴っているのと同様に良い印象を与えません。異なった要素を使ってタイミングに変化を与え、繰り返しを隠しましょう。

タイポグラフィーのカスタマイズ

今年は太字のタイポグラフィーの人気が復活しています。動画と同様に、このトレンドはイラストと組み合わせることではじめて意味をなします。

大きなタイポグラフィーの素晴らしいところは、画像の代わりになることです。手書き風にすることで、すでに魅力的であるタイポグラフィーがさらにユーザーを惹きつけるものになるでしょう。

自分でタイポグラフィーを描くと決めたら、その色、形、サイズが特定のデザインでは非常に重要になると覚えておきましょう。手描きの鉛筆風のものは、情報を発信するようなWebサイトよりも自由な発想を持つ店舗の方が効果があるかもしれません。このようなことを心に留めておきましょう。

コツ

  • リサーチしましょう。手書きのタイポグラフィーに挑戦する前に、技法やDafontFont Squirrelのようなフォントリソースを使っているWebサイトをいろいろと見てことをお勧めします。
  • 複数の書体を利用しないようにしましょう。イラスト入りのタイポグラフィーは、それだけで太字を選択しているので、どんな事情があっても他のタイポグラフィーと混ぜたり、組み合わせることは避けましょう。できるだけ1つの書体だけを使うようにし、最大でも2つの書体に抑えるべきです。
  • 必ず工夫しましょう。 タイポグラフィーをそのままにせず、グラデーションやアウトライン、テクスチャーを利用してクールな効果を試してみましょう。

最後に

デザインにイラストを組み込むのは、ときに「受け入れがたい」ことかもしれません。なぜならイラストが未知のものだからです。クライアント(株主、経営者)にとって、通常の写真やテキストを使ったレイアウトのほうが単純で簡単に想像がつきます。イラストを使う新しい手法は、クライアントからするとリスクが高いと感じるでしょう。クライアントには粘り強い説得が必要かもしれませんね。

それでも、この記事で説明した例にあるように、オリジナルで独創的なデザインと雰囲気を生み出すチャンスは大変、素晴らしいものなので諦めないでください。「コツ」を参考に、挑戦してみましょう。

(原文:Design 2016: The Year of Illustration?

[翻訳:中村文也]
[編集:Livit

Web Professionalトップへ

WebProfessional 新着記事