Web制作者がチェックしておきたい、最近のWebサイトで見かけるデザインのアイデア -2018年5,6月
Post on:2018年6月13日
sponsors
デザインで悩んだ時には、新鮮なアイデアに触れてみると良いインスピレーションに繋がります。最近のWebサイトで見かけるデザインのアイデアを紹介します。
今まで使用されてたデザインのトレンドにも一手間加えられて、より使いやすく、洗練されたものになっています。
3 Essential Design Trends, May 2018
3 Essential Design Trends, June 2018
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
スクリーンいっぱいの写真画像
ヒーローイメージは、スクリーンいっぱいの写真画像でさらに大きくなっています。新しい重要なポイントは、他の要素はすべてスクリーンから取り除かれ、写真画像がスクリーン全体を満たしていることです。
写真画像のエリアには、ナビゲーションや他の要素のためのスペースはありません。すべての要素は写真画像に含まれます。このデザインのコンセプトは、大きい画像で機能します。最も印象的で興味深い写真だけが、このようなデザインに適しています。
このデザインのほとんどには、画像エリア内に隠されたナビゲーション（ハンバーガーアイコンを使用することが最も一般的）など、ユーザーがクリックできる多くの要素があります。そのため、画像はユーザーの目を引くものでなければなりません。
このデザインの見た目は印象的ですが、他の要素のスペース、メッセージのスペース、ユーザーがページを見て何をすべきか混乱するなど、いくつかのユーザビリティの課題があります。解決策としては、「下にスクロール」などのデザイン要素が役に立ちます。
このデザインは、多くのコンテンツや強力なビジュアルがないサイトに最適です。
分割スクリーンの新しい考え方
分割スクリーンのデザインが登場したのは2015年あたりです。当時の状況を振り返ってみましょう。
分割スクリーンの素晴らしい点は、レスポンシブ対応のフォーマットでうまく機能することです。デスクトップでは左右に分割されたコンテンツを表示し、スマホでは積み重なったコンテンツを表示します。ユーザーはデバイスを変更しても、情報を逃したと感じることはありません。
参考: 4 Essential Layout Trends for 2015
分割スクリーンの機能はそれほど変化していませんが、最近はより非対称で、斜めに分割したスクリーンに移行しています。このデザインは注目を集め、試す価値があります。
Cap Gun Collectiveのブラックとホワイトのシンプルなスタイル、Reach Digitalの明るいホワイトとイエローのコンビネーション、Weimaの4分割されたパネル、このトレンドの定番となっていた対称とは異なり、非対称が面白い印象を与えます。
分割スクリーンの素晴らしい点は、あらゆる種類のまたは量のコンテンツに適していることです。
小規模なサイトから膨大なコンテンツまで、分割スクリーンではデザインで最初にやりとりする方法や内容についてユーザが選択できます。またオプションで、コンテンツとやりとりしながらユーザーに分割したどちらかを選択させるユーザーエクスペリエンスを提供することもできます。このことはユーザーの視点から理解しやすく、非常に機能的です。
透明度を抑えたカラーオーバーレイ
圧倒的に人気を集めているトレンドの一つは、写真や動画に透明度を抑えたカラーオーバーレイを使用することです。このテクニックは、より一貫性のあるレベルのカラーコントラストでイメージの上にテキストやその他の要素を簡単に含めることができるレイヤー効果を作成するのに役立ちます。
このテクニックのポイントは透明度です。背景要素がひと目で見ることが難しい程度に適用します。下記の例では、イメージ内で何が起こっているのか、それがデザインにどのように関係しているのかを詳しく調べる必要があります。このトレンドには大きな特徴が2つあります。
- 一見するとかなりクールに見えます。1つの背景色よりもビジュアル的な関心が持たれるようにするため、オーバーレイでテクスチャと深さを与えます。
- しかし、画像にはどんな情報が含まれているのか分かりません。透明のレイヤーはあまりにも厚く、画像をはっきりと識別することができません。
このトレンドがどこで機能するのか疑問に思うでしょう。
このトレンドのコンセプトはデザインに深さを与え、しっかりとした目的を持った高品質なイメージを使用する場合に機能します。低品質なイメージを見栄えよくするためには使用しないでください。
下記の例では、前景の要素は、カラーオーバーレイの下にあるイメージよりもデザイン全体のメッセージにとって重要です。いずれの場合も、画像は追加情報のヒントを提供していますが、メッセージの重要な部分ではありません。それは実際にユーザーの理解に貢献するものではなく、何よりもビジュアル的なアクセントになっています。
このトレンドを使用する場合は、適切なイメージと透明なオーバーレイがあることを確認してください。
ユーザーがイメージで何を見ることができ、できないのか、たくさんのフィードバックを集める必要があります。もしユーザーが苦労するようであれば、デザインを破棄すべきでしょう。そのデザインは少しも有益ではありません。
ナビゲーションの小型化
デザイナーはここ1, 2年の間に、メガナビゲーション、ハンバーガーメニュー、上部に貼り付くスティッキー型ナビゲーションを推し進めました。そして、最近新しいナビゲーションのスタイルが登場しており、それは非常に小さく、面白いナビゲーションです。ぱっと見はごく小さなデザインですが、クリックすると拡張され、オプションを表示します。
このトレンドは、コンテンツとアクションボタンにフォーカスを与えられる点で非常に優れています。
このトレンドで欠けている点は、一部のユーザーにとって紛らわしいかもしれないことです。これは、多くのページを最初に訪れることなくWebサイトに最適なテクニックになります。縦長ページやシンプルに構造化されたデザインを考えてください。
実際にこのナビゲーションが使用されているサイトを見てましょう。
Geex Arts
※音注意
Geex Artsでは、小さな動画と一時停止ボタンをメニューを配置して、右サイドバーに表示しています。
IC Creativeでは、デスクトップやスマホのユーザーに同じようにポップアウトする左サイドバーにハンバーガーアイコンを表示しています。このナビゲーションの素晴らしいポイントは、いくつかのリンクが含まれていることです。厳選されています。
Weekendでは、サイドバーの細いナビゲーションも使用されていますが、すべてのリンクはアイコンの中に隠されているのではなく、そこに存在します。加えて、追加のナビゲーション要素がデザインの下部に配置されています。
注意を引き付けるカットアウトとレイヤー
ユーザーの注意を引き付けるレイヤーを作成することを学ぶのは、デザインについて学ぶ最も貴重なものの1つです。レイヤーは視覚的関心を作りだし、デザインを通じてユーザーを引き出すための効果的な方法です。
以前はこういったレイヤーを実装するのは難しいテクニックが必要でしたが、今日では非常に簡単になりました。レイヤーの最も楽しい使い方の1つは切り抜きの形で、前景に表示する要素のスペースを確保するために要素の一部を削除します。
このテクニックはほぼすべてのタイプのWebサイトやデザインで機能します。数やサイズに制限もありません。重要なのは、ユーザーの注意を引き付けるようにレイヤーを機能させることです。単に要素をカットアウトするだけでは、ユーザーを引き付けることはできないでしょう。
カットアウトとレイヤーは、ヘルプのナビゲーションやユーザーに特定の場所を見せたり、機能を補助したり、デザインの全体的なメッセージをより分かりやすく伝えるなど、デザインの目的を提供する必要があります。
Tilted Chairでは、中央に配置された目のスペースを確保するために後景がカットアウトされており、ユーザーの注目を引き付けています。
RJ Investmentsでは、複数のカットアウトを使用して、テキスト要素、メッセージ、行動を促すフレーズを強調表示しています。メニューの小さいカットアウトもオシャレなデザインです。
DTO Filmsでは、別のアプローチが取られています。カットアウトは背景にあり、オレンジとラベンダーの明るい色のポップを提供し、アニメーションも付いています。スクリーンのサイズによって、DTO Filmsの文字が最適化された位置に表示されるのも興味深いテクニックです。背景のアニメーションを加えると、さらにランダムに感じられ、全体的な視覚的効果が高まります。
早回しの動画
今まで動画といえば、Webサイトのデザインを通じてストーリーを伝えてきました。最近のトレンドは、ユーザーを素早く誘導する早回しのアニメーションです。デザインがユーザーの興味を保ち続けるためには、興味深いコンテンツとビジュアルが必要であることは間違いありません。
早回し動画の魅力的なポイントは、ストーリーが超スピードで展開されることです。ユーザーはメッセージを素早く受け取り、アクションも短く感じられるため、スピーディーにコンテンツを提供できます。その結果、ユーザーがコンテンツに費やす時間を大幅に伸ばすことに繋がります。
DEPT Agencyでは早回し動画を使用して、イメージやテキストをユーザーに届けています。ユーザーが一度に1単語ずつメッセージ全体を読むようにデザインされています。
PLAEの動画は通常の速度がベースで、次のシーンに移る際に早回しになります。ちょうどユーザーが動きに注意を払うように、画面が変わります。動画は変化し続けますが、メッセージとCTAは同じ状態を維持するため、ユーザーがWebページの目標を達成するのは非常に簡単です。
Meskie Granieでは、さまざまなペースで動画を使用しており、オーバーレイのトランジションを高速化し、まるでミュージックビデオを見ているような体験を提供しています。1990年代のMTVみたいな動画です。ユーザーは感情に基づいて動作に影響を与えることができ、インタラクティブなコンポーネントも非常によくできています。
sponsors
