UI/UXデザインでやってしまいがちな7つの失敗

あらゆるWebサイト・アプリにとって非常に重要な要素であるUI/UXデザイン。

よいデザインはユーザーを誘導しあらゆる効果が期待できる一方、不適切なデザインはユーザーを失望させ離脱率を上げネガティブな影響を及ぼします。

今回は、UI/UXデザインでやってしまいがちな7つの失敗について解説します。初心者からプロまで、幅広いUI/UXデザイナーの参考になるはずです。

失敗1. ナビゲーションがわかりにくい

優れたUXデザインの条件は、直感的に機能が分かること。何のボタンかユーザーに一瞬でも考え込ませてしまったら、優れたUXデザインとはいえません。

UXデザインにとって大切なのは、クリエイティビティよりもユーザビリティです。

参考として、以下のようなポイントに注意しましょう。

• ナビゲーションを作る前に計画を立てる

• CTAボタンは色や余白を使って、他の要素から視覚的に切り離す
• ページごとに異なるプライマリナビゲーションを使用しないよう、一貫性をもたせる
• モバイル対応（レスポンシブデザイン）を行う
• 見た目よりも使いやすさを重視し、ユーザーの画面に常に表示される「スティッキーヘッダー（固定表示）」の活用を検討する。ただし、不要なコンテンツを詰め込んだり、サイズを大きくしすぎるのはNG
• 短いテキストでわかりやすいラベルを作る
• 「事業概要」といった無味乾燥な表現を使うのではなく、ユーザーにとって馴染みやすい言葉づかいを心がける
• ローカルナビゲーションにおいては、リンクを他のテキストと区別し、以前開いたリンクがわかるようにする

• 「新しいタブでリンクを開く」といった、コンテンツの不必要なページ分割を避ける

ドロップダウンメニューを多用したり、過剰にCTAボタンを配置したりすると、ユーザーにストレスを与えてしまうので注意しましょう。

また、ユーザーがWebサイトでの体験をコントロールできるように、つねに「戻る」ボタンを用意しておくのも忘れずに。

失敗2. 詰め込みすぎて一貫性がない

デザインには一貫性をもたせましょう。

さまざまなフォントや色を使用するのは避け、整った書式と統一感のある配色を心掛けましょう。とくにモバイルには、一貫性のあるミニマルなUIデザインが欠かせません。

統一感のないデザインは、ユーザーの認知に過度な負荷をかけ、売り上げの低下にもつながるリスクがあります。

失敗3. 文字が読みづらい

タイポグラフィは、Webデザインの95%を占めるとても重要な要素です。フォントが適切でないと、潜在顧客の12〜20%を失ってしまうというデータも。フォントを最適化すれば、文章の読みやすさ、Webサイトの使いやすさ、アクセシビリティを向上できます。

もし「スタイリッシュなフォント」と「読みやすいフォント」で迷ったら、後者を選ぶようにしましょう。ライトで細いフォントはスタイリッシュに思えますが、読みづらかったり、正しく表示されなかったりという欠点があります。

また、最近はローコントラストのテキストが流行っていますが、避けるのが無難です。コントラストをテストするためのツールを活用し、適切なコントラストを保ちましょう。誰もが使いやすいページを目指すアクセシビリティの国際基準『Web Contrast Accessibility Guidlines』に従って修正してくれる『Colorable』などのツールがおすすめです。

フォントサイズや段落の長さ、箇条書き、小見出しなどについての基本ルールも忘れないようにしましょう。

失敗4. 機能性よりも美しさを重視している

美しいデザインで、訪問者をあっと言わせるようなエフェクトに溢れ、一貫性があっても、残念ながらユーザーをイライラさせてしまうことはあります。神が細部に宿るのと同じく、悪魔も細部に宿ってしまうためです。

UXデザインに関する名言のひとつに、フランク・キメロ氏のこんな言葉があります。

「人は、人を無視するデザインを、無視する」

ユーザーの目標、課題、動機を探り、インターフェースの美しさよりも、ユーザーが必要としているものを優先させましょう。以下の避けるべき項目リストを参考にしてみてください。

• Webサイトの読み込み速度が遅い

• 必須項目が多すぎるフォームや、長すぎるフォームを使っている
• 広告に見えるようなバナー、ポップアップ、アニメーションなどを表示している
• スクロールハイジャックをしている（※ユーザーのスクロールを阻害するアニメーション効果）
• カスタムアイコンを多用しすぎている
• クリックしていいのか分からない、小さすぎる、デザインがバラバラ、などの問題があるボタンを使っている
• 余白が少ない
• クリックできる面積が小さすぎる
• 登録・認証・サインインプロセスがスムーズではない

• 404ページが多すぎる、もしくは404ページが退屈

失敗5. レスポンシブ対応していない

レスポンシブ対応は、もはやUI/UXデザイナーの義務です。94%もの人がモバイル版のないWebサイトを信用しておらず、反対にレスポンシブなWebサイトは67%の確率でコンバージョンに至るという調査もあります。

Webサイトはあらゆる画面サイズに対応させ、読み込み速度を高速に保ちましょう。接続が遅い環境も考慮に入れることが必要です。

レスポンシブデザインは、モバイル版とデスクトップ版を別々に作成する（アダプティブデザイン）のに比べて、効率的で費用対効果が高く、管理も簡単です。しかし、アダプティブデザインのほうが高速で、特定のニーズにあわせるという面では優れています。

どちらの方法をとるにせよ、あらゆるデバイスに対応したデザインを目指しましょう。

失敗6. コンテンツを軽視している

Webサイトの核は、なんといってもコンテンツです。コンテンツを把握できていなければ、デザインをする意味がありません。

コンテンツ軽視が引き起こす失敗の例

• 文字情報が多く、ヒエラルキーが明確ではない
• ユーザーの疑問（価格など）に答えていない
• 表現がわかりにくい
• 誤字や脱字がある
• 大きな写真や音楽、アニメーションなどを強調しすぎて、かえって気が散るデザインになっている
• 人ではなく、検索エンジンに向けてコンテンツを作っている

おすすめの改善方法

• 興味深く、適切で、価値のある情報を提供する
• ブログ記事を定期的に投稿する
• 古いコンテンツを適宜更新する
• ランディングページを作ってコンバージョン率を高める
• 表現のトーンを一定に保つ
• 会社概要、お問い合わせ、サービス紹介などのページを設ける
• 最新のSEOガイドラインに準拠する

失敗7. 過剰な自信をもっている

UI/UXデザインはテストと改善が命です。これで完璧だと慢心した瞬間に、プロジェクトの失敗は近づいています。

具体的には、以下のことを避けましょう。

• UXデザインの最初に行うべき、UXデザインリサーチをスキップする
• 実際のユーザーでテストをせず、仮想のユーザーでテストをする
• UXに関する意思決定にチームやステークホルダーを参加させず、個人で完結させる
• コンセプトモデルとユーザーのメンタルモデルのバランスを取らない
• ユーザーからのフィードバックを無視する
• UI/UXを継続的なプロセスとして捉えない

UI/UXデザインは、一度作って終わりにするのではなく、テストを重ねたうえで公開後のフィードバックに耳を傾けましょう。アイデアの段階ではよく見えても、実際のユーザーは使いづらく感じるかもしれません。

まとめ：美しさに固執しない

最高のUI/UXデザインとは、派手なアニメーションのことを指すわけではありません。使いやすいナビゲーション、わかりやすい構造、読みやすいコンテンツ、レスポンシブ性などの基本的な要素のほうがはるかに重要です。

こうした基本的な要素が整ってから、はじめて美しさやクリエイティビティという領域に踏み込めるのです。

（執筆：UI Blogger　翻訳：Asuka Nakajima　編集：泉　提供元：PX Planet）