UI/UXデザインの基本原則5つ｜商品ページで学ぶ使い方

WebページのUIを見直すときは、装飾を増やす前に「目的の情報を見つけられるか」「次の操作を迷わず選べるか」を確かめます。本記事では、情報の見せ方、操作の分かりやすさ、一貫性という観点から5つの原則を整理し、商品ページを使って適用方法を示します。

画面を作りながら検討したい場合は、PixsoのUIデザイン機能で構成案とコンポーネントを一つのファイルにまとめ、プロトタイプで操作の流れを確認できます。

1.Webページ作成におけるUI/UXとは

ユーザーが、利用したくなるWebページかどうかを判断するうえで、もっとも重要となるポイントは、「使いやすさ」といっても過言ではありません。使いやすさは、画面に見える要素だけでなく、操作した結果が期待どおりに伝わるかにも左右されます。

そこで、まずはWebページ作成の基礎ともいえるUIとUXについて、解説していきましょう。

1.1 UIはサービスを提供するための手段

UIとは、User Interface（ユーザーインターフェース）の略で、User（ユーザー）と提供するサービスとのInterface（接点）を表す言葉です。たとえば、ユーザーが実際に触れて操作するキーボードやマウス、ディスプレイなどは、UIにあたります。さらに、Webページのレイアウト、表示されているフォントやボタンなど操作に使用する部品、画像といった、Webページ上でユーザーの目に触れるものもUIにあたります。

WebページのUIを考えるときは、見た目に加え、ナビゲーションや入力欄など、利用者が情報や機能に触れる接点に注目します。

1.2 UXはサービスから得られる実感や感想

UXとは、User Experience（ユーザーエクスペリエンス）の略で、User（ユーザー）がサービスを通じて得られるExperience（経験・体験）を意味する言葉です。たとえば、ユーザーがWebサイトを見たり、操作したりすることで得られる体験が、UXにあたります。

たとえば、商品を探して比較し、購入を終えるまでに「必要な情報が見つかった」「入力しやすかった」と感じることもUXの一部です。UIはその体験を左右しますが、UIを整えるだけでUX全体が決まるわけではありません。

2.UI/UXデザインの5つの基本原則

「そもそも、UI/UXとはどういうものなのか？」ということが理解できると、ユーザーが利用したくなるWebページがどういうものなのかが分かってくるでしょう。よいWebページを作成するには、分かりやすく、操作のしやすいUIデザインを意識し、ユーザー満足度の高いUXデザインにすることが重要になります。

では、実際にどのようなWebデザインが望ましいのでしょうか。ここでは、WebページのUI/UXデザインの5つの基本原則について、解説します。

2.1 原則1 ユーザーに考えさせない

分かりやすいWebページは、利用者が目的に必要な情報を見つけ、次に起こることを予測しながら操作できるページです。すべての人が説明なしで同じように使えるとは限らないため、慣れた名称や配置に加えて、必要な説明と支援の経路も用意します。

さまざまなWebページに触れているユーザーには、メニューやボタンといったUIデザインに一定のイメージがあり、そのつもりで見たり、操作したりする傾向があります。そのため、ユーザーのイメージからかけ離れた斬新なUIデザインにしたことにより、かえって操作方法を理解してもらえなかったり、思わぬ操作をされてしまったりすることもあります。

利用者に不要な推測をさせないことが大切です。購入ボタンには操作の結果が分かる文言を使い、サイズ選択が必要なら購入操作の近くで伝えます。慣れた操作を採用しても、商品の条件や利用者の経験が異なれば迷うことはあるため、実際の課題で確かめます。

2.2 原則2 目線の流れを考える

視線の動きは、探している情報、文章の方向、画面構成や強調の仕方によって変わります。「常に左上から右下へ読む」と固定せず、重要な情報を見出しやまとまりとして認識できるようにします。

大きさやコントラストは注目を集める手掛かりですが、最も大きな要素が必ず最初に見られるわけではありません。価格を探している人にとっては、装飾的な大見出しより金額や通貨のほうが手掛かりになります。

視線モデルは構成を考える参考にはなりますが、利用者が必ずその順序で読むという保証ではありません。以下の図は代表的な考え方を示したものとして読み、購入条件やエラーを特定の位置へ置けば見つかると決めつけないようにしましょう。

視線の流れについて、よく紹介される三つのモデルを見てみます。

①グーテンベルク・ダイヤグラム

グーテンベルク・ダイヤグラムは、視覚的な強弱が少ない構成を考えるときに参照されるモデルです。左上から右下への方向を示しますが、すべてのWebページの視線や操作順を説明するものではありません。

図では左上、中央、右下という関係を示しています。実際の画面では、写真、見出し、検索目的などによって注目する場所が変わります。

重要な操作を右下へ置くこと自体を目的にせず、判断に必要な情報を読んだあとに操作が見つかる関係を作ります。スマートフォンで縦に並ぶ場合も同じ情報のつながりを保ちます。

②Z型

Z型は、文字量の少ない構成で要素を左右交互に追うような流れを表すモデルです。要素の配置を考える補助線として使えます。

図は左上、右上、左下、右下という移動を表しています。すべての利用者がこの順に見るわけではないため、説明の意味が図の順序だけに依存しないようにします。

見出し、図、説明、次の操作の関係が読み取れるかを、実際の文言と画面幅で確認してください。

③F型

F型は、アルファベットの「F」のように目線が動くパターンです。

文章量の多いページを流し読みするとき、上部を横に読み、その下をより短く横に読み、左側を縦に追う視線が観察されることがあります。

ただし、F型はすべての利用者・画面に当てはまる配置ルールではありません。Nielsen Norman Groupの解説（英語）でも、複数の読み方があることを説明しています。見出しの冒頭に要点を置き、必要な情報が見つかるかを課題に沿って確かめましょう。

2.3 原則3 シンプルで簡単な操作性

ユーザーが使いやすいWebページの基本は、操作性のよいUIデザインであることです。

Webページ作成を行うと、掲載する情報量を多くしてしまったり、ユーザーからの要求をすべて叶えようとして機能を増やしすぎてしまったりすることがあります。しかし、ユーザーにとって情報や選択肢が多いことは、かえって判断の妨げになります。また、いくら見た目がオシャレなWebデザインであっても、ユーザーがどこを見たらよいのか、どこから操作したらよいのかがすぐに判断できないWebページでは、利用者が途中で迷いやすくなります。

反対に、見た目がシンプルで、操作が簡単なWebページは、ユーザーにとってもわかりやすく、さらに、スマートフォンのような小さな画面での操作も可能にします。

2.4 原則4 関連性の高い要素は近づける

ユーザーにとって分かりやすいWebページをめざすためには、ユーザーが短い時間で、手間なく必要な情報にたどり着けるようにデザインすることが鉄則です。

ユーザーが必要な情報かどうかを一瞬で判断するためには、次の2つの要素が重要です。

①カテゴリーを分ける

情報をカテゴリーごとにまとめて表示することで、ユーザーは「不要なカテゴリーは見ない」という選択ができるようになり、目的の情報へたどり着きやすくなります。

②関連する情報かどうかを分かりやすくする

関連する情報かどうかを瞬時に判断してもらうための手法のひとつに、「近接」があります。近接とは、関連性の高い情報を近くに配置し、グループ化して表示することです。

たとえば、商品の画像とそれに対する説明文がある場合、画像と説明文の間に距離があると、その説明文がこの画像に対するものなのかどうかを、瞬時に判断することが難しくなります。

そこで、商品の画像と説明文の距離を近づけて配置します。ユーザーは、これらの位置関係から、関係があるものとして認識しやすくなり、目的の情報かどうかを瞬時に判断できるようになります。

2.5 原則5 一貫性と標準化を保持する

デザインに統一感があるWebページは、単に見やすくなるだけでなく、ユーザーがそのページのルールや操作性を理解しやすくなります。

なお、統一感のあるWebページを作成するには、次の2つの要素が重要です。

①整列

整列とは、関連する情報のデザインやレイアウトにルールを決めて標準化することです。

たとえば、商品ごとに画像や文字のサイズや配置などがバラバラになっている場合、どこを見たらよいのかが分かりづらくなったり、商品の違いが瞬時に判断しづらくなったりします。

そこで、関連する情報は、サイズや色などのデザインやレイアウトを統一することで、直感的に理解できるようになります。

②反復

反復とは、標準化したデザインやレイアウトのルールを繰り返し使用することで、一貫性をもたせることです。

同じルールを繰り返し使用すると、ユーザーは何について書かれているのかを直感的に判断しやすくなり、安心して情報を読み進められます。

3. 商品ページで5つの原則を使う例

たとえば、スマートフォン向けの商品ページで「サイズを選んでカートに入れる」操作を改善するとします。最初に、商品名・価格・サイズ・配送条件・購入ボタンが小さな画面でどう並ぶかを確認します。

1. 利用者に考えさせない：サイズ未選択なら、購入ボタンを押した後に理由と次の操作を明確に示す。
2. 視線の流れを考える：価格とサイズ選択を購入ボタンの前に置き、長い説明の中へ埋め込まない。
3. 操作を簡潔にする：選択肢を一度に把握できる形で並べ、必要な情報を探すための往復を減らす。
4. 関連する要素を近づける：サイズ表への案内をサイズ選択の近くに置く。
5. 一貫性を保つ：商品を切り替えても、選択状態・エラー表示・購入ボタンの位置をそろえる。

ここで確認すべきなのは、見た目の好みだけではありません。サイズを選ばずに進もうとしたときに修正方法が分かるか、選択したサイズがカートまで引き継がれるかを、短い操作テストで見ます。Pixsoでは商品カードや選択部品をコンポーネント化し、画面間の遷移をプロトタイプで確かめられます。

サイズを選ぶ前後で、同じ情報を保つ

白いスニーカーのMサイズを購入する例を考えます。商品写真、価格、送料、サイズの選択欄と購入ボタンを同じ判断の流れに置きます。「関連する情報を近づける」という原則を、具体的な表示と動作にすると次のようになります。

視線モデルに従って購入ボタンを右下へ移しても、送料が別の場所に隠れたままでは判断はしやすくなりません。優先すべきなのは、価格と条件を理解してから購入へ進めることです。画面幅が狭い場合は、写真を小さくするだけでなく、商品名、選択欄、価格と条件の順序も見直します。

好みの感想と、操作の問題を分ける

「Mサイズを1足買いたいので、送料を含む金額を確かめてカートへ入れてください」と依頼します。サイズ表の場所を先に教えず、どの情報を見て判断したか、どこへ戻ったかを観察してください。サイズに迷う人が多ければ案内や寸法情報を見直し、購入後にサイズを確認できないならカートの表示を直します。

Pixsoでは通常、未選択エラー、在庫切れ、追加後の画面を並べ、同じ商品名とサイズでつなぎます。再利用する部品の見た目とラベルをそろえ、注記には「サイズは保持」「在庫の再確認は実装で行う」など条件を残します。プロトタイプ上の画面遷移と、実際の在庫処理は分けて開発者へ伝えましょう。

4.UI/UXデザインで活用される主なツール

UI/UXデザインを行うとき、デザインツールの選択は重要なポイントになります。

最近では、さまざまなデザインツールが提供されており、ソフトウェアだけでなく、Webブラウザがあれば使用できるオンラインツールとして利用できるものもあります。デザインするうえで必要な機能があるか、無料で使用できるかなど、それぞれのUIデザインツールの特徴を確認したうえで、ベストなものを選択したいものです。

ここでは、3種類の代表的なUIデザインツールについて、ご紹介します。

4.1 Figma

Figmaは、UIデザインをブラウザ上で実現するオンラインデザインツールです。

Figmaはブラウザー上で画面を編集し、チームと共有できます。利用環境やアクセス権によって条件が異なるため、共同編集、レビュー、開発への受け渡しという実際の作業に合うかで選びます。

また、無料で使用できるフリープランもあり、Webデザインやグラフィックデザイン、UIデザイン、UXデザイン、ワイヤーフレームなど、さまざまなデザインが行えます。

Figma公式サイト：https://www.Figma.com/

4.2 Adobe XD

Adobe XDは、Adobe社の提供するUI/UXのためのデザインツールです。

Webサイトやアプリのレイアウト・デザインを作ることができる「デザイン」機能、作成したレイアウト・デザインにアニメーションやUIデザインを追加することができる「プロトタイプ」機能、それらを複数のメンバーと「共有」できる機能があります。

Adobeの公式FAQによると、Adobe XDはメンテナンスモードにあり、新機能の継続的な開発は行われていません。新規プロジェクトで採用する場合は、利用条件だけでなく、今後の運用とファイルの受け渡しも確認しましょう。

Adobe XD公式サイト：https://www.adobe.com/jp/products/xd.html

4.3 Pixso

Pixsoは、ブラウザーでUI設計とプロトタイプ作成に取り組めるデザインツールです。

組み込みコンポーネントや自動レイアウトなど、さまざまなデザイン機能が搭載されており、デザインをサポートしてくれます。

また、UI/UXデザインのプロトタイプのプレビュー機能を利用すれば、すぐに使用感を確認することもできるので、常に完成品をイメージしながらデザインできます。

さらに、複数のメンバーとのオンラインコラボレーションも可能。完成したデザインは、すぐにメンバーと共有できます。

Pixso公式サイト：https://Pixso.net/jp/

まとめ

今回は、優れたWebページ作成におけるUI/UXデザインの重要性と基本原則について、解説してきました。

ユーザーが見たくなり、使用したくなるWebページを作成するには、ユーザーの立場に立ち、分かりやすく、操作のしやすいUIデザインを意識し、ユーザー満足度の高いUXデザインを実現する必要があります。

商品ページのように操作の前後関係が重要な画面では、Pixsoで構成案を作り、プロトタイプで選択・確認・完了までの流れを確かめられます。チームのレビューでは、迷った箇所や必要な情報が欠けた箇所を具体的に伝えると、次の修正につなげやすくなります。

UI/UXデザインの基本原則を心がけ、UI/UXデザインツールを上手く活用しながら、ユーザーに喜ばれる優れたWebページ作成を実現しましょう。