アプリ制作で必ず考えなければいけないのが、一覧画面です。
ユーザが最も使用する場所であり、この部分のデザインによってユーザビリティが大きく変わってきます。
ではどのようなデザインがユーザにとって良いのでしょうか。
また、そのようなデザインをするためにはどうすればよいのでしょうか。
当記事ではUIデザインの観点から、一覧画面デザインで考えるべきこと・作成する上でのポイントを紹介していきます。
参考サイトも消化するので、ぜひ参考にしてみてください。
目次
UIデザイン・一覧画面デザインとは？
UIはユーザインターフェースのことを指し、ユーザインターフェースとは「ユーザとコンピュータが情報をやりとりするときの接点」を言い表した言葉です。
つまりUIデザインとは、「ユーザがサイトやアプリをスムーズに使うためのデザイン」といえます。
なお、このようなユーザの体験をUX（ユーザエクスペリエンス）と言います。
また、一覧画面とは一般にアプリが一覧となって表示される画面を指します。
ここで一覧画面のデザインを考えるときは、UIデザインについて知っておくことが重要となります。
優れたUIデザインの原則
ここで最も重要な考えについて紹介します。
それはUX専門家Steve Krugの「ユーザに考えさせない（Don’t make me think）」です。
つまりユーザが直感的に情報を理解し、操作できる必要があります。
ユーザが迷ったり考えたりしないようなデザインを作る必要があるのです。
ここで「ユーザに考えさせないと言っても、どうすればそのようなデザインができるのだろう」と考える方は多いでしょう。
以下ではそのようなデザインをするためのポイントや、参考になるデザインを紹介します。
デザインにおける4つのポイント
まずは、UIにかかわらずすべてのデザインで重要となる4つの原則を確認していきましょう。
近接
複数ある情報のうち、関連性の高いものを近づけて配置することです。
たとえば「マンゴー、きゅうり、トマト、いちご」と食べ物が並んでいるとします。
これらは「マンゴー、いちご」と「きゅうり、トマト」のように果物・野菜で分けられます。
このように近い属性同士がまとまっていると、ユーザは内容を把握しやすくなります。
デザインでも同様で、近い属性のものを近づけることでユーザビリティが向上します。
整列
ばらばらになっている情報に秩序を与えて整理することです。
イメージとしては、学校での集会をイメージしてもらえると分かりやすいです。
集会では学年ごとに生徒が整列するため、学年問わず生徒がばらばらになっている状態よりも、教師は生徒把握がしやすくなります。
デザインでも情報が整列されていることで、情報を把握しやすくなります。
具体的には「横書きの文章は左揃えにする」だったり、「図やイラストでは余白を整える」だったりが、整理に当たります。
コントラスト
情報に強弱を付けて目立たせることです。
勉強をしているときに、ノートに下線を引いたり文字を色ペンで書いたりしたことがあると思います。
これもコントラストによって強調したい情報を目立たせるようになっているのです。
デザインでも同様で、太字にしたり、サイズを大きくしたり、色を付けたりすることによってコントラストを付けられます。
重要なポイントを強調したい場合に有効なデザインです。
反復
同じパターンを繰り返すことです。
ここでのパターンとは「配置」のことです。
具体的には、レイアウトや色といった要素に統一感を持たせます。
これによりどこにどの情報があるのかユーザが考える必要がなく、情報を理解しやすくなります。
以上の4つは、すべてのデザインで考えるべき観点です。
続いて、UIデザインで特に考えるべきポイントを紹介します。
UIデザインで考えるべき具体的な7つのポイント
1.ヘッダ・ナビ・ボタンで全体の印象を整える
アプリ全体の印象を決める部分です。
コーポレートサイトやLPと違い、Webアプリでは過度な装飾はされず、これにより与えられる印象も限られます。
そこで使用するのがヘッダ・ナビ・ボタンとなります。
POINT
・ヘッダ、ナビ：常に表示されるためアプリの印象を左右する要素
・ボタン：ほぼすべてのページで登場し、ユーザの印象に残りやすい要素
ここで、これら要素の色を統一するのが大切です。
基本メインの色数は1色とし、白や黒といった無彩色で構成します。
2.アイコンの種類は演出したいテイストに合わせる
アイコンはアプリ全体の印象を左右する要素です。
たとえばテイストには以下のような特徴があるでしょう。
POINT
・アウトライン：アプリ全体が明るい印象になる
・塗りつぶし：視認性が高く印象も強い
・色つきのアイコン：かわいらしい印象を与え、テーマカラーを強調できる
3.ボタンの多用は避ける
ボタンが多すぎると、画面が複雑になり可読性が下がります。
以下はボタンを多用しないために使える手法です。
POINT
・アイコンボタン
・コンテキストメニュー
4.数を強調する
データを表示するときは、数を強調することが大切です。
これにより画面にメリハリが生まれるため、アプリ全体も魅力的にできます。
5.一覧をただの表にしない
表を作るときも、エクセルで作るような形ではなく、強弱をつけるようにします。
作成者や日時といった付属情報は小さく、メモのタイトルは大きくするなどです。
6.ローディングステート・エンプティステートを作る
ローディングステートはローディング中に表示する画面、エンプティステートは表示する情報がないときに表示する画面です。
これらは装飾可能な要素なので、疎かにせず作りましょう。
ユニークなアイデアを入れられれば、他のUIと差別化できます。
7.インタラクションを付ける
インタラクションとは、ユーザのアクションに対してシステムが反応を返すことです。
これはローディングステート・エンプティステートと同様、使い勝手の向上に役立ちます。
ボタンやインプットのインタラクションは、工夫次第で洗練可能です。
デフォルトのままではなく、よりアプリに合うアイデアを探してみてください。
以上7つのポイントを紹介しましたが、すぐに取り入れるのは難しいでしょう。
まずは競合のツールやアプリを観察してみて、どのような工夫がされているか見てみてください。
そのとき、今期紹介した7つのポイントを観点としてみてください。
参考サイトをご紹介！
codebase
一覧画面のサイトです。
多数のテンプレートのあるサイトで、一覧画面を作るためのフレームワークとしても利用できます。
UIの型が出来上がっているため、型通りに進めれば基本的なものが完成するくらいに素晴らしいサイトです。
https://demo.pixelcave.com/codebase/be_widgets_tiles.html
formrun
フォームのプレビューを見ながら簡単に操作できるUIが秀逸と言われています。
説明なしで直感的に使える点は、UIデザインの原則に即しています。
https://form.run/home
何もアイデアが思い浮かばない時にも有効です。
とりあえず「どんなUIがあるかなあ」と探せます。
また、UIをパーツ単位で探すときにも使用できます。
https://www.pinterest.jp/
まとめ
一覧画面ではUIデザインのポイントを押さえることが重要だと紹介しました。
UIデザインでは「ユーザに考えさせないこと」が重要です。
また、ユーザに考えさせないためのポイントを「デザイン全体に言えること」、「特にUIデザインにおいて考えること」に分けて紹介しました。
以下のポイントを押さえて、優れたUIの一覧画面デザインをしていきましょう。
POINT
すべてのデザインで重要となるポイントは以下の4つです。
・近接
・整列
・反復
・コントラスト
UIデザインで注意すべきポイントは以下の点です。
・ヘッダ、ナビ、ボタンで統一感を持たせる
・アイコンはテイストに合わせる
・ボタンは多用しない
・数字は強調する
・一覧を単なる表にしない
・ローディングステート、エンプティステートを作る
・インタラクションを付ける
