前回ご紹介した海外最新webデザインですが、新たにwebデザインのレシピとなるようなトレンドが発信されていますので、参考としてご紹介したいと思います。
関連記事：海外最新webデザイントレンドについて（2016年5月）
1. レイヤーを多く使用したデザイン
新しい技術によってWeb上では、2Dから3Dのデザインへと進化しつつあります。スクリーン上で、まるで手で掴めるような新しい感覚を生み出すことでより表現の幅が広がります。ここでは、レイヤーのデザイン方法についてのTipsをご紹介します。
- 影やアニメーションを平面上で複数使用する。
- 要素を交差させる。
- ラスタースクロール機能を使用する。
- 幾何学的形状、アニメーションとカラーバリエーションを使用する。
- 画面の背景やエッジを越えてレイヤーを作成する。
- 画像はテクスチャや背景の上に重ねてもOK。
参考デザイン
2. ダークカラースキームを使用したデザイン
ここ最近は、ダークカラーを使用したミニマルなデザインが増えているようです。トレンドとしては、よりダークなカラーにシフトしているといってよいでしょう。
大胆な白タイポグラフィ、明るい色で、コール・トゥ・アクションや重要な情報には適度をアクセントを加えてみましょう。
ダークカラースキームは、いつもブラックという単調なものではなく、時には、赤から緑やブルーなどの色相へ多様することもできます。最も一般的ですが、様々な色の組み合わせから作られるリッチブラックを選択することが重要です。
ダークカラースキームを用いる場合は、適切なコントラストをつけて見やすくしましょう。白は、明るさや彩度をつけるときに活用していきましょう。サイズにコントラストつけることも考えてみましょう。読みやすくするために、テキストのサイズも調整してみましょう。
参考デザイン
Ambassador Watches - Incomparable Timepieces
Convoy Interactive - Agency for digital design solutions
3. グラデーションを使用したデザイン
フラットデザインの対極として、グラーデーション技術が用いられていますが、フラットデザインに物足りなさを感じるときに、グラデーションを使用します。新しい傾向としては、テクスチャとして使用されていないことです。あくまで、コンテンツを強調させるために明るい色のグラデーションを使用しています。大胆さを表現したいときに、フルスクリーンのグラデーションオーバーレイから背景に使用するといったテクニックです。
- 大胆な表現をするためにグラデーションを使用する。
- 写真に引きつけるためにツートンやオーバーレイを使用する。
- ボタンをクリックさせるためのグラデーションを使用する。
- アイコンのグラデーションはNG！
- コンテンツを目立たせないこと。
- グラデーションがコンテンツとマッチしているか確認する。
- 読みやすさを重視して、色の組み合わせやコントラストに注意すること。複数のサイズのデバイスで読みやすさをテストすること。
参考デザイン
WordPress Support and Maintenance Services by WPCrew
Victor Fernandez Windsurf - Pro Rider PWA World Tour
Interactive Sites, a Full-Service Hospitality Digital Marketing Agency
まとめ
海外最新webデザイントレンド参考まとめはいかがでしょうか？レイヤーの使い方、ブラックのミニマルデザイン、グラデーションを使用したデザインが、今、海外のwebデザイントレンドとして注目されています。
一番重要なことは、webサイトのコンテンツとマッチしているか、サイトのユーザビリティを意識しているか、ということなので、一度、デザインする前に確認してみましょう。
reference: Essential design trends, August 2016 | Webdesigner Depot
最新Webデザインスキルを身につけるには
Codecampはマンツーマンでプロの最新webデザインレッスンを受けることができます。まだwebデザインはできるけど自信がない、一線で活躍しているプロからマンツーマンでレッスンを受けたいという方はCodecampがオススメです。
