あやね
はじめに
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デザインであることです。
さまざまなWebページに触れているユーザーには、メニューやボタンといったUIデザインに一定のイメージがあり、そのつもりで見たり、操作したりする傾向があります。そのため、ユーザーのイメージからかけ離れた斬新なUIデザインにしたことにより、かえって操作方法を理解してもらえなかったり、思わぬ操作をされてしまったりすることもあります。
Webデザインで重要なことは、すべてのユーザーが考えたり、悩んだりすることなく、スムーズに操作が進められる操作性を実現することです。「慣れた方法」を取り入れることで、ユーザーに考えさせることのない「使いやすさ」を実現することが可能なのです。
2.2 原則2 目線の流れを考える
人の目線は、通常、上から下へと移動していきます。
また、人はまず、大きなものに目がいき、そして、小さなものに目をやります。
このような目線の流れを意識したWebページは、見やすくなるだけでなく、ユーザーの操作を誘導しやすくなります。さらに、標準的な人の目線に沿って要素を配置することで、重要な情報をユーザーの目に入りやすくすることもできます。
なお、目線の流れには、次の3つのパターンがあります。
①グーテンベルク・ダイヤグラム
グーテンベルク・ダイヤグラムは、「均等に配置された情報を見るとき、視線は左上から右下に移っていく」というパターンです。
この場合、ユーザーの目線は、左上→中央→右下の順で流れます。
最後に目線の行く右下部分に、最も重要な内容を記載するとよいと考えられます。
②Z型
Z型は、アルファベットの「Z」のように目線が動くパターンです。
この場合、ユーザーの視線は、左上→右上→左下→右下の順番に流れます。
特に印刷物は、多くの場合、このZ型のレイアウトで構成されています。
③F型
F型は、アルファベットの「F」のように目線が動くパターンです。
文章量の多いページを流し読みするとき、上部を横に読み、その下をより短く横に読み、左側を縦に追う視線が観察されることがあります。
ただし、F型はすべての利用者・画面に当てはまる配置ルールではありません。見出しの冒頭に要点を置き、実際の画面幅で情報が見つかるか確かめましょう。
2.3 原則3 シンプルで簡単な操作性
ユーザーが使いやすいWebページの基本は、操作性のよいUIデザインであることです。
Webページ作成を行うと、掲載する情報量を多くしてしまったり、ユーザーからの要求をすべて叶えようとして機能を増やしすぎてしまったりすることがあります。しかし、ユーザーにとって情報や選択肢が多いことは、かえって判断の妨げになります。また、いくら見た目がオシャレなWebデザインであっても、ユーザーがどこを見たらよいのか、どこから操作したらよいのかがすぐに判断できないWebページでは、利用者が途中で迷いやすくなります。
反対に、見た目がシンプルで、操作が簡単なWebページは、ユーザーにとってもわかりやすく、さらに、スマートフォンのような小さな画面での操作も可能にします。
2.4 原則4 関連性の高い要素は近づける
ユーザーにとって分かりやすいWebページをめざすためには、ユーザーが短い時間で、手間なく必要な情報にたどり着けるようにデザインすることが鉄則です。
ユーザーが必要な情報かどうかを一瞬で判断するためには、次の2つの要素が重要です。
①カテゴリーを分ける
情報をカテゴリーごとにまとめて表示することで、ユーザーは「不要なカテゴリーは見ない」という選択ができるようになり、目的の情報へたどり着きやすくなります。
②関連する情報かどうかを分かりやすくする
関連する情報かどうかを瞬時に判断してもらうための手法のひとつに、「近接」があります。近接とは、関連性の高い情報を近くに配置し、グループ化して表示することです。
たとえば、商品の画像とそれに対する説明文がある場合、画像と説明文の間に距離があると、その説明文がこの画像に対するものなのかどうかを、瞬時に判断することが難しくなります。
そこで、商品の画像と説明文の距離を近づけて配置します。ユーザーは、これらの位置関係から、関係があるものとして認識しやすくなり、目的の情報かどうかを瞬時に判断できるようになります。
2.5 原則5 一貫性と標準化を保持する
デザインに統一感があるWebページは、単に見やすくなるだけでなく、ユーザーがそのページのルールや操作性を理解しやすくなります。
なお、統一感のあるWebページを作成するには、次の2つの要素が重要です。
①整列
整列とは、関連する情報のデザインやレイアウトにルールを決めて標準化することです。
たとえば、商品ごとに画像や文字のサイズや配置などがバラバラになっている場合、どこを見たらよいのかが分かりづらくなったり、商品の違いが瞬時に判断しづらくなったりします。
そこで、関連する情報は、サイズや色などのデザインやレイアウトを統一することで、直感的に理解できるようになります。
②反復
反復とは、標準化したデザインやレイアウトのルールを繰り返し使用することで、一貫性をもたせることです。
同じルールを繰り返し使用すると、ユーザーは何について書かれているのかを直感的に判断しやすくなり、安心して情報を読み進められます。
3. 商品ページで5つの原則を使う例
たとえば、スマートフォン向けの商品ページで「サイズを選んでカートに入れる」操作を改善するとします。最初に、商品名・価格・サイズ・配送条件・購入ボタンが小さな画面でどう並ぶかを確認します。
- 利用者に考えさせない：サイズ未選択なら、購入ボタンを押した後に理由と次の操作を明確に示す。
- 視線の流れを考える：価格とサイズ選択を購入ボタンの前に置き、長い説明の中へ埋め込まない。
- 操作を簡潔にする：選択肢を一度に把握できる形で並べ、必要な情報を探すための往復を減らす。
- 関連する要素を近づける：サイズ表への案内をサイズ選択の近くに置く。
- 一貫性を保つ：商品を切り替えても、選択状態・エラー表示・購入ボタンの位置をそろえる。
ここで確認すべきなのは、見た目の好みだけではありません。サイズを選ばずに進もうとしたときに修正方法が分かるか、選択したサイズがカートまで引き継がれるかを、短い操作テストで見ます。Pixsoでは商品カードや選択部品をコンポーネント化し、画面間の遷移をプロトタイプで確かめられます。
4.UI/UXデザインで活用される主なツール
UI/UXデザインを行うとき、デザインツールの選択は重要なポイントになります。
最近では、さまざまなデザインツールが提供されており、ソフトウェアだけでなく、Webブラウザがあれば使用できるオンラインツールとして利用できるものもあります。デザインするうえで必要な機能があるか、無料で使用できるかなど、それぞれのUIデザインツールの特徴を確認したうえで、ベストなものを選択したいものです。
ここでは、3種類の代表的なUIデザインツールについて、ご紹介します。
3.1 Figma
Figmaは、UIデザインをブラウザ上で実現するオンラインデザインツールです。
ソフトのインストールが不要で、Webブラウザがあれば実行可能。インターネット環境があれば誰でも使用することができ、個々の環境にも影響されないため、複数のメンバーと共有しながらの作業も簡単に行うことができます。
また、無料で使用できるフリープランもあり、Webデザインやグラフィックデザイン、UIデザイン、UXデザイン、ワイヤーフレームなど、さまざまなデザインが行えます。
Figma公式サイト：https://www.Figma.com/
3.2 Adobe XD
Adobe XDは、Adobe社の提供するUI/UXのためのデザインツールです。
Webサイトやアプリのレイアウト・デザインを作ることができる「デザイン」機能、作成したレイアウト・デザインにアニメーションやUIデザインを追加することができる「プロトタイプ」機能、それらを複数のメンバーと「共有」できる機能があります。
Adobeの公式FAQによると、Adobe XDはメンテナンスモードにあり、新機能の継続的な開発は行われていません。新規プロジェクトで採用する場合は、利用条件だけでなく、今後の運用とファイルの受け渡しも確認しましょう。
Adobe XD公式サイト：https://www.adobe.com/jp/products/xd.html
3.3 Pixso
Pixsoは、ブラウザーでUI設計とプロトタイプ作成に取り組めるデザインツールです。
組み込みコンポーネントや自動レイアウトなど、さまざまなデザイン機能が搭載されており、デザインをサポートしてくれます。
また、UI/UXデザインのプロトタイプのプレビュー機能を利用すれば、すぐに使用感を確認することもできるので、常に完成品をイメージしながらデザインできます。
さらに、複数のメンバーとのオンラインコラボレーションも可能。完成したデザインは、すぐにメンバーと共有できます。
Pixso公式サイト：https://Pixso.net/jp/
まとめ
今回は、優れたWebページ作成におけるUI/UXデザインの重要性と基本原則について、解説してきました。
ユーザーが見たくなり、使用したくなるWebページを作成するには、ユーザーの立場に立ち、分かりやすく、操作のしやすいUIデザインを意識し、ユーザー満足度の高いUXデザインを実現する必要があります。
商品ページのように操作の前後関係が重要な画面では、Pixsoで構成案を作り、プロトタイプで選択・確認・完了までの流れを確かめられます。チームのレビューでは、迷った箇所や必要な情報が欠けた箇所を具体的に伝えると、次の修正につなげやすくなります。
UI/UXデザインの基本原則を心がけ、UI/UXデザインツールを上手く活用しながら、ユーザーに喜ばれる優れたWebページ作成を実現しましょう。
