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

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

関連する記事

色の持つイメージ:黒=負のイメージから、高級、エレガントへ... 色が何らかのサインを送りだしていることは誰もがよく知っている。誰がどんな色を選ぼうと、共通しているのは、その色に対して人は反応するということだ。私たちは色に対し条件反射し、気づくこともない。色に対する反応は直観的反応とも言われ、個々の色は人の本能的な反応と密接に関係し、その反応は生理的、感情的、...
ここまで来ている ドローン宅配 今年4月、ヤマトの引き受け荷物の抑制や時間帯指定の見直し、配送業の人手不足や労働環境の問題など、宅配業全体が脚光を浴びた。 ネット通販の伸長と同様に個別配送量は増大し、それに伴い宅配人員が不足し、労働環境が深刻な状況になっているのだ。ヤマト運輸のAmazonからの即日配送撤退には、このよう...
来春いよいよ日本にも上陸!ソーシャルコマースFabのメールマガジン戦略が面白い... 米ソーシャルコマースサービスの「Fab」に、日本の伊藤忠商事が500万ドルを出資したというニュースが飛び込みました。「Fab」といえば、ローンチ前に10万人のメール会員を集めることを目指し、実際にはティザーページ公開後わずか30日で5万人、3ヶ月後には16万5000人ものメール会員を集めたということ...
2017年の日本のEC市場、越境EC市場はどのくらい成長した?... 経済産業省は4月25日、「平成29年度我が国におけるデータ駆動型社会に係る基盤整備」 (電子商取引に関する市場調査)を発表した。この内容は2017年の日本の電子商取引市場の実態や日米中3か国間の越境電子商取引の市場動向についての調査内容をまとめたものである。 今回はこの内容をベースに201...
越境ECで成功するためには 日本ではインバウンド需要の増加とともに越境ECムーブメントとも言える現象が起きている。 越境EC事業者向けのセミナーが多く開催されたり、越境ECサイト構築のための新しいサービスが登場したり、日々様々な独自サービスが開発され提供されている。 今や、これらサービスを使えば、誰でも簡単に越境E...
ショッピングモールサイトではなく、自社ECサイトで売上げをアップするには?... 独自ドメインで自社ECサイトを運営しているが一向に売上げが上がらない、しかし、ショッピングモールサイトでは売上げが上がり、ますます、Amazonや楽天などのモールサイトの依存度は高まり、どうしたら、自社ECサイトでしっかりした売上げ基盤をつくり、モールでの売上げではなく、自社ECサイトで売上げを...
このエントリーをはてなブックマークに追加