2017年 WEBデザイントレンドまとめ

イメージ画像

今年も6月に入り、梅雨シーズン到来である。
2017年も半ばを過ぎようとしている今回は、久々に「今年、WEBサイトで注目されているデザインは何か?」をまとめてみた。
2016年のデザインキーワードはシンプル、マテリアルデザイン、パララックスなどであったが、2017年はこの潮流はどのように継続され、変化を見せているデザインは何かなど、気がついた点などをまとめてみた。

 

●復活しつつある? グラデーション

グラデーション

URL:https://designmodo.com/qards/

フラットデザインのベタ塗りの時代が長らく続いているが、そのようなマンネリ化に飽きたデザイナーが再び、グラデーションを使い始めている。
この傾向はWEBデザインのみならず、ロゴデザインなどグラフィックデザインでもトレンドとなっている。 今までのグラデーションは淡いカラーのグラデーションが多かったが、今年はビビットな配色のグラデーションが目立っているのが特徴だ。
これはグラデーション効果による鮮やかなインパクトを意図したものだと思うが、写真をそのまま使うのではなく、写真にグラデーションカラーを乗算し、使用することで、洗練された印象を与えることができる。

 

●大きく大胆な タイポグラフィ

タイポグラフィ

URL:http://coneflowercreamery.com/

WEBフォントを使い、タイポグラフィを大きく大胆にトップページセンターに配置して、インパクト効果を狙ったデザインは今後ますます、増えてゆく傾向にあるだろう。
海外のWEBサイトでは様々な書体を積極的に使用されており、デザインもサンセリフ書体からセリフ書体、ビンテージ書体、レトロな書体など様々なものが使われている。
このような多様な書体を日本語でも使えるようになれば、もっとクリエイティブで洗練された表現のWEBサイトがユーザーのイメージを喚起させるだろう。

 

●多様化するパララックスエフェクト

パララックス

URL:http://www.feedmusic.com/

パララックスエフェクトとはシングルページを基本とした、スクロールするたびに画面が切り替わったり、マウスに追随して、デザインが変わるなど施されたサイトである。
WEBデザイナーはマウスの動きに合せた、画面の変化をデザインすることより、より良いUXを実現できるだろう。 以前はパララックススクロールも単純な上下動が一般的だったが、近年は音であったり、映像であったり、マウスの動きに合わせてロールするなど、画面上の変化も多様化しているようだ。
2017年は様々なマウスモーションでユーザーに巧みに情報を提供するユニークなパララックスエフェクトサイトが増えてきている。

 

●フラットデザインから階層レイヤーデザインへ

レイヤーデザイン

URL:http://meiofio.cc/

要素の重なりを意識したデザイン、Googleが推奨するマテリアルデザインを感じさせる階層を利用したデザインが階層レイヤーデザインと呼ばれるWEBデザインだ。
言葉で説明すると分かりにくいが、サンプルにあるように、階層にはそれぞれの配色を行ったり、階層にドロップシャドウしたり、各要素の重なり感を強く意識したデザインだ。これらはフラットデザインからの脱却を意図し、WEBデザインのトレンドとなっているようだ。

 

●GIFアニメーションの新しい表現、シネマグラフ

ジフアニメーション

URL:http://www.dentsu-crx.co.jp/

シネマグラフは全体の中の一部分だけアニメーションされている、GIFアニメーションのことだ。
GIFアニメは昔からあった手法だが、こちらは一部分だけ動きがある少し変わったアニメーションだ。動画に比べてファイルサイズも小さくてよいことや、全体が動く動画に比べて、一部分のみ動くため、ユーザーの注意を引くのに効果的だ。

 

●自由に配置、新しいナビゲーションレイアウト

ナビゲーション

URL:http://www.21westendnyc.com/

ナビゲーションはいつも上にある必要はない。ナビを隠したり、ポップアップで表示されたりページ右にあったり下にあったり、自由に配置するWEBデザインがトレンドとなっている。
元来ナビはどこにあっても、良いのだが、基本はナビゲーションは簡単に見つけられ、ユーザーが直感的に理解でき、使えるものになっていなければならない。
ナビは常に上部になければならないという既成概念を取り払い、もう一度ユーザーにとってナビゲーションデザインはどうあるべきかを考え、検討することが重要である。

 

●左右で要素が分割、スプリットスクリーン

スプリットデザイン

URL:http://gms.life/

分割スクリーン、分割レイアウトと呼ばれるスプリットスクリーンは、画面の左右でデザインを切り分け、構成するデザインだ。
近年、ディスプレィ解像度が大きくなったことにより、一画面に複数のコンテンツを表示できるスプリットレイアウトが注目されている。
スプリットスクリーンはPC画面では左右にレイアウトされ、スマートフォンの場合は上下にレイアウトが変更され、レスポンシブデザインとの相性も良いのが特徴だ。

 

●まとめ

WEBデザインのトレンドをみると、これまでのように「シンプル&洗練」が継続、継承されているのようだ。
新しい動きとしてはフラットデザインからの脱却しようという、新しい試みが、少しづつ、出始めているところだ。
注意すべきは、トレンドといえども、アニメーションたくさん入れたり、大きな動画を挿入する場合、ページは華やかで好印象になるが、その分、読み込みまで時間がかり、ユーザーを待たせることになることだ。
そして、表示時間を要するWEBサイトはGoogleの評価は低い。 今回、取り上げたWEBデザイントレンドを取り入れる場合は、やはり、そのデザインがユーザーのためになるかどうかという基本的な部分をしっかり考えていただきたい。

関連する記事

InstagramをEコマースに活用する新機能 スマートフォンで写真を撮影し、その場で加工し、SNSにアップできるアプリといえば、Instagramアプリだ。Instagramは国内ユーザー数1200万人、海外では6億人以上の月間アクティブユーザー数を誇っている。 なぜ、このInstagramが注目されているかというと、WEBサイトの流...
増え続ける日本の知的財産収入! 今、知っておくべき知的財産権とは... 財務省は1月24日、2017年の貿易収支を発表した。その内容によると2017年は2兆9,910億円の黒字と貿易収支は2年連続の黒字とはなったものの、前年比では25.1%減という結果であった。 貿易収支は、”モノ”を対象した統計結果であるが、”知的財産”を対象にした収支では、なんと、369億...
これを知らないと損しているかも知れない!ユーザービリティ原則3つ... アドビシステムは今年の2月2日に「Adobe Marketing Discovery」を発表した。 これは、消費者の購買行動におけるデジタルメディアの影響力に関する調査結果である。 それによると、テレビ・新聞などメディアを見て気になった商品情報をサイトで調べる消費者が88.3%あり、店頭...
春節のこの時期 中国の越境EC利用状況はこうなっている... 中国は2月4日より、春節(旧正月)に入った。今年は来週2月10日までの大型連休である。この時期中国は、正月ムードでいっぱいになるが、今年は環境対策のための花火や爆竹など規制され、北京中心部は、わりあいひっそりとした新年を迎えているようだ。 春節のこの期間、中国ではのべ30億人が帰省などで移...
最新SNS利用状況とSNSインフルエンサー... Facebook、Twitter、Instagram、LINE、最近では新たにMastodon(マストドン)とSNS市場が賑わっている。 SNSの機能も日々進化しており、ユーザー数も日々増加しているようだ。新たな動きとしては、SNSインフルエンサーが注目されつつあるところだ。 今回は20...
ビジネスの最新進化系”経験経済”とは?... 現在、“経験経済”というものが顧客にとって重要な物だとされています。 例えばマーケティングを顧客の層に合わせたり、希望に添うようにすることが当たり前だと思いませんか?そうだとしたら、殆どの小売商人が同意見を持っているはずです。・・・ところが、そうすることで現実味(Au...
このエントリーをはてなブックマークに追加

コメントをどうぞ