1. HOME
  2. デザイン
  3. UIデザインに必要な10個のポイント

UIデザインに必要な10個のポイント

デザイン

目次

最近ブログをデザインするにあたってUIデザインについて考えるようになりました。
でもUIデザインって具体的にはなにをすればいいのだろう?ということで
UIデザインについてまとめてみます。


UIとは?


UIとは、User Interface(ユーザインターフェース)の略で、ユーザーとコンピュータとが情報をやり取りをする際に接する、機器やソフトウェアの操作画面や操作方法を指します。ハードウェアではキーボード、マウス、ディスプレイなどがこれを指し、ソフトウェアでは画面上のメニュー、アイコン、ウィンドウなどの操作方法がこれに当たります。

エリートネットワークより引用

簡潔に言えば、ユーザとシステムが情報をやり取りするための仕組みのこと。
わたしたちユーザが目にするもの使うもの = キーボード・アイコンなどがUIです。
アイコン・ボタンをクリック・タップすればアプリやページが立ち上がります。
こういった導線もUIと呼べます。

Webページをデザインする上でUIについて考えることが必ず必要だとおもいます。
そこでやるべきUIデザインについて紹介します。

1 リキッドレイアウトにする

スマートフォンからiPad、PCまでデバイスが多様化し、画像解像度が様々になってきています。
そこで要素や画像をpx指定するのではなく、%指定にすることで、
解像度の多様化に対応できます。

2 タップ領域を広くする

スマートフォン操作では、マウス操作に比べ正確にタップすることが難しくなります。
なので、ボタンなどを大きめに設定することや、周りにタッチを感知できるスペースを設けることが必要です。
AppleのiOSヒューマンインターフェイスガイドラインでは、人間の指で快適にタップするためには、44ピクセル×44ピクセルのタップ領域を割り当てることを推奨しています。

3 1カラムレイアウトにする

2カラムレイアウトが主流とされてきましたが、最近では1カラムレイアウトが増えてきています。
1カラムレイアウトにすることで余分な情報を取り除き、
一番見たい・見せたいコンテンツに目を向けさせることができます。

しかし、1カラムレイアウトが一概に良いとは言えません。
1カラムではないほうが良い場合(多階層化されているサイトなど)もあるので判断が必要です。

4 アイコン

アイコンは視覚的にユーザーにわかってもらうためにあるもので,
機能やナビゲーションで使うアイコンは使いすぎないことが重要です。
使いすぎるとUIを複雑にしてしまう可能性が出てきます。

スマートフォンではPCと違いマウスオーバーという概念がないので、
より正確に視覚でわかりやすいものにする必要が出てきます。


AndroidとiPhoneのアイコンを例にとってみても
見た目でわかりやすいものが多いことがわかります。


5 メタファー

表現としてメタファーを使用してみましょう。メタファーを使うことでUXの向上も図れます。
メタファーは、ユーザーが抽象的、見慣れないものを理解するための優れたツールで、
複雑なものなどをクリエイティブに説明することができます。
うまく使うことができれば、ユーザーの注意を引くことができます。

6 フォーム

見た目が完全に入力フォームなのにいざ入力しようとすると
モーダル(※)が開いてしまうようではあまり良くないです。
「その場で入力できる」ようにしておくか、または「別画面が立ち上がる」
ということをユーザーが分かるようにしておきましょう。(ボタンにするなど)

 モーダルウィンドウとは

何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。

Wikipediaより引用

7 操作のフィードバック

マウスのクリックとは違い、タップでは操作したという感覚があまり得られません。
なのでボタンなどでは操作時に色を変えるなどのフィードバックをつけ
ユーザーに操作したことを実感してもらうような工夫が必要です。

8 フォントサイズの意識

モバイルファーストではスマートフォンを中心にデザインを作らなければいけないので
フォントサイズを考えることは必須です。
サイズ14pt〜16pt、行間は140%〜160%が基本とされています。
しかしデザインや、文章の量により例外もでるので実機での確認しながらの調整が必要です。
ちなみに14ptの場合landscapeでは34文字、portraitでは22文字入ります。

9 SVGの活用

SVGはベクターデータなので大きさや解像度に依存せず、環境、拡大によらず
常になめらかに表示させることが可能で、アニメーションをさせることも可能です。
しかしIE8以下で対応していないのと、色が少ないので写真などには不向きなので
ターゲットや用途にあわせて使い分けるようにしなければなりません。

10 余白marginを作る

人にもよりますがほとんどのスマートフォンユーザーは片手で操作をします。
片手での操作では親指がメインになるため押し間違えが出てきます。
なので要素やボタン、アイコンには十分な余白をとるように設定しておくと
ユーザーの押し間違えが軽減されます。

まとめ

PCについてはモバイルファーストが言われますがUIについて考えることは必要なことです。
タッチスクリーンのPCも登場し、UIを良くしておくことでレスポンジブWebデザインにしやすくできます。
今回10個のUIデザインに必要なことを書きましたが、まだまだやれることはあります。


UI
備忘録

この記事を読んだ方におすすめ