2019年、UIとUXデザインのトレンドを解説！デザインのテクニックやツール、ブラウザ、フォントも進化している

サイト構築 -制作

Post on:2019年1月8日

01. ブラウザの進化

ブラウザは単にインターネットを見るためだけのものではなく、影響を与えるための手段でもあります。最近のブラウザはより高速になり、パワフルで、魅力的です。

ブラウザのベンチマークとパフォーマンステストを見ると、人気が高いブラウザはパフォーマンスを大幅に向上させているることが分かります。
参考: Edge vs. Chrome vs. Firefox: Windows 10 Browser Battle
ストリーミングのコンパイルによる速度の向上は、デザインに大きな時間に影響を与えます。Mozillaは新しいコンパイラが以前のコンパイラを最適化することで、10-15倍速いと報告しています。
参考: Firefox 58 gets speed boost with streaming compilation
モダンブラウザはすべてWebGL 2をサポートしています。これにより、まったく新しいレベルの3Dテクスチャ、オブジェクトのレンダリング、フラグメント深度、およびVAO(Vertex Array Object)が可能になります。
参考: WebGL: 2D and 3D graphics for the web

Webとモバイルのブラウザの機能は、デザインと現実のギャップを埋めるものです。

evolutionoftheweb.comは2012年に閉鎖されましたが、この図はよく出来ています。

ブラウザにおけるすべての進歩は業界に大きな影響を与えることなく、それぞれの価値を高めています。Web上ではさまざまな多くのことが実装・実験されているため、ブラウザ開発者がすべてに対応できる解決方法を考え出して対応するのは困難です。

また、ブラウザは素晴らしいかもしれませんが、貧弱なWebサイトにアクセスすると、悪いUXに汚染されることになります。Webブラウザの可能性を広げるためには、より良いデザインを選択する必要があります。

ほとんどのWebサイトでは、ブラウザの機能を活かせていません。

02. 目的があるアニメーション

ブラウザの新しい機能により、アニメーションへの扉が開かれました。要素を単に動かすだけでなく、正当なデザインの機会でもあります。モーションデザインはデザイン面でも多くの知識を必要としますが、心理学や生物学の知識も必要になります。

2019年には、これらの分野の知識がさらに必要になるでしょう。デザインにおけるアニメーションの主な特徴として、複雑さが注目されています。モーションとトランジションは目的をもって使用すると、多くの情報を伝えることができます。

スクリーンはかつては無人の土地でした。今それはあなたのホームグラウンドです。

アーティストのプレビューページ by Zhenya Rynzhuk

ビジターをより深いレベルに誘うということは、インタラクションのひとつ一つに目的と役割を持たせることを意味します。そして、デザイナーはこの機会をつかんでいます。

モーションデザインも同様に、見せるだけではありません。今ではブランディングの一部となり、ロゴは象徴です。これらを魅力的にするのは、わたし達の想像力と経験です。なぜその想像力を使用して、正しい方向に向いていることを確認しないのですか？

Fuck by Eduard Mykhailov

ロゴが何から成り立っているのか、それがどのように感じられるのか、味がするのか、匂いがするのか、そして音が出るのか、考える時です。

モーションは光源や配置や材質よりも多くを語ります。モーションはビジターに物語を伝えることができます。もしあなたがロゴのモーションに特別な物語を加えることができるなら、それを目指してくださいと私は言います。

ロゴのアニメーション by Zlatko Kelemenić

もちろん、アニメーションを含むすべてにコンテキストがあります。あなたがデザイナーとして見るものは、ビジターがビジターとして見るものではありません。感情的な矛盾があるならば、常に中立な視点に立ってください。

無理矢理なアニメーションに意味はありません。

03. インターフェースの3Dとディープフラット

リアルの映像と画像の3DレンダリングとCGによる拡張は、しばらく前から存在していました。スピードとパフォーマンス、そしてアクセシビリティを理由に、デザイナーはUIに複雑な3Dを避けるという歴史を持っています。しかし、最近のブラウザはこれらの贅沢を手頃な機能に変えました。複雑なVFXやビジュアルエフェクトが映画のようなシーンをWebサイトで利用できます。

3Dのインターフェースは、リアルとデジタルのアニメーションを融合させる。

このトレンドはあまりビジュアル的ではない複雑なプロセスを持つプロダクトに特に役立ちます。3Dのビジュアルを使用することで、あらゆる技術的プロセスを活用し、より深いレベルで理解を作り出すことができます。

Baker Hughes Digital by Sanu Sagar

3Dが映画やゲームで機能するのは、画像が表示されるまでの時間が短いのが理由です。ビジターは見た目の印象を求めています。意図的なアニメーションと組み合わせると、3Dは強力なデザインツールになります。

スマホでも新しい強力なチップが搭載され、3Dオブジェクトをレンダリングするだけでなく、それらをインタフェースで使用することを可能にしました。小さなスクリーンでも完璧に機能します。

Cards 3D transition by Gleb Kuznetsov

3D flip menu by Minh Pham

フラットUIデザインは5年以上にわたってトレンドでしたが、その間大きな変化はありませんでした。しかし最近では、基本的なアイデアは変えずにフラットデザインに奥行きと次元を追加する変化を見かけます。なぜ奥行きが必要なのかは、フラットデザインが存在することになった理由でもあります。すべてを理解するためには象徴が必要です。フラットはコアを象徴しています。

ディープフラットは、新しいフラット。

リアルな3DとCGの組み合わせは、インタラクティブできる生き物のようなオブジェクトに対するビジターの反応を明らかにしました。フラットデザインも同様に、未だ知られていない方法で行うことができます。それは疑似3Dと呼ばれます。フラットなレイヤーが積み重なり、立体的な感触を作り出します。今までのフラットデザインに追加する要素は、シャドウと光源、そして反射です。

ARTA / Art Gallery by Mike | Creative Mints

また、PrincipleやAfter Effectsなどのデザインツールを使用して3Dをエミュレートするモーションパターンを作成するという、疑似3Dのトレンドもあります。

Astronaut by Markus Magnusson

2019年には新しい方法で、スキューモフィズムの復活を見るかもしれません。ディープフラットになると、その流れになり得ます。スキューモフィズムの写実的な見た目をタップしながら、フラットな象徴を維持させるトレンドです。

3DのUIは、シンプルと洗練に向かっています。わたし達を感動させるにはより技術的な努力が必要ですが、ウィンドウから複雑さを取り除き、素晴らしいコンセプトにするには、同じぐらいの勇気が必要です。しかし、その複雑なインターフェースに意味がない場合は、すべての努力が無駄になります。

わたし達は印象的なイメージを用意できます。それを意味あるものにするために、より深い問題に取り組む時がきました。どうすれば実現できますか？

04. 超現実的（シュール）なデザイン

より優れた技術によってもたらされる3Dやモーションデザインはすべて、ビジターに感情的なインパクトを与えないのであれば意味がありません。皮肉なことに最大のインパクトを与えるためには、複雑さは必要ありません。必要なのは、そこから自然に生まれる魅力です。

バランスをとるためには、常識以外の何かが必要です。それは遊び心です。

私が最近見かけたイラストのいくつかは、遊び心溢れるものでした。

How to stay scrappy by Justin Tran for Dropbox Design

Shop Small by Joe Montefusco for Mailchimp

これらの漫画的なイラストのスタイルには1つの目的があります、見た目のフレッシュさを維持することです。2019年には、その先駆的で超現実的なデザインがもっと見られると期待しています。

もちろん、すべてのプロダクトや企業がこういったデザインに適しているわけではありません。ビジターの層が広くなればなるほど、デザインはよりニュートラルになります。例えこれが確立されたブランドのために機能するかもしれないとしても、より小さい会社やあまり有名ではないプロダクトは注目すべきでしょう。

最初に支持者を作り、彼らを連れ出してください。

05. グラデーション 2.0 -燃えるようなカラーと暗闇

最近のスクリーンは、カラーの素晴らしい表現を備えています。スマホのデフォルトの壁紙を見ると、それがよく分かります。デザイナーは、UIのアクセシビリティと印象的なグラデーションの境界を探っています。

グラデーションはもはや注目に値するものではなく、現在ではそれらはインターフェースに奥行きと次元をもたらしています。

Grabient 2.0 by Eddie Lobanovskiy

Gradient 2.0は繊細で、シンプルです。矛盾するカラーは使用しません。明確な光源があり、光源は奥行きをもたらすために形と整列します。

鮮やかな色はどこにもありません。カラーとレイヤーの組み合わせが増えるだけです。実際に、モノクロームのパレットでも、奥行きと次元によってある種のビジュアルを表現することができます。

Valley Illustration by J.HUA for Tunan

燃えるようなカラーは、明瞭さを強調します。
下記のアプリを見て、信頼感を持ちませんか？

crypto app by uixNinja

鮮やかなカラーと意味のあるグラデーションが暗い背景の中で際立っていると、さらにクールです。ダークテーマはさらに良くなります。ダークテーマが機能する理由を理解するために人類学的アプローチを取りました。ダークUIのアクセシビリティと眩しいカラーとのバランスを見つけることができたデザイナーは2019年にトップになるでしょう。

ダークを使用したディープフラット・カラー・3D。

Dashboard by uixNinja

しかしアクセシビリティが、グラデーション・カラー・ダークテーマにおける唯一の問題ではありません。明るいカラーは伝統的にその要素を強調するために使用されます。すべてがカラーだったら、あなたはどのように強調しますか？すべてのビジターがOLEDのスクリーンを使用しているわけではありません。当然、グラデーションが損なわれることがあります。コントラストが大きすぎると、ユーザーの注目を妨げる可能性があります。また、ダークテーマは晴れた日の屋外では機能しません。しかし、実際にはそれは良いことかもしれません。

06. 可変フォント

書体は伝統的に、調整可能な限られたパラメータのセットを持つ静的な存在として認識されています。そのため、デザイナーやライターは文字のx-heightやストロークや幅で読みやすさを考慮する必要がありました。

デザインで複数の書体を必要とする時は、デザイナーは使用されるフォントのすべてのスタイルのファイルが必要になります。すべてのスタイルを揃えない限り、タイポグラフィで豊かな表現を約束することができないでしょう。しかし、可変フォントであれば、たった1つのファイルを必要するだけです。

可変フォントは、デザインスペースのあらゆる部分をカバーできます。

Marvin Visions

さらに、可変フォントはレスポンシブデザインとローカライズにも適しています。小さなスクリーンにテキストを収めることに関する頭を悩ませなければならなかった場所でも活躍します。

VOTE by Josh Rinard

Webフォントがスマホのレイアウトに導入された時、柔軟性が十分でないと、読みやすさの問題やデザイン自体の不整合が生じました。可変フォントはごく最近のもので、Webフォントよりも速くフォントを配信することができ、デザインプロセスを合理化するのに役立ちます。

可変フォントはまだ始まったばかりです。芸術的なオプションは現在のところ、まだ探究されていません。

Typography.Guru

07. Figma

ここで私はあなたに質問します。
デザイナーはコードを書く必要がありますか？
そして、デベロッパーはUXの知識が必要ですか？

これらの要点はシンプルです、デザインの実装から苦痛と矛盾を避けることです。目的ではなく、そこにたどり着く方法についてです。

コードを学ぶことは論理的なオプションです。もしあなたがあなた自身のデザインを実装するのであるならば、何も問題はないでしょう。しかし、デザインやコードを専門にしている人達の必要な知識の量は非常に優れています。あなたは同じことをできますか？そうではない人には、他に選択肢があるはずです。

目的はユニバーサルデザイナーを育成することではありません。喜びをもって、より良いプロダクトを作ることです。

この目標を達成するための1つの方法は、より良いツールを使用することです。Figmaは、そのツールの1つです。今までデザイナーは、OSや統合やプラグインやストレージや同期やコラボレーションなどすべてを一つにまとめる方法を考慮する必要がありました。これらのワークフローを発明した人は、あらゆる点で尊敬に値します。しかし、わたし達はストレスを軽減したいのです。

Totally switched to Figma by Alexey Kolpikov

Figmaはわたし達による、わたし達のためのデザインツールです。多くの便利な機能が用意されています。

FigmaはSketchを破壊しました。

Figmaは、SketchとAdobe XDでできることがすべてできますが、それ以上に優れています。さらに重要なことは、Figmaでは実装されるものを構築することを目的としています。すべてのFigmaコンポーネントはAPIを介してReactコンポーネントに変換され、フロントエンドに実装することができます。コスト、パフォーマンス、コラボレーション、共有、埋め込み、サポートなど、あらゆる点で優れています。
しかも、Figmaはまだ発展途上で、2019年にはまだまだ進化します。

08. 音声UI

デザインは視覚的、または視覚的に機能する必要がない時代がやってきました。音声でコントロールを構築することは、自然言語をデザインすることを意味します。

音声UIは洗練されているのと同じくらい官能的です。

音声UIは素晴らしいUIが無いコンセプトを実現しています。そのプロセスは内部的なもので、実際のデザインよりも、ライティングや文脈の構築、そしてデータの合成に関係しています。それでも、デザイナーは音声UIを表現する方法を見つけることに夢中になっています。主に、印象的なインターフェースとアニメーションを通してもたらされます。

Organic Artificial Intelligence design by Gleb Kuznetsov

ほとんどの場合、音声インターフェイスとは何の共通点もありませんが、ユーザーにコントールがないことを伝え、その必要がないことを伝えます。

2019年には、より多くのデザイナーがデザインのわかりやすい見た目で意味のある経験に移行するにつれて、音声UIを見ることが期待できます。

音声UIに関する最大の課題は人間と機械の対話ではなく、人間と人間の対話で、より賢くなければならない技術が必要です。わたし達は国際社会に住んでおり、多くの言語でお互いを理解するのに苦労しています。音声によってコントールされる電話や自動車や家電は、単に溝を広げるだけかもしれません。

デザイナーとして、わたし達は常に人々の幸福を最優先事項として考えるべきです。例え、美しくデザインされたものでも、他の人を犠牲にして一部の人に役立つのであれば、その技術に取り組まれなければなりません。

09. UXにおけるライティングと編集

去年、デザイナーは書体が持つ言葉の意味に注意を払い始めました。そして、わたし達はデザインにおけるライティングの役割を定義しました。

あなたのビジネスがあなたのビジターと対話する方法を管理しなければなりません。

以前は、傲慢な言葉と技術用語が混在していました。ビジターと一緒に使うべき言葉は、単純で説得力のある言葉遣いを使用するべきです。

UXにおけるライティングは、2つのシンプルな原則に基づいています。敬意を表することと役立つことです。簡潔にすることでビジターの時間を大切にし、尊重することを意味します。言葉に時間を費やすのはビジターではなく、あなたです。また、明確にすることでビジターにとって有用となり、誤って理解されるのを防止するという二重の役割があります。表現力があるということは、真実であるということで、欠陥を隠していないことを意味します。常にビジターを手助けすることに注目するだけで十分です、誇張せず、SEOもせず、決してマーケティングの常套句も使用しないでください。

ビジターに敬意を表し、有用であることを受け入れた途端、UXにおけるライティングは簡単になります。

ビジターは誇張された言葉は望みません。あなたが手を貸すことができるかどうか知ることを望んでいます。あなたが提供できるものだけを話してください。

UXにおけるライティングと編集の相違は、帯域幅です。UXライターはユーザー向けのテキストを作成します。UX編集者は、コピーを分析・変形し、曲げたりひねったりして、テキストに変換します。これを学ぶには経験と観察、そしてユーザーへの思いやりです。

2019年、すべての主要なキャンペーンはUXの編集を必要とします。

シンプルにすることは、レベルを下げることではありません。そして、説得力があることが納得に変わります。

プロダクトのデザインには、まだクリエイティブなライティングの場所があります。しかし、プロダクトがユーザーと出会う場所ではありません。例えば、ナイキやボーイング社は、将来を予言するかのようにUXライターと契約をしています。