UIを考えたwebサイト

成果がでるUIの基本と設計方法

はじめに

UIを考えたwebサイト

UIのことを知りたい方のためにUIの基本についてや設計方法について説明しています。また、UI制作の際、成果をあげるためのポイントについても解説しているので、ぜひご一読ください。

そもそもUIとは?

UIを意識したwebデザイン

UIとは「ユーザーインターフェース」のことを指します。インターフェースという言葉は異なる機器同士を接続する装置やソフトウエアのことを指していて、パソコンと周辺機器をつなぐケーブルなどをインターフェースと呼びます。それだけではなくAPIやWiFiなど、有形無形を問わず異なるものをつなぎ、中間的な役割を果たすものが幅広くインターフェースと呼ばれます。

そのため、人間とハードウエア、ソフトウエアをつなぐ入出力部分のこともインターフェースのひとつとして扱われ、ユーザーインターフェースと呼ばれます。例えばパソコンならばキーボードやマウスがUIであり、スマホやタブレットならばタッチスクリーンがUIに該当します。

UIには2種類あります。それは、CUI(Character User Interface)とGUI(Graphical User Interface)です。

CUIはキーボード入力のみでコンピューターを操作するインターフェースを指し、開発者向けのUIとなります。Windowsのコマンドプロンプトなどは代表的なCUIです。GUIは日常的に使用するパソコンやスマホ向けのUIで、パソコンのマウスキーボード、スマホやタブレットのタッチスクリーンのことを指します。CUIは文字入力、GUIは画像入力のことをイメージしてもらえれば分かりやすいでしょう。パソコンのキーボードもCUIではないのかと思ってしまいそうですが、開発に関わらないものは基本的にGUIと考えてもらって問題ありません。広い意味ではカーナビなどもGUIに該当します。

成果がでるUIと成果がでないUI

成果の数字を示すグラフ

成果がでるUIと成果がでないUIの差はどこにあるのでしょうか?

UIに求められるものは一にも二にも使い勝手で、一般的には使い勝手のことをユーザビリティと呼びます。とはいえユーザビリティはアメリカの工学博士であるヤコブ・ニールセンによってISO(国際標準化機構)で定義されていて、ISO9241-11に規定や評価の基準が書かれており、こちらがユーザビリティを測るための指標としてよく使われます。

ヤコブ・ニールセンによるユーザビリティの定義は5つの要素によって構成されています。

  • 学習しやすさ
  • 効率性
  • 記憶しやすさ
  • エラー
  • 主観的満足度

学習しやすさはユーザーがシステムを理解し使いこなすまでの学びやすさを示しています。効率性は使い方を理解した後の目的を達成するための生産性の高さを指し、記憶しやすさは使い方を理解した後にすぐに忘れてしまうような複雑な構造をしていないかを現します。エラーは安定して使うことができるか、またエラーが起こってもすぐに復帰できるかどうかの度合いを示します。主観的満足度はユーザーの満足度で、楽しく、好んで利用できるかどうかが指標となります。

UIが成果がでるものかどうか判断する際に忘れてはならないのはユーザーの定義です。例えばプロのデザイナー向けに作られた製品を非デザイナーが使いづらいと低評価を下したからといって、それはUIが低いことにはならないのです。あくまでも製品の利用者層として定義されたユーザーからの声がUIの評価につながります。

成果がでるUIを作る要素とコツ

成果のでるUIを考える

成果がでるUIを作るための要素はどこにあるのでしょうか?先ほど紹介したヤコブ・ニールセンのユーザビリティの定義を意識することはとても大事なことですが、もう少し掘り下げて考えてみます。

まず学習しやすく記憶しやすいUIを目指すなら、シンプルさと統一感が必要です。シンプルであればあるほどに何を学んだらいいかが分かりやすく、また操作方法を忘れにくいからです。それにデザインやフォントなどに統一感がある方が理解しやすいです。

また、人間がどのような状態で使いやすさを感じ、満足を覚えるのかを理解していないとユーザーの満足する製品を作るのは難しいでしょう。人間が効率的に動けるように、人や環境などを整えるための研究を行っている分野に人間工学というものがあります。これにより学びを深めれば人間がどのようにすれば効率よく学習できるのかなども理解できるようになり、UIの作成にかなり役立ちます。

できるだけストレスなく直感的に操作が可能であれば、それだけユーザーは機器を使用して目的を果たしやすくなるため、製品に対する満足度が向上します。満足度が向上すればそれだけ製品の評判はあがり、売上げにつながりますからUIの制作は非常に大切な作業となります。

またUX(ユーザーエクスペリエンス)を意識することも大切です。UXはWebやアプリを利用したときのユーザー体験のことを指します。UIは動かしやすさ・使いやすさを目指すもので、UXはユーザーの体験の満足度を目指すため目的は異なるように感じます。ただ、UIが今のように注目されるようになったきっかけであるiPhoneは、UIの素晴らしさがUXをも満たしています。その意味で優れたUIは間違いなくUXにも訴えかけます。

優れたUIの事例紹介

参考になるUIを確認するデザイナー

優れたUIは間違いなく使用目的の効率化を促進します。ここではUIデザイナーのためのUIキットの中で、特に優れたUIを誇る2つについて説明することにします。多くのUIデザイナーが愛用しているUIキットといえば、Adobe XD CCとSketchです。

Adobe XD CC

成果がでたUI事例_AdobeXDサイト

Adobe XDはAdobeの製品で、ウェブサイトやモバイルアプリのUIやUXを作成するためのツールで、多くの業界人が使用しています。使用するにはAdobeCreativeCloudへ課金するなど有料になってしまいますが、最初はお試し期間もあります。

XDの何が優れているかというと、直感的に使えることです。UIの定義を考えると、直感的に使えるということはUIを制作するにあたり必須ともいえることです。いつも説明書を片手に置いておかなければ使えないような製品は、たとえ説明書通りにやれば優れた効率を生むとしても、とても優れたUIとはいえません。UIを制作するための製品がとてもハイレベルなUIであるため、制作者は最もお手軽なプロトモデルに触れながら制作できるので、無限のイノベーションが生まれます。

また、互換性に優れていることもXDの優れた点です。Windows、Macのどちらでも使え、iOSとAndroidの両方で共有しプレビューできるなどあらゆるデバイスでの利用が可能です。Photoshopなどの他ツールから必要なデザインを取り込んだ際すぐにファイルがXDで使えるようになることもデザイナーの作業効率を促進させます。

Sketch

成果の出るUI事例_Sketchサイト

SketchはMacで使えるグラフィックデザインツールで、Adobeに負けず劣らずユーザーの多いツールです。Adobe製品との互換性もあるため、どちらも使っているという方も少なくなりません。

特徴はWordPressのようにプラグインが豊富なことで、さまざまな機能を取捨選択し利用することができます。UIが最も使いやすいと感じる瞬間はどのようなときかと考えると、自分の思い通りにカスタマイズできたときでしょう。その意味でプラグインは複雑な操作をせずともカスタマイズが可能になるため、とても便利な機能です。

Sketchが優れたUIデザインツールであるため、Sketchを使用しているデザイナーもまたSketchの思想を自然と取り入れるようになります。使用しているものに影響されるというのはどこの世界でもあることですから。そのようにして間接的にさまざまな制作物に影響を与えているのがSketchなのです。

おわりに

UI設計をするデザイナー

いかがでしょうか?

成果のでるUIとは、訪れるユーザーにとって使いやすいものであることが第一条件でしょう。直感的に使いやすく、ストレスを感じさせないUIを意識してみてください。

WEBでのお問い合わせはこちら