« ブログのトップページに戻る

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

   投稿者 : 2017年6月8日 By

イメージ画像

今年も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デザイントレンドを取り入れる場合は、やはり、そのデザインがユーザーのためになるかどうかという基本的な部分をしっかり考えていただきたい。

関連する記事

フラットデザインは使いやすいのか?... ここ数年のトレンドとして、多くのウェブサイトで“フラットデザイン ”が取り入れられている。従来のリッチデザイン、ボタンやアイコンなどを立体的に写実的に見せることを極力排除し、インターフェースをすっきり、見やすく洗練された今までにない独自の表現手法である。 IOS7やw...
ヤマト運輸の国際宅急便に対応 Live Commerce の配送プラグインにヤマト運輸の国際宅急便が追加されました。 既にヤマト運輸では従来から国際配送についてはサービスが提供されておりましたが、今回正式にLive Commerceが対応したことで、EMS国際配送に加え、ヤマト国際宅急便の2通りを利用者は選ぶことができるよ...
ECユーザーはパソコンからスマホへ移行するのか?... 2014年の消費者向けEC(電子商取引)市場の規模は、前年度比14.6%増の12兆7970億円と経済産業省の市場調査の結果として発表された。 また、EC市場内訳は「物販系分野」で6兆8043億円、「旅行などサービス分野」で4兆4816億円、「オンラインゲームなどのデジタル分野」で1兆5111...
ネットショップ開業のためのショッピングカート比較... 最近は手軽にネットショップを始めたいと言う人が増えている。そんな人に向けてレンタルで利用できるショッピングカートがたくさん登場している。デザインのカスタマイズや商品管理システムなど、シンプルに構成されており初心者でも運用できるものだ。しかし、いろいろあり、どれを使えばよいか迷ってしまう方も多いこ...
意外に低い、ECサイトのコンバージョン率... 今回はコンバージョン率についてのお話。あるお店に来店した100人中、1~2人だけが商品を購入するという話を聞いたら、そのお店を信用できますか・・・?できないのだとしたら、低いコンバージョン率に否定的な反応を示しているということ。では、ご存知の方もいらっしゃるかと思いますが、コンバージョン率と...
製造業の実践 -社内の製品を標準化する-... 皆さん こんにちは。 前回は「中小企業」の一般論の現状を少し見ました。 ここからは、私が見聞きし、体感した事柄を中心にしながらお話を進めて行きたいと思います。 (時代は今から30数年前である事をご理解頂きながらお読みください) その会社は、産業界の生産財向けにマイクロコンピューターを...
このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。