ユーザー目線でサイト制作を行うUI/UXの基礎セミナー
イベントレポート

2019年7月19日、「ユーザー目線でサイト制作を行うUI/UXの基礎セミナー」をウェブスタッフ渋谷オフィスにて開催しました。

ここ数年、IT・Web業界ではよく耳にするようになった「UI/UX」。
ただ、誰かに説明したり実務に反映するとなると、結局なにをすれば良いのかわからない、
という方は意外と多いのではないでしょうか。

現在、Web制作においてはデザインの「美しさ」のみではなく、UI/UXと呼ばれる、ユーザーの「視点」や「経験」に重きを置いたサイト設計が求められています。
UIとUXとは?制作にあたり気を付けるべき点は?など、今こそ知りたいキホンの部分をおさえるためのセミナーをお届けしました。

UI とは

UI は User Interface (ユーザーインターフェース)の略。
”Interface”は、「接点、接触面」と訳されますので、”UI”は「ユーザーとデバイスとの接点」とイメージしていただくとよいでしょう。
Webサイトの場合、PCやスマートフォンに表示される画面デザインはもちろんのこと、画面遷移などの設計や構成も含め、 ユーザーの視覚に触れるさまざまな情報を「UI」とみなすことができます。

UX とは

UX は User Experience (ユーザーエクスペリエンス)の略。 ”Experience”は、「体験」と訳されますので、”UX”は「ユーザー体験」を意味します。
あらゆるサービスのデジタル化が進んでいる今、多くの場面で重要になっている概念の一つ。
例えばWebサイトにおいては、「デザインが美しい」、「探している情報がどこにあるのかがわかりやすい」、「問合せの対応がイマイチ」、というようなサービスを利用する一連の行動の中で、 ユーザーが感じたこと全てを「UX」と捉えることができます。

UIとUXの関係性

UIは、UXを高めるための要素の1つです。ユーザーの体験をより良いものにし、満足度を高めるために、わかりやすく使いやすいUIを設計していきます。
また、当セミナーでは HCD (Human-centered Design, 人間中心設計)という考え方に基づき、UXをよりよくするために必要とされる、「アクセシビリティ」「ユーザビリティ」等についても触れました。

アクセシビリティ

ウェブコンテンツにおけるアクセシビリティとは、 ”高齢者及び障害のある人を含むすべての利用者が、使用している端末、ウェブブラウザ、支援技術などに関係なく利用することができること” (引用元:日本産業標準調査会 JISX8341-3)
と定義されています。

今回はアクセシビリティのポイントを3つお伝えしました。 まず1つ目は、「色による識別を求めるデザインを避けること」。
これは、色の識別がしにくい、いわゆる色覚異常を持つ方への配慮です。
日本では男性は20人に一人、女性は500人に一人程度の割合とも言われ、重要な項目となっています。

上記の例のように、「赤色は必須項目です」などと記載するのではなく、項目に直接「必須」と記載することでアクセシビリティを改善することができます。
当セミナーでは、色覚異常の方の視界を再現したサイトをご紹介しました。

そしてポイントの2つ目は「文字サイズを可変にし、コントラストを保つこと」、3つ目には「スクリーンリーダー」により聴覚の不自由な方にもコンテンツを楽しんでもらえるように工夫することを挙げました。

ユーザビリティ

”特定の利用状況において、特定のユーザによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザの満足度の度合い” (引用元:国際標準化機構 ISO 9241-11)
アクセシビリティと並んで扱われることが多いのが、この「ユーザビリティ」です。 ここで特に注目した点は「PCとスマートフォンによる違い」について。

ポイントとして、反応領域の違い、そしてホバーの有無についてお話ししました。
スマートフォンの利用が中心になったといえる今、指でのタップを想定した余白の設定が重要になります。
また、カーソルを合わせたときの動きである「ホバー」というアクションがスマートフォンにはないことも大切なポイント。どこがクリックできるものなのかがわかりやすいようなデザインにし、ユーザーにストレスを与えないようにすることが求められます。

フォームのUI

WebサイトのUI改善にあたり、ポイントとなるパーツの1つが「フォーム」です。
サービスの会員登録や、よく使うサイトのログインなど、日常でも多くのフォームに触れているのではないでしょうか。
ユーザーが自ら操作や入力をするフォームでは、ただでさえ離脱が増えやすいのが事実。
そこで、いかに負担なくスムーズに進めてもらえるように設計するかが重要です。
ここでは、フォーム設計のポイントを3つご紹介しました。

まず1つ目は、ユーザーの心理的負担を軽減すること。
「入力項目をできるだけ減らす」、「ステップを明示する」、「残りの項目数を知らせる」が有効な手段とされています。
入力にどれくらいかかるのか、あとどれだけ残っているのかがわかると、ユーザーの心理的な負担はグッと下がるようです。

2つ目は、ユーザーにスムーズに入力させること。
方法として、「入力形式に合ったキーボードを出す」、「必須項目をわかりやすくする」、「自動入力」、「入力例を示す」が挙げられます。
電話番号、メールアドレス、カナなど、入力項目ごとの形式にあわせたキーボードを表示することで入力をしやすくします。また、住所の項目には郵便番号を利用した自動入力を用意することも、ユーザーの入力の手間を省いてくれます。

3つ目は、入力の間違いを的確に伝えること。
「エラー内容を具体的にする」、「リアルタイムでフィードバックを与える」がこれにあたります。 フォームを送信した後、ページの上部にテキストのみでエラーの箇所を伝えるフォームを見たことはありませんか。その方法ではユーザーは文章を読んで該当箇所を探さなければならず、離脱の原因となってしまいます。
そこで、入力後即時にエラーのフィードバックを与えたり、該当箇所を明示することにより、ユーザーの修正におけるストレスを軽減することが大切です。

代表的なUIパーツ

最後に、代表的なUIのパーツをいくつかご紹介し、それぞれの特徴をお伝えしました。

まず、閲覧中のページの上に重なって開く「モーダルウィンドウ」。
背景がグレーになり、元の画面での操作を一旦強制的に停止させることになるため、ユーザーの注意を引くことができる一方で、あまり頻繁に使うとユーザーにストレスを与えてしまうおそれがあります。

次に、表示するコンテンツを切り替える「タブ」。
これは幅が広がってしまうことから、基本的にはスマートフォンよりPC向きなパーツです。

反対にスマートフォンでよく見られるのが、横3本線のメニューボタン「ハンバーガーメニュー」。
項目が隠れてしまうため使いにくいとの意見もありますが、今ではかなり浸透しています。 サイトのコンテンツ量などに応じて利用を検討するのもよいですね。

最後に

今回のセミナーでは、UI/UXの基礎知識や、意識すべきポイントをお伝えしました。
UI/UXデザインにおいて最も大切なことは、なんといっても「ユーザー目線で制作すること」です。
日々多くのサービスのUIに触れることができる今、どんな点が優れているのか、どうすればもっと改善できるのか等をユーザーの立場で考えながら利用し、制作側としての業務に活かしていくことができるとよいのではないでしょうか。

ウェブスタッフでは、UI/UXセミナーのほかにもディレクションセミナーやSEOセミナー、もくもく会や勉強会、交流会など毎月多数のイベント・セミナーを開催しています。ぜひお気軽にご参加ください。

今後のイベント開催予定をチェック

※当レポートは、イベント実施当時の情報に基づいて作成しています。