2026.10.19

# Webデザイン

身近なバッドデザイン図鑑10選

こんにちは。
Maromaro デザイナーのshunです。

見た目はきれいなのに、どこを押せばいいのかわからない。
説明を読んだはずなのに、つい間違えてしまう。

そんなデザインに出会ったことはありませんか？

ボタンの配置、商品のパッケージ、駅の看板。身の回りには、使う人のちょっとした迷いにつながるデザインが潜んでいます。
今回は「バッドデザイン図鑑」と題して、日本から7例、海外から3例を集めてみました。
すでに改善されたものもあれば、評価が分かれたものもあります。
使う人がどこで迷うのか、その理由を考えながら、今後の制作に生かせるヒントを探していきたいと思います。

図鑑No.1「どれを選べばいいか分からない？」初期のセブンカフェコーヒーマシン

この手の話をするなら外せないのは、佐藤可士和さんがプロデュースしたセブンカフェ。
初期のコーヒーマシンは、シンプルな操作面と英字表記が印象的なインターフェースデザインでした。

一方、2014年の店舗写真では、「HOT／ICE」や「L／R」の周辺に、「温・冷」「大・小」などのシールが追加された様子が紹介されています。

例えば「小さいホットコーヒーが飲みたい」と思っている人にとって、選ぶべきボタンは「HOT」の「R」となり、日本語から英字表記へ、頭の中で読み替える必要があります。
慣れれば簡単でも、初めて使う人は一瞬立ち止まるかもしれません。

この事例から学びたいポイント

「情報を減らしてすっきりさせるときは、使う人が必要とする手掛かりまで減らしていないか。」
ということです。

Webサイトでもラベルを考えるときにユーザーに伝わる言葉になっているか、一度立ち止まって確認するようにしたいです。

図鑑No.2「統一感があるほど、違いがよく分からない。」ローソンのプライベートブランド商品パッケージ

2020年に登場したローソンのプライベートブランドのパッケージ。

落ち着いた色使いと統一されたデザインには、生活空間になじみ、家庭内の視覚的なノイズを減らす意図がありました。

ただ、店頭では「商品名がわかりにくい」といった声も寄せられ、商品名の見せ方などが見直されました。
当時の社長インタビューでは、販売は好調だった一方、スタッフも商品の判別に戸惑う場面があったと説明されています。
当時のインタビュー記事はこちら

この事例から学びたいポイント

「統一感をつくる部分と、違いを伝える部分を分けて考える。」

統一させる部分とメリハリをつける部分は内容に合わせて判断していきたいですね。

図鑑No.3 「次へ」を押したかったのに「全取消」!?　松屋の券売機

タッチパネル式の券売機は、注文や会計の効率化につながり、さまざまな飲食店でなどで利用されています。
でも、選択肢や情報が増えるほど、画面の整理が難しくなる印象です。

2023年に公開された松屋の券売機の分析では、商品一覧とカートの間に大きな広告が入り、「次へ」のすぐ下に「全取消」がある画面が取り上げられました。

その後、広告やカート、ボタンの配置が変わった画面も確認されています。
先へ進みたいときに、すぐ近くに最初からやり直すボタンがある。押し間違えた場合の影響を考えると、少し緊張する配置です。

さらに、混雑時には、券売機は後ろに人が並ぶこともあります。落ち着いて画面を読める状況ばかりではありません。

この事例から学びたいポイント

「次に押してほしい操作を見つけやすくし、取り消しなどの操作とは距離を取る。」

誤タップを防ぐためのボタン間隔やタップ領域の設定など、特にスマホデザインを作成するときは気をつけたいですね。

図鑑No.4 「トイレが見つからない!?」　東京ミッドタウン日比谷のトイレサイン

建物の雰囲気に溶け込む、控えめでミニマルなサイン。
空間全体で見ると美しいのですが、いざという時など、探している人には見つけにくい場合があります。

東京ミッドタウン日比谷のトイレサインも、見つけやすさをめぐって話題になりました。
2023年の記事で紹介された写真には、小さなピクトグラムの近くに、大きく「トイレ」と書かれた案内看板が写っています。

サインは読める前に、まず見つけてもらう必要があります。
制作画面で拡大して見ると十分なサイズでも、実際には遠くから、歩きながら探すことになるんですよね。

この事例から学びたいポイント

「デザインを置く場所だけでなく、見る人がいる場所から確認する。」

以前、農家さんが使うアプリのデザインを担当したときのことですが、画面上はっきりコントラストをつけたと思ってデザインをしても、実際の直射日光の下で見てみると全くメリハリが見えないことがありました。
早めに気付けて良かったのですが、実際のユーザーがどう使うのか、どう動くのかをちゃんと確認した上でデザインしていきたいですね。

図鑑No.5 「明朝体は読みにくい!?」高輪ゲートウェイ駅駅名看板

2020年の開業時、明朝体を使った高輪ゲートウェイ駅の駅名看板が話題になりました。
「見づらい」という意見が出た一方、JR東日本は、駅舎の「和」のコンセプトとの調和を考えて採用し、視認性の確認も実施したと説明しています。（JR東日本への取材記事）

ここは、単純に「明朝体だから失敗」とまとめられない事例です。
読みやすさは、書体だけで決まるものではなく、文字の大きさ、線の太さ、背景とのコントラスト、見る距離などいろんな要素や関係性から判断されます。

また、建物を象徴する駅名看板と、移動を案内する表示では、求められる役割も少し違うようにも感じます。

この事例から学びたいポイント

「デザイン的な統一感、美しさと視認性のバランスを見極める」

どちらに重きを置くかは、
・どういったユーザーが見るか（例：年齢層が高いとよりコントラストを高くする必要がありそう）
・要素の重要度（例：装飾的な意図が強いなら必ずしも読める必要はなさそう）
など総合的な判断で決めていきたいです。

図鑑No.6 「アイコンなら誰にでも伝わる、とは限らない。」温水洗浄便座の操作表示

またトイレの話です（笑）

温水洗浄便座の操作ピクトグラムは、メーカーごとに異なっていたことから、ユーザーの混乱を生んでいました。
そのため、2017年に業界団体が8種類の標準ピクトグラムを策定しました。(TOTO掲載の共同発表)

国内外の利用者に、操作をわかりやすく伝えるための取り組みです。
アイコンは省スペースで、言語に頼らずビジュアルで伝えられる便利な表現です。

ただ、その絵と機能の関係を知らない人や文化が違う人には、意味が伝わらなかったり、別の意味で捉えられることもあります。
特に、トイレという場所では押した結果を予想しにくいボタンは、試すのにも勇気がいりますよね笑

この事例から学びたいポイント

「見慣れたアイコンを使い、必要に応じて言葉でも補う」

アイコンはWebでもよく使いますが、シンプルにすれば必ず伝わるとは限りません。ユーザーに意味が伝わるかを確認し、迷いそうな場合にはラベルも添えたいですね。

図鑑No.7 「選べるんだけど、選びきれない!?」　えきねっとの座席選択

列車の座席を選ぶとき、窓側か通路側かに加えて、車両のどの位置なのかも気になります。
JR東日本は、2021年の「えきねっと」リニューアルで、座席選択画面に進行方向がわかる表示を加え、号車も選べるようにしたと紹介しています。（JR東日本の発表資料PDF）

進行方向や号車がわかることで、座席番号だけを見るよりも、乗車したときの位置関係をイメージしやすくなります。
座席を選ぶ操作ができることに加えて、自分に合う席を判断するための情報も必要なんですね。