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

TechAcademy

2016年11月11日 19:00

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

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

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

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

目次

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

1. 紫色のデザイン

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

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

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

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

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

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

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

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

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

kikk

cancer

Driver

portfolio

Poster Show

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

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

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

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

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

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

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

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

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

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

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

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

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

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

bark

bark

plants

Mt.CubaCenter

simon

Simon Foster

3. 幾何学的なデザイン

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

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

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

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

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

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

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

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

klassen

Sean Klassen

conference

Projekcje

cpbay

Cobay.es

結論

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

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

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

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored

ClickHouse Cloudが実現した広告運用SaaS「ATOM」のデータ基盤革新、パフォーマンスを向上しながら、運用負荷とコストを削減 11月11日 6:20 AIで開発が加速する時代、品質保証はどう変わる? Tricentisが示すAIエージェント活用の実像 11月9日 6:45 悪用までの猶予が「1分」に迫るフロンティアAI時代に開発と本番を貫く脆弱性管理が必要 10月29日 8:30 欧州CRA対応とSBOM運用。AI生成コードのOSS混入問題の対策とは ――スニペット単位で検出する「FossID」「Insignary Clarity」によるSBOM運用 9月16日 6:40 PostgreSQLからTiDBへ、稼働中SaaSで進める段階的DB移行の実践と再設計への展望 9月7日 6:30 機能安全開発におけるGoogleTestの活用を支援!「Parasoft C/C++test CT」で実現する効率化&AI連携 4月14日 6:30 【CNDW2025】Grafanaが明かす「オブザーバビリティの哲学」ー最小限の労力で実用的なインサイトを得るには 1月23日 6:30 【CNDW2025】プロダクト急増に備える基盤刷新 ーウェルスナビがECSからEKSへの移行で得た知見とは 1月15日 6:30 【CNDW2025】250環境を5人で運用、構築時間は30分に ーKINTOテクノロジーズが語るインフラ基盤組織の作り方 2025年12月18日 6:30 新たな自動化で熱視線! AIエージェントの「推論能力」を支える2つのコンポーネントとは? 2025年11月28日 6:30