2017年に注目されたインターフェイスデザインのトレンドを解説
Post on:2018年1月9日
sponsors
2017年はインターフェイスデザインにとって多様性の一年でした。中でもユーザーフレンドリーに注目された年と言えるでしょう。
2018年これからのWebサイト、スマホアプリのデザインで押さえておきたいインターフェイスデザインのトレンドを紹介します。
Review of Popular Interface Design Trends in 2017
by Marina Yalanska
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- 機能的なミニマリズム
- ブルータリズム
- 画像に統合されたタイポグラフィ
- アニメーションするヒーローイメージ
- オリジナルのイラスト
- 枠線がないレイアウト
- さまざまなインターフェースのアニメーション
- UIに優しいブランディング
- 単色のUI
- 進化した暗い背景の使い方
- 文字を読ませるためのスペース
- コントラストを備えた洗練されたフォントの選択
- グリッドの新しい使い方
- ランディングページの多様性
- パララックスの進化
- Webマーケティングのプロモーション動画
- UXをサポートするゲームの手法
- レイアウト要素としてのボックスとカード
- スタイルの一部としてのジオメトリック
- 実験的なカラーパレットと組み合わせ
- ダミーテキストは使用しない
機能的なミニマリズム
数多くのWebサイトとスマホアプリが、さまざまな問題をミニマリズムの原則に基づいてデザインでの解決方法を発展させました。ミニマルを採用したインターフェイスは常に、特定のメッセージを視覚的に注目させることができます。
ミニマリズムにはいくつかの特徴があります。
- 飾り気がないこと
- 明確であること
- 表現力に豊んだビジュアル的な階層
- 大きさと構成による注目度のコントロール
- すべての要素に対する機能性
- 大きな空白スペース
- ディテールへの高い注目度
- 重要なデザイン要素としてのタイポグラフィ
- 機能的ではない装飾要素の排除
リストはもっと続けることはできますが、ミニマリズムを採用したインターフェイスの特徴はユーザーフレンドリーであるということです。効果的に使用すると、インターフェイスの重要な要素にユーザーの視線を集め、直感的で目的を達成するために役立ちます。さらに好まれるUXの要因として、ミニマルのインターフェースは洗練された外観を与え、ユーザーに満足感をもたらします。
ブルータリズム
デジタルデザインにおけるブルータリズムのトレンドは、昨年から大きく変化し、2017年にはより明るく表現されました。標準的で予測可能なデザインテクニックを破ることを狙うスタイルであると言われています。
最近のWebサイトのデザインは洗練されており、複雑なレイアウト、考え抜かれた対称性、審美的な視覚パフォーマンスを備えています。それとは対照的に、ブルータリズムは視覚的なディテールを多く含むのではなく、シンプルで、手を加えていない外観をベースにしており、時にはプレーンなHTMLページにも近いデザインです。
適切なゴールとビジターのために慎重に使用されているので、独創性の高いレベルを特徴とし、デジタル製品にユニークな外観を与えます。ブルータリズムは好みがはっきり分かれますが、気づかれないまま放置されることはありません。
画像に統合されたタイポグラフィ
大胆で、魅力的なタイポグラフィも、Webとスマホの両方のレイアウトで高い存在感をキープしていました。今年は、タイトルのキーワードや見出しを視覚的要素に刻み込むという広く普及したテクニックで新しい息吹を得ました。このアプローチは、レイアウト要素の調和を強化し、タイポグラフィをインターフェイスと融合させることができます。
アニメーションするヒーローイメージ
ヒーローイメージはWebページの上部に配置され、ビジターの注意を引きつける大きな画像です。通常はメインとなるコンテンツの視覚的プレゼンテーションとして使用されます。
このヒーローイメージはサイトのムードを作り出したり、メッセージをビジターに伝える効果があります。Webサイトにとって非常に有益な要素で、重要であると言えます。よくできたヒーローイメージは、以下の目標を満たすことができます。
- ビジターの注意を引きつけます。
- 視覚的にメッセージを伝えます。
- サイトのコンセプトを支援します。
- 必要なテーマや気分・雰囲気を設定します。
- メリットを効果的に提示します。
最近のヒーローイメージはアニメーションでより魅力的になり、パワーアップしました。
オリジナルのイラスト
オリジナルで作成されたイラストは、WebとスマホのUI上でますます多くのスペースを積極的にカバーし、情報をすばやく認識し、オリジナリティの確固たる地位を確立しています。Webやスマホのインターフェイスではマスコット、アイコン、イラストを採用して、ページや画面の外観を向上させ、使いやすさと直感的なナビゲーションを向上させます。
さらに、イメージはUXデザインのアクセシビリティを向上させ、失読症や未就学児などのテキスト認識に問題があるユーザーのサポートにも繋がります。
イラストを使用する最も優れた特徴は、Webサイトやアプリをサポートするテーマイラストです。より複雑で洗練され、スタイリッシュになり、イラストを見ただけで何のサイトなのかが伝わるようになっています。
枠線がないレイアウト
今年はコンテンツを囲む枠線がない大きな背景画像やパターンを使ったWebのインターフェイスでかなり頻繁に見られました。コンテンツの枠線を取り除き、印象的な背景画像を使用することで、ユーザーにはレイアウトが広く感じられます。
さまざまなインターフェースのアニメーション
前年と同様に、2017年もインターフェイスのアニメーションはさまざまな問題を解決しました。アニメーションは単に動きを加えるだけではなく、その動きがインタラクションに作用し、ユーザビリティを大きく改善します。
ユーザーエクスペリエンスはより情報に富んだものになり、インタラクションの要素による操作はより明確になり、わかりやすい方法でユーザーに提供します。今年はさまざまなインターフェース、ボタン、タブ、チャート、プリローダー、スクロールでアニメーションがうまく機能しました。
UIに優しいブランディング
2017年はリブランドの年と言ってもいいかもしれません。大中小企業のプロダクトやブランドの多数が簡略化に向けてロゴを変更しました。トレンドの理由の1つは、より多くの企業がより高いオンラインプレゼンスのために競争するにつれて、ブランド要素の使いやすさとナビゲート性を向上させることでした。
新しいロゴ・リデザインされたロゴは共に、よりUIに優しく、さまざまなデジタルデバイスやレイアウトで効果的に認識されるように作成されました。さらに、アニメ化されたロゴは、シンボルをよりインタラクティブにし、ブランド認知度を高めるトレンドになりました。
単色のUI
サイトやアプリの機能性を高めるためにミニマルに注目が集まった結果、単色のUIも注目されました。このUIのレイアウトはスタイリッシュで、調和的で、邪魔にならないように見えます。デザイナーはインタラクションの重要要素がすぐに見えるようにするため、デザインが退屈しないように多くの工夫が必要です。
進化した暗い背景の使い方
ダークな暗い背景を持つカラーパレットを適用しているWebやスマホのインターフェイスは、その存在を増やしました。特に、ビジュアルに基づくデジタルのプロダクトに適用されることが増えました。
暗い背景は伝統的に優雅と威信に関連しており、画像の認識を深め、低コントラストの環境でも見やすくできます。さらにこのアプローチは、このスタイルが好きな広いターゲットに対する期待に応えることができます。
文字を読ませるためのスペース
暗い背景のトレンドに基づいて、もう一つのトレンドの人気も高まりました。そのトレンドはしばしば議論になるリーダビリティへのアプローチです。
文字を読みやすくするために十分なスペースを確保したり、あるいはボックスを利用して、文字と背景にコントラストを与えます。
コントラストを備えた洗練されたフォントの選択
数多くのフォントがあるため、デザイナーは数多くの選択肢を持っています。今日のタイポグラフィは、コミュニケーションの手段としてだけでなく、そしてユーザーにメッセージを伝えるだけでなく、すべてのデザインコンセプトに不可欠な要素としても存在しています。そのため、デザイナーはフォントの選択と組み合わせに多くの注意を払います。
最近のトレンドとしては、セリフとサンセリフとを組み合わせてコンラストをつくる新しいアプローチが登場しました。この組み合わせは、強力な視覚的階層とインターフェイスの魅力的な美しさのために機能します。
グリッドの新しい使い方
10億を超えるWebサイトが存在する中、デザイナーは魅力的で独創的なものにするためにますますクリエイティブでなければなりません。そのため、グリッドも実験的な新しい使い方が登場してきました。
カスタマイズされたグリッドは、高いレベルの柔軟性と独創性を備えた要素の配置と調和的なレイアウトです。しかしこのようにクリエイティブなものは徹底した試行錯誤が必要です。効果的な結果をだすためには、使いやすさと視覚的な観点から分析し、繰り返しテストを行う必要があります。
ランディングページの多様性
間違いなく、今年のランディングページは発展性と多様性の新たな幕が見えました。ビジネスやソーシャルのプロジェクトでサービスやセールスをはじめとする特別な情報を提供する際に、注意をうながす効果的な方法として使用する傾向があります。
ランディングページは、ネイティブのスマホアプリで宣伝として効果的な方法であることも証明されています。実際のテストを基にユーザーおよび市場調査で、ユーザーフレンドリーな傾向として定義され、ユーザーの時間と労力を節約しながら、必要な情報とインタラクションを明確かつアクセス可能な方法で提供します。ビジネスの観点からも、企業はより効果的なターゲティングで有効なコミュニケーションのための柔軟なツールとしてうまく機能します。
パララックスの進化
スクロールアニメーションはアクセシブルで改善されたツールを使用することで、Webとスマホの両方で幅広く適用されるテクニックのポジションを確保しました。
クリエイティブなパララックスは、スクロールを使いやすくし、人間の目で自然に見えるようにし、基本操作を豊かにします。
Webマーケティングのプロモーション動画
さまざまな種類のプロモーション動画が、スクリーンとページに表示されるようになりました。それらの動画はマーケティングの目標のために効率的に役立ち、ブランド認知度を高めても不思議ではありません。クリエイティブな動画は顧客の注目を集める良い方法で、迅速かつ伝える実績のある方法です。
特に高品質なグラフィックデザインとアニメーションに基づいている場合、動画を介したプレゼンテーションは強く思い出深いものになる傾向があります。ユーザーは日々さまざまな種類の情報に触れており、そのほとんどはプロダクトやサービス、特に新しいものについて多くの時間を費やす準備ができていません。このような状況で動画は魅力的で、コミュニケーションの有益な手段となります。しかし、ロード時間の問題があるため、Webページで快適に表示させるには慎重にテストをする必要があります。
UXをサポートするゲームの手法
今年はエンターテイメントだけでなく、ユーティリティやビジネスのプロダクトについても、さまざまなインターフェースに適用されているゲームの手法（ガンマジェネレーション）への関心が高まっています。ハイテクの世界で「ゲーミング」という言葉は、Webサイトやスマホアプリなどゲーム以外の環境にゲームの仕組みを適用する技術を表します。
ゲームで使われる、挑戦、報酬、ポイント、バッジ、リーダーボードなどは、効果的なユーザーへの動機づけと維持するために役立ちます。
レイアウト要素としてのボックスとカード
2017年のUXデザインのもう一つのトレンドは、Webとスマホのレイアウトでカードとボックスの多様性です。これらは視覚的な階層を設定し、情報の断片をすばやくスキャン可能にするために不可欠な役割を果たしました。さらに、ページとスクリーンの調和と形にも貢献しました。
スタイルの一部としてのジオメトリック
これまでのトレンドをサポートして、今年は多くのインターフェースでジオメトリックの形が登場しました。さまざまなシンプルで複雑な形、パターン、線、曲線が、従来の組み合わせと革新的な組み合わせの両方で数多くのデザインソリューションとして使用されています。
実験的なカラーパレットと組み合わせ
カラープローブのトレンドは人気を失っておらず、新しいオリジナルの組み合わせを生み出しています。カラーはインタフェースにメッセージとムードを素早く認識させるだけでなく、魅力的な外観を作る最も強力な方法の1つです。
効果的なカラーの実験は、純粋にクリエイティブというだけではありません。クリエイティブで驚くべき組み合わせさえ、カラー理論や色彩心理学に基づいています。
ダミーテキストは使用しない
今年はコンテンツの品質とパフォーマンスへの関心が高まり続けています。ユーザーインターフェイス、コンテンツとデザインで相互に関係し、クリエイターはユーザーの注意を喚起するのではなく、お互いをうまくサポートできるようにする必要があります。
そのため、デザインコンセプトの初期の段階でも、よく知られているダミーテキストではなく、実際のコンテンツを好むデザイナーが増えています。コンテンツをつくるデザイナーとクライアントは完成品を想像するのではなく、実際の体験や自然なやりとりに近づきます。
sponsors
