基本ノウハウ
Webサイトや自社製品・サービスのユーザー満足度を上げるには、見やすい・使いやすいUIデザインが必要です。しかしあまり馴染みがない方にとっては、「どのようなデザインが良いのか」など疑問が多いでしょう。
本記事ではUIデザインとは何か、基礎知識とともに作り方を解説します。見る・読む・移動するといったユーザーアクションを踏まえたコツや、今からできる勉強方法もあわせて紹介しています。ぜひ参考にしてみてください。
UIデザインとは、ユーザーとの接点であるUI（User Interface）を見やすい・使いやすい形に設計する作業です。そもそもUIとは、以下に挙げるようなユーザーの五感に触れるすべての要素を指します。
近年UIデザインの重要性が増しているのは、UX（ユーザー体験）向上の一端を担っているためです。特にサイトやアプリといったWebコンテンツにおいてUIデザインの比重は大きく、売上を左右します。
例えば「見積もりを取るために問い合わせしたい」と、Webサイトを訪れたユーザーがいたとしましょう。Webサイトの設計上お問い合わせフォームがなかなか見つけられない場所にあると、ユーザーはストレスを感じます。また、やっと見つけた問い合わせフォームの入力項目が小文字で分かりづらかったり、必須の入力欄が多過ぎたりすると、場合によっては問い合わせの取りやめにつながり、企業にとっては大きな機会損失です。これはUIが適切にデザインされていないために、UXにも悪影響を及ぼし、顧客の気持ちを離れさせてしまったケースといえます。
UIとUXは密接に関わっており、UXの向上を考えるのであれば優れたUIデザインを目指す必要があります。UI/UXの基礎知識や関係性について詳しく知りたい方は、こちらの記事もあわせてチェックしてみてください。
関連記事：「ユーザーインターフェース（UI）とは？UXとの関係や設計時のポイントを解説」
関連記事：「全企業が向き合うべきUXとは？意味やUIとの違いを分かりやすく解説」
UIの作り方として重要な3つのポイントを解説します。
なおWebサイト制作全体の進め方を知りたい方は、こちらの記事もぜひ参考にしてみてください。
関連記事：「【5STEP】Webサイト制作の流れと期間｜各フェーズごとに徹底解説」
UIはユーザーとサービスの接点であるため、双方に対する理解がなければデザインの土台を築けません。UIデザインを進める前に、ユーザーとサービスについて理解するところから始めましょう。
ユーザーが何に課題感を持ち、どのような体験に喜びを感じるのかを理解できていなければ、良いUIデザインはできません。ユーザーの理解を深めた上で、UIによってどのようなUXをもたらそうとしているのかを明確にする必要があります。具体的な手法として、下記があります。
ペルソナの作り方については下記の記事で解説しているため、詳細を知りたい方は参照してください。
関連記事：「ペルソナの作り方とは？徹底解説【無料設定シートダウンロード】」
また、UIデザインを進めるにあたっては、多くの人に当てはまる普遍的な価値観や行動パターンも理解しておく必要があります。下表のような人間の特徴について把握した上で、ユーザーがスムーズかつ心地よく操作できるよう設計することが大切です。
| 人間の価値観・行動パターン | 対応の方向性 |
|---|---|
| 面倒な操作は避けたい | 入力や移動の手間を減らす 次に起こすべきアクションを提示する |
| 疑念や不安を抱きやすい | 根拠となるデータや進捗状況を可視化する |
| 忘れてしまう | 入力内容や履歴を保存する |
| できるだけ早く終わらせたい | ダイジェストを掲載する |
| 使いやすい形にアレンジしたい | カスタマイズ機能を搭載する |
| 選択肢が多すぎると途中で考えることを放棄してしまう | おすすめやプリセットを用意する 行動を制限されたくない 必要に応じてスキップできる機能を搭載する |
| 完璧ではない | 自動追加機能や復元機能を搭載する |
効果的なUIデザインにはユーザーだけではなく、提供するサービス自体についても理解を深める必要があります。具体的には、次のような工程を通じて理想のUIを想定し、ユーザーストーリーやユーザーシナリオとして描き出します。
ユーザーシナリオの書き方やテンプレートについて詳しく知りたい方は、こちらの記事もぜひ参考にしてみてください。
関連記事：「【テンプレート付き】ユーザーシナリオとは？書き方からカスタマージャーニーとの違いまで解説」
UIデザインを進めるにあたって役に立つ思考法があります。主に以下の3つです。
3つの中から1つ例に挙げると、下表の4つの工程を繰り返すなかで徐々に最適解へ近づけていき、ユーザーが使いやすいシステムづくりを目指すのが「人間中心設計」です。
| 人間中心設計の工程 | 内容 | 手法 |
|---|---|---|
| 1.調査 | ユーザーの要求や製品・サービスの利用状況などの調査を行う | ユーザーインタビューなど |
| 2.分析 | ユーザーの要求を製品・サービスに反映できるよう整理する | ペルソナ・カスタマージャーニーマップ作成など |
| 3.設計 | 製品・サービスを実際に設計／試作する | - |
| 4.評価 | 製品・サービスがユーザーの要求を満たしているか検証する | ユーザビリティテストなど |
上記3つの思考法に共通するのは、一気に最終的な完成まで事を進めるのではなく、小規模に改善のためのサイクルを回しながら進める点です。ユーザーの理解を深めた上で少しずつ設計を進め、ユーザーの要求を満たせているか検証し、改善を繰り返します。ユーザー目線のブラッシュアップが定期的に入れば、開発者の思い込みによる独りよがりなUIを回避できるでしょう。
なお各思考法の進め方やUI/UXの改善方法のコツについて知りたい方は、こちらの記事もあわせてチェックしてみてください。
関連記事：「UI/UXの改善方法とは？成功させるポイントから役立つ思考法まで解説」
設計内容を実装する際は、下表に挙げる3つの観点に留意しましょう。
| 観点 | 概要 | 具体的な手法の例 |
|---|---|---|
| パフォーマンス | ページの遷移や読み込みのスピードを上げる | SPA（Single Page Application）※1など |
| アクセシビリティ | 年齢や障がいの有無に左右されず、より多くのユーザーが快適に操作できるよう工夫する | WAI-ARIA（Web Accessibility Initiative Accessible Rich Internet Applications）※2など |
| 拡張性 | スピーディな変更に対応できるようにしつつ、表現の統一によりユーザー体験の再現性を高める | コンポーネント駆動※3など |
※1 画面の遷移なしでコンテンツの切り替えができるWebアプリケーション
※2 HTMLだけでは不十分な部分を補完する属性タグ（スクリーンリーダーなど）
※3 UIの構成要素を部品化し、改善や改修をスピーディに行えるようにする手法
パフォーマンスの向上はUX改善に直結します。アクセシビリティの改善はユーザー数が拡大するメリットがあります。拡張性はスピーディな変更に対応し、UIを改善していくために重要な要素です。3つの観点を踏まえた上でUIデザインを進めましょう。
ここでは実際にどのようなUIデザインをすれば良いか、ユーザーが起こすアクションごとに解説します。
「見る」に対するUIデザインのコツは、主に以下の5つです。
※4 ボタンを押した際、新たな画面が同一ページに重なって表示される状態
例えばオーバーレイ時は、背景が透過されていないとページを移動したと認識してブラウザバックしがちです。すると「想定していた画面より、さらに1つ前に戻ってしまった」という状態に陥り、ストレスを感じるケースも少なくありません。
そのためオーバーレイ時は、ユーザーが自身の現在地や状態を把握できるよう背景は透過しましょう。
また検索時は絞り込み条件を自ら設定しても、結果画面を見ているうちに内容を忘れてしまう可能性があります。ユーザーがいつでも条件を見られるよう、絞り込みの設定内容や数などを明記することが大切です。
「読む」に対するUIデザインのコツは、主に以下の5つです。
例えば背景とのコントラストが弱いとテキストの視認性が低くなり、伝えたい情報がユーザーに届きません。アクセシビリティの観点からも、コントラスト比は必ず押さえたいポイントの1つです。
なおコントラストは世界的な標準規格としてWCAG2.0があり、原則として4.5：1の比率が望ましいとされています。UIデザインで配色を検討する際は、Syncerといったチェッカーでコントラスト比を適宜確認すると良いでしょう。
「移動する」に対するUIデザインのコツは、主に以下の7つです。
例えば画像などを左右にスライドできるカルーセルは、現在位置を把握できるようにドットインジケーターを下部に表示します。しかしドットは小さくクリックしにくいため、スライド操作用のボタンも設置すると親切です。
またコンテンツの端が画面内で綺麗に収まっていると、続きがある場合に気づいてもらえません。スクロール先がある場合は、あえてコンテンツを途中まで見せるのもUIデザインにおけるコツの1つです。
ただしスクロールが多すぎるのも、ユーザーにとってストレスになります。この場合はアコーディオン機能で本文を折り畳み、必要な情報へより素早くたどり着けるように配慮します。
新規タブを開く場合などは、ページ移動を示すアイコンも付記することも大切です。リンクはユーザーが混乱しないよう、主流の「青+下線」にならうと良いでしょう。
「選択する」に対するUIデザインのコツは、主に以下の9つです。
例えばオンオフを切り替えるボタンでは押したあとの状態が分かるよう、色を変化させる、アイコンとテキストを併用するといったUIデザインが効果的です。
また押し間違いによる手間を省くためにも、ボタン同士の間隔を広げましょう。クリックやタップがしやすいように、ボタン自体を大きくするのも1つの方法です。
「入力する」に対するUIデザインのコツは、主に以下の8つです。
例えば操作項目が多い場合は、基本情報や支払方法など情報のカテゴリごとにステップ分けし、入力に対する心理的ハードルを下げましょう。画面上部にステッパーを設置すると進捗状況を把握しやすくなり、より親切です。
また入力時に文字数などの条件がある場合は、その達成度合いを明示することでエラーを未然に防げます。条件は「〇文字以上」など、より具体性のある言葉の使用が大切です。
さらに「どのような書き方が良いか」とユーザーを迷わせないために、入力フォームに記入例を明示しましょう。ただし記入例はユーザーが入力すると消えるため、各フォームの情報が分かるようラベルは別途設けます。
お問い合わせフォームの作り方やコツについて詳しく知りたい方は、こちらの記事もぜひ参考にしてみてください。
関連記事：「お問い合わせフォームの作り方を基礎から実践まで解説｜無料ツールも」
最後にUIデザインの勉強方法を、3つ紹介します。
最もスタンダードなのは、以下のような書籍から基礎知識を学ぶ方法です。
特に『UIデザインの教科書』はWeb媒体への言及も多く、自社サイトの改善を検討している方におすすめの1冊といえます。またYouTubeやUdemyといった動画コンテンツも、基礎知識の学習に有効です。書籍を読んだあとに動画の視聴で理解を深めるなど、自分に合ったスタイルで勉強を進めましょう。
UIデザインのスキルを身に付けるためには知識のインプットだけでなく、ツールの使用などを通じてアウトプットすることも大切です。UIデザインに役立つツールとしては、下表のようなものが挙げられます。
| ツール名 | 特徴 |
|---|---|
| Figma | 複数人かつリアルタイムで画像の編集ができる |
| Sketch | UIデザインに特化しており、直感的な操作で効率的に作業を進められる |
| Adobe XD CC | アニメーションやエフェクトなど、UXも見据えた設計ができる |
| Balsamiq | パワーポイントのような操作感で画像を作成できる |
| Protopie | UIデザインのアイデアをインタラクティブなプロトタイプに落とし込める |
初心者でも導入しやすいのは、日本語対応かつ職種問わず使いやすいFigmaです。まずは無料版でさまざまな機能を試し、少しずつ操作に慣れていくと良いでしょう。
Web業界のトレンド変遷はスパンが短いため、参考サイトなども活用しながら最新情報を把握することも大切です。トレンドに沿ったデザインはユーザーも見慣れている分、より使いやすく感じ、UX向上も期待できます。参考サイトの例は、以下の通りです。
気になるWebサイトがあれば、トップページだけでなく下層ページのUIデザインも確認し、アイデアの引き出しに追加しましょう。
UIデザインとは、ユーザーとの接点になるテキストやボタンなどの要素について、見やすい・使いやすい形に設計する作業です。UXの一端を担っており、顧客と良好な関係性を維持しながら売上の拡大を目指す上で不可欠の工程となっています。
具体的なやり方はさまざまありますが、まずは接点を介してつながるユーザーとサービス、双方の理解を深めることが必要です。トレンドを素早く取り入れられるよう、常に情報収集や自己研さんに努める姿勢も大切になります。
自社プロダクトの満足度を上げたい方は、ユーザーの特徴やニーズに基づいたUIデザインを設計していきましょう。
文章での価値創出に関心があり、製造業から転身後、BeMARKE編集部でBtoBマーケティングを専門に年間およそ70本の記事執筆・編集を担当。「読者に分かりやすく品質の高い記事を届けること」をモットーに日々制作に励んでいる。
著者の最新記事
もっと読む >
