YU-Create-Lab for Web Creator Webクリエイター・Webデザイナー向けの優クリ-Lab

2018.04.20

Webクリエイターが知っておきたい!!北米のデザイントレンド情報

Webクリエイターが知っておきたい!!北米のデザイントレンド情報

止まることなく進化し続けるWebとモバイルテクノロジーに対応すべく、デザイントレンドも変化し続けます。今回はWebテクノロジーの最先端、北米のトレンドをご紹介します。デザイン感覚は国で異なりますからそのままとはいかないと思いますが、構成や動きなどは日本でも流行する可能性が大いにあります。ぜひチェックしておきましょう。

アップグレードされ続けるフラットデザイン

シンプルで不必要なグラデーションやドロップシャドウを使わないフラットデザイン。2002年にリリースされた、マイクロソフトによるウィンドウズメディアセンターのデザインが始まりだったと言われています。

その後2007年、アップル iOS7のデザインにも使用され、現在まで変化しながらもWeb、モバイルアプリで使われ続けているスタイルです。ごく最近では、このスタイルに鮮やかな色のグラデーションとドロップシャドウを加えるようになり、人気の衰えないスタイルとして定着しつつあるようです。
 

【Colour On Code】
http://www.colouroncode.co.uk/
colouroncode.co.uk_2.png

モバイルアプリ制作会社のサイト。白地のバックグラウンドを基調に彩度の高いグラデーションが所々に使用され、ソフトで大きめのドロップシャドウで立体感を作っています。典型的な”モダンフラットデザイン”の例であると言えるでしょう。
 

グリッドから外れるデザイン

デザインの基本とされる「グリッド」から意識的に外し動きを出したデザイン。CSSの進化により、垂直グリッドにとらわれないレイアウトも可能になりました。  

また、その一部とも言える「幾何学模様を多様したデザイン」パターンでは、背景やアクセントとして幾何学模様を多用。
真っ直ぐなグリッドにはまりがちなウェブレイアウトに幾何学パターンを足し、「水平」、「垂直」以外の角度で動きを取り入れているパターンもあります。

【Dusko】
https://dusko.shop/pages/about-the-brand
Dusko.shop.png

Tシャツや雑貨のブランド。
ショッピングページは商品を見やすくするためグリッドデザインになっていますが、ストーリー性を重視した「About」ページでは縦スクロールで読み進める1コラムデザインに崩し動きをつけ、ビジターを飽きさせないようにしてあります。

【Built by Buffalo】
http://builtbybuffalo.com/
builtbybuffalo.png

デザイン会社のサイト。こちらは縦横のグリッドは崩さす、アクセントとして六角形を取り入れています。

【82nd & Fifth】
https://82nd-and-fifth.metmuseum.org/
82nd-and-fifth.png
「メトロポリタン美術館」プロジェクトの一つとして立ち上げられたサイト。
マンハッタンの地図から延長された斜めのグリッドとアニメーションが、動き続ける街、N.Yにあることを象徴しているようです。  
 

斬新なタイポグラフィー

大きなテキストをヘッダー部分へ使用したデザインは以前から多くありますが、最近は透明度やマスク、または縦向きレイアウトといった、より斬新なタイポグラフィーデザインが使われるようになり、文字の美しさやデザインへの訴求が高まっています。

【Elegant Seagulls】
https://www.elegantseagulls.com/
elegantseagulls.com.png
縦横に交わる大きなタイプと写真が全体を通し使われています。
タイポグラフィーとレイアウトにこだわりのあるデザイン会社にふさわしいものです。
 

ウェブアニメーション

もはやユーザーにとっては当たり前のウェブアニメーション。とはいえ、大げさで興味を引くためだけの無意味なアニメーションは、既に飽きられ過去のものになってきたようです。ユーザーが次に取るべきアクションをわかりやくするためのものが多く見られます。

そんな中、最近よく見受けられる「Hello Bar(ハローバー)」。
スクロールしても画面トップにとどまり、アクションを促すハローバー。メインメニューだけのもの、プロモーションやEメールサインアップを促すものなどその使用方法も様々です。

【KBS Agency】
https://kbsagency.ca/
kbsagency.ca.png
ロールオーバーで微かに動くサムネイルイメージや、色がスクロールするメニューバーなど、ユーザーの取るアクションに答えるようなアニメーションがユーザーエクスペリエンスをより良いものにしています。

【Co Schedule】
https://coschedule.com/
coschedule.com.png
スケジュール管理ソフトウエアのサイト。ハローバーにはメインメニューの他「デモをリクエスト」、「サインアップ」など、伝えたいメッセージを載せてあります。
 

イラストレーション

ここ数年ストックフォトの質が上がり、美しいエディトリアル、ライフスタイルイメージを簡単に入手できるサイトが格段に増えました。それとともに、美しい写真を挿入しただけでは人々の注意を引くことが難しくなってきました。
そこで他と差別化をはかるため、カスタムイラストレーションを使用するサイトが増えています。  

また、実際の人物写真だと、そこに写る人物の「人種や年齢」などが明快になりすぎるという場合も、イラストレーションなら抽象的な描写が可能です。こういった点は、特に国を超えたサービスを提供するサイトで多用されやすい、人気の理由のひとつとして考えられています。

【Skipio】
https://skipio.com/
skipio.png
風景写真では具体的な場所や人が写り、よけいな先入観を与えてしまうところを適度に抽象化し「雰囲気のみを伝える」ことに成功している例です。
 

進化したレスポンシブデザイン

モバイルに対応したレスポンシブデザインが当たり前となった今日。デバイスサイズに合わせデザインが変化するのではなく、それぞれのデバイスに適したデザインと機能が求められています。もはや「モバイルフレンドリー」では通用しないウェブデザインとなってきているようです。
「モバイルファースト」、「モバイルオンリー」の考えを頭に入れた、デザインをしていかなくてはならなくなってきました。

【Weather.com】
https://weather.com/
weather.jpg
天気予報サイト「Weather.com」は携帯電話からアクセスすると、トップに自分の現在位置の気温と天気が大きく表示されます。最近では、こういったデバイスごとの特徴に合わせた機能をデザインに取り入れることが必要とされています。
 

デザイントレンドの移り変わり

テクノロジーというのは一夜にして大幅に変化するものではなく、徐々に進化していくもので、Webやアプリのデザイントレンドもまさにそれと同様です。ファッションの様に、シーズンごとにまったく違うものに変化するわけではありません。
今までのものを踏まえテクノロジーの変化に対応しながら、新しいトレンドとしてうまれていきます。それに関しての国境はなくどこでも同じです。みながテクノロジーの変化に対するアンテナ感度を上げておくことが大切なのです。  

 

参考URL
https://en.wikipedia.org/wiki/Flat_design
https://www.w3schools.com/css/css_boxmodel.asp

Recommend この記事を読んだ人はこんな記事も読んでいます

【Web記事】思わずクリック!「読まれるタイトル」のつけ方、教えます

2018.03.02

【Web記事】思わずクリック!「読まれるタイトル」のつけ方、教えます

■センスは不要!「読まれるタイトル」を付ける3つの技術普段、なにげなく見ているWeb記事のタイトル。毎日たくさんの記事がネット上にアップされていくなかで、プレビュー数の多い記事には、読み手の関心を引きつけ、思わずクリックしてしまうよう...

【ただの雑談になってない!?】Webディレクターに求められるヒアリング術

2018.02.09

【ただの雑談になってない!?】Webディレクターに求められるヒアリング術

■ヒアリングでは真に受けてはいけないNGワードがある!新米Webディレクターにありがちなことといえば、やはり完成した内容とクライアントの完成予想イメージの違いによるトラブルです。経験豊富なディレクターであれば、過去の実績からクライアン...

Webディレクター必見!使えるGoogle便利ツール

2017.12.08

Webディレクター必見!使えるGoogle便利ツール

■ただでさえ便利なGoogleスプレッドシートがもっと便利に!Googleスプレッドシートが便利であることはすでにご承知のことと思います。優クリLabでもその優れた機能を紹介しました。【リモートワーカーで成功する人のコミュニケーション術...

WELQ問題で変わった?Webメディアの現状

2017.11.17

WELQ問題で変わった?Webメディアの現状

■WELQ問題から1年……DeNAのキュレーションメディアプラットフォーム「DeNA Palette」の医療・ヘルスケア情報のキュレーションメディア「WELQ(ウェルク)」が端を発し、キュレーションメディアの...

紙物でも困らないために!Webデザイナーが知っておくべき3つのこと

2017.09.06

紙物でも困らないために!Webデザイナーが知っておくべき3つのこと

■Webデザイナーが紙物を制作するときに知っておくべきこととは?本コラムでは、主にWebを主戦場としているデザイナー向けに、紙物を注文されたときに困らないためのトピックをいくつかご紹介していくのですが、印刷物を制作する際には、解像度、...

【サイト制作者必見!】レスポンシブWebデザインをコーディングする際に気を付けたいこと

2017.05.18

【サイト制作者必見!】レスポンシブWebデザインをコーディングする際に気を付けたいこと

■制作するターゲットの年齢層をクライアントから必ず確認するスマートフォンデザインを優先する「モバイルファースト」がSEO的にも有利になっていますが、(Googleが明確に発信しています https://webmaster-ja.goo...