【翻訳】Do’s and Don’t for UI Design【Part 3】

### 1.彩度を制限する：
彩度の高い色は、コントラストを強調します。ダークモードでは、彩度の高い要素は目を刺激し、悪いユーザーエクスペリエンスをもたらします。ダークモードは一般的に夜間に使用されるため、デザイナーの義務として、落ち着きとリラックスした雰囲気を維持する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/0d31a459-0615-42a4-9cf5-eb0e54268d6e.png)

### 2.ボタンの階層化
1つの画面には、理想的にはプライマリCTAを1つだけ配置し、その後にセカンダリCTAボタンを配置するのがよいでしょう。これは、1つの画面に複数のCTAボタンがあると、ユーザーが圧倒される可能性があるためです。これは、意思決定をする際に混乱を招く恐れがあるからです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/268413fc-e020-1874-1424-269ed1052f48.png)

### 3.動詞をカットする
メニューに動詞を入れたり、フレーズを作ったりするのは不要です。必要最小限の情報を適切な方法で書けば、十分理解できるのです。ですから、メニューのデザインでは、余計な言葉を付け加えないようにしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/ece462cd-9c3c-2d49-3e22-86508099d850.png)

### 4.00000と#FFFFFFにNOを突きつける
携帯電話会社にはたくさんの機種があり、それぞれの機種が微妙に異なる色を持っています。純粋な黒(#000000)や白(#FFFFFF)を使用すると、そのままではポップアップしないことがあり、がっかりすることがあります。そこで、ダークグレーやオフトーンの白を使うことで、似たようなインターフェイスを作ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/fce0f000-ef77-5703-afc9-69217beb1e50.png)

### 5.少ないほどいい
フォントサイズのバランスが取れていないフォームを見かけたことがあるのではないでしょうか。最小限のフォントサイズの違いにこだわることで、UIがバランスよく見えるようになります。

ヒント：フォントサイズを決めるときは、倍数にしてください。例えば、16（見出し）、12（小見出し）、10（本文）、8（キャプション）-2の倍数。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/14e7e2e4-b9df-8cc1-9799-27445a4347a2.png)

### 6.アイコンに統一感を持たせる
私はこのことに何度も気づき、また同様に勘違いしていたことがあります。違うパックやセットのアイコンを使ってしまうのです。いいえ！なぜなら、これではUIが未熟に見えてしまうからです。アイコンは感情を呼び起こし、物事を簡単に理解するのに役立ちます。最終的なUIにアイコンを使用する前に、同じようなアイコンパックからアイコンを集めましょう。

👉リソースアイコンのリソースはたくさんありますが、私のお気に入りのfigmaプラグインとアイコンセットをいくつか紹介します：

Material UI
Unicorn
Basil Icons

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/049701b1-93d6-7cb9-11df-a7d065d8d51d.png)

### 7.モードによる色分け
一般的に、ダークモードとライトモードの両方で画面をデザインするには、1つのカラーパレットで十分だと思われがちですが、それは間違いです。ライトモードではきれいに見える色も、ダークモードでは暗すぎるかもしれませんし、その逆もまた然りです。そのため、2種類のカラーパレットを用意し、色の彩度を変えるのがベストです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/92fcbdb7-da62-24bd-a351-8b266f063215.png)

### 8.オンボーディング
アプリのオンボーディングとは、製品（アプリ、ウェブサイト、プラットフォーム）を利用するユーザーの旅を定義するものです。そのプロセスや、どのようなステップがあるのかについて、オープンにするようにしましょう。スキップ」や「行き来」ができるようにすることは、オンボーディングにとって非常に重要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/bb84814e-1087-1d8a-3619-38bd9da4cf8c.png)

### 9.オーバーレイ
多くのウェブサイトは画像で構成されていますが、UI上で画像を効果的に使用するには、画像にオーバーレイを付けることが必要です。オーバーレイは、画像上のコンテンツの読みやすさを向上させます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/c7bae19e-eccd-9d7d-053c-21ae99ad72f1.png)

### 10.スクロールを促す
ノートパソコンやタブレット、テレビなどの大画面では、未使用のスペースがたくさん残されています。下部のスペースを活用する最良の方法は、コンテンツを少し見せることで、ユーザーにスクロールを促すことです。これは、UIとUXの両方の側面から良いことで、ユーザーがすべてのコンテンツを見ることができるようにスペースを使用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/e19e2b69-1f82-02e8-7a6a-e4de20376d8a.png)

以上、デジタル製品のエクスペリエンスデザインをする際に守るべき10の「やるべきこと」と「やってはいけないこと」を紹介しました。UIデザインの基本を理解するのに役立つことを願っています！

## 《参考記事》 Do’s and Don’t for UI Design-Part 3 Exploring more do’s and don’t that will help you create better user experience.
https://bootcamp.uxdesign.cc/dos-and-don-t-for-ui-design-part-3-72857318ff0c