【UIデザイン】忘れがちな5つのポイントと、誰でもできる解決策を紹介

WebデザインやUIデザインは、見た目の美しさだけでなく、ユーザーが使いやすいかどうかも重要な要素です。

しかし、駆け出しのデザイナーにとって、知っておくべき点や気をつけるべきポイントについては、見落としてしまうことがあります。

本記事では、UI設計で忘れがちな5つのポイントを紹介し、どのように改善すれば解決できるのかを解説します。自分のデザインに自信がある方も、改めて確認してみることで、よりよいUI設計を行うことができるかもしれません。

１ 視認性の低いテキスト

デザイナーが犯しがちな失敗のひとつに、テキストの視認性を確保できていないことがあります。

例えば、白地にグレーのテキスト。これは良くある効果的な情報整理ですよね。しかし、すべてのカラー背景にグレーのテキストを入れるのは、視認性低下の恐れがあるので、オススメできないです。

そんな時は、文字色を背景色に近づける事で、コントラストの差が生まれ、情報の優先順位を表現する事ができます。

また、webサイトやアプリケーションが、必ずしも室内のみで閲覧されるとは限りません。カラー背景にグレーの文字色だと、ユーザーが外でサイトを閲覧している場合、日の光で非常に見にくくなります。ユーザーは画面を手で覆い、影をつくる必要がでてきます。

視認性を落として情報の優先順位をつくるのではなく、視認性は保ったまま情報の優先順位をデザインする必要があります。

２ 余白がない

適切な余白を設けることは、ページ内のバランスを整えるために非常に重要です。
新しい装飾を加える事なく、余白を作ることで、要素のグルーピングしたり、区別する事ができます。

３ 全てのボタンに背景色をつける

ボタン作成時に気をつける事をまとめた記事を前に書いたので、興味あれば、全て読み終わった後に覗いてみてください。

サイト内やアプリケーション内にある、ボタンには色んな意味があり、それぞれに優先順位をデザインする必要があります。

• １番目に重要なボタンには、明白で目を惹き付ける

• ２番目に重要なボタンには、明白ではあるが、目立たせすぎない

• ３番目に重要なボタンには、ボタンとして認識できるけど、目立たせない

これらに優先順位を与えるために、全てのボタンに背景色を使用したり、色で違いを出すのは良くないです。ユーザーに色の意味を覚えてもらう必要があり、そして恐らくユーザーは覚えないでしょう。

例えば、視覚的にボタンに優先順位を与えるためには、１番重要なボタンには、背景色を使用、２番目に重要なボタンには、囲い線を使用、三番目に重要なボタンはテキストリンクが適切ではないでしょうか。

４ 不適切なフォントの使用

この世界には色んなフォントがあり、使用許可が降りているものに限り、サイトに取り入れる事ができます。
特に独創性に溢れたフォントを使用する際は気をつけた方が良い事があります。

• webフォントがない場合が多く、デザインしても使用できなくなる

• 本文テキストに独創性のあるフォント使用してしまうと、視認性が悪くなり、読みにくくなる恐れがあります。

• フォントの形は文章に付加価値をもたらします。達筆なら、和風な印象だったり、力強いメッセージ性をもたらせたりします。
  特に深い意味を持たせない文章に関しては、ノーマルなフォントを使用する事をおすすめします。
  独創性のあるフォントは、ワンポイントで背景として薄く使用したりして、装飾的な扱いにとどめておくのが良いのではないでしょうか。

５ テキストが長すぎる

ユーザーはいかにテキストを読まないか、から引用させていただきますが、

月並みなWebページの場合、平均的アクセス中にユーザーが読むテキストの量は多くても全体の28％にすぎないという分析結果が出た。より現実的には、20％程度とみられる。

ユーザーは、文章を読んでいない、あるいは流し読みしています。

文章がどうしても長くなってしまう場合は、見出しをつけて、結論を先に書いてあげたり、文章の行間をあけて読みやすくしてあげるなど、工夫が必要になります。
または、文章のまとめ画像、挿絵を用意して、飽きさせないサイトづくりを心がけましょう。

まとめ

色々なミスをご用意しましたが、全てのミスを取り上げたわけではありません。これらを直しただけでは根本的な解決はできない場合もあります。
しかし、webデザイナーやUIデザイナーとしてアサインされたからには、見た目の綺麗さだけでなく、ユーザー目線を忘れずデザインする事を心がける必要があります。

---

参考にさせて頂いたもの🙇🏻‍♀️

Refactoring UI