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

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

関連する記事

色の持つイメージ:ピンク色は女性、幸福をイメージ... 色が何らかのサインを送りだしていることは誰もがよく知っている。誰がどんな色を選ぼうと、共通しているのは、その色に対して人は反応するということだ。私たちは色に対し条件反射し、気づくこともない。色に対する反応は直観的反応とも言われ、個々の色は人の本能的な反応と密接に関係し、その反応は生理的、感情的、...
自社ストアのデザイン改善で売り上げUP!... 皆さん、eBay Storeに掲載されている商品ページなどのデザインを度々見直していますか?実は、自社ストアのデザインを改善するだけで、容易に利益の上昇を見込めるというのです。 では、どの程度売り上げを上昇させられるのでしょうか。Frooitionという、eBayを始めとした主なEコマースサ...
【メーカー限定】 ビジネスモデルを根本から転換、海外販売代行モデル... ・外国語対応のホームページの初期費用が高く、新規事業の投資を抑えたい.... ・外国語対応のホームページを立ち上げたが、全く効果が出ない.... ・海外からの顧客開拓・売上をどうやって作ればいいのかわからない... 1つでもあてはまるメーカーの経営者様へ 国内のメーカーから、「国際的...
海外販売に関する補助金・助成金情報(2018.October)... 2018年も10月。今年も残り3ヶ月である。10月1日にはノーベル医学生理学賞に日本人としては5人目となる京都大学特別教授の本庶佑氏が受賞した。 この受賞により、日本の基礎医学の分野がさらに助成され、研究が進んで行くことに期待したい。 今月も補助金・助成金のの公募内容をまとめた。補助金・...
フォームを最適化し、コンバージョン率を大幅UP!... 離脱率が多いフォームを改善する。それが「エントリーフォームの最適化」、EFO(Entry Form Optimizationの略)である。 エントリーフォーム最適化(EFO)では、ユーザー視点に立ってエントリーフォームを作ることが重要である。 レジに並んだお客様に途中で帰らないようにスム...
海外販売に関する補助金・助成金情報(2018.August)... 2018年も8月。日本各地、梅雨明け以降、連日の猛暑日が続いている。台風も発生し、関東沿岸を通過するなど荒れ模様だ。今年の夏は立秋を過ぎてもまだまだ猛暑日が続くと予想されている。猛暑日は水分補給を充分行っていただきたい。今月も補助金・助成金情報をまとめた。 補助金・助成金とは国や地方自治体...
このエントリーをはてなブックマークに追加
 

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