Yoriyorkデザインチームです。
UIとは何だろう
「UIが使いにくい」という言葉を聞いたことがあるのではないでしょうか？
ユーザーインターフェース（User Interface）の略語です。
インターフェースは「接点」「境界面」を示す言葉であり、PCとユーザー（人間）の仲介を行うのが「UI」となります。
最初に述べた「UIが使いにくい」というのは「操作が分かりづらい」「使いにくい」という意味合いになります。
webデザインにおいてUIとは、訪問したユーザーに分かりやすい、ストレスなく目的を達成出来るように設計したデザインを示します。
流行の変遷が激しいWEB業界においてはUIにもトレンドがあります。
新しい見せ方の提案以外にも、一周して再び注目を集め始めたデザインもあります。
今回は近年流行のUIデザインを参考サイトと共に紹介していきます。
タイポグラフィの活用
近年再び注目を集めているのがタイポグラフィ（文字）を活かしたデザインです。
見出しの文字サイズは大胆に大きく、かつweight（文字の太さ）を調整することで重要な文章を読ませています。特別なあしらいがなくても文字のジャンプ率（本文の文字サイズに対する見出しの文字サイズの比率）を上げる事で情報の差別化が行われています。
無駄な要素やあしらいを省いたミニマリズム（余計な要素を除いたシンプルなデザイン手法）なデザインとの親和性が高いのも魅力です。
参考サイト（https://www.mochicom.jp/）
フラットデザイン2.0（セミフラット）
近年のwebデザインの主流である立体感や装飾のないシンプルなデザインがフラットデザインです。
画面がすっきりとする為、アプリのデザインにもよく使用されています。しかし、シンプルすぎるため直感的な操作が行いづらい（UIが悪くなる）といった懸念もありました。
フラットデザイン2.0（セミフラット）では、完全にフラットデザインのルールに則るのではなく、状況に応じてテクスチャやシャドウを柔軟に取り入れます。
基本がフラットであるからこそ、ボタンやテキストなどに薄っすらとシャドウが掛かっていることで直感的に訴求することが出来ます。
参考サイトは要素にマウスオーバーする事で画像がズームされ浮かび上がるので、クリックするのが楽しくなる動きになっています。
無駄な要素やあしらいを省いたミニマリズム（余計な要素を除いたシンプルなデザイン手法）なデザインとの親和性が高いのも魅力です。
参考サイト（https://sacra-jp.com/）
ハンバーガーメニュー
スマートフォンではすっかりお馴染みのハンバーガーメニューはレスポンシブ化やモバイルファーストの流れを受けPCやタブレットでも実装されるサイトが増えました。
「三本線を押すとメニューが表示される」というのがユーザーに浸透したためです。ハンバーガーメニューから展開されるナビゲーションは、モーダルのように画面全体に表示されるパターンも増え、ナビの動線の自由度も高まりました。
またハンバーガーのシンプルなデザインは固定ナビとしても使用しやすいのが魅力です。
参考サイト（https://retrieva.jp/）
3Dデザイン×フラットデザイン
フラットデザインと3Dデザインを組み合わせることで、斬新な表現を行うことが出来ます。ベースがフラットなため、3Dがより際立ちます。
参考サイトは彫刻がページの変遷や、メニューと連動してグルグル動いています。動きを見ているだけでも楽しいですね。
例えば、商品を3Dデザインとして取り込むことで、ユーザーに実際に商品を手に取っているような擬似体験をもたらすことが可能なデザインです。
参考サイト（http://experience.mausoleodiaugusto.it/en/）
バリアブルフォント
通常、同一のフォントであっても、太さの異なる書体を使用する場合は、別途weight（文字の太さ）毎のフォントファイルが必要でした。また、フォント毎に対応している種類が限られてしまい、DTP（ポスターやチラシなどの印刷物のデザイン）デザインのように細かい調整を行うことが出来ませんでした。
バリアブルフォントは、１つのフォントファイルを使用して幅や、スタイルを細かく調整・実装が行える新しい技術です。
実装されているフォントはまだ少ないですが、Webにおいてもタイポグラフィ（文字を読みやすく調整すること）が注目されている昨今、どんどん拡大していく注目のフォントファイルです。
まとめ
以上、今回はトレンドの使い勝手が良いUIを紹介しました！
今年はgoogleからアナウンスがあり、MFI（モバイルファーストインデックス）への切り替え、デバイス毎の最適化やユーザビリティをより考える年でした。それに伴い、様々なUIデザインの提案も行われました。
中でもモバイルとPCの調和を高めた提案が多く、今後もその流れは強まっていく事でしょう。来年もUIデザインのトレンドに注目です。