2017年に注目すべき20のWebデザインのトレンド

もう1年が経ち、デザイナーは未来を見据えています。たくさんの 有望なデザイントレンド 昨年、私は2016年のトップデザイントレンドを取り上げました。 たくさんの変更 それ以来.

だから、この記事のために私は選んだ トップ20のトレンド 私が気づいたこと 2017年に勢いを増している. これらのデザイントレンド どのWebサイトにも適用できます, そのため、2017年以降に移行する際は、これらのテクニックに注意してください。.

1. “に注目” バッジ

スタートアップ、ブログ、SaaSプロジェクト、そして中小企業でさえも “で紹介されたように” バッジ 彼らのウェブサイトで。これらのバッジはよく 主流ブログの記事へのリンク HuffPo、Forbes、CNN、Foxなどのニュース配信先.

目標は ウェブサイトを検証する そして 信頼を築く 新しい訪問者と。それがされていることを彼らが見ることができるとき誰かがウェブサイトを信頼することはより簡単です 権威ある出版物で言及されている.

実際には多くのトップブログ 露出を感謝, だからそれは本当に関係者全員に役立ちます。これらの大規模サイト 自分のロゴをオンラインで公開する しかし、周りをグーグルするだけで、透明なPNGやSVGを見つけることもできます。.

またそれはあなたにお勧めです 元の記事に戻る あなたのサイトに言及しています。これはそれを証明する あなたは本当に言及されました サイト上で、あなたは単に主張を補うだけではありません.

2.太字オールキャップナビリンク

私は見た 何十ものなめらかなナビゲーションメニュー すべて同じデザインに頼っています。これらのナビゲーションリンク フォントとサイズが異なります しかし彼らは通常 似たような機能を持っている, といった：

• すべて大文字
• 太字
• 等間隔
• 右隅に揃え

Zazzleのホームページはその好例です。しかし、あなたはこれを見つけることができます 多くのスタートアップWebサイトで だから リンクを共有するためのきれいな方法 読みやすく閲覧しやすい.

私は主にこの傾向を関連付けます 企業やハイテクスタートアップと しかしそれはブログでも流行することができます.

次回にはこの傾向が見られることに注意してください。そして、私はそれが2017年までよく成長し続けると期待しています.

3.雑誌風ブログ

2000年代初頭、ブログはそのようなニッチな概念でした。あなたが2003年にブログを運営したならば、それはかわいい趣味と考えられました。 10年以上でその傾向は根本的に変化しました。今ブログはすることができます フルタイムの収入を提供する, そして彼らは始めている デジタル雑誌のように見える.

TechCrunchが2006年に発売された当初のデザインを振り返ってみましょう。一般的なWordPressブログのように見えます。?

今、2017年のTechcrunchの現在のホームページを見てください。

それだけではありません 雑誌のように見える, また 一つのような機能. TechCrunchは毎日数十（数百ではないにしても）の新しい投稿を公開しています。彼らはスタートアップのニュースのための＃1のゴートゥーソースです。.

雑誌スタイルのデザイントレンドは大きな違いを生む。ホームページは 大特集ストーリーセクション, 各投稿 独自のサムネイルがあります, そして記事のページ 見出しの周りの中央.

考えてみると、TechCrunchはそれほど変わっていない。まだ “ただのブログ”. しかし 雑誌のようにデザインされ管理されています, そしてこれはすべての違いを生む.

4.ビデオの背景

自動再生サウンドは、おそらくWeb上で最も迷惑な傾向です。しかし驚くべきことに, 自動再生ビデオ（音声なし） 急速に成長している傾向です。あなたはビデオの背景がある何十ものビジネスサイトでこれを見つけることができます 画面全体を引き継ぐ.

それが適切に適用されるとき、私は本当にこのテクニックが好きです。限り ビデオはサイトに関連しています そして コンテンツを妨げない, 私はそれがあなたのヘッダーで使うのがクールな効果だと思います.

5.ゴーストボタン

として ミニマリズムはさらにフィード Webデザインに関しては、多くの新しいトレンドが生まれています。そのような傾向の1つが ゴーストボタンの台頭 内側の塗りつぶしはありませんが、外側の枠線はあります.

ほとんどの場合、これらのボタン 他との対比 注意を引くために。これはInstantmojoのホームページで緑色の登録ボタンで見ることができます。 すぐそば ライブデモにリンクしているゴーストボタン.

他のサイトが採用している 純粋にゴーストデザインのスタイル サイト全体のボタンに。ここでの素晴らしい例は新しいBootstrapレイアウトです。.

ゴーストボタンは ミニマリズムに傾く. すべてのWebサイトに適しているわけではないかもしれませんが、年々使用が増えることがわかります。.

モーダルウィンドウオプトイン

モーダルウィンドウは非常に迷惑です、そして私はどのユーザーもそれらを望んでいるとは想像できません。しかしながら 彼らは登録を増やすことが証明されています, そしてマーケティング担当者はうまくいくテクニックを無視できない.

これが私がモーダルオプトインウィンドウになると思う理由です 登り続ける 2017年に.

それらは私のお気に入りのものではない、そして私は私のウェブサイトにそれらを追加することは決してない。しかし、目標がサインアップを増やすことであれば、モーダルウィンドウは物事を進めるための確実な方法です。.

新しいプラグインも可能 ターゲット出口の意図 どっち モーダルを誘発する ユーザーがサイトを離れようとするたびに。他のモーダルは、x秒後に表示されるか、ユーザーが十分にスクロールダウンしたときに開くように設定されています。.

どのようにモーダルがトリガーされるのか、それらがどのようにデザインされているのか、またはあなたがそれらについてどう感じるのかにかかわらず、私はそれらが長期にわたって存在すると思う.

イラスト＆ベクターアート

SketchやAffinity Designerなどの新しいベクターデザインプログラムでは、ウェブ上に侵入するイラストレーターの新しい波があります。グラフィックデザインとインターフェースデザインは、これまでになく多くの学際的デザイナーと常に融合しています。.

これは私たちが見ているということです より多くのカスタムアイコン そして フルページのイラスト 近い将来に.

多くのイラストレーターは実践的なアーティストであるので、私たちは見るでしょう フルページの背景 コンセプトアートのように詳細にレンダリングされたデジタルペイントソフトウェアで作られた.

8.スクロールバーの修正

固定デザインの最初の波 ナビゲーションバーに焦点を当てて. これらは、特に固定ナビゲーションバーが使用されるレスポンシブデザインではあまりにも一般的です。 ネイティブモバイルアプリケーションの感覚を再現します.

しかし、2017年には、もう1つスティッキーな要素が見られると期待しています-粘着性のあるサイドバー.

ほとんどすべての主要ブログがこの種のスティッキーサイドバーを使用しています。それ コンテンツを表示し続けます 常に、ユーザーがそうする可能性を高めます。 サイドバーのコンテンツとやり取りする.

それに加えて、無料のjQueryプラグインがたくさんあります。 粘着性のあるサイドバー効果を再現する. どのWebサイトでもこれを設定するのがこれまでになく簡単になりました.

9.ページ内目次

最近のケーススタディでは、 longformの内容はshortformよりも優れています ランキングとユーザー保持の質の両方で。いくつかの質問にはすばやく答えられるので、これは必ずしも正しくない.

しかし、Web上ではるかに長い形式のコンテンツで、見るのは自然です。 記事に追加された目次. あなたはこれを長いレビューサイトやリストされたアイテムに分類される記事で見るでしょう.

目次を追加することができます ユーザーエクスペリエンスを向上させる そして助けて 読みを分割する 小さな塊に目次もできます あなたのサイトがより良くランク付けするのを手伝ってください! グーグルがあなたのページを価値あると思ったら ジャンプリンクを取得 検索結果に.

現在、ToCがかなり少ないことは事実です。しかし、この傾向は2017年以降、そしてその後何年にも及ぶと予想されます。.

10.明るくカラフルなデザイン

この傾向がミニマリズムから生じたのか、それともGoogleのマテリアルデザインに対する反応として生じたのかはわかりません。しかし、私は何十ものウェブサイトに出会いました。 明るいパステルカラーを他の鮮やかな色合いと混ぜ合わせた 非常に空想的な外観を作成する.

Rentberryのホームページはまた使用するすばらしい例です グラデーションのトン。そしてそれは前述のものさえ持っています “に注目” バッジが下にあります。 1つのサイトで2つの傾向.

色がわかります ページ全体に浸透しない, そして彼らは白とグレーの他の色合いでミュートされています.

私はこれらの十分を見ました 鮮やかな配色 彼らが増加していると信じるために.

11.スクロールアニメーション

Webデザイナーは、スクロールジャッキングとそれがどれほどひどいかについて知っています。しかし、それは私がタイトルで意味したことではありません “スクロールアニメーション”. 私は今多くのサイトを見ました コンテンツをビューにアニメートする ページの特定のセクションを超えてスクロールしたとき.

この傾向は主に スタートアップのホームページとSaaS企業に限定 それは彼らのデザインにいくつかのピザが欲しい.

それが特に有用な傾向かどうかはわかりません。確かに 目をつかむ しかし私はそれが美学をはるかに超えて提供するとは思わない。それでも、それは急速に広がっているように見える傾向であり、 控えめに使用 それは本当にきちんとすることができます.

12.シングルページアプリ（SPA）

シングルページアプリケーションはWebサイトです 純粋にAjax呼び出しで構築された. JavaScript サーバーからコンテンツを取得します そして 動的にロードする, そうページ 更新しない.

一般的な例はGmailやFacebookのようなサイトです。しかしと もっとJSテクノロジー, 私は、ますます多くのSPAが開発されていることに気付いています。一体、CodePenでさえSPAと見なすことができます.

React＆Aureliaなどの強力なフロントエンドライブラリを使用すると、2017年にゼロからSPAを作成するのがさらに簡単になります。.

13.切り替え可能な検索バー

その検索フィールドだった 常に視野に入っていた サイドバーまたはナビゲーション内のWebページのどこかにあります。しかし最近、私はもっとたくさんの検索フィールドがあることに気づいた。 デフォルトで非表示, とする必要があります 表示に切り替えた.

確かに便利な傾向 ページのスペースを節約する まだ 検索機能をアクセス可能にする. 新しいデザインのどこに検索フォームを配置するのかわからない場合は、ナビゲーションの虫眼鏡アイコンにリンクされたトグルフィールドを使用することを検討してください。.

14.メッセージをブロックする

という事実を否定することはできません。 広告ブロックが増加しています. 唯一の問題は、出版社がこの傾向にどう対処するかということです。いくつかのサイトは丁寧に 広告スペースにメッセージを追加する Time.comが好きです。 Hongkiatでは、あなたは気づくでしょう 隙間を埋めるための内部広告 そのサイトへのリンク.

私が増加していると思う一つの深刻な傾向は コンテンツブロックをadblock. これは “広告ブロッカーをブロックする”. この機能は、Business InsiderやForbesなど、多くの大規模サイトですでに導入されています。残念なことに、これはユーザーと出版社の両方に害を与えます、そしてそれはすべて低品質の広告技術から生じています.

結局のところ、それはあなたが誰を責めているか、あなたが広告をブロックしている議論のどこに立っているかは問題ではありません。多くの人々がadblockプラグインをインストールしています、そして私は期待しています もっとプッシュする出版社.

15.純粋なSVGのアイコン

SVGグラフィック すでにWebに浸透していますが、日に日に大きくなっています。そして2017年は SVGにとって大きな年 ウェブ上で.

あなたは数千人を見つけることができます 無料のSVGアイコンセット あなたが検索する方法を知っていればFlaticonのようなサイトで。でもできます SVGをHTMLにコーディングする, 例えばCodePenでこの例を利用することによって.

つまり、デザイナーにはSVGを使う方法があり、開発者にもSVGを使う方法があります。. 現代のブラウザサポートはよさそうです 全面的なので、互換性に問題はありません。必要なのは、設計者だけで十分です。 SVGの力を理解する そしてそれらを使い始める!

16.アドビXD

アドビが出した Adobe XDのフルベータ版 2016年に、そしてそれはその後急速に成長しました。それは現在 MacとWindowsの両方をサポート, そしてそれは テスト段階 完全にロールアウトされる前.

あなたはSketchを追い越すどんなプログラムでも構いませんが、Adobeは何らかの理由で創造的な仕事をする主要なソフトウェア会社です。 Adobeがそうである間、Plus SketchはまだMacだけです みんなを応援しよう.

来年はAdobe XDについてもっと詳しく読む予定です。それはのために行くソフトウェアになるかもしれません UIモックアップの設計-だから私たちはついにPhotoshopを写真処理ツールとして使うことができます（意図したとおり）.

新しいソフトウェアの台頭により、何十もの チュートリアルと景品のGUIキット 同様に。あなたは一緒にDribbbleでたくさんのAdobe XD景品を見つけることができます 2つの新しいXDに焦点を当てた景品サイト DesignmineとXDの達人.

17.その他のハンバーガーメニュー

それを愛するか、それを憎む、 ハンバーガーはここにいます. そのユーザビリティ研究はたくさんあります ビューから隠されているメニューに対して議論する. しかし、小さな画面と非常に多くの選択肢しかないため、今のところこれ以上の優れた選択肢はありません。.

ハンバーガーのアイコンがゆっくり 認識可能なシンボルになる ナビゲーションメニュー用。虫眼鏡のアイコンが意味するのと同じように “サーチ”, 3バーハンバーガーのアイコンはまもなくと同義になります “メニュー”.

これはほとんどの技術に精通した個人にはすでに当てはまります。しかし、年が経つにつれて、より多くの人々がスマートフォンを手に入れ、モバイルWebの閲覧を始めます。そして彼らは学んでいます そのハンバーガーをナビゲーションメニューに関連付ける 見えないところで.

18.製品機能アイコン

この傾向についてTreehouseで書きましたが、最近は触れていません。そして2017年に入ると、この傾向は 巨大になる. それはおそらく最も一般的な方法です ホームページで製品の機能を共有する.

で始まる 機能のリストを作る あなたの製品のために。製品は、SaaSプログラムからWordPressテーマ、さらには物理的なアイテムまで、何でも構いません。.

それなら デザインカスタムアイコン または アイコンセットを探す これらの機能を表すために。それは最高です 一般的な機能を避ける といった “信頼性のある” または “速い” ほとんどの人がこれを期待しているから.

代わりに、機能を一覧表示する それは実際には重要です. それが優れたWPテーマであれば、それが反応するリスト、それが付属するウィジェットの数、またはメニューがどのように機能するか.

これらの機能アイコン ビジュアルのように働く 助けるために 各機能を販売する. テキストだけです 使いにくい しかしビジュアルははるかに簡単です 一目でわかる.

19.以上のCTA

行動を促す 伝統的に配置されている ウェブサイト中. しかし訪問者と ウェブサイトに費やす時間を減らす, 強いCTAを持つことが重要です 折り目の真上.

これらの行動を促す行為は、ボタン、オプトインフォーム、その他の 人々に行動を起こさせる 登録やブログ記事の閲覧など.

CTAの設計方法や変換用に最適化する方法を説明することはできません。しかし、私はこの傾向がこれらのCTAを配置しているように思われると言えます 折り目の上、見やすい すべての訪問者が見ること.

20.小さいコンテンツ領域

モニターは非常に大きくなったため、ほとんどのWebサイトでは 最大幅を設定. たった700pxの幅と比較して、それらが2000pxの幅であるときに文を読むことははるかに困難です。.

小さいコンテンツは 消費しやすい, そして最終的に コンテンツの多いWebサイトでのより良い経験.

私はより多くのデザイナーがこれを実現していると思います コンテンツ領域のサイズを縮小する. 私は750pxの最大幅を好みます、しかしあなたは600px以下のように小さく行くことができます.

短い段落 と 少ない文 そして 小さなコンテンツ領域 常に 読みやすさを向上させる. ニューヨークタイムズ紙などの主要な出版物は、それぞれ独自の構造上のガイドラインと異なる場合があります。しかし、単純なブログやビジネスサイトでは、トレンドは 小さな段落とコンテンツ領域を含む、より長いコンテンツ.

まとめ

私がこの記事で取り上げることができなかった他の多くの傾向があります、しかし、私はこれらの20が最も面白いと思います。 2017年に進むにつれて、どのトレンドが爆発的で、どのトレンドが急増していないのかが明らかになります。.

そして、今後のデザイントレンドについて他のアイデアや提案があれば、下にコメントを残してください。.