必ず知っておきたい！11月のWebデザインにおける3つのトレンド

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、10年以上フリーランスのライターとして活躍しているCarrie Cousins氏によって投稿されました。

あなたのデザインの殻を破り、何か大胆なことにチャレンジしましょう。

大胆さ自体大きなテーマですが、11月のユーザーの目を惹き付ける3つのトレンドを紹介したいと思います。以下が11月のデザイントレンドです。

目次

1. 紫色のデザイン
2. あえて大きくしたボタン
3. 幾何学的なデザイン

1. 紫色のデザイン

いつだって紫色はあまり使われません。

ある特定のシチュエーションで使いにくかったり、この色自体に大きな意味があったりしてデザイナーが避けるからです。

特定のブランドの色としてもあまり使われませんし、いろいろな色と干渉してしまいます。

しかしもうそれはただの言い訳です。際立った紫色があちこちに見られ、感心するはずです。

モノトーンカラーシステム

• 無駄な要素のないシンプルなデザイン
• 写真の利用を最小限にする
• 宇宙がテーマ(紫にはよくある選択肢です)
• 暗めの紫(パステルカラーよりはむしろ)

デザイナーが使う特に暗く、深い色に顕著なのですが、紫自体が目立つ色なのでシンプルなフレームワークが最適です。

また、明るいタイポグラフィと相性がよく、女性的な感じは受けません。

トレンドとしては明るい紫を選んで、力強さを感じるデザインパターンの素材と組み合わせるといいです。

Driver

Poster Show

2. あえて大きくしたボタン

すべてのデザインの中でボタンは一番重要かもしれません。

フォーム提出などのステップアクションを助け、ボタンによってユーザーは次のページに導かれます。

アクションの最終段階であり、ユーザーとインターフェースの間で動作を完結させます。

近頃、ボタンのデザインは進化してきましたが、デザインの中に大きなボタンを取り込むという手法が大きなトレンドといえるでしょう。 (ゴーストボタンという以前のトレンドの全く逆の手法と呼べますね。)

大きなボタンはユーザーにとって楽しく、一種のトリックでもあります。なぜかと言うと、ユーザーはどれがボタンでどれがボタンでないか知る必要があるからです。

他のデザイン要素のように消すことはできません。

ボタンと認識させるのにいい方法として「ホバーアニメーション」が挙げられます。以下では、3つの事例紹介しています。どのデザインもユニークなアプローチをとっていて参考になるでしょう。

1. bark：ヘッドラインに大きなイメージが映し出され、サブヘッダーのホバーの動きはクリックできることを示しています。

2. Mt.CubaCenter：植物の見分け方のサイトでホバーボタンが画面から消えて色が同化し、サイズも変わります。
アニメーションは見逃し難く、クリックしたくなるような描写になっています。

このデザインには2種類のボタンがあります。下にあるようにカードスタイルの画像に大きな紫の丸ボタンがあります。

丸いボタンの何がいいのかというと、「ボタンっぽさ」を感じるのです。

3. Simon Foster：このポートフォリオサイトは面白くて、ただ単純にボタンとして使っているわけではありません。それぞれのポートフォリオが関わったプロジェクトであり、ボタンでもあるのです。

シンプルな黒白のデザインがマウスのホバーによって急に鮮やかな色が出現するので、ユーザーはボタンをクリックしたくなるでしょう。

bark

Mt.CubaCenter

Simon Foster

3. 幾何学的なデザイン

幾何学模様をデザインに使う方法はたくさんあります。ナビゲーション、ボタン、バックグラウンドのパターンとして形を使えるでしょう。

硬く鋭い直線状の幾何学模様は、ユーザーに大きなインパクトを与えます。

最初に紹介しているSean Klassenのポートフォリオサイトは、花を使うことによってソフトな印象を与え、幾何学的な描写にすることでハードな印象も同時に感じさせています。ソフトとハードを同時に見せることでユーザーの目を惹くことができるのです。

これらすべての要素を結びつけているのが色で、バラの緩やかな曲線と急な角度の三角形がうまく折り合っています。

Webサイトをデザインして、ビジュアルインフォメーションを欠いてしまっているとき、幾何学模様を織り交ぜることで、無の状態から何かを作り出すことができます。

最後に、一般的な要素を幾何学模様に落とし込むことでもっと面白いビジュアルにできます。

例えば下にあるCobay.esのマウスは、もしこの白いネズミが普通のデザインだったらあまり興味を惹けません。

ユーザーが見る画面では、幾何学模様のデザインとは違って、アニメーションされた動く形が視覚的に面白いのです。

Sean Klassen

Projekcje

Cobay.es

結論

今回紹介した大胆なデザインを試してみてはいかがでしょうか。

際立った色、大きなボタンと楽しい幾何学模様は、たとえそれ単体で使ったとしても使えるテクニックです。ぜひ好みのデザインを実践してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Webデザインのスキル、概念を身につけたいという方はぜひご覧ください。