LoginSignup
9

【Material Design】折りたたみデバイスの設計とUIデザイン

Last updated at Posted at 2022-05-03

概要

2021年のGoogle I/Oで発表された、Material Youですが、
少し前に公開されたガイドラインでは、Material Design 3(略称:M3)として、公開されていました。

そんなM3では、Material Youの機能であるDynamic colorが追加されただけではありませんでした。

折りたたみデバイスについての記述も追加されていました。

この記事では、そんな折りたたみデバイスについて、
設計する時やデザインする時に気をつけるべき項目をまとめました。

折りたたみデバイスの特性

画面状態

折りたたみ:4〜6inch
折りたたみ状態は、通常のスマホサイズに匹敵します。
image1.png


展開:8〜10inch
展開状態は、通常のタブレットサイズに匹敵します。
縦向き、横向き、テーブルトップ(画面を90°に曲げた状態)の3つの状態が必要になります。
image2.png

リーチエリア

image4.png
画面を展開すると、持ち直さない限り、画面の上部25%がほとんど手の届かない範囲になります。
そのため、上部25%のインタラクション制限しています。

また、下部もタップしづらくなるため、重量なインタラクションを下部に近づけしすぎないようにしましょう。
image3.png

  1. ユーザーが指を伸ばすことでこの領域に到達できます。 多くの人が到達するには少し不便です。
  2. ユーザーはこのエリアに快適に到達できます
  3. デバイスを持っているときには、この領域に到達するのは困難です。

折曲がるエリア(Hinge)

折りたたみデバイスでは、折りたたむ装置があり、タップした時の感覚が他の部分と違います。
そのため、展開された画面の中央部の48dpには重要な情報やアクションを配置することを避けてください。
image5.png

ダイアログを表示する時の例

image6.png image7.png
推奨⭕️ 非推奨

折りたたみデバイスのレイアウト

1レーンレイアウト

デバイスが横向きの時は、ナビゲーションを垂直に配置し、コンテンツを1レーンで表示します。
Qiitaのようなフェードやカードを表示するときに役立ちます。
image9.png


2レーンレイアウト(1:1)

デバイスが横向きの時は、ナビゲーションを垂直に配置し、コンテンツを2レーンで表示します。
メッセージアプリなど、メインのコンテンツとサブコンテンツを同時に表示させたりするのに役に立ちます。
image8.png

また、縦向きの場合にコンテンツを2レーンにすると、幅がたりなくなったりするため、レイアウトに無理が生じるため注意が必要です。


2レーンレイアウト(1:2)

デバイスが横向きの時は、ナビゲーションを垂直に配置し、コンテンツを2レーンで表示します。
動画アプリやメールアプリなど、リストと内容を同時に表示させたりするのに役に立ちます。
image11.png

また、縦向きの場合にコンテンツを2レーンにすると、幅がたりなくなったりするため、レイアウトに無理が生じるため注意が必要です。


全画面レイアウト

テレビ電話や動画など画面に1つのコンテンツを表示します。
image10.png


ヒーローレイアウト

画面上部に画像や動画の要素を配置し、その下にコンテンツを表示させます。
画面上部を使って、画像や動画を表示したり、カルーセルなどの要素を表示するのに役立ちます。
image12.png

折りたたみデバイスのコンポーネント

ナビゲーションコンポーネント

折りたたみデバイスでのナビゲーションコンポーネントは、基本的に画面の隅に縦に配置します。
image15.png

画面下部のナビゲーションは、モバイルデバイスでは推奨されています。
しかし、折りたたみデバイスや大型のデバイスでは、
ナビゲーションの中央はタップしにくいため注意が必要です。

image13.png image14.png
推奨⭕️ 注意🔺

トップアップバー

トップアップバーは、アプリのコンテンツに対するアクションがまとめられています。
image18.png

トップアップバーを折りたたみデバイスや大型のデバイスで実装すると、
バンディング効果を与えるので注意が必要です。

image16.png image17.png
推奨⭕️ 注意🔺

ダイアログ

注意やアクションを促すためのコンポーネントです。
image21.png

ダイアログを折りたたみデバイスの中央に配置するとHingeと重なり、タップしづらかったり、読みづらかったりするため、推奨されていません。

image19.png image20.png
推奨⭕️ 非推奨

まとめ

この記事では、折りたたみデバイスで設計する時やデザインする時に気をつけるべき項目をまとめました。

画面サイズがモバイルサイズからタブレットサイズにまで大きくなるデバイスなため、
モバイルサイズを設計・デザインする時とは違った注意事項や
折りたたまれる機構を考慮した設計・デザインが必要になりそうです。

この記事に記述した内容以外にも、
展開・折りたたんだ時のモーションの対応や
1つの画面内で複数のアプリを開けるマルチウインドウへの対応など、

折りたたみデバイスでは、考慮しないといけないことが多そうです。

いちデザイナーとしては、考慮しながら設計・デザインするのは、
めんどくさいので、折りたたみデバイスがメジャーにならないことを祈りたいです。🙏


最後まで読んでくださってありがとうございます!
さらに詳しい内容を聞きたい方は、Devトークで直接お話しましょう!

X(Twitter)でも情報を発信しているので、良かったらフォローお願いします!

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
9