LoginSignup
5

More than 3 years have passed since last update.

UIについて

Last updated at Posted at 2019-04-24

去年の夏ごろにまとめたものです

uiの原則

ひと目で意味がわかるデザイン
簡単な操作性
オブジェクトとインターフェースの距離を近くする(ユーザー名が表示されている付近に、編集ボタンが設置されているようなイメージ)

2018年のトレンド

1シームレスインターフェース

Webサイト上のすべてのコンテンツを1ページに配置するUIデザインです。全コンテンツを1ページで確認できると、ユーザーはほかのページへ遷移せずにスクロールのみですべての情報を得られます。 そのため、別のページへ遷移する際にかかるストレスを軽減できます
https://lewislopez.com/#whoiam

2タイポグラフィの活用

巨大な文字を配置するデザインです。文字を大きくして目立たせると、ユーザーの視線を引き付けることができます。
文字にアニメーションで動きをもたせるデザインもトレンド

3グラデーション

Webサイトの背景に用いられたり、写真に重ねてオーバーレイとして使われたりするケースが多く、ユーザーの目を引く印象的なサイトにしてくれます。

4イラストレーションの活用

Webサイトのコンセプトに適しているデザイン
http://nasaprospect.com/

5動画の活用

トップ画面の背景が動画
https://designcase.jp/

6活気のある鮮やかな色

色は注目を集め、気分を変え、ユーザーの感情や行動に影響を与えることができます。
モバイルアプリのデザインについて言えば、これからは間違いなく鮮やかな色の時代です。
鮮やかな色✖️グラデーションという今年のトレンドを組み合わせたアイコンがインスタグラムのアイコン
機能要素としての色、、、さまざまなタイプの通知を視覚的に分離します。
https://www.seleqt.net/cms/wp-content/uploads/2018/01/d62f58fb9a8ebeeaf8b0bf38869648e1.gif

7ミニマルデザイン

少ないパーツでページを構成するthe simpleって感じのページ
余白を大切にすることで演出できるオサレ感
https://makr.com/

8スプリットスクリーンレイアウト

画面を大胆に分割してレイアウトするデザイン手法
画面を大きく2つに分け、左側にメニューを表示し、右側に画像を表示するようなデザインとなっています。スプリットスクリーンを使う場合は、どちらか片方にメニューを固定表示しておき、もう片方にコンテンツを表示してスクロールさせるようなデザインにすると、使いやすくてデザインも優れたページに仕上げることができる

9美しいローディングアニメーション

読み込み中に美しいローディングアニメーションが増えています。読み込み時間が長くなるほどユーザーの離脱率は高まってしまいますが、アニメーションを上手く活用することによって離脱率を抑える効果が期待できます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5