Webデザインの世界は、絶え間なく進化を続けています。
ほんの少し前に目新しいと思ったものが、あっという間に使い古されたように見えたり、完全に忘れ去られたはずのトレンドが、思いがけず流行の最先端に返り咲いたりします。
そこで今回は、2017年にWebデザインの潮目がどう変わろうと、皆さんが慌てなくてすむように、今注目すべき13のトレンドをピックアップしてご紹介します。スタイリッシュなWebデザインを作成する際の参考にしていただければと思います。
また、ferretさんがこちら「目移りするほどイケてる!海外デザインギャラリーサイト24選」で海外のWebデザインについて紹介しています。
サイズが大きい太字のタイポグラフィーを、ホームページの印象を左右する部分に上手に使用する企業が増えてきています。このスタイルは、たとえばフランスのエージェンシー、Big Youthによる下の例のように、ページの他の部分をすっきりとミニマルに仕上げたい場合に効果的です。
シネマグラフ、つまり高画質な動画やGIFを切れ目なく繰り返し再生し、静的なウェブページに動きを持たせて、興味を惹く画面を構成するという手法が人気を高めています。デンマークのエージェンシー、CP+B Copenhagenによる下の例のように、素晴らしい動画を全画面で繰り返し再生すれば、訪問者もしばらくのあいだ見入ってしまうでしょう。
Webサイトのホームページなどで、多数の画像を整然と並べて表示するデザインが非常に多くなったため、何か別のアイデアを考えて新しさを加えようとするデザイナーが増えてきました。
たとえば下の例をご覧ください。デザインディレクターのWill Geddesが、自身の作品の画像を独特な方法で重ね合わせて表示し、素晴らしいコラージュを創り出しています。
カレイドスコープグラデーションが再びブームになりつつあります。チューリッヒをベースとするエージェンシー、Y7Kは、下の例のように全画面にツートーンのグラデーションを施し、モダンで新鮮な素晴らしいホームページに仕上げました。
下のスタイリッシュなデザインは、Melissa Meio-Fioの、Sao Pauloに配置されたチームが作成したもので、鮮やかな色のレイヤーを不規則に積み重ねることによって、シンプルなレイアウトに奥行きと質感を与えています。
画像やナビゲーションを一切排除し、吟味されたシンプルな言葉で、訪問者に企業について率直に紹介しているウェブサイトもあります。
デンマークのエージェンシー、B14はホームページのスペースにミッションステートメントと、自社の作品のサンプルへのリンクのみを表示しました。すっきりとしたモダンなアプローチで、情報が美しくまとめられています。
イラストレーターやグラフィックアーティストに依頼して独自のイラストを作成し、ウェブサイトに表示する企業が増えています。
NewActonによるチャーミングなウェブサイトの例(デザインはオーストラリアのデジタルエージェンシー、EDによるものです)をご覧ください。フラットデザインやミニマリズム隆盛の時代が数年続いたこともあり、イラストを使用することで個性が感じられる素晴らしいデザインができると思います。
ミニマリズムを限界まで極め、絶対に必要なもの以外はすべて排除した、ウェブサイトの常識を覆すようなデザインも登場しています。デザイナーであるMathieu Bouletのサイトには、SNSプロファイルなどへの最低限のリンクだけが表示されています。
Australian Design Radioによる下の例のように、2色に限定したカラースキームを使用することで、コンテンポラリーで洒落たデザインが完成します。
テキストを横書きの縛りから解放し、縦書きでページに配置することで、これまでにない不思議な感覚を表現できます。たとえばMatt Porterfieldによる下の例では、縦書きのテキストを混ぜて表示することで、シンプルなページを一変させています。
風変わりな形状やパターンを取り入れることにより、フラットで質感の強いデザインに洒落た雰囲気をプラスしたウェブサイトが増えてきました。一例として、カナダのデザインスタジオ、MSDSによる、大胆な模様の入った文字を表示したホームページをご覧ください。
2017年に非常に多く見られるようになったのが、このモジュラーデザインです。訪問者の目を惹く、すっきりとした使いやすいウェブサイトを、モジュラーデザインを使用して誰でも簡単に作成することができます。
Waaarkデザインスタジオによる下の例には、ちょっとしたひねりが加えられています。モジュールの境目にマウスのカーソルを合わせると、ラインが波のようにうねります。
テキストを画像に一部だけ重ね合わせて表示する手法が、ブログやポートフォリオで盛んに使用されています。フリーランス アート ディレクター兼フロントエンド開発者のThibault Paillouxによる下の例では、重ね合わせたテキストにカラフルな下線を入れて、鮮やかに表示させています。
いかがでしたから?Webデザインを新しくされたい方はワードプレスなどのCMSや、HubSpot(ハブスポット)のCMSを活用し美しいウェブサイトの構築などを行うことオススメしています。
このほかにもこちら「参考にしたい魅力的な海外ホームページのWebデザイン16の実例」でホームページに特化したデザインをご紹介しています。
ほかにも2017年に流行が予想されるウェブデザインのトレンドをご存知ですか?ご紹介したデザインにくわえてこちらの無料サンプル集で秀逸なデザインを50つ集めましたので是非ご覧ください。
編集メモ:この記事は、2017年2月に投稿した内容に加筆・訂正したものです。Karla Cookによる元の記事はこちらからご覧いただけます。