触るとちょっとイラっとする、UI UX集

Webサイトやアプリを使っていて、「なんでこうなるの？」と思ったことはありませんか。

押したいボタンが押せない。
入力したいのにフォームが動く。
読み込みが終わりそうで終わらない。

そんな少しだけイラっとするUIを、あえて集めた実験ページとして、SEEDaのWebサイト内に「いらっとするUI UX集」を公開しました。

普段のWeb制作では、使いやすく、迷わず、ストレスの少ないUIを目指します。
ただ、あえて逆の“使いづらさ”を作ってみることで、良いUI/UXとは何かを別の角度から考えられるようにしました。

いらっとするUI UX集とは

よくあるUIパーツを、少しだけ使いづらくした実験ページ

「いらっとするUI UX集」は、CSS集やUIパーツ集のように見せながら、実際に触ると少しだけイラっとする動きをするUIを集めたページです。

見た目は普通のボタンやフォーム、スライダーに見えます。
でも触ってみると、思った通りに動かなかったり、少しだけ意地悪な反応をしたりします。

たとえば、閉じるボタンが逃げたり、検索窓が縮んだり、読み込みバーが途中で戻ったり。
「こういうUI、本当にあったら困るよね」と感じるような動きを、遊びとして体験できるようにしています。

ホバーやクリックで反応する“イラっと体験”

掲載しているUIには、ホバーで動くものや、クリックすると予想外の反応をするものがあります。

たとえば、以下のようなUIです。

• 音量を調整しようとすると伸びるバー
• 入力しようとすると縮む検索窓
• 押そうとすると逃げる閉じるボタン
• 完了しそうで戻ってしまう読み込みバー
• 触るたびに少しだけ不親切なUIパーツ

一つひとつは小さな動きですが、実際に触ってみると「なぜ使いにくいと感じるのか」が分かりやすくなります。

あえて“使いづらいUI”を作る理由

良いUI/UXを考えるための逆方向の実験

UI/UXを考えるときは、基本的に「分かりやすい」「押しやすい」「迷わない」「安心できる」といった状態を目指します。

ただ、良いUIだけを見ていると、なぜそれが良いのかが分かりにくいこともあります。

反対に、少し使いづらいUIを触ってみると、
「ボタンは押しやすい場所にある方がいい」
「入力欄は安定して表示されていた方がいい」
「読み込み状態は正直に伝わる方が安心できる」
といった基本の大切さが見えてきます。

いらっとするUIは、ただの悪ふざけではなく、良いUIを考えるための比較材料にもなります。

ストレスの原因を体験として理解できる

使いにくいUIの問題は、説明だけでは伝わりにくいことがあります。

「クリックしにくい」
「反応が分かりにくい」
「動きが邪魔になる」

こうした違和感は、実際に触ってみると一気に理解しやすくなります。

今回のページでは、あえて小さなストレスを作ることで、普段のWeb制作で避けるべきポイントを体験できるようにしています。

Web制作やサービス改善にも活かせる視点

使いやすさは、小さな不快感を減らすことから始まる

Webサイトの使いやすさは、大きな機能だけで決まるわけではありません。

ボタンが押しやすいか。
フォームが入力しやすいか。
画面の動きが邪魔になっていないか。
ユーザーが次に何をすればいいか分かるか。

こうした小さな要素の積み重ねで、サイト全体の印象は大きく変わります。

「なんとなく使いにくい」と感じるサイトには、細かいストレスが隠れていることがあります。
いらっとするUIを見てみると、自分のサイトで見直すべきポイントにも気づきやすくなります。

遊び心のあるコンテンツとしても使える

このページは、UI/UXを考えるための実験でありながら、ちょっとした遊びコンテンツとしても楽しめるように作っています。

Web制作に詳しい方はもちろん、普段あまりUIを意識しない方でも、触ってみると直感的に楽しめる内容です。

SEEDaでは、ただ整ったサイトを作るだけではなく、触ったときの感情や、思わず見たくなる仕掛けも大切にしています。

遊び心のあるWebコンテンツや、印象に残るサービスページを作りたいときにも、こうした実験の考え方を活かせます。

いらっとするUI UX集を触ってみてください

「いらっとするUI UX集」は、実際に触りながら“使いづらさ”を体験できるページです。

少しイラっとするけれど、どこか笑ってしまう。
遊びながら、良いUI/UXについて考えられる。
そんな実験コンテンツとして作りました。

Webサイトの使いやすさを見直したい方。
UI/UXに興味がある方。
サービスページに少し遊び心を入れたい方。

ぜひ一度、実際に触って試してみてください。

SEEDaでは、Webサイト制作やサービス開発の中で、見た目だけでなく、使いやすさ・分かりやすさ・触ったときの印象まで含めた設計を行っています。

「自分のサイトも、もっと使いやすくしたい」
「印象に残るWebコンテンツを作りたい」

そんなときは、制作の相談もお気軽にどうぞ。