こんにちは、UI/UXデザイナーの東影です。
NRIネットコムで様々な会社のUI/UXの検討・デザイン制作をしていたり、HTMLのレビューなど、コンテンツ制作の領域で幅広い業務を担当しています。
普段の業務ではWebアプリケーションを制作することが多いです。
今回はデザインのクオリティを高めるときに、制作の過程で特に気をつけていることをまとめていきたいと思います。
今回はPCのブラウザで使う、↑こういう感じのWebアプリについてお話しします。
UIとは？
冒頭で「UI/UXデザイナー」と自己紹介をしましたが、簡単に「UI/UX」についてご説明します。
UIは「User Interface（ユーザーインターフェース）」の略です。「Interface」とは「接点・接触部分」などを意味します。
つまりユーザーがWebサイトやアプリと触れる部分、レイアウトや文字のフォント、ボタンの操作性など、画面上でユーザーが目にするもの全てがUIに当たります。
UXは「User Experience（ユーザーエクスペリエンス）」の略で、「Experience（体験）」を意味しています。「ユーザーが製品やサービス全体から得ることができる体験」がUXにあたります。例えばユーザーがアプリで旅行の予約をして、「簡単な操作で旅行の予約ができてよかった。現地のホテルでのやりとりもアプリのおかげでスムーズだった。また使おう。」というような感想を持っていれば、UXの評価が高いということになります。
良いUIが必ずしも良いUXに繋がる訳ではないのですが、良いUXを提供するサービスはUIもわかりやすく、使いやすくデザインされていることが多いです。
なぜ「洗練させる」ことが重要？
UIには「見た目」と「ユーザーの使い勝手」の2つの視点があります（他にもありますが、ここではこの2点を特にピックアップします）。今回「洗練させる」というのは、この「見た目」に関するお話です。
誤解のないように最初に言っておくと、UIを制作するときに最も重要なのは「ユーザーの使い勝手」だと考えます。いわゆるユーザー設計や情報設計、導線の検討がとても大事で、これらは使いやすいアプリケーションを作るために必ず必要なことだと思います。
それとは別に重要と考えていることが、「プロダクトとしてのビジュアルのクオリティを高め、ユーザーからの印象を良くすること」です。
見た目を良くすると、以下のようなメリットがあると考えています。
- 見た目が整うことでユーザーに信頼感を与える。
- ユーザーに快適な操作感を提供できる。（これは、使い勝手をよくすることにもつながる）
これらを達成することはデザイナーの仕事です。クオリティを高めるために細部までこだわり、工夫することが求められます。
では、どのような点に注意するとよいでしょうか。
１．ヘッダ・ナビ・ボタンで全体の印象を揃える
アプリ全体の印象を決めるのはこの3箇所です。
コーポレートサイトやLP（ランディングページ）では写真などの画像素材、装飾を使うことで印象を変えることができますが、Webアプリでは基本的にそういった過度な装飾は不要なため、印象を与えることができる要素が限られています。
そこで使うのがヘッダ・ナビ・ボタンです。
ヘッダとナビゲーションは画面が移動しても必ず表示されている要素となるため、ユーザーの目に常に入り、特にアプリの印象を左右するパーツです。
ボタンはほぼ全てのページで登場し、かつ画面の中で色が乗る面積が大きいため、ユーザーにテーマカラーの印象を与えるために最も活躍するパーツです。
ここで色がバラバラになるとデザインの統一感が崩れてしまいます。
上図のように、右側に比べ左側の方がきれいな印象を受けると思います。色はメインのカラーを1色決めて、以下のようなパターンで配色するとうまくまとまります。
基本的にメインの色の数は1色にし、白や黒の無彩色で構成するようにします。
ヘッダやナビゲーションには黒を使うこともおすすめです。
白を使うと全体的にクリーンな印象に、黒を使うと全体的に引き締まった印象を出すことができます。
２．アイコンの種類は演出したいテイストに合わせる
アイコンもアプリ全体の印象を左右します。
よりアプリの印象にあった効果的なアイコンを選ぶようにします。
アウトライン
白などの背景の色を多く出せるので、アプリ全体が明るい印象になります。
文字と並べたときに同じくらいの強さで表示でき、使いやすいアイコンです。
塗りつぶし
塗りつぶしアイコンは画面上ではっきりと見え、視認性が高いです。 文字と並べたとき、アイコンのほうが強く見えます。
色つきのアイコン
アイコンに色をつけることでテーマカラーを強調できます。 上記の2つにくらべるとアプリ全体に可愛らしい印象を与えます。
３．ボタンの多用は避ける
テキストのボタンは多用すると画面がごちゃごちゃして可読性が下がってしまいます。
ボタンは多用しすぎず、以下のような手法で画面から減らし、画面から受け取る情報を単純化します。
アイコンボタン
アイコンボタンを使うことで、文字の情報が減り、画面をすっきり見せることができます。
ボタンは常に出すのではなく、オンマウス時だけ表示するなどの工夫をすることでさらに単純化できます。
コンテキストメニュー
複数の操作が並ぶ場合、コンテキストメニューも有効です。
4.数字に強弱をつける
データを表示するとき、数字に強弱をつけてユーザーの目にとまりやすくします。
数値は大きめに表現することで、画面にメリハリが生まれ、データが見やすくなるだけでなく、アプリ全体の与える印象も魅力的にできます。
5.一覧をただの表にしない
一覧を作るとき、Excelで作ったような表の形にするのではなく、強弱をつけて情報を置くようにします。
例えばメモの一覧であれば、メモのタイトルにあたるテキストは大きく太字にします。
作成者や日時など、付属する情報はテキストを小さくしたり、色を薄くしたりして弱くします。
6.ローディング・エンプティステート（0件表示）を作る
ローディング中に表示するスピナーとエンプティステート（0件表示）は必ず作るようにします。
これらは「使い勝手」の観点でも重要な要素です。ユーザーがアプリを迷わずに操作するために役立ちます。
Webアプリは装飾より機能を優先しなくてはいけません。そのためデザインの要素は限られます。スピナーやエンプティステートは数少ない装飾のデザインが可能な要素ですので、ここを疎かにするわけにはいきません。
遊び心のあるユニークなアイデアを入れることができるポイントです！
7.インタラクションをつける
オンマウス時の表示、選択時のステータスの表示など、インタラクションはユーザーの行動に対して画面からフィードバックを返します。こちらも、基本的には使い勝手の向上に役立つ手法です。
インタラクションはアニメーションを使うことで、ユーザーに気づいてもらいやすくなります。ローディングやエンプティステートと同様、Webアプリの中ではデザインの自由度が高く、アニメーションによって「楽しさ」を演出できます。
ボタンやインプットのインタラクションは工夫次第でより洗練できます。
デフォルトのままにせず、よりアプリに合うアイデアを選択します。
洗練するための表現はいろんなアプリを見て覚える
今回は、わかりやすく効果が出るポイントを7つ挙げてみました。
デザイナーであれば自然とできていることも多いと思いますし、もちろん他にも手法は沢山あります。
私はデザインするとき競合のツールはもちろん確認しますが、
全く異なる機能のアプリも確認し、使える表現やパーツがないか探して参考にしています。
例えば料理のアプリをデザインするときは、似たような料理アプリだけでなく、ターゲットがよく利用していそうな買い物やニュースのアプリを見たりして、受け入れられそうなアイデアを探します。
一覧画面で「サムネイル画像＋料理名」の表示を作るために、服のECサイトを見たり、動画投稿サイトを見たり、「サムネイル画像＋タイトル」のパーツのものをたくさん見て、パーツの大きさや、文字の強弱、インタラクションを考えていきます。
ユーザーにクオリティの高いプロダクトだと感じてもらえるようにすることはデザイナーの大事な仕事です。
WebアプリのUIも、細部までこだわって作ることが本当に大切だと思います。
サービスの価値を高められるように、デザイナーとして今後も取り組んでいきたいと思います。
最後まで読んでいただきありがとうございました！
Webに関するクリエイティブはNRIネットコムにお任せください。
NRIネットコムは、Webサイト・アプリの現状分析から課題解決に必要な戦略立案、UXデザイン、各種ビジュアル制作、Webサイト構築、運用までトータルで支援します。
