2016年Webデザイントレンド完全まとめ&2017年トレンド予測

あなたは進化を続けるWebデザインのトレンドを追えていますか?
毎年数多くの新しいテクニックやトレンドが誕生しますが、2016年は2015年の終わりから見るようになった、デザイントレンドが継続しているようです。

本記事では、2016年に流行した代表的なデザイン手法やトレンドカラーなど20選を徹底解説します。

また、2017年のトレンド予測やデザインスキル向上に役立つおすすめサイトもご紹介していきます。

TECH::NOTE(テックノート)は、未経験から最先端のテクノロジー人材へTECH::CAMP(テックキャンプ)、10週間でエンジニア転職実現までサポートを行う(転職できなかったら全額返金)TECH::EXPERT(テックエキスパート)、これらのサービスを運営する株式会社divのオウンドメディアです。

 

 2016年トレンドになったWebデザイン手法11選

垂直パターンとスクロール操作

img_tips_140307-01

出典:Advisage

デスクトップからの閲覧ユーザー数にも匹敵するほど、モバイル端末の普及がより進むことから、多くのサイトが垂直方向へのスクロール、ユーザーフローを意識したデザインが増えています。

小さなスクリーン画面では、ユーザーはよりスクロールを行うことで、デザイナーは自然と垂直パターンのインターフェース・デザインを作成するようになってきました。

2015_trend_desing_02

出典:Swwim

このトレンドの背景にはスマホ普及率が国内で約 50%、世界規模で約 20% と 10年前とユーザー環境が大きく変わってきていることがあります。

その結果、画面スクロールに抵抗感が無くなりweb サイトが表示されれば下にスクロールする人が劇的に増えてきています。

こうした現象を踏まえ、 web デザインにおいては従来の「ファーストビュー(サイトトップ画面)」より「スクロールビュー」を重視する傾向になっています。

 

カード型デザイン

s_9a59245f-c210-4346-9771-0cb2f592b873

出典:Pinterest

カード型デザインはアプリやウェブサイトのデザインはもちろん、プリント印刷された媒体などまで、さまざまなシーンで利用されています。

このデザイントレンドを、ウェブコンテンツ一覧として活用した有名サイトがPinterestですが、このデザインアプローチによる利点やメリットにより、採用するサイトが増えています。

カード型デザインは作成するのも面白く、分かりやすくグリッド上に並べられたどのカードに興味があるのかすぐに情報が整理され、ユーザーエクスペリエンスを向上させます。

また、カード状レイアウトは積み重ねたり(英: stack)、画面に合わせて下にずらすことができ、あらゆる端末で問題なく利用できます。

 

ビデオを使ったヒーローヘッダー

hero-header-materials25-snd

出典:SND CYN

くっきり鮮明で高画質、ハイクオリティーな雰囲気ある大きな写真や短いスニペット動画から、ノーカット版の長い動画を背景に使用して、その上にロゴやタグラインを配置したシンプルなイメージのサイトです。

現在新たに立ち上がる多くのWEBサービス・サイトで、同様のイメージやそれに近しいイメージが採用されています。

インターネット回線速度の改善や、より手軽にサイトに動画を導入できるプラグインなどによって、映画のようなスタイルを実現できるようになりました。

ファーストビューの情報量が少なくなるため、更新が多いメディア・ポータルサイトやECサイトには不向きですが、
アイキャッチ画像を全幅で背景に使用するなど、似たイメージをうまく取り入れているサイトも増えています。

ほとんどの場合シングルページで採用され、レスポンシブデザインとも親和性が高いのが特徴です。

ヒーローヘッダについてさらに知りたい方は 、『2015年もトレンド継続。ヒーローヘッダーの参考・素材25選。』を参考にしてみてください。

 

わずかなアニメーション

7392f79f-a8c6-442f-b440-6cbfbb37c24a

出典:booncon PIXELS

アニメーションは、2015年のもっとも影響のあるデザイントレンドのひとつで、引き続き2016年もサイトデザインの核となる、ヒーロースタイルのアニメーションから、

見逃してしまうほどわずかなアニメーションまで、スクリーン画面サイズが小さくなってもこの人気はまだまだ続くと思われます。

「なぜこのエフェクトを作成したのか」「このエフェクトはなにを目的にしているのか」といった目的や意図に合わせて活用することが、アニメーションにおいてもっとも重要な要素となります。

動きを加えたインターフェースはユニークな方法でユーザーを誘導し、コンテンツを読み込んでいるあいだにも、ちょっとした驚きを与えてくれます。
もはや芸術!SVGアニメーションの巧みな活用方法20選』では、様々な種類のアニメーションを紹介していますのでアニメーションについてもっと詳しく知りたい方はぜひ覗いてみてください。

 

インタラクション

s_5199aed3-da53-4bc7-8383-44beae56b940

出典:UI Interactions

膨大な情報を元に、それぞれの目的を達成できるようにされたデザインが、インタラクション(英: Interaction)デザインです。

アプリやモバイル用インターフェースの要として、インタラクションはユーザーと端末をうまくリンク付けします。

良いとされるインタラクションは、一般的に小さく自然な形で、ユーザーに高い価値を提供することができます。

マイクロインタラクションとは「最小単位のインタラクション」のことで、デザイナーであるDan Saffer氏が著書「マイクロインタラクション」で提唱したものです。

大きなアニメーションに比べ、ユーザーがあまり考えることなく操作できる、ほんのわずかな動きが特長です。
具体的には、マウスオーバー時のボタンアニメーションやポップアップ、テキストメッセージのやり取り中に、メッセージが届いたことを知らせるといった、些細なアクションを指します。

 

より美しいタイポグラフィー

trend2015-half-sample-9

出典:urbaninfluence

最新のインターフェース・デザインでは、膨大なオンラインコレクションから選択できる、Google Fonts や Adobe Typekit などの

使いやすいウェブ書体ツールの登場により美しいタイポグラフィーの道をさらに切り開いています。

大きくて太字の書体は、他のトレンド要素との余白スペースを確保しながらうまくマッチし、可読性の良さもばっちりで、ディスプレイ画面でうまくメッセージを伝えることができます。

単純に読みやすい書体の組み合わせや、楽しくて珍しい書体は、ぜひ挑戦したい小技テクニックです。ミニマルデザインと相性がいい、ダイナミックなタイポを用いたサイトも増えてきました。

ウェイトが極端に太い、細いが多いのもミニマルデザインとの相性ではないでしょうか。インタラクションを多く含むサイトでは、ウェイトが細いのがセオリーのようです。

 

派手で、鮮やかな配色(80年代な雰囲気)

original

出典:Material UI Colors

シンプルなデザインと相性の良い鮮やかな色使いは、Googleのマテリアル・デザインにも見られる様に人気はさらに加速しています。
マテリアルデザインとは、2014年6月にGoogleが「Google Material Design」として発表した、ユーザーにとって分かりやすいデザインを提供するためのデザインガイドラインのことです。

マテリアルデザイン用のカラーチャートが閲覧できる『Material UI Colorsに見られる通り、カラフルな配色を用いた書体がより利用されるようになるでしょう。

2015年はよりモノトーン系の配色でしたが、2016年はより鮮やかで1980年代を連想させるような配色になっています。

無料eBook『Web Design Book of Trends 2015-2016』では、また166種類の具体的な参考サイト、100種類を超える無料素材もリストアップとともに配色カラートレンド10個がまとめて解説されています。

 

ハンバーガーメニューやアイコンなどによる図解

web-loadding

出典:piratecode

たくさんのデザイナーが、編集しやすく使い勝手の良い、オリジナル性たっぷりな UI コンポーネントやアイコンを販売、リリースしており、いままで以上に手軽にアイコンを作成することができます。

ハンバーガーメニューとはクリックするとメインメニューが開く「 」← こういう形のアイコンのことです。その他デザインにおいて図解(英: Iconography)は大きな役割を担うようになってきます。
また、SVGファイル形式がより普及したおかげでSVG アニメや画像に gif を重ねるような複雑なアニメ・デザインなど、ハイテク化してきています。

国内の web サイトでローディング・アイコンはあまり見かけませんが、海外のサイトではよく見かけます。

デザイン性を高めるだけでなく、ユーザーの直帰率減少にも効果が期待できるなど、SEO 的にも期待できる重要なデザイン要素です。

 

より身近な空想現実

bluestag

出典:bluestag

デザインにゲーム的要素を組み込むため、ウェブデザイン・プロジェクトにおける現実と、空想または作られたモノの境い目をぼかすことが次のステップとなっています。

空想現実(英: Virtual Reality)からウェブサイトまで、ユーザーが自由に新しいコンテンツを見つけ、カスタマイズできるデザインが好まれる傾向にあるようです。

 

写真スライダー付きウェブサイト

slider05

出典:Slicebox

まず、写真スライダーで一定のスペースを確保することで、多くのコンテンツを表示させ自由に移動できるようになりました。

そして、フルスクリーン型スライダーの登場で写真が切り替わるたびに、スクリーン画面いっぱいの新しいコンテンツが表示されるようになりました。

クリックやスクロール、スライドのタイミングを設定することもできます。ユーザーは前後のコンテンツへ、より直感的に移動することができます。

今すぐ使いたくなる!個性的でわくわくする動きのスライダー12選(Javascript・CSS3)では、様々な動きのスライダーが紹介されています。

 

2016年のWebデザイントレンドカラー

ローズクォーツ&セレニティ

pantone_color_of_the_year_2016_social_banner

出典:PANTONE

世界中で利用されている色見本帳で知られるPANTONE社は、毎年その年を代表する色、「カラー・オブ・ザ・イヤー」を決めており、

2016年用として「ローズ・クォーツ&セレニティ(英: Rose Quartz + Serenity)」を発表しました。

今回はこれまでと違い「落ち着いた考え方と心が平穏な状態を表した、調和のとれた色の組み合わせ」の2色をブレンドしたグラデーションカラーが採用されるのは初めてで、落ち着いた雰囲気が魅力の配色となっています。

rose-quartz

出典:PANTONE

ローズクオーツは「紅水晶」の意味を持った温かみのある優しいトーンのカラーです。人々に落ち着きや安らぎを与えます。 Webに取り入れる時のカラーコードは、

CMYK: C0, M24, Y15, K0
HEXカラー: #F7CAC9

serenity

出典:PANTONE

セレニティは「静けさ」という意味があります。軽やかでエアリーなトーンは、まるで私達の上にある青空のよう。

荒れがちな現代の生活に、一時の癒しと緩和をもたらします。 Webに取り入れる時のカラーコードは、

CMYK: C42, M24, Y3, K0
HEXカラー: #92A8D1

マゼンタの値がローズクォーツと同じ値です。

 

おさらい:2015年のトレンドカラーはマルサラ

pantone_introducing_color_of_the_year_marsala_banner

出典:PANTONE

「力強く、そしてアーシーなワインレッドです。マルサラは心と体、そして魂をより豊かなものにしてくれるでしょう。」- PANTONE(R)

シチリア産の「マルサラワイン(マルサラ酒)」にちなんだ色名でカラーコードは

CMYK: C25, M77, Y64, K11
HEXカラー: #955251

です。

毎年発表される流行色ですが、仕事となると手がけるデザインの業種・ブランドカラー・コンセプト・ターゲットが重要です。

活用の仕方として「ターゲットに合わせて、シックな印象を与える暖色系を選びました」とだけ言うよりも、

「同じ暖色系の中でも、『マルサラ』は今年の流行色ですので、感度の高いターゲットの意識を引きつけることが期待できます」と、言葉を足して説明をした方が説得力が増します。

 

流行色はどのように決まるのか

s_1312-1-20140116155814_b52d78306e5a2e

出典:jafca

実は、色の流行は実際に流行する2年前から決められています。

世界各国から15の国から専門家集団『インターカラー(国際流行色委員会)』が集まり、その年のライフスタイルを予測する「流行色会議」でトレンドとなる色を決めます。
1963年に発足した団体で、一般社団法人日本流行色協会(JAFCA)も第1回から参加しています。

ただこの会議の時点では特定の1色ではなくカラーの大きな方向性を決めるという感じで、

みんなが次の時代に共感できるカラーの世界観を、写真などのヴィジュアルイメージとカラーで表現したものが幾つか提案されます。

それをJAFCAが日本に持ち帰り、実シーズンの1年半~1年前に、世界各国で素材の展示会が開催され、

1年半前に、アパレルメーカー、自動車メーカーなどから集まった専門委員と一緒に、国内市場向けカラー(JAFCAカラー)を選定します。

その後デザイナーズコレクションが世界で開催されます。

JAFCAの会員になると、実シーズンの1年半前にいち早くトレンドカラーの情報を入手することができます。)

 

2017年トレンドカラー予測

pantone-color-swatches-fashion-color-report-fall-2017

出典:PANTONE

パントン・カラー・インスティテュート(PCI)と、一般社団法人 日本流行色協会(JAFCA)、トレンドカラーに関する公開対談によると

「カラー・オブ・ザ・イヤー」2017年のカラートレンドにつながるキーワードは、
サステナビリティ、快適さ、シェアリング・エコノミー、オーガニック、ピュア

の5つだそうです。

消費に対して慎重な人が多く、ある程度長く使えるベーシックなカラーが重視される予想で全体的な傾向として、ブルー、グレー、ブラウンの3本柱に、

差し色としてコーラルピンクやブラウンオレンジ、メタリックな赤やワインレッド、イエローグリーンが挙げられそうです。

 

8つのグローバルトレンド

レスポンシブウェブデザインがさらに拡大

2015121902-02

出典:16 Graphic Design Trends To Watch In 2016

Googleは、

ユーザーのデバイス(パソコン、タブレット、モバイル、非視覚的ブラウザ)に関係なく、

同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて(つまり「レスポンシブ」に)表示を変えることができます。

出典:

と定義しています。
スマホの急速な利用拡大によってWebサイトのマルチデバイス化が必須となり、デバイスごとにHTMLファイルを作成することなく、

一つのHTMLファイルだけでデバイスごとの横幅サイズに応じたレイアウトデザインを自動調整してくれる「レスポンシブウェブデザイン」は、2016年も引き続き便利な手法として、利用が拡大する見込みです。

 

フラットデザインが主流、マテリアルデザインが拡大

f0d330b7e4d2b6d64dded72796958ce5-1024x593

出典:Material-Ui

フラットデザインは海外でも依然として高い人気ですが、2014年にGoogleが発表し徐々に利用が拡大するマテリアルデザインが、2016年トレンドの最有力と言われています。

今までは主にアプリのデザインの利用に限定されていましたが、新たなバージョンはVanilla CSS、HTML、JavaScriptも使うことが可能で、ウェブデザインへの普及が加速する見込みです。

 

カードスタイルのインターフェース

db4c02408f7d3b2cfd75cf31f2cccc06-1024x584

出典:ice bar oyya

マテリアルデザインの普及によって海外でも人気が高まっているものの一つがカードスタイルのインターフェースです。

カードスタイルのメリットは、単純に見やすい事でユーザーフレンドリーなサイトを構成出来る事以外にも、カード同士を重ねる事も可能なので、

スマートフォンなどの画面の小さなデバイスでも見やすいデザインにする事ができます。

 

明るく、大胆な色づかい

a3515ce4e8c608f27bc50afe9c074a4c-1024x575

出典:CIRCLES

Googleの発表したマテリアルデザインのモデルを見ても、大胆に明るい色が多用されています。

2015年は単色やモノトーン調のデザインが主流でしたが、2016年は、新たなトレンドとしてすでにたくさんのサイトで1980年代の雰囲気を感じるような明るい色彩のデザインが採用されています。

フォント、字体の大きさや字配りの構成が重要視

s_fd391278-afc1-4caa-a768-79b1732d4913

出典:

シンプルなマテリアルデザインの普及によって、より大きいフォントを使ったり、大胆な字配りの構成でデザインすることによって、サイト上の活字で伝えるメッセージをより簡潔にする傾向があります。

 

サイト背景に動画が増える(フルスクリーン動画など)

出典:STREETFOOD

近年、世界各地でインターネットの利用が進み、途上国でも高速でインターネットを利用出来る環境が急速に整ってきています。

そんな中注目されるのが、サイトの背景や検索エンジンの検索結果ページに表示されるスニペットを動画で構成するデザインです。

高速で安定したネットを利用出来る環境が拡大すれば、ユーザーの滞在時間を大きく伸ばすと言われる動画形式のサイトは増え続けると見込まれています。

デザインのキャッチアップに最適な参考サイト&スライド資料9選

デザインギャラリーサイト

title

Webデザインの参考になるギャラリーサイトまとめ33選

クリエイティブなWeb制作で有名なLIGの社長がメンバー(主にデザイナーとディレクター)にアンケートを取り、

制作する際に普段参考にしているサイトを集めて紹介しているサイトです。かなり実践的で参考になるカッコイイサイトばかりです。

Webデザインスライド資料

Web上にはSlideShareで共有されているWebデザインに関する資料が数多くあり、以下でスライド資料を中心にまとめた記事を紹介します。

 

W3Q

出典:W3Q

 

Web制作のおすすめスライド デザイン編

Webデザイン全般に役立つSlideShareのスライドを紹介している記事です。

タイトルで休みにまとめ読みを勧めているようにかなり数が多いですが、その分充実した内容でデザインについてしっかり学べます。

 

webdesign

出典:COMMTEBLOG

ひとりでWeb制作できた!「知識0から学ぶ」すごいスライドやサイト27

HTML/CSSからPhotoshopやIllustratorまで、これさえあれば本当にひとりでWeb制作ができてしまうかもというくらい丁寧にまとめられています。

量は多くなりますが、「0」から学ぶにあたっての最低限の基礎知識がしっかり身につけられる内容なのでWebデザイン初心者の方はまずチェックしてみてください。

 

Webデザインの見本

 

top2

美しいWebデザインをタイプ別に!見ないと損する目的別厳選Web見本サイトのまとめ

Webデザインの見本サイトをパーツ毎にわかりやすくまとめられている記事です。

初心者の方はまずは一通り見てどんなものがあるのか頭に入れておき、必要に合わせて活用すると良さそうです。

 

新人デザイナーならブクマして損なしのWebデザインギャラリーサイト

国内からイケサイ、ABM、S5-Styleなど計6サイト。海外からAwwwards、CSS Awards、The Best Designsなど計5サイト。新人Webデザイナー向けWebデザインギャラリーサイトをまとめた記事です。

このまとめを参考にとりあえず毎日見ておけば間違いない,特にオススメのギャラリーサイトがまとめられています。

 

129034d2738ef12d5ae16aed17b39425

出典:WebDesignClip

WebDesignClip

クリエイティブ性の高いWebサイトを集めたギャラリーサイトです。

自分が気に入ったサイトを「MyClip」として保存することもできるので、Webサイトの作成に役立つはずです。洗練されたサイトも1000以上登録されているので、ぜひ参考にしてみてください。

また、自分のサイトを提出することも可能です。

 

d934f8c2716c3e5573d9fd6d7d3a8957

出典:WebDesignFile

WebDesignFile

上で紹介したWebDesignClipの姉妹サイトでこちらは海外のサイトのみを掲載しています。

より最新のトレンドを知りたいと思ったら海外の事例を参考にすると良いでしょう。英語のフォントを取り入れたサイト作成に役立つはずです。

 

Webデザインに使えるテクニック

medium_6197301081

出典:MEMOPATCH

Appleのヒューマンインターフェースガイドラインから学ぶの5つの優れたUIの秘密

Appleのプロダクトやアプリが明確、かつシンプルでとても魅力的であることの秘密はデザインにあります。そして、そのクオリティを保ち続けられる秘訣はAppleのヒューマンインタフェースガイドラインにあるとされています。
特に、彼らのUIデザイン哲学は、とても勉強になります。

上記のサイトは私たちを魅了し続けるAppleのUIデザインの秘密に書かれている記事“5 Secrets of Good UI Design from Apple’s Human Interface Guidelines”を翻訳してくれているサイトです。

boostcreativity1

出典:10 Great Tips to Boost Creativity

ワンパターンなウェブデザインから抜け出すための10のヒント

10 Great Tips to Boost Creativityを意訳で、ウェブサイトをデザインするとき陥りがちなワンパターンから抜けだすためのテクニックを教えてくれるサイトです。

 

Webデザインの勉強法

また、Webデザインの勉強に役立つ記事についてもご紹介させていただきます。

Webデザインの学習に役立つこと間違いありません。

【東京版】Webデザインが学べるスクール10選

【Webデザイン初心者必見】役立つ学習サイト・参考書20選

【デザインの基本】デザイナーの基礎が身につく4つの法則

 

まとめ

技術進化の速いWebの世界において、トレンドはファッションと同じように一年単位で変化する流行色もあれば、一年以上の期間継続する技術的なトレンドまで様々です。

これからWebサイトを作ろうとしているあなた、すでにあるサイトを更新しようと考えているあなたのサイトデザインに本記事の内容が参考になれば幸いです。

 

TECH::CAMPについて

TECH::CAMPは、講義形式で知識だけを学ぶのではなく、実際にサービスを作りながら実 践的に学んでいきます。

TECH::CAMPならプログラミングが、なんとなく分かるではなく、一人で出来るようにな ります。

また、質問し放題のため、分からないところを質問しすぐに解決することで、どんどん新 たなスキルを身につけることができます。

この機会にプログラミングを学びませんか?

rgbtechnote2-01

【TECH::CAMP】今の仕事、10年後にもあると思いますか?

TECH::CAMPではプログラミングだけでなくAI(人工知能)も学べます。
テクノロジーの進化により今後10年で半分もの仕事がなくなると言われています(オックスフォード大学調査)。それはつまり人が行っている仕事が人工知能に置き換えられていくことを意味します。そんな時代に生きる私達にとって、人工知能について何も知らないままでは済まされません。

今すぐ無料体験会へお越しください!
お待ちしています!

有川未紗 有川未紗
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

  • カテゴリー
  • このエントリーをはてなブックマークに追加
    記事をシェア→