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

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

関連する記事

越境EC “言語”のハードルを超えるには... 越境ECの第一のハードルは言語である。国内ECサイトから仕様を海外販売のサイトにチェンジしサイトを構築するには、まずサイトを日本語で作成し、そのあとに、英語、中国語などにテキストを翻訳していく必要がある。 日常会話ならなんとか訳すことはできても、越境ECの場合、商品情報や専門用語などユーザー...
ECサイト運営で欠かせない「チャージバック対策」... ECサイトの決済で主流となっているものにクレジットカード決済がある。 ECサイトのクレジットカードの利用が増えるに連れ、増えてきているのがクレジットカードの不正使用である。 日本クレジット協会によると、平成28年のクレジット不正使用の被害は約140億9000万円(前年比117%)、その中で...
越境ECモールDiscovery Japanモール開設にあたってのセミナー...   Live Commerce では利用者様の商品を総合的に集めた新サービス「越境ECモール」を 5月初旬に開店いたします。 http://www.live-commerce.com/mall/ 越境ECモール(Discovery Japanモール)では、無料で出店できるプラン...
来春いよいよ日本にも上陸!ソーシャルコマースFabのメールマガジン戦略が面白い... 米ソーシャルコマースサービスの「Fab」に、日本の伊藤忠商事が500万ドルを出資したというニュースが飛び込みました。「Fab」といえば、ローンチ前に10万人のメール会員を集めることを目指し、実際にはティザーページ公開後わずか30日で5万人、3ヶ月後には16万5000人ものメール会員を集めたということ...
すでに始まっている モバイルファーストインデックス... Googleのモバイルファーストの導入は、2018年になると予測されていたが、一部のサイトにおいては、すでに導入テストが開始されているようで、数ヶ月後には完全に移行するのではないかという推測もある。 モバイルファーストインデックスの概要については、以前のブログ「今更聞けないモバイルファース...
ホリデーマーケティングでおかしがちな過ち... ホリデーシーズンが近付くにつれ世間も活気付いてくるのと共に、市場競争も激しくなっていきます。今の時期、この商機に合わせたホリデーマーケティング戦略を考えている頃ではないでしょうか。 コンテンツマーケティングにおいて、親切な接客を届けられる方法の一つと言えばEメールです。効率の良い方法である一...
このエントリーをはてなブックマークに追加
 

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