UIデザインの歴史やこれだけは外せないチェックポイントとは
どんなに優れた機能が存在してもデザインが悪ければ機能自体に気付かなく使ってもらえないことや操作性の悪さから離脱に繋がってしまいます。
UIを気にしなくていいWebサイトやWebサービスはごく僅かだからこそUIデザインや最低限チェックしたいポイントについてご紹介いたします。
目次
1. UIデザインとは
UIデザインとはそもそも何でしょうか。
通常のwebデザインとは何が異なるのでしょうか。
UIはユーザインタフェースと呼ばれ一般的には機械と使用するユーザーの間で情報のやりとりをするためのインターフェースを指します。
例えば普段お使いのPCやスマホと利用しているユーザーを繋ぐ接点がキーボードやマウス、スマホの画面だったります。
キーボードの位置が製品ごとにバラバラだったらどうでしょうか？
極点に1つのボタンだけ大きかったり小さかったら、全くもって使いにくい製品になりませんでしょうか。
Webサイトで言えばユーザーが閲覧する全ての画面がユーザインタフェースと呼べます。
UIデザインには4つの原則があると言われています。（「ノンデザイナーズ・デザインブック」より）
整列・近接・反復・コントラストの4つが基本原則で上げられます。
整列は要素を統一したルールで並べ整列することです。
〇整列された例
- 北海道
- 東京都
- 沖縄県
×整列されていない例
- 北海道
- 東京都
- 沖縄県
近接は近しいグループをグルーピングするなどして属性が近いものをまとめて見せます。
〇近接している例
- 人参
- キャベツ
- みかん
×近接されていない例
- 人参
- みかん
- キャベツ
反復は同じデザインパターンを繰り返し使います。
〇反復されている例
- 人参
- キャベツ
- みかん
- りんご
×反復されていない例
- 人参
- キャベツ
- みかん
- りんご
コントラストは情報に強弱など対比をつけて要素を目立たせます。
〇コントラストがされている例
×コントラストがされていない例
2. UIデザインの歴史
WebサイトのUIデザインは歴史と共に最適と呼ばれるものが変化してきました。
スキューモーフィズム
2000年代頃に登場したスキューモーフィズムはユーザーにとって馴染みのないアプリのアイコン等を馴染みのあるものに寄せてデザインをすることで直感的に分かりやすさを提供しています。
例えば時計やストップウォッチのアプリであれば、実際の時計に近いデザインを行うことで「これは時計のアプリなんだ」と理解してもらうことが出来ます。
スキューモーフィズムの欠点はユーザーが理解しやすい様に現実世界で馴染みのあるものにデザインを寄せる方法ですが
現実にないデザインを実装しようとすると利用するものが無く困難であることなどが上げられます。
フラットデザイン
フラットデザインはスキューモーフィズムなどを簡略化したデザインと言われています。
光沢や立体感を無くしフラットでシンプルなデザインになっています。
フラットデザインでは例えばボタンを押下した場合のデザインなどがシンプルな作りになっているためデザイン工数も減り処理自体も軽微なものとなっています。
逆に欠点はシンプルであるが故に直感的に分かりづらいボタンが見つけずらい等が上げられます。
マテリアルデザイン
マテリアルデザインはGoogleが提唱しているもので物質やメタファーの概念を使用して一貫性のあるデザインとなっています。
フラットデザインの良い所は残しつつ光沢や質感を大事にするスキューモーフィズムの考え方を取り入れています。
現在はニューモーフィズムと呼ばれるデザインが重要視されているなど時代によりユーザーの価値観の変化に伴いデザインも変化するため定期的にUIデザインの見直しをお勧めしております。
3. なぜUIデザインを気にする必要があるのか
WebサイトにおいてなぜUIデザインを気にする必要があるのでしょうか。
全くUIデザインを考慮しないとどうなるのでしょうか。
折角お問い合わせを期待してお問い合わせフォームを設置しても
「どれがボタンだか分からない」
「必須項目とは思わずに入力していなかった」
「うちのパソコンで見ると入力欄が半分までしか表示されていない」
どんなに良い機能を作った所で最低限のデザインが伴わなければ気付いてもらえない、使用してもらえないなんてことになります。
またWebサービスにおいてはUIデザインが差別化を図るための大切な要素にもなっています。
昔と異なり作れば売れる時代は過ぎていてサービスの品質が重視される様になっているのと同様にWebサイトやWebサービスも如何にUIデザインにこだわるか、ユーザーへ優しい設計になっているかが大切です。
4. これだけは欠かせない！チェックポイント
伝えたい相手は誰か
Webサイトやサービスのユーザーはどなたでしょうか。
年齢層や趣味嗜好などは明確になっていますか。
例えばよくあるハンバーガーアイコンですが
日頃からWebサイトやサービスをよく利用する方ならハンバーガーアイコンを押すことでメニューが表示されることが直感的に分かりますが伝えたい相手が日頃からwebサイトをあまり利用していない方ならどうでしょうか。
直感的に分からずにそもそも押せるボタンという認識が無いかもしれません。
メニューだからと当たり前の様にデザインするのではなく伝えたい相手は誰かを再確認した上で適切なデザインを心掛けてみましょう。
一貫性はあるか
デザインや表記の一貫性は大事です。
人は無意識のうちに物事に一定のルールや統一性を見出します。
「このボタンを押すとこうなる」
「ページ上部にはパンくずリストがある」
「左に戻るボタンがあり、右に進むボタンがある」
「ボタンが灰色の時は無効のためボタンが押せない」
Webサイト全体で一貫したルールや規則があればユーザーにとってサイトの安心感や信頼性に繋がります。
シンプルにして情報や選択肢を減らす
伝えたい情報が沢山あるからこそ全てを記載したい気持ちにもなりますが
なるべくシンプルな作りを心掛けて場合によっては情報を減らしてみましょう。
人は選択肢が多すぎると選びきれずに最終的に選択出来ないことも研究されています。
これを応用しているのがECサイト等でお買い物する場合にカートに入れて購入画面、決済画面と進むにつれてTOPに戻るボタンが表示されなくなっています。
ここでTOPに戻るボタンを表示してしまうと
「前の画面へ戻るボタン」
「次の画面へ進むボタン」
「TOPへ戻るボタン」と選択肢が増えて「やっぱり購入するのやめようかな」と離脱にも繋がります。
ユーザーの利便性を考える上でもあえて情報や選択肢を削ることも考慮してみましょう。
個性的すぎないか
人には学習効果があります。
大体のWebサイトやサービスは似たようなUIデザインになっています。
もしWebサイト毎にデザインやルールが異なっていればユーザーは1から学習しなければいけません。
しかしUIデザインが統一されていることで、以前のWebサイトで覚えたルールがそのまま適用出来ますよね。
個性的なデザインは勿論大切ですが、これまで培ってきた一定のデザインルールは踏襲しつつその上で個性を出していきましょう。
レスポンシブデザイン等を活用する
今やPCだけでなくタブレットやスマホなど様々なデバイスがあります。
ユーザーがどんなデバイスでWebサイトを閲覧しているか分からないからこそレスポンシブデザイン等を利用してどんな環境でも快適に閲覧出来る様なデザインを意識してみましょう。
クロスブラウザチェックをする
デバイスと同様にユーザーが閲覧しているブラウザも異なります。
「Chromeでは動くけどIEでは動かない」
「AndroidのChromeではボタンが表示されるけど、iOSだと表示されない」
ブラウザ毎でデザインや機能に差異が出ない様にすることもUIデザインに必要な要素だからこそ
様々なデバイスやブラウザでの表示チェックは大切です。
誤解を生まないデザインにする
デザインには一定のルールがあります。
「クリック出来る要素にはポインターマークを付与する。」
「リンク出来る機能はカーソルを重ねるとアンカーテキストを表示する。」
これからの慣れ親しんだデザインを活用せずに逆に誤解を生むデザインとなってしまったらどうでしょうか。
クリック出来ないにも関わらずカーソルを合わせると要素が光っている、でも押せない
ユーザーを惑わすようなデザインや誤解を生むデザインには要注意です。
UIデザインは定期的な見直しを
UIデザインの良し悪しは時代と共に変わっています。
Webサイトの品質においてUIデザインは大きな役割を果たすからこそ定期的にUIデザインの見直しを図ってみては如何でしょうか。
