
2017年上半期に取り入れたい5つのWebデザイントレンド
世界中のWebデザイナーが、日々最新の技術やトレンドに追いつこうと必死になっています。
実際、AIやVRなどの技術がWebの世界にも侵食しはじめたこともあり、現状維持のままで留まってしまうWebデザイナーはますます世界に取り残されてしまうでしょう。
その中でWebデザイナーがやるべきなのは、世界でよく取り入れられているトレンドを知り、キャッチアップしていくことです。
今回は、2017年上半期に取り入れてみたい5つのWebデザイントレンドをご紹介します。
2017年上半期に取り入れたいWebデザイントレンド
1. シンプルな塗り背景
デザインにおいて何かを強調するときに使える最も簡単な方法のひとつが、2つ以上の要素を比べることです。
数年前にフラットデザインが流行しましたが、ここに来てアニメーションなどの動きをつけて、フラットデザインが再登場しています。
単色で塗った背景はフラットに見えるため、アニメーションをはじめとしたデザイン上の「仕掛け」を演出するためのキャンバスとして使われています。
逆に言えば、アニメーションが際立つのは、背景がフラットだからです。
以下に紹介するようなホームページは、背景が白やパステルカラーを採用しており、ユーザーがメインコンテンツに集中できるようにできるだけその存在感を隠しています。
ほのかな色を塗っただけの背景は、まるで芸術作品を展示する際の壁紙のような役割をしているのです。
シンプルな背景にする際に色を選ぶときには、気をつけたいことがあります。
それは、できるだけ白や黒、あるいはニュートラルな色を選ぶことです。
大胆で明るいビビッドな色だと意図に反して背景のほうが目立ってしまうので、目標を達成できなくなってしまうからです。
2. 低コントラストレイヤーの全面背景
ヒーローイメージを使ったWebデザインのレイアウトが未だに健在かどうかは別として、低いコントラストのダークカラーのオーバーレイを使った全面背景のWebデザインをよく見かけるようになりました。
極端に低いコントラストであれば彩度や明度の高い色の文字をタイポグラフィとして使うことで目立たせることができ、より立体感を持ったデザインを演出することができます。
ただし、低コントラストのダークカラーが必ずしも黒やグレーである必要はありません。
深いグリーンやブルーのように、普段は使わないような色を使って個性を演出しているホームページも存在します。
不思議なことに、低コントラストのオーバーレイをかけることで、セミフラットなデザインが映えて見えます。
できるだけ上に配置する文字やボタンは、背景と対照的に明るい色を使うようにしましょう。
3. ブルータリズム
ブルータリズム(Brutalism)とはもともと1950年代から見られるようになった建築の形式で、荒々しさを残した打放しコンクリートなどを用いた表現を特徴としています。
「Brutal」とは冷酷で厳しい野生のさまを意味する形容詞で、「生身」(raw)を意味するフランス語に由来しています。
▲ http://www.madeinaugust.co.uk
ブルータリズムは大胆な色使いをするので、決してユーザーフレンドリーであるとは言えません。
しかし、まるで前衛芸術のように若い世代の主張のようにも見える真新しいデザインは、まさに従来型のWebデザインと一線を画すような、Webデザイン界の超現実主義とも呼べる表現様式です。
日本ではミュージシャンのきゃりーぱみゅぱみゅさんのPVでブルータリズムが採用されています。
エディトリアルや映像制作で流行しているトレンドが、ようやくWebデザインにもやって来ました。
4. 白いエッジ
Webデザインのトレンドの中でもフラットデザインやミニマリズムなど、よりシンプルなものが好まれるようになったのはこの5年ほどのことです。
そして、シンプルさを追求した新しい表現方法が、四方に白いエッジを設けるデザインです。
白い額縁に飾っているようにも見えるので、海外ではこのトレンドを「ホワイトフレーミング」(White Framing)と呼ぶひともいます。
▲ http://www.adidizdarevic.com
▲ http://www.camdentownbrewery.com
面白いことに、100%絶対ということではありませんが、縁取りのほとんどは縁取りに*「白」を採用しています。
白い縁取りがあると、真ん中に並べられるコンテンツがいくぶんかクリーンに見える効果*があります。
これは特にメインコンテンツである中央の色が濃い色であればあるほど、クリーンに見えるようです。
5. ダイヤモンドカット
ホームページのレイアウトというのは、縦横、水平・垂直のグリッド上にオブジェクトを配置するのが基本でしたが、近年ではグリッドを崩すような「ブロークングリッド」(Broken Grid)と呼ばれるレイアウト手法が注目を集めています。
参考:
あえて壊す?思わず視線が奪われる「ブロークングリッドレイアウト」とは
そして、2017年によく見られるようになったのは、正方形を斜め45度に傾けた形で写真を切り抜くような、いわゆる「ダイヤモンドカット」(Diamond-cut)と呼ばれるデザインです。
▲ http://www.linstantunique.com
面白いことに、ただ単純に正方形を傾けただけだと思われるかもしれませんが、傾けただけでもだいぶ印象が変わります。
例えば写真を切り抜いて使った場合は、四つの角がはっきりと目立つようになります。
ただ単に正方形に写真を切り抜いたときと違って、印象に残りやすくなる効果があります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ユーザー
- ユーザーとは、コンピューターやシステムを利用する人のことを指します。 利用者、使用者、消費者などの意味を持つ英単語で、対義語は「メーカー」や「デベロッパー」などがあります。
- PV
- ページビューとは、ホームページにおいて閲覧者が実際に見たページのページ数を言います。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング