Web制作者がチェックしておきたい、最近のWebサイトで注目されているデザインのトレンド -2018年3,4月
Post on:2018年4月10日
sponsors
デザインや実装で悩んだ時には、世界のクリエイターの間で注目されている新鮮なトレンドを見てみると良いインスピレーションに出会うことができます。最近のWebサイトで注目されているデザインのトレンドを紹介します。
自分にはない発想を見かけると、なんだか楽しくなりますよね。
3 Essential Design Trends, March 2018
3 Essential Design Trends, April 2018
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- 01. ナビゲーションを表示しないトップページ -ポスタースタイル
- 02. Ultra Violetのカラーパレット
- 03. グラデーションとテキスト
- 04. 泡のような柔らかい塊 -バブル アンド ブロブ
- 05. 浮遊している矩形 -フローティング レクタングル
- 06. 画像が埋め込まれたタイポグラフィ
01. ナビゲーションを表示しないトップページ -ポスタースタイル
少し前までは、画像や動画をブラウザいっぱいに配置したデザインの人気が高かったですが、そこから更にナビゲーションやテキストなどの要素を削除して、映画のポスターのようなデザインが増えてきました。
デザインは彩り鮮やかなスタイルが取り入れられた、ミニマルのマッシュアップです。
このトレンドのアイデアは、ユーザーの関心を引き込むために足りないと思われるかもしれませんが、実際には非常にインパクトに溢れています。このデザインで大切なポイントは、ビジュアルとテキストの品質です。
懸念事項は、ナビゲーションやアクションボタンを含む多くの要素がなければ、ユーザーは混乱してWebサイトを放棄する可能性があります。印象的なビジュアルを作成することは重要ですが、ユーザーにそのプロセスで何かをさせることを忘れないでください。
下記の3つの例では、このトレンドのコンセプトをさまざまな方法で使用しています。
Tofino Resortでは素晴らしい画像と印象的なタイポグラフィで、ユーザーを引き込みます。ユーザーがナビゲーションを探すであろう上部に「Book Now」の予約ボタンを配置することで、アクションボタンとしての効果を発揮しています。
Ruya Digitalでは暗い背景でよりシンプルなスタイルを採用していますが、シンプルなセンタースクリーンのアニメーションと珍しいテキスト処理は、視覚的な興味のあるポイントを作成します。ユーザーが確実にメッセージに集中できるように、要素やテキストは画面の端に向かって小さくデザインされています。そしてこのサイトにもナビゲーションは存在しません。アクセスするにはクリックが必要です。
Flux Broadcastでは、より映画的なビデオアプローチを採用しています。画面上には短いテキストと小さな要素だけで、フルスクリーンの動画が配置されています。ユーザーはトップページを飛ばさずに、このデザインで動画を見ているように感じるでしょう。このサイトでもナビゲーションはハンバーガーメニューに隠されています。そのアイコンは、サークルに色が付いているため、少し目立つようにデザインされています。右下に小さなアニメーションの矢印が表示されると、動画を見終わった時にスクロールできます。
02. Ultra Violetのカラーパレット
Pantoneが発表した2018年のトレンドカラーは「18-3838 Ultra Violet」です。
すべてのカラーパレットをこのスミレ色にする訳ではありませんが、多くのデザイナーはレッドとブルーをミックスさせたパレットを使用しています。カラーを使うポイントはトレンドのカラーにうまく他のカラーを混ぜることです。マテリアルデザインのより明るい色合いや、ミニマルの白黒パレットなど、さまざまな機能を備えています。
このスミレ色は、あなたのWebサイトのデザインの差別化要因にもなり得ます。スミレ色は他のサイトでそれほど使用されているカラーではないため、より印象的な第一印象を与えることができます。
スミレ色にはさまざまなオプションがあります。赤みを帯びたものやピンク色のものが多く、濃いムード感のあるものはブラックに近く、ブルーのものはもう少し多いです。色自体は深みがあり、鮮やかですが、薄くしたり、弱めたりすることもできます。ほとんどのバリエーションは単独で使用され、複数のパープルをカラーパレットで一緒に使用することもできます。
下記ではカラーが実際されているデザインと、さまざまな分野に適応できる能力を紹介しています。スミレ色は多目的で、魅力的で、そしてフレンドリーなカラーです。
03. グラデーションとテキスト
グラデーションは、背景と写真のオーバーレイのためだけではありません。グラデーションは目的を持って使用すると、テキスト要素を効果的に目立たせることもできます。
タイポグラフィの全体のトレンドは、少し余裕のあるよりシンプルな書体に向いています。使い方としては写真に重ねるものから、大文字やアニメーションなどのテキスト処理まで、あらゆるものが可能です。
そして現在、グラデーションがきています。
このトレンドはグラデーションが好きでない場合、使うのが難しいトレンドかもしれません。しかし、このトレンドには絶対的な魅力があります。
Zoochaではプレーンなスクリーンでモダンなセリフの中に大きな淡いイエローとブルーのグラデーションを使用しています。このデザインのポイントは、グラデーションです。それ以外のシンプルなデザインは、グラデーションを際立たせるためのものです。
Love Lostでは美しい書体で、単一のカラーを使ってホワイトのグラデーションを描き、ユーザーの心を掴んでいます。このデザインでタイポグラフィを機能させる理由は、コンテンツです。淡いピンクのグラデーションは、愛を語るコンテンツに適しています。それ以外のデザインも素晴らしい視覚的効果になっています。
Michael Rappazでは、反対の効果を持つテキストのグラデーションが使用されています。グラデーションで塗りつぶしのではなく、描画するためのグラデーションがハイライトのアニメーションに含まれています。これは単純で、視覚的に面白いデザインです。デザインの残りの部分はむしろシンプルで、動きや色のないテキスト要素に固執しているため、はっきりとした焦点があります。トレンドカラーを採用しているのにも注目です。
04. 泡のような柔らかい塊 -バブル アンド ブロブ
明確に定義されていない形や柔らかい形を見ることが増えてきました。これらの形状のほとんどは性質上多少丸みを帯びていますが、必ずしも丸である必要はありません。
これらの「泡・塊」は、特定のコンテンツ（特に主要な見出し）を強調するアクセントとして機能します。そのデザインはまったく同じコンセプトでも、すべてが異なる形に見えます。
泡・塊は明るいカラーや繊細なグラデーションに人気がありますが、あらゆるカラーが利用できます。その形は柔らかく、流動的です。
デザイナーは泡・塊を使用してキャンバスのフレームを作成し、要素を強調表示して深みを作成し、静的に感じるかもしれない場所にアニメーションのヒントを入れ、ちょっとファンキーなデザイン要素を組み込むことができます。これにより、ユーザーにとって重要な視覚的な入り口である結果にデザインで導きます。
形はより泡に近い方がユーザーにとって楽しく、視覚的に面白いでしょう。これらの形はデザイン内の要素とページの間のビジュアルのスレッドとしても機能します。このテクニックは、コンテンツや画像に明白な流れがない場合に特に役立ちます。
05. 浮遊している矩形 -フローティング レクタングル
見えないグリッドに浮遊している矩形はまだ名前が決まっていないトレンドですが、多くのWebサイトで利用されています。シンプルなポートフォリオをはじめ、ブランドサイトまで、さまざまなサイトで見かけます。
人気の要因はパララックスと相性がよいことで、面白いレイヤーを作り出します。
このトレンドの素晴らしい点は、画像や矩形のコンテナに独自のアイデンティティを持たせることができるということです。そのコンセプトはMaterial Designのカードに似ています。大きな違いは、デザインが構造化されていないと感じることです。
デザインの流動性は視覚的に魅力的で、ユーザーは次のものや残りの矩形のコンテナを見たくなり、インタラクションを促します。デザインの多くは、キャンバスの内側と外側にある浮遊している矩形を特徴としています。このテクニックはページ上に謎を作り出し、ユーザーにインタラクションを促すことができます。
このトレンドの最も重要な部分は、どのようなタイプのコンテンツでも機能することです。浮遊しているブロックは、コンテンツが示すように単純または複雑にすることができます。このコンセプトはブロックの数が少なくても多くても機能します。特大のブロックを使用して奥行きを作成したり、小さなブロックでさまざまな種類のコンテンツにユーザーを誘導することができます。
重要なポイントは、このトレンドをさまざまな方法でカスタマイズして利用できる機会があることです。
06. 画像が埋め込まれたタイポグラフィ
最後に紹介するトレンドは、タイポグラフィが好きな人に面白いものです。太めのブロックスタイルの文字を画像で満たすデザインです。
このアイデアについては特に新しいことはありませんが、コンセプトの解釈が異なります。実際にトレンドを使用した例を見てましょう。
Valnetでは、左側の白いパネルにある「V」です。背景では動画がループしており、文字に埋め込まれているのも動画の一部です。動画の通常の枠なしで、垂直方向のフレームワークを使用する面白いデザインです。
Greatest Stories Retoldでは同じコンセプトを使用しますが、ユーザーの想像力をさらに引き出します。文字には動画が埋め込まれており、浮遊しているホワイトの雪は動きとカラーを作り出しているだけです。これらの効果は、ユーザーがクリックして実際にWebサイトのデザインやコンテンツに惹きつけるように誘惑することです。
bellyQでは、微妙な動きを作り出すためにズームイン・ズームアウトする静止画を使用しています。前景には暗いオーバーレイがあり、デザインの鮮やかな色の部分は文字「Q」の内側にあります。レイヤー効果はシンプルで、強調を作っています。静止画像であっても、単純な動きは目を引くのに役立ち、ユーザーが見ているサイトの名前とブランドを理解し、より多くを学ぶことを促すためのフォーカルポイントを作成するのに役立ちます。
sponsors
