こんにちは、オークファンでWebデザイナーをしています@af_takeです。
ここ最近は自社で運営しているサービスサイトのUI改修や新規機能追加のプロジェクトを多く担当しています。
そこで普段UI制作時に心がけていることや、ポイントなどを紹介してみたいと思います。
UIデザインとは？
最初にそもそもUIデザインとはというお話ですが、UIとはUser Interface（ユーザーインターフェース）の略で、サービスやプロダクトとユーザーをつなぐ接点のことを指し、Webサイトであれば、表示されるデザインやレイアウト、フォントなど、商品であれば外観などを指します。
UIデザインは、サービスやプロダクトをユーザーが快適に利用できるように設計することを意味しています。
Webサイトの場合、良いUIとは、ユーザーが迷ったり考えたりせず操作でき、かつ見やすい設計になっていることとされています。
ということで、いくつかUI制作時のポイントなどを挙げてみたいと思います。
１.サイトのデザインルールに則った制作
それぞれのサイトには色・文字・レイアウトなど様々なデザイン要素について細かなデザインルールが設けられています。またボタンなど頻出するデザインパーツに関しては、予めコンポーネントと呼ばれるデザインパーツが用意されています。
サイトのデザインルールやコンポーネントが無いと、ページによって全く違うデザインになってしまったり、ユーザーもその度情報を整理する形になるので直感的な操作が出来ません。
そのためサイトのデザインルールに則った制作を行い、サイト全体の一貫性を保ち、ユーザーが直感的に操作できるサイトにしていきます。
またデザインルールやコンポーネントを用意しておくことで、最初からデザインを作ったり、コーディングを一から行う必要が無くなるので、制作スピードを短縮できる側面もあります。
２.表示のバリエーションを意識する
基本的なことですが、サイト内で表示されるコンテンツにはアカウントの状態などで、動的に表示が変わる場所が多くあります。
UI制作時にはこの要素が増えたらどうなるか？または表示されなかったらどうなるか？この文字数が増えたらどうなるか？など、仕様をきちんと把握した上で、さまざまな表示のバリエーションに耐えうるデザインを作成することが重要です。
３.情報にコントラストをつける
テキストをただ並べただけのUIは、情報の優先順位が曖昧で、ユーザーが文章を読み解いて情報を整理することになります。
しかしそれはユーザーにとってストレスになってしまいます。
テキストに適切なサイズとウェイト、カラーを設定して、情報にコントラストをつけてあげることで、ユーザーの情報取得をサポートすることができます。
４.配色は70-25-5
配色は、「ベースカラー：70%」「メインカラー:25%」「アクセントカラー:5%」の比率で配色すると美しい配色になると言われています。
またバランスの良い配色は綺麗なだけでなく、重要なものをしっかりと目立たせることができます。
５.タップ領域
スマホ向けのUI制作時になりますが、ボタンなどのタップ領域が小さいと、タップしずらかったり、誤タップの原因にもなります。
他のサービスのデザインガイドラインを見てみると、Appleの「Human Interface Guidelines」では44px以上。Googleの「Material Design Guideline」では最低でも48px以上のタップ領域を設けることが決められています。
作成したボタンをタップした時に押しにくくないか、誤タップが起きないか実際に使うイメージをしながら作成することが重要です。
６.迷ったら見比べる
UI制作時はXDを使用していますが、XDはリピートグリッドなど便利な機能を使って簡単にレイアウトが作れたり、Photoshopなどと比べて動作が軽く、さくさく作業が行えます。
そんなこともあり、迷った時やなんとなくUIが見づらい時は、作成したデザイン（アートボード）を複製し、編集して見比べてみるということをよく行います。
見比べることで、作っているときには気づかなかった点や、良し悪しが見えてくることがあります。
最後に
思いついたUIデザインのポイントや心がけていることをいくつか上げてみましたが、他にもUIを良くするポイントはたくさんあります。この記事を読んでちょっとUIに興味でてきたぞや、制作のヒントになったぞという箇所があれば幸いです。
最後までお読みいただきありがとうございました！それでは良いクリスマスを〜🎄