7つのデザイン手法に見るWebトレンドを分析！オススメの使い方

前回お届けした『マガジンレイアウトなWebデザインまとめ』に引き続き、今回はグラデーションやグリッドライン、ドロップシャドウやダークモードなどオーソドックスな7つのデザイン手法に基づいたWebトレンドをご紹介したいと思います。
もちろん私の独断と偏見で。
お付き合い下さいませ。

7つのデザイン手法に見るWebトレンド

最近のWebサイトのデザインを色々みている内に以下の7つの手法が目立つなと感じました。
あ、勿論私の好みも含んでますが。

• 蛍光カラー
• ドロップシャドウ
• モノトーン+1アクセントカラー
• グリッドライン
• アイソメトリック
• グラデーション
• ダークモード

これらに基づいてそれぞれ解説して参ります。
デザイン手法の引き出しを増やす事で表現の幅が広がりますので覚えておくと良いでしょう。

蛍光カラー

よくあるダサい配色になり易いWebに於ける蛍光カラーですが、ポイントを絞ってバランス良く使うとアクセントの効いた演出が出来ます。

松蔭浩之｜MATSUKAGE Official Website

写真も含めて彩度低めの世界観の中で彩度の高い黄緑の蛍光カラーがガツンと目に飛び込んできますね。

TANTEKI　-新しすぎるアイデアが、伝わる。加速する。-

単なるベタではなく若干グラデーションしているのがポイントですね。

ドロップシャドウ

フラットデザインの隆盛によって影が薄くなり、蛍光カラーに並んでダサくなり易いドロップシャドウですが、ここでご紹介するのはよくあるテキストなどの要素ではなく、商品画像などに用いてデザインの立体感を効果的に表現しています。

CHILL OUT（チルアウト）オフィシャルサイト｜【日本発】瞬間リラクゼーションドリンク

商品が手に取れそうな存在感がありますね。
動きがあるので尚更背景とのコントラストがはっきりしています。

クレイヘアケアブランド【DROAS（ドロアス）】公式サイト

こちらも同様に商品が浮いて見えます。
パララックスと併用する事でより効果的に見せられますね。

モノトーン+1アクセントカラー

多色使いで失敗するくらいならモノトーンでデザインした方が安全なんじゃないか論を微かに提唱している私ですが、そこにアクセントカラーを入れると相乗効果が高いなと感じております。
只、極端に色を抑え込んでしまうので、色味で魅力を伝える飲食などの表現には不向きかもしれません。

Take Back The Beers!

黄色がガツンと目に飛び込んできますね。
人物写真がメインなので白黒にしても大きな問題はありません。

ミニ四駆チームRXR ｜ 栃木・那須塩原ミニ四駆プロフェッショナルチーム

こちらは動画との組み合わせ。
絶対白黒表現にしないといけない訳ではなく、バランスを考えてフルカラー画像などを用いるのもOK。
我がDSミニ四部も負けていられません。（オフィシャルサイトサイト絶賛放置中）

グリッドライン

シンプルな構成でもグリッドラインが入る事でデザイン全体が引き締まった感じに見えますね。
BiNDupテンプレートでは『Tokyo Quality Corporation』がグリッドラインを用いたデザインです。

Euro Immobilia

動画背景だけでも充分クオリティは高いのですが、グリッドラインが入る事でより洗練さが増しますね。
他の要素のレイアウトも収まりが良く見えます。

D.Potfer studio

空間を大きく使いながらもその間延び感を抑える効果もあります。

アイソメトリック

近年人気の等角図と云う手法で描かれたイラストを使ったデザインですね。
縦横の概念で描かれるWebデザインに斜めの要素が入る事で面白いリズムが生まれます。

パシフィックシステム株式会社

ビルボードでの印象も大きいですが、要所要所でイラストを使って世界観を演出していますね。

株式会社デジタルステージ

手前味噌では御座いますが弊社のブランドサイトも同様のアプローチです。

グラデーション

CSSで描ける様になってから依然人気が高いグラデーション。
近年の傾向としては多色使いや角度の複雑さで洗練さを増している様に思えます。

株式会社ソニー・ミュージックソリューションズ、カンパニープレゼンテーション「U」特設サイト

ざっと観ただけでも4色くらいが複雑に混ざっているのが判りますね。

BAKE APP ｜ BAKE Inc.

こちらはグラデーションパターンが動的に変化する表現。

ダークモード

最近話題のダークモードですが、目の疲労を緩和したり電力消費が少ないなどの利点でOS（主にスマホ）などを中心に採用されている様です。
実際はダークモードと通常モードに切り替えられる事を云いますが、ここではダークカラーなデザインのWebサイトと云う事でご紹介します。

DOUBLE INC.（株式会社ダブル）｜OFFICIAL WEBSITE

こちらは全体的に暗いトーンをベースに文字は白、小さめのサムネイル画像は明るめで大きな画像は暗めに作られています。
文字が認識し易いのは勿論ですが、明るい画像もメリハリがあって目立ちますね。

OKURAYAMA STUDIO

ハイクオリティな写真に洗練さの際立つ白いテキストが美しいですね。
極限まで要素を削いで魅せています。

終わりに

如何でしたか？
トレンドと云っても特別新しい技法が登場した訳ではありませんが、幾つかはそれまでの用い方を更にアレンジする事で新たなデザイン手法に昇華させている様に感じました。
いろいろなサイトを参考にデザインのクオリティアップを図ってみましょう。

新たなデザインを施した、ホームページ制作サービス「BiNDup」の最新テンプレートもぜひチェックしてみて下さい。

BiNDupのテンプレートを見る