こんにちは、1行もコードを書かずに好きが詰まったWebアプリを個人開発中のキャシ@デジタルプロダクトデザイナーです！
最近海外のUX記事やフォーラムを読んだり、普段ネットサーフィンしてて遭遇する「うわー、これはないわー」っていうサイトの特徴をまとめてみました。
良いUXの作り方や思想はよく語られるけど、実は「やっちゃダメなこと」を知る方が実践的だったりする。
ということで、今日はキャシの視点も交えながら「ユーザーが逃げ出すサイトの作り方」について書いてみます。まあ書いた内容が盛大なブーメランになる可能性は高いんだけど😂
1. 勝手に音が鳴り出すサイト
これ、個人的にガチで勘弁してほしいものの筆頭なんだけど。
ページ開いた瞬間に動画や音楽が自動再生されるやつ。一回深夜にこっそりネットサーフィンしてる時に突然音が出て、ビビり倒して座ってた椅子で足を強打しましてね。頼むからユーザーをパニックに陥れるなよ！と🤣
そのサイトのことは二度と訪れません。勝手に音を鳴らすのはオヌヌメしません。
2. ポップアップの応酬
ページ開いた瞬間に「メルマガ登録しませんか？」「明日からマーケの達人になれる資料をダウンロード」「プッシュ通知を許可しますか？」みたいなのが同時に出現。
やっと一つ消したと思ったら、次のポップアップが出てくるわけ。
連続ポップアップ攻撃って地味にイラッとじゃなくて、完全に離脱への誘いでしかない。 離脱率爆上げしたい人は、ポップアップをたくさん仕込んでおくといいです！
3. 手抜き感満載のお問い合わせフォーム
名前、メール、件名、本文だけのシンプルすぎるフォーム。機能的には問題ないけど、なんか「あー、適当に作ったんだな感」があるんですよ。
「どんなことでお困りですか？」みたいな選択肢があるだけでガラッと印象変わるのに。どんなユーザーにお問い合わせして欲しいの？
そしてそのユーザーはどんな課題や問題を抱えてるの？
お問い合わせフォームの体験を変えるだけで、本当に問い合わせて欲しい層とのマッチング率まで上がるわけ。
4. 延々スクロールが必要なドロップダウン
都道府県選択で47個全部縦に並んでるやつ。特にスマホだと、北海道から沖縄まで指でシュルシュルするのが地味にストレスじゃない？
最近は「東京都」とか人気のやつを上に持ってきてるサイトも増えましたけどね。こういう小さい配慮がガチで大事だし、そんな会社のサービスを利用したいって思うよね。
5. 目的達成まで4クリック以上必要なサイト
「商品買いたいだけなのに、なんでこんなに遠回りさせられるの？」って思うサイト、ありますよね。特に企業サイトで商品情報にたどり着くまでが長すぎる。
海外のサイトと比べると、日本のサイトって妙に階層が深い気がするのはキャシだけかしらね。変な話、日本の教育水準が高いから日本のサイトも情報満載だったり、難解だったりする傾向にあるんじゃないの？ってイギリス人のデザイナー友達に言われたりしたわけ。でも実際その説あり得なくないかも。
でもやっぱりシンプルにわかりやすい方が離脱率は下がりますよね。
6. 選択肢多すぎるチェックボックス
アンケートで「あなたの趣味は？」って聞かれて、50個くらい選択肢があるやつ。見てるだけで疲れるし、最後の方はもう適当にチェック入れちゃう。
人間の処理能力には限界があるんです。もうちょっとユーザーのこと考えてほしい。
7. 説明だらけのインターフェース
ツールチップが画面中にペタペタ貼ってあるサイト。
「デザインの敗北サンプル」として有名などこかのコンビニのコーヒーマシンみたいなイメージよね。
「これはボタンです」「ここをクリックしてください」って、そんなに説明が必要ってことは、そもそもの設計に問題があるのでは...？ 直感的じゃないUIを説明で補うより、デザイナーとしては直感的なUIを作る方に頑張りたい。
8. 大事な機能が隠れんぼ状態
会員登録ボタンがどこにあるかわからない、検索窓が見当たらない。宝探しゲームじゃないんだから重要な機能はちゃんと見えるところにわかりやすく置いてほしいし、自分もそう設計したい。
9. 目が痛くなる配色
蛍光グリーンの背景に赤い文字とか、美的センスを疑う組み合わせ、たまにありますよね。「目立つから」って理由だけで色を選ぶのはヤバいです。
海外のサイト、特にね韓国、台湾、イタリア、フランスあたりのものを見てると、色使いが上手だなーって思うことが多いので、Pinterestだけでなく、実際にLIVEで動いているサイトをたくさん見てみることをオヌヌメします！
10. 複雑すぎるパスワード要求
「8文字以上、大文字小文字数字記号を全部含めて、辞書にある単語は使っちゃダメ」みたいなやつ。CIAのサイトですか？って聞きたくなる。
結果、みんなパスワード忘れて「パスワードリセット」の世話になるか、パスワード管理ツールがないとログインもできない事態になってる（キャシのことね😂）。
そりゃあセキュリティはとても大事だけど、使いやすさのバランスも考えて設計したいよね！
11. CAPTCHA地獄
ログインするだけなのに「信号機を全部選んでください」って出てくるサイト。
あれ本当に何とかならないのかって常に思っちゃうわよねー
特に画像がぼやけてて、これが信号機なのか街灯なのかわからないやつ。あれ、ガチでストレスだし、何回も間違えて結局ログインすらできなかったことは1度や2度ではない。（LycaかLebaraのどっちかがそれで、いつもログインできない笑）
12. デモ版の押し売り
「無料お試し版ダウンロード！」のポップアップが5分おきに出てくるサイト。しつこすぎると逆効果って、なんで気づかないんでしょう。
ユーザーの気持ちになって考えてほしいって本気で思うし、サイト作ってる人もユーザーになったら秒で消してるはずなんだけど！
13. アーティスティックすぎるデザイン
クリエイティブすぎて、どこをクリックしていいかわからないサイト。デザイナーの自己満足と実用性は別物です。
美しさと使いやすさの両立って、本当に難しいんですよね。でもそこがデザイナーの腕の見せ所。
14. 専門用語オンパレード
「シナジー効果でイノベーションを創出」みたいな、意味不明なカタカナ用語の羅列。普通に「協力して新しいアイデアを生み出す」じゃダメなの？
翻訳ツールじゃないんだから、すんなり理解できる言葉で話してほしい。
15. スカスカすぎるページ
コンテンツが3行くらいしかないのに、無駄に縦長のページ。Googleは「インターネットが繋がらない時でも恐竜ゲームで遊べるよ」って気遣い見せてくれるのにね。
何もないなら何もないなりに、工夫すること。これもデザイナーの腕の見せ所じゃないかしらね。
16. ログイン障害物競走
エラー元がメールアドレスなのかユーザー名なのかわからない、パスワード間違えても「ログインに失敗しました」としか言わない。親切さのかけらもない。
エラーメッセージの書き方一つで、ユーザー体験って全然変わるんです。
17. 読むのが苦行レベルの長文
一つの段落に200文字以上書いてあると、読む気なくします。特にスマホで見てる時は、改行なしの長文は地獄。
人間の認知に最適な横幅は、640〜750px程度で1行80文字程度。
キャシのおすすめの方法があるのでここまで読んでくれたあなたにだけ伝授するわね。アルファベットって26文字でしょ？ だからアルファベットA〜Zを3回繰り返したもの（78文字）がすっぽり入る程度の横幅がベストなのね。それが余裕で入っている場合は、文字が多すぎるので改行を入れること。
18. 確認メッセージのしつこさ
「本当に削除しますか？」「本当に本当に削除しますか？」「最後の確認です。本当に削除しますか？」って、しつこい！
一回で十分です。ユーザーの判断を信頼するのも大事！
19. 次のアクション不明問題
会員登録完了した後、「ありがとうございました」だけ表示されて、その後どうしたらいいかわからない。
「次はプロフィール設定してみませんか？」みたいな誘導があると親切ですよね。最後まで面倒見てほしい。
20. ページ読み込み遅すぎ問題
今の時代、3秒で表示されないサイトは「重い」って思われちゃいます。せっかくいいコンテンツがあっても、表示されるまでに離脱されたら意味ない。
まとめ
書いてて思ったんですが、これらの「やっちゃダメなこと」って、実は結構な頻度で見かけません？ そして自分もそんな設計をしてしまってるかもって書いてて青ざめてましたよ😂
ユーザー体験って、技術的に高度なことする必要はなくて、むしろ「当たり前のことを当たり前にやる」ことの積み重ねなんだなって改めて感じました。
作り手の都合じゃなくて、使う人の立場で考える。簡単そうで、意外と難しいんですよね。
みなさんも、自分のサイトやアプリを改めて見直してみると、意外な発見があるかもしれませんよ！そして「こんなUXはないわ！」とか「このUXがよかった！」みたいなみなさんの体験談をぜひ教えてください！
もっと深く学びたい人へ 📚
今回の記事で「UXってもっと勉強したいかも」って思った方に、おすすめリソースをいくつか紹介しておきますね！
基礎理論をしっかり学びたい人
-
Nielsen Norman Group : UXの権威ヤコブ・ニールセンのサイト。無料記事が豊富で、UXの基本から最新トレンドまで網羅
-
Laws of UX :「UXデザインの法則」のWeb版。心理学に基づいたUX原則が学べる
-
UX Mastery: 初心者から上級者まで使える包括的なUXリソース
優れたデザインの実例を見たい人
- Awwwards: 世界の美しいサイト集。特にヨーロッパ・アジアの色使いが参考になる
- Page Flows: ユーザーフロー設計の参考例が豊富。「次のアクション不明問題」の解決策が見つかる
実際に診断・改善したい人
- WebAIM Contrast Checker: 色のコントラスト比チェック。目が痛くなる配色を避けるのに必須
- Google PageSpeed Insights: サイト速度診断。3秒ルールをクリアするための具体的改善点がわかる
- Hotjar: ユーザー行動分析ツール。実際にユーザーがどこでつまづいているかがヒートマップで見える
日本語で学びたい人
- UX MILK: 日本のUXメディア。海外の最新情報を日本語で読める
- Goodpatch Blog: 実践的なUX記事が多い。日本企業の事例も豊富
個人的には、まず「Laws of UX」で基礎を押さえて、「Awwwards」で世界の美しいサイトをたくさん見ることをオヌヌメします。そのあとで自分のサイトを「WebAIM」や「PageSpeed Insights」で診断してみると、改善点が見えてくるはず！
UXの勉強って終わりがないけど、だからこそ面白いんですよね✨ あなたのおすすめ学習リソースやお役立ちリソースがあればコメントで教えてくださいね！
