Web制作者がチェックしておきたい、最近のWebサイトで見かけるデザインのトレンド -2018年1,2月
Post on:2018年2月9日
sponsors
デザインで悩んだ時には、新鮮なトレンドをチェックしてみると良いインスピレーションに繋がります。最近のWebサイトで見かけるデザインのトレンドを紹介します。
今まで使用してきたトレンドにも一手間加えられて、より魅力的なものになっています。
3 Essential Design Trends, January 2018
3 Essential Design Trends, February 2018
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
左上のロゴをシンプルに
このトレンドは見逃されがちですが、左上にブランドをテキスト化したものがカムバックしています。アイコンを含めるのももちろん有りで、注目すべきは背景に対して目立つようにデザインされていることです。目立たせるために最も簡単なのは、白地に黒のテキストです。この組み合わせの人気が最も高くなっています。
このトレンドが特に有効なのは、スタートアップしたばかりのあまり有名ではないWebサイトです。ブランドやプロダクトの名前が目に止まるように、印象深くさせる効果があります。また、スマホにもこのトレンドは適しており、ロゴはシンプルな方が効果的です。
ロゴ周りがシンプルなため、デザインの他の部分にフォーカスを合わせやすいという利点もあり、ユーザビリティを向上させることにも繋がります。
垂直型の細いサイドバー
サイドバーはブログや配下ページでよく使用されますが、トップページにはあまり使用されていませんでした。最近ではそれが変化しており、トップページにもサイドバーを使用するサイトが増え、特に人気が高いのは細いサイドバーです。
細いサイドバーにはソーシャルメディアのアイコンやナビゲーションが配置されており、縦長ページで重要なポイントとなっています。この垂直型のフォーマットは、スクロールや画面の幅がそれほど広くない場合でも多くのユーザーが大丈夫であるという考えです。
これに対抗するために、多くのデザイナーがデスクトップやワイドスクリーンのデザインに垂直要素を取り入れています。本質的には、垂直要素が増えるほど画面の幅が狭くなり、スマホ版のように感じることができます。これらの垂直要素はナビゲーションやブランディングなどさまざまな方法で機能し、ホームボタンとしても機能します。
サイドバーにはブランディングが配置されています。
サイドバーの見た目は背景に溶け込んでおり、コンテンツの幅は縮小されています。
サイドバーにはブランディングが配置されています。
ピーチ・カラー
Pantoneが発表した2018年のトレンドカラーは、ウルトラ・バイオレットですが、最近のWebサイトのデザインでは、ピーチのカラーパレットやアクセントカラーが増えてきました。
ピーチにはオレンジやピンクがかった色調や肌色っぽいのまで、たくさんのバリエーションがあります。基本的には女性向けのパステル調で、暖かく、魅力的なカラーです。色に関連する言葉には、創造性、活力、社会化、飢餓、幸福、自信と誇りが含まれます。
最も知られているピーチ・カラーはCrayolaのクレヨンと同じ色合いで、HEX値#FFCBA4、RGB値255,203,164です。Webデザインにはメインのカラーパレットとして、またはアクセントカラーとして使用されています。ピーチは人気があったブルーやグリーンやピンクのように大胆でも明るくもありませんが、要素間の色のコントラストをより柔軟に作成できる使いやすいカラーです。
Listen Festival
※サウンド注意
サークル状の要素
デザインにおいて、サークルは完全と調和を意味します。そして、ラブ・エネルギー・パワーを表現するためによく使われます。サークルを定期的に使用しないデザイナーがいるとしたら、驚くべきことです。
最近のWebデザインで見かけるサークルの最も一般的な用途は、Googleのマテリアルデザインのおかげでボタンや行動の呼びかけになっていますが、サークルのデザインの役割はますます高まっています。
サークルを使用する時に難しいポイントは、その形をつくることで、更にレスポンシブ対応にしても形を失われないようにすることです。下記で紹介したWebサイトではCanvasでサークルを実装し、形を失わないようにしています。
大きなピンクのサークルがデザイン全体を調和し、写真の女性もサークルに視線を向けています。
中央に三角形のイメージがありますが、サークルが使用されているのは明白です。ピザが丸いというのもサークルが使用されている理由の一つでしょう。
浮動円を使用して視覚的関心を喚起しています。また巨大なボタンとしても機能します。
分割レイアウト
垂直に分割したレイアウトは以前から人気が高いトレンドですが、その使い方が変化してきました。最近のトレンドでは、大胆な分割画面と繊細な組み合わせが取り入れられています。
分割レイアウトの素晴らしい点は、レスポンシブ対応のフォーマットで美しく機能することです。デスクトップでは分割されたレイアウトで、スマホでは積み上げられたレイアウトで表示されます。ユーザーはどのデバイスで見ても、コンテンツを見逃してしまったと感じることはありません。
分割レイアウトのデザインでは、ほぼ同等の重要度を持つ2つのコンテンツを同時に見せるソリューションも提供します。複数の要素を紹介し、一度に画面上に2つの異なる行動を提供できます。このコンセプトにより、ユーザーはデザインをコントロールできるようになり、コンテンツとのやり取りの選択肢があるように感じることができます。
タコスのサイトでは、注文と予約の2つの異なる行動を提供しています。デザインを使いやすくするだけでなく、複数のオプションを視覚的に表示します。
写真家のポートフォリオで2つの写真が並んで表示されており、これはポートフォリオのデザインとしては珍しいアプローチですが、ユーザーがすぐに多くの画像を見ることができるという点で効果的です。
同系色の背景を使用し、片方は画像、片方はテキストが配置された繊細な組み合わせの例です。このデザインは、すべてのコンテンツが表示されるように画面全体に目を引くのに役立ちます。
ダーク系の背景にホワイトのテキスト
ダーク系の背景にホワイトのテキストを組み合わせるのは以前からありますが、最近のトレンドではダーク系の背景に動画やアニメーションが使用されています。テキストの邪魔をしない繊細な動きで、この動きがあることでユーザーを引きつけるのに効果的です。
ホワイトのテキストは、デザインの魅力をさらに高めます。読みやすくすることは良いことですが、デザインを圧倒しないようにします。
ダーク系の背景を使用することでテキストとのコントラストを向上させ、繊細な動きは静かな感覚を作り出すことができます。一見してシンプルなデザインのように見えるものからどれくらいの情報が得られるかはかなり壮観です
sponsors
