アプリのデザインは一見すると簡単そうかもしれませんが、実際プロトタイプに取りかかってみるとその難しさに気づきます。どのようなデザインにするか判断に迷いだすと、最初はシンプルに思えたことも複雑になり始めます。
例えば２つ以上のコンテンツを視覚的に分けるというシンプルなタスクでさえ、的確な判断をするのが難しいときもあります。
今回はそんな細かいUI要素の一つである「区切り線」やUI要素の「区分け」について見ていきたいと思います。
従来の区切り線
水平（または垂直）の線を使用すると、関連するコンテンツのセクションの間に必要となる視覚的な区分けを作ることができます。
この仕切りによってページにリズムと階層をつくり、コンテンツがどのように編成されているかユーザーが理解するのに役立ちます。
区切り線は、リストおよびページレイアウトにおけるコンテンツをグループ化する、薄くて細い罫線です
区切り線の種類と使い分け
フルブリードディバイダー
フルブリードディバイダー（余白なしで横幅100％の区切り線）は、コンテンツの領域や、ビジュアルによりはっきりとした分割が必要なセクションを強調したいときに使います。これは、リストおよびページレイアウトの両方において、独立したコンテンツのセクション（例：連絡先情報の詳細）またはコンテンツ要素（例：電子メールのリスト）を分離します。
例として、以下にあげるAndroid向けGmailアプリの受信トレイの表示を見てみましょう。各メールが画面全体を横断する区切り線によって分割されていることがわかります。画面を横切る線は、停止線のように見えます。それぞれのメールを、停止線ではっきりと区切るのです。
フルブリードディバイダーがメールのサマリーを区切ります
インセットディバイダー
インセットディバイダー（折込式の区切り線）は、連絡先のリストにおけるセクションなど、関連するコンテンツを分割します。
インセットディバイダーによって、ユーザーはより視覚的に項目を閲覧することができ、情報を関連したひとつのまとまりとして捉えることができます。項目のセット全体が連続的な流れとなり、ユーザーに対してスクロールを促します。
また区切り線を短くすることで、ステータス項目やフラグ、またはアンカー（アルファベット文字など）のためにより多くのスペースが生まれます。
インセットディバイダーの例
区切り線を引くための他の方法
従来の区切り線は、デスクトップ画面でコンテンツを分割することに優れていたかもしれません。ですが、モバイルアプリにとってはひとつ大きな欠点があります。
貴重な画面のスペースを占領してしまうことです。区切り線を多用することも、視覚的に乱雑で、隙間のない混雑したインターフェイスにつながる可能性があります。ユーザーの好みはよりシンプルなUIへシフトしているため、余分なものを取り除き、最低限の必要な要素のみに絞ることが成功への鍵です。この変化の背景には、余分な要素を排除してコンテンツや機能性に焦点を当てるというトレンドがあります。
そのため、線ではなく、要素によってコンテンツを区切るようにしてみましょう。線や仕切りが少ないほど、UIはより整然となり、現代的且つ機能的に感じられるものとなるでしょう。
ホワイトスペース
ホワイトスペース（余白）とは、デザイナーが要素を配置しないデザイン上の領域のことです。ホワイトスペースをたっぷりとると、乱雑なUIを魅力的でシンプルに見せることができます。
デザインにおける要素の周りに余白を作ることで、目立たせたり、他の要素と分離したりすることができます。余白はデザインに一呼吸おける空間を作り、UIをすっきり見せます。
線を引くのではなく余白を活用することで、目障りになることなくさまざまなセクションを定めることができます。出典：Goutham
色のコントラスト
色のコントラストは、最も強力なデザインツールの一つです。うまく使用すれば、人目を引くデザインを作成することができます。巧みな色使いでコンテンツを区切ることで、クリエイティブが生きてくるでしょう。
基本的にやるべきことは、コントラストがよく映える２つの色を見つけるだけです。アクセントとなる色は、目障りで押し付けがましくなることなく、画面上の特定の領域にユーザーの注意を引き付けます。その結果、ユーザーはより早く、そしてより容易に情報にアクセスすることができます。
白または似たような色に、赤やオレンジのような非常に明るい色を加えることで、アクセントとなる色を作ることができます。出典：Awesomed
シャドウと奥行き
シャドウと奥行きは、UIに奥行きを与え、コンテンツセクションを視覚的に分離することができます。Googleのカレンダーアプリは、線を引く代わりにシャドウを利用することで、目障りになることなくさまざまなセクションを分ける良い例です。
シャドウは、異なるアイテムの間の関係を識別するのに役立ち、特定のアイテムに注意を引き付けます。
イメージグリッド
グリッドリスト内における画像ベースのコンテンツに区切り線は必要ありません。グリッド自体が視覚的に区別を行うため、グリッドリストはサブヘッダーをコンテンツから分離する必要がないのです。この場合、ホワイトスペースとサブヘッダーがセクションを適切に区切ります。
グリッドリストは、ホワイトスペースとサブヘッダーを使用してコンテンツを適切に区切ります。
まとめ
最終的な目標はUIを簡素化し、より機能的で便利なものにすることです。ただし、線や区切りでコンテンツを区別するときはよく考えるべきです。
よりクリーンなUIデザインを開発するということは、不要な要素を取り除くことを意味します。ただ罫線要素を追加する他にも、モバイルUXを改善するためにできることはたくさんあるのです。
