Upgrade to Pro — share decks privately, control downloads, hide ads and more …

マルチカラム VS モーダルビュー 〜UIデザインのトレンド 2021年春夏〜

ゆめみん
February 09, 2021

マルチカラム VS モーダルビュー 〜UIデザインのトレンド 2021年春夏〜

『UI/UXのトレンド(2020年/2021年)LT会』 https://rakus.connpass.com/event/200838/ で発表したスライドです。

デスクトップで使用するアプリケーションのレイアウトにもトレンドがあります。
2020年はレイアウトに大きな変化が見られました。
これまではヘッダーペインにメニューが入り、メインペインにマスターとディティールを表示するレイアウトが一般的でした。
このレイアウトは今後も基本形としてよく使われると考えられます。

さて、2020年にiPadやmacOSなどのApple製品でアップデートがありました。
新しいレイアウトでは、左から右へ、メニュー、マスター、ディティールの順番で表示することを提案しています。これをマルチカラムと呼びます。
マルチカラムはモバイルなどのスワイプで前後に移動するコンテキストに適しており、それぞれのビューだけを大きなスペースで表示することも可能です。
マスターを絞り込んだりディティールの入力したりなど、それぞれのビューで細かな作業を行いやすいことが特徴です。

ところで、NetflixやNotion、Instagramは使っていますか。
メニューの下にマスターが表示されており、ビデオがずらっと並んでいますね。あれ、ディティールはどこでしょう?
マスターのなかのデータのひとつをクリックすると、モーダルビューでディティールが表示されますね!
このパターンは、マスタービューがメインコンテンツとなるサービスで見られるようになりました。
ディティールビューで細かな作業を行うことがほぼないサービスで見られ、ページ遷移なしにディティールをチラ見しているような体験を与えます。

いま、このふたつのレイアウトが出てきています。
えーっと、じゃあ、マルチカラムとディティールビュー、どっちを選んだらいいの? 見た目を作り直せっていうの?
いえいえ、どちらかを採用するというよりも、アプリケーションのレイアウトをトレンドに対応できるように作ることが大事だと伝えたいのです。

そういうわけで、真のトレンドはMVVMです。レイアウトはビューの問題であり、トレンドは今後も変化し続けます。
トレンドに対応できる設計こそ、時代に応じた良い体験をユーザーに提供し、アプリケーションのスケーラビリティを一段と高めるでしょう。

ゆめみん

February 09, 2021
Tweet

More Decks by ゆめみん

Other Decks in Design

Transcript