【デザイン初心者必見】WebサイトにおけるUIデザインとは？
「UIデザインって何？」と聞かれたとき、みなさんはしっかり説明できていますか？
UIデザインとは「ユーザーがサービスや製品をスムーズに使えるようインターフェース（接点）を設計すること」です。
Webサイトやアプリなどサービス全般において、UIデザインは操作性や使いやすさを向上しCV（コンバージョン）を上げやすくするための重要な役割を持っています。
今回はWebサイトにおけるUIデザインの基礎を、UIデザイン初心者向けに解説します。新しくWebサイトを立ち上げることになった人や、現状のサイトの改善につながるヒントを見つけたい人にも役に立つ情報なのでぜひ読んでみてください。
目次
UIデザインとは
前述したとおり「UIデザイン」とは、ユーザーがサービスや製品を快適に使用できるようにインターフェース（接点）を設計することです。
Webサイト上で考えると「ナビゲーションメニュー」「ボタン・リンク」「入力フォーム」など、ユーザーがアクションを起こす頻度の多い箇所は、特にUIデザインの良し悪しがサイトの回遊率やCVに密接に関わってきます。
※回遊率：特定のウェブサイトを訪れたユーザーがそのサイト内で複数のページを閲覧する割合を示す指標。
UXとは何が違うの？
「UI」とよくセットで耳にするのは「UX」ではないでしょうか。
混同されやすい2つですが、実際は別物です。
UX（ユーザーエクスペリエンス）とはユーザーが製品やサービスを使用する際に感じる全ての経験や満足度を指します。 UIは具体的なデザイン要素に焦点を当てるのに対し、UXはユーザーの感情や行動に焦点を当てています。 UIはUXの一部であり、良いUIは良いUXの一部ですが、同じものではありません。
WebサイトにUIデザインは本当に必要なの？
結論「（ユーザーからのエンゲージメントを上げたいなら ）必要」です。
Webサイトの目的にもよりますが、「商品を購入してほしい」「お問い合わせをしてほしい」「会員登録をしてほしい」などユーザーのアクションによって達成される目標があるWebサイトでは、UIデザインを考えた方がよりCVへつながる可能性が上がると思います。
例えば、「CVボタンと背景色のコントラスト（色の差）が弱く、CVボタンが馴染み過ぎて見つけづらい」や「お問い合わせフォーム内の入力項目が多すぎて疲れる」などユーザーの目的までに障害があったりストレスがかかったりすると、諦めてページから離脱しやすくなってしまいます。
そのため何かしらのCVが必要なサイトではUIデザインは必要だと考えられます。
UIデザインの基本ルール
Webサイトに限らずUIデザインには基本的な4つのポイントがあります。
それは「近接、整列、対比、反復」です。
簡単に言うと「似た要素同士をまとめ、整列させ、強弱をつけること」です。
この4つのポイントをおさえることで、ユーザーが目的を達成するまでの悩む時間の短縮につながります。
4つのポイント以外にもUIデザインに関係する基本的なデザイン用語とルールについては、下記記事にまとめていますのでこちらもぜひ読んでみてください。
① 近接
近接とは、関連する要素を近くに置いてグループ化することです。
逆に関係の薄い要素ほどマージン（余白）を空けて差別化します。
② 整列
整列とは、要素を均等な間隔で並べることです。
テキストや画像などの要素を整列させることで、デザイン全体に統一感が出て、見やすさが向上します。
③ 対比
対比とは、異なる要素や要素間の差異を強調することです。
色、サイズ、形状などの要素を使って対比を強調することで、重要な要素を目立たせることができます。
④ 反復
反復とは、同じパターンや要素を繰り返し利用することです。
情報に一貫性がでることでユーザーが次に何が出てくるかが予想しやすくなり、見つけたい情報への近道になります。
UIデザインの参考事例
次に実際にどんなUIデザインがあるのか見ていきましょう。
今回は「ユーザーに商品を買ってもらう」というゴールが明確なECサイトのモバイル版に絞って、筆者が使いやすいと感じたサイトをポイントとともにご紹介します。
ユニクロ公式オンラインストア（ファッション通販サイト）
URL:https://www.uniqlo.com/jp/ja/
ユニクロのECサイトでは、検索ボタンとホームボタンが画面下部にあるので片手でタップしやすいのが大きな特徴です。検索ボタンをタップすると写真付きのメニューが表示され、ボタン押下後のイメージがしやすくなっています。
また、会員登録フォームの入力欄で無効な文字が入力されると、リアルタイムでエラーが表示されるため、確定ボタンを押してから修正するという手間がなくなるのでユーザーに優しい設計です。
バーミキュラ公式オンラインショップ | Vermicular OnlineShop
URL:https://shop.vermicular.jp
愛知県に本社をもつ鋳物メーカーのECサイトです。
余白を多く取った無駄のないシンプルなUIが、ブランドの洗練されたイメージにあっています。 商品を3Dモードで自由な視点に傾けて見ることができるので、写真だけでは分からない細かい部分を確認できます。
BNN, Inc. | 株式会社ビー・エヌ・エヌ
デザイン書やコンピュータ書に特化した出版社のコーポレートサイトおよびECサイトです。
商品一覧ページでは商品画像のみが羅列されており、テキストが一切無くスッキリと見やすいレイアウトになっています。
商品詳細ページでは、複数の購入方法が同列に並んでおり、見つけやすく押しやすいのが特徴です。
まとめ
ユーザーの何かしらのアクションがCVにつながるWebサイトでは、UIデザインを積極的に取り入れていきましょう。
ユーザーが直感的に理解できる使いやすいUIをデザインすることで、ユーザーのストレスや迷いが軽減し、目的達成までのハードルも低くなります。
プライムナンバーズではUIデザインを考慮したサイト制作を行っておりますので、気になる点がありましたらお気軽にご相談ください。
