必ず知っておきたい！11月のWebデザインにおける3つのトレンド
デザイナーなら必ず知っておきたい11月のWebデザインのトレンドについて紹介しています。普段はデザインしない、今まで実践したことがないというモノかもしれませんが、事例を知ることで広い視野を持ってデザインすることが可能になるはずです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。
本記事は、10年以上フリーランスのライターとして活躍しているCarrie Cousins氏によって投稿されました。
あなたのデザインの殻を破り、何か大胆なことにチャレンジしましょう。
大胆さ自体大きなテーマですが、11月のユーザーの目を惹き付ける3つのトレンドを紹介したいと思います。以下が11月のデザイントレンドです。
目次
1. 紫色のデザイン
いつだって紫色はあまり使われません。
ある特定のシチュエーションで使いにくかったり、この色自体に大きな意味があったりしてデザイナーが避けるからです。
特定のブランドの色としてもあまり使われませんし、いろいろな色と干渉してしまいます。
しかしもうそれはただの言い訳です。際立った紫色があちこちに見られ、感心するはずです。
モノトーンカラーシステム
- 無駄な要素のないシンプルなデザイン
- 写真の利用を最小限にする
- 宇宙がテーマ(紫にはよくある選択肢です)
- 暗めの紫(パステルカラーよりはむしろ)
デザイナーが使う特に暗く、深い色に顕著なのですが、紫自体が目立つ色なのでシンプルなフレームワークが最適です。
また、明るいタイポグラフィと相性がよく、女性的な感じは受けません。
トレンドとしては明るい紫を選んで、力強さを感じるデザインパターンの素材と組み合わせるといいです。
2. あえて大きくしたボタン
すべてのデザインの中でボタンは一番重要かもしれません。
フォーム提出などのステップアクションを助け、ボタンによってユーザーは次のページに導かれます。
アクションの最終段階であり、ユーザーとインターフェースの間で動作を完結させます。
近頃、ボタンのデザインは進化してきましたが、デザインの中に大きなボタンを取り込むという手法が大きなトレンドといえるでしょう。 (ゴーストボタンという以前のトレンドの全く逆の手法と呼べますね。)
大きなボタンはユーザーにとって楽しく、一種のトリックでもあります。なぜかと言うと、ユーザーはどれがボタンでどれがボタンでないか知る必要があるからです。
他のデザイン要素のように消すことはできません。
ボタンと認識させるのにいい方法として「ホバーアニメーション」が挙げられます。以下では、3つの事例紹介しています。どのデザインもユニークなアプローチをとっていて参考になるでしょう。
1. bark：ヘッドラインに大きなイメージが映し出され、サブヘッダーのホバーの動きはクリックできることを示しています。
2. Mt.CubaCenter：植物の見分け方のサイトでホバーボタンが画面から消えて色が同化し、サイズも変わります。
アニメーションは見逃し難く、クリックしたくなるような描写になっています。
このデザインには2種類のボタンがあります。下にあるようにカードスタイルの画像に大きな紫の丸ボタンがあります。
丸いボタンの何がいいのかというと、「ボタンっぽさ」を感じるのです。
3. Simon Foster：このポートフォリオサイトは面白くて、ただ単純にボタンとして使っているわけではありません。それぞれのポートフォリオが関わったプロジェクトであり、ボタンでもあるのです。
シンプルな黒白のデザインがマウスのホバーによって急に鮮やかな色が出現するので、ユーザーはボタンをクリックしたくなるでしょう。
3. 幾何学的なデザイン
幾何学模様をデザインに使う方法はたくさんあります。ナビゲーション、ボタン、バックグラウンドのパターンとして形を使えるでしょう。
硬く鋭い直線状の幾何学模様は、ユーザーに大きなインパクトを与えます。
最初に紹介しているSean Klassenのポートフォリオサイトは、花を使うことによってソフトな印象を与え、幾何学的な描写にすることでハードな印象も同時に感じさせています。ソフトとハードを同時に見せることでユーザーの目を惹くことができるのです。
これらすべての要素を結びつけているのが色で、バラの緩やかな曲線と急な角度の三角形がうまく折り合っています。
Webサイトをデザインして、ビジュアルインフォメーションを欠いてしまっているとき、幾何学模様を織り交ぜることで、無の状態から何かを作り出すことができます。
最後に、一般的な要素を幾何学模様に落とし込むことでもっと面白いビジュアルにできます。
例えば下にあるCobay.esのマウスは、もしこの白いネズミが普通のデザインだったらあまり興味を惹けません。
ユーザーが見る画面では、幾何学模様のデザインとは違って、アニメーションされた動く形が視覚的に面白いのです。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
結論
今回紹介した大胆なデザインを試してみてはいかがでしょうか。
際立った色、大きなボタンと楽しい幾何学模様は、たとえそれ単体で使ったとしても使えるテクニックです。ぜひ好みのデザインを実践してみてください。
他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Webデザインのスキル、概念を身につけたいという方はぜひご覧ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
