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

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

C6860c38adec703e995505b9afa12c83?s=47 yumemi
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です。レイアウトはビューの問題であり、トレンドは今後も変化し続けます。
トレンドに対応できる設計こそ、時代に応じた良い体験をユーザーに提供し、アプリケーションのスケーラビリティを一段と高めるでしょう。

C6860c38adec703e995505b9afa12c83?s=128

yumemi

February 09, 2021
Tweet

Transcript

  1. ʙ6*σβΠϯͷτϨϯυ೥य़Նʙ VJVYUSFOEMU  ZVNFNJ ϚϧνΧϥϜ74ϞʔμϧϏϡʔ

  2. ϨΠΞ΢τͷجຊܗ

  3. J1BEͱ͔มΘΓ·ͨ͠ΑͶ IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFT JPTWJFXTTQMJUWJFXT

  4. ϚϧνΧϥϜͳϨΠΞ΢τ 👆ϝχϡʔ 👆Ϛελʔ 👆σΟςΟʔϧ

  5. IUUQTXXXOFU fl JYDPN IUUQTXXXJOTUBHSBNDPN ͜͏͍͏ͷ΋ݟΔΑ͏ʹͳͬͨΑͶ

  6. IUUQTXXXOFU fl JYDPN IUUQTXXXJOTUBHSBNDPN σΟςΟʔϧ͸Ͳ͜ʁ

  7. σΟςΟʔϧΛϞʔμϧϏϡʔͰදࣔ͢ΔϨΠΞ΢τ

  8. None
  9. ϚϧνΧϥϜ ϞόΠϧͳͲͷεϫΠϓͰલޙʹҠಈ͢ΔίϯςΩετʹద͍ͯ͠Δɻ ͦΕͧΕͷϏϡʔ͚ͩΛදࣔͨ͠ΓɺϚελʔΛૢ࡞͢Δͱ͔σΟςΟʔϧͰೖྗͨ͠Γ͠΍͍͢ɻ IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOVJLJUVJTQMJUWJFXDPOUSPMMFS

  10. ϞʔμϧϏϡʔ ϚελʔϏϡʔ͕ϝΠϯίϯςϯπͱͳΔαʔϏεͰݟΒΕΔɻ σΟςΟʔϧͰࡉ͔ͳ࡞ۀΛߦ͏͜ͱ͕΄΅ͳ͍ɻ ϖʔδભҠͳ͠ʹσΟςΟʔϧΛνϥݟ͍ͯ͠Δײ͡ɻ

  11. Ͱɺ݁ہͲ͏͠Ζͱʁ

  12. ཁ͢ΔʹϏϡʔͷݟͤํͷτϨϯυͳͷͰ ϞσϧɺϏϡʔɺϏϡʔϞσϧΛ෼͚ͯͭ͘Ε͹େৎ෉ʂ ʢେৎ෉ͱ͸ݴͬͯͳ͍ʣ .77.ͦ͜ਅͷτϨϯυʂʂʂʂ 6*͕ૢ࡞͞Εͨ ͜͏͍͏͜ͱΛ ΍͍ͬͯͩ͘͞ͳ ΍Γ·ͨ͠ ݁ՌͷσʔλͰ͢ Ϗϡʔ

    ৽͍͠σʔλΑ