💬

「イマイチなUI」を作らないためのコツ　~+α編~

2024/11/15に公開

UI/UX

デザイン

idea

こんにちは！普段フロントエンド開発をしている人です🙌
今回はUIを実際に作成する際に私なりに気をつけている内容となります。

色についてとそのほかのメモといった二本立てになっています。
UI作成する前の事前準備としての記事はこちら

https://zenn.dev/maru_contents/articles/ui-infomation_organization

https://zenn.dev/maru_contents/articles/ui-layout_with-spot

 UI作成で使用する色について
 基本知識全ての色は「色相」・「彩度」・「明度」によって決められます。
ぱっと見で判別するために色を使用することが多いため、まずは色についての基礎知識を見ていきましょう。(もう知ってるよって方は飛ばしてくださいね！)

 色相赤や青などの色味のこと。色相を表す基本となる色相環というものがあり、環の反対に位置する２色は補色と言われる。

12色相環

 彩度どのくらい鮮やかかを表す度合い。

もっとも鮮やかな色のことを純色、グレー・白・黒などの色味が全くない色は無彩色と呼ばれる。

 明度白を100、黒を0としたときの明るさを表すもの。白に近づくほど明るく、黒に近づくほど暗くなる。

 色の三原色シアンC・マゼンタM・イエローYの３色を「色の三原色」と呼びます。

全て混ぜると暗い色になり、この三原色に加えて黒Kが使用されます。

 光の三原色赤R・緑G・青Bの３色を光の三原色と呼びます。

 色と脳の関係人は色を見た時の判断が左脳と右脳で異なります。

使用したい色はどのように人に判断して欲しいのかを考えてみるとより良いUIが作れます。

 左脳で判断する場合左脳では論理的思考を得意とします。そのため、説明や強調など機能的な意味として色を使用すると良いです。

例えば…
注目させるための色
記号として認識するための色
グループに分けるための色　など…

 右脳で判断する場合右脳では感性に関する能力をコントロールすることを得意とします。そのため、ぱっと見での印象を変える色を使用すると良いです。

例えば…
五感(視覚・聴覚・嗅覚・味覚・触覚)で感じたことがある色
記憶にある色

 カラーユニバーサルデザイン色の見え方は色覚特性によって異なります。色覚特性は遺伝によるものと加齢や病気によるものがあります。

この色覚特性の違いに関係なく見やすい配色をすることをカラーユニバーサルデザインと言います。
色覚特性の違いについては

https://www.color.or.jp/about_cud/construction/
もっと詳しくカラーユニバーサルについて知りたい方は

https://solution.toppan.co.jp/creative/contents/dentatsuclinic_column09.html
私は、UI作成時にGoogle Cromeの色覚特性シミュレーションを使用して確認しています。

https://accessible-usable.net/2021/07/entry_210711.html

 UI作成時に気をつけていることメモ
 画面ごとのコンポーネントの順位づけ情報整理編で登場した「どっちがだいじ？」を画面内のコンポーネント(図やテーブル、ボタンなど)にも使用しています。
例えば、ユーザー認証の入力フォーム欄について考えてみます。

ユーザー名入力・パスワード入力・確定ボタン・戻るボタンがあった場合、順位づけをしてみると

ユーザー名入力 = パスワード入力 > 確定ボタン > 戻るボタンと私はします。
この順位に基づいてコンポーネントの大きさなどを決めています。

 シンプルさ情報がたくさんある、余白の少ない画面ではボタンなどの操作をするときに間違って違うアクションを起こしてしまうことがあります。

そのためアクションを起こす動きがある画面は特に「シンプルで、コンポーネント同士の余白がある」UIを作成するようにしています。

 画面の一貫性複数の画面をリンクやボタンなどで遷移する場合、それぞれの画面での操作性が違いするとユーザーが迷ってしまいます。

「次へのボタンは画面右側」など大雑把でもいいので同じコンポーネントの位置統一します。

 順不同選択の有無順番関係なく、複数のものから何かを選択して画面を切り替える。

この操作があるときにのみサイドバーを表示しています。画面遷移の順番がずっと変わらないのかユーザーの操作によって変わるのかを考えて画面構成を考えます。

 actionの数・デザイン画面内のactionの数が多い = ユーザーがしなければならない工程が多いとなる得るため、actionの回数をできるだけ少なくなるように作成しています。

ボタンのデザインに関してはコンポーネントの順位づけのように一画面内のactionの順位づけをしています。

例えば、次へのボタンや追加ボタンなどはプラスのイメージのことが多いため一番に、削除や戻るボタンなどはマイナスのイメージのことが多いため2番に…というようなかんじです。
この順位づけにより、ボタン全体に色をつけるか外枠だけに色をつけるかなどのデザインを変更しています。
さらに、上で書いた色と脳の右脳に対しての色使いを気にしています。
例えば、赤色のボタンと青色のボタンどちらを購入ボタン・削除ボタンと認識しますか。多くのひとは赤色が削除ボタン、青色が購入ボタンと考えるでしょう。

このように色やアイコンでボタンの誘導をします。

 離れてみる習慣細かい修正や画面の一部分の作成などをしたときに、画面全体を「パッと」みるために一度離れた場所から画面を見てみます。

これをすることで画面全体でどこを見せたいのか・どのような操作順でして欲しいのかなどを再確認することができます。

 まとめ色や背景色の有無などのデザインはパッと見た時の印象を大きく変えることがあります。

自分が使用しているUI上の色が正しい見方をしてもらえるものになっているのかの確認を忘れないようにしましょう。