洗練されたデザイン、かつ使いやすく、そしてユーザー主体のUIを構築したいという方に向けた、9つのUIデザイン基本事項を解説します。
Webサイトは、ただのページの集合体ではありません。
Webサイトはユーザー（閲覧者）とのインターフェースです。つまり、単純に情報を掲示するだけでなく、受け手のことを考慮して情報の出し方や配置を工夫し、ユーザーの反応に合わせた双方向なデザインを実現することで、閲覧者に優れた体験をもたらすものこそが、Webサイトなのです。
こうしたWebサイトを構築する鍵は「常にユーザーのことを考える」ことです。
ここでは、人間とコンピュータの相互作用（HCI）を科学的に研究した中から抽出した9つの基本事項を解説することで、あなたがより優れたUIをデザインするための土台を提供します。
何をするにもまず、ユーザーがどんな人なのかを知る必要があります。これは、分析アプリで取得できた人口統計データを、すべて把握することによって可能となります。しかしより重要なのは、ユーザーが何を必要としているのか、何が原因でユーザーがその目的を達成できないのかを知ることです。
統計データを注意深く分析するだけではユーザーのニーズや問題を理解することはできません。ユーザーをきちんと知るための一番の近道は、その Webサイトを利用する人々を知ることです。つまり、直接会って話をし、彼らがあなたの制作物（Webサイトやアプリケーション※類似物でも可）を使う様子を観察し、具体的に分かりやすかった部分や使いづらかったことなどを質問していくことが重要です。
「彼らの目的、目的に対する課題、その課題解決のためにWebサイトがどうあるべきか。」
ユーザーが何を求めているかを知るだけではなく、もっと深く掘り下げて、何が必要なのかを捉えましょう。
データの分析やユーザーとの対話から明らかになったインサイトは、ユーザーのインターフェースの使い方から、そのインターフェースで強調するコンテンツの種類に至るまで、あらゆる意思決定に反映することができ、その後に大きく役立つのです。
インターフェイスをデザインする前に、人々がそれをどのように使うか を定義する必要があります。タッチデバイスの普及に伴い、これは皆さんの想像以上に肝要な問題です。Tinderを見ればわかるように、このアプリのUXは、文字通り、スワイプの容易さと衝動性によって定義されています。
人はWebサイトやアプリを、直接的に接する場合と、間接的に接する場合の2通りの方法で利用します。
以上の例をもとに、どのようなユーザーがいて、どのようなデバイスを使用しているのかを深く考慮する必要があります。高齢者や手先が不器用な人のためにデザインするのであれば、スワイプ操作ばかりでは使いづらいということは容易に想像できます。また、主にキーボードを使ってアプリケーションを操作するライターやコーダー向けにデザインする場合は、一般的なキーボードショートカットをすべて導入することで、マウス操作の時間を短縮することがUX向上につながると考えられます。
ボタンをクリックすることで、お金を使ったり、ウェブサイトを消したり、サイトの製作者に問い合わせを送ったりと様々なことができます。
それゆえに、ボタンをクリックした後に何が起こるかということは、ボタンをクリックする前にユーザーに知らせなければなりません。
これは、デザインとメッセージの両方を通じて行うことができます。
特に、何かを永久に削除するような、不可逆的な結果をもたらす行為については、本当にその結果となって良いのかどうかを、ユーザーに確認するのが親切だと言えるでしょう。
ヒューマンエラーの影響を軽減するために、2つの方法があります。
1. ミスを未然に防ぐ
2. 起こった後に修正する方法を提供する
eコマースやフォームのデザインでは、ミスを防ぐためのテクニックをよく見かけます。
ミスを予期しておけば、後になってから修正するよりもイライラすることが少ないことは確かでしょう。フォームを埋め終わった際の達成感を持ちつつ、「次へ」または「送信」ボタンをクリックしてからミスが発覚すると落胆が一層大きく感じられてしまいます。
とはいえ、時にはアクシデントが起こってしまうこともあります。
そんなときこそ、細かいエラーメッセージが有効です。
エラーメッセージを書くときには、2つのことを意識してください。
なお、エラー以外の場合にも、同じように対応することができます。
例えば、何かを削除してしまったものの、それを復元することができる場合、「削除したアイテムは、ゴミ箱に移動して復元をクリックすればいつでも復元できます。」というようなメッセージでそのことをユーザーに示してください。
ユーザーのミスを予期する原則を「ポカヨケの原則」といいます。ちなみに海外でも使われるこの「ポカヨケ」という言葉は、”ポカ（＝ミス）”を”ヨケる”という日本語に語源を持つとも言われています。
人との会話で話を聞く側が必ず相槌を打つように、サイトもユーザーのアクションに対して反応する方が、双方向でより使いやすいWebサイトであると言えます。
これが無い場合、例えばサイトやアプリから応答がない時、ページを再読み込みするか、ノートパソコンを再起動するか、もしくは作業自体を中断してしまうか、といった具合に、ユーザーは困惑・混乱してしまいます。
だからこそ、代表的なもので言えばローディングアニメーションを付けて、ユーザーにサイト側の反応を示すのです。
ここで重要なことは、すべてが迅速に行われるようにすることです。Usability.govでは、サイトの反応が1秒以上遅れる場合は「処理の中断」を意味するとしています。10秒以上の遅延は「ディスラプション（不具合）」です。
また、ページの読み込みが5秒以内であれば、プログレスバーを表示しないようにしましょう。代わりに、ローディング時の「スピニングピンホイール」のような、ビジュアルを使用することで、待ち時間を感じさせることなく、次の挙動に移らせることができます。
しかし、サイトでプログレスバーを工夫することで、読み込みを速く見せることもできます。こうした細かな工夫の一つひとつがユーザーの体験を良好にしていきます。
人間とコンピュータの相互作用（HCI）の基本原則である「フィッツの法則」には、次のようなことが書かれています。
言い換えれば、「何か」が近ければ近いほど、あるいは大きければ大きいほど、その上にカーソル（あるいは指）を置くのが速くなるということです。このことは、明らかにインタラクションやUIデザインにあらゆる示唆を与えますが、中でも最も重要なのは次の3つです。
デザイナーはクリエイティビティが高く、物事をつくり変えることが好きですが、その結果が常にベストなアイデアとは限りません。
なぜでしょうか？なぜなら、慣れ親しんだインタラクションやインターフェースを改変することは「認知的負荷」を増加させるからです。つまり、すでに知っているはずのことに疑いの目を向けさせ、相手に思考させてしまうのです。
Googleドキュメントのメニューバーに、Vista以前のMicrosoft Wordとほぼ同じオプションが並んでいるのは、この法則によるものです。
人間の短期記憶はせいぜい5～9つほどが限界であることがポイントです。そして、単純なものほど短期記憶に残りやすいという特徴があります。
ですから可能な範囲で、ユーザーが効率的かつ効果的にインターフェイスを使用するために覚える必要のある事柄を制限する必要があります。このためには、「情報をチャンキングする」、つまり理解しやすい小さな事柄に分割することが有効です。
この考え方は、「テスラーの複雑性保存の法則」とも重なり、UIデザイナーはインターフェイスを可能な限りシンプルにするべきだというものです。これは、最も単純化されたインターフェイスの背景には、アプリケーションの複雑さを隠しもつことを意味します。
この法則に従わない製品の代表的な例が、Microsoft社のWordなのです。Wordは、ほとんどの人が文字入力など、ほんの少しのことしかしませんが、一方で、あらゆる種類のパワフルなことができる人もいます。しかし、世界中で誰もが同じバージョンのWordを同じUIで開いているため、パワーユーザーではない普通の人は、おそらく使うことのないさまざまなオプションに圧倒されてしまいます。
そこで、先進的な機能を二次的なインターフェースで提供する「プログレッシブ・ディスクロージャー」という考え方が生まれました。これは、ウェブサイトのトップページでよく見られる方法で、短い文章で製品や機能を紹介し、ユーザーがさらに詳しく知ることができるページにリンクしているというようなものです。(これは、ナビゲーションが難しいモバイルサイトで活かせる方法でもあります。）
リンクやボタンに「さらに詳しく」やそれに類する非特定テキストを使用しないようにしましょう。
なぜなら、ユーザーが何について「さらに詳しく」学ぶのかがわからないからです。多くの場合、ユーザーはページを流し見て、目的の場所に行けるリンクを探しますが、「さらに詳しく」を15回繰り返しても、その先に何があるのかが分からないため何の役にも立ちません。
昨今のWebサイトはあまりにも多くの要素で溢れています。「バナー」が突然拡大し、フルスクリーン広告になったり、ポップアップするモーダル広告は読むつもりのないブログの購読を促してきます。突如現れる動画広告は私たちの手を止め、貴重な時間を無駄にさせてきます。さらに、ウィジェット、フライアウト、ツールチップ......。
ヒックスの法則は、私たちに快適なWebサイトを構築する方法を教えてくれます。この法則自体は、ユーザーに提示する選択肢が多ければ多いほど、ユーザーは決断するのが難しくなってしまう、というシンプルなものです。
この法則は、私たちが作るもの多くに影響を与えています。以下はその例です。
数え上げればきりがありません。しかし、重要なのは、デザインをシンプルにすればするほど、ユーザーがより早く、より簡単に、私たちの望む意思決定を行えるようになることです。ランディングページやニュースレター以外のメールでは、行動喚起を1つだけにすべきなのは、まさにこのためです。
一言メモ
時には、ユーザーにじっくりと選択肢を考えてもらいたいこともあります。Pinterestなどの多くのブログで見られるタイル状のデザインが効果的なのは、そのためです。多くの選択肢があればあるほど、自分に合ったものを見つけられる可能性も高くなるのです。
Webflowを使用する多くのデザイナーは、これらのガイドラインを適用して、直感的で魅力的なインタラクションを構築しています。その例をいくつかご紹介しましょう。
Waldo Broodrykは、モバイルでもデスクトップでも楽しめるアニメーションメニューを制作しています。ページを読み込むと、右下の円形に「Menu」と表示されます。クリックすると拡大し、利用可能なページが表示されます。「Xボタン」を押下すると、ユーザーはメニューを閉じてコンテンツに再び集中することができます。
画面の端にあるリンクをターゲットにするのが最も簡単であるという「フィッツの法則」に着目した、明快で魅力的なデザインです。円形のナビゲーションは、ナビゲーションに階層性を持たせたくない場合に、役立つデザインと言えるでしょう。
次はあなたが魅力的で、使いやすいインターフェイスを作る番です。そして、あなたがこれまでに見たUIデザインの良い例や悪い例を共有していきましょう。
ユーザーにとって使いやすいUIをデザインする上でユーザーを知ることがなによりも重要です。しかしながら、先駆者たちが経験則や研究に基づき様々な法則を提唱してくれています。こうした基本的な事項を抑えた上でより良いUIデザインを制作してみてください。
見た目の華やかさや強烈なインパクトが時に必要となる場合もありますが、まずは基本を身に着け、誰にとっても使いやすいデザインを作り上げることが重要です。
当社では、特にデザインから自分で手掛けてサイト制作したい方におすすめな「次世代ノーコードツールWebflow」に関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した記事はこちらからご覧ください。
Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営