エンジニアとデザイナーって近い存在？それとも遠い存在？
そんな問いをきっかけに、Sun*とYUMEMI.growさんは、お互いの領域に関心を持つエンジニアとデザイナーのためのイベントを継続して一緒に企画・開催しています。
先日、エンジニアとデザイナーのオフ会 vol.8「へっぽこUIハッカソン リターンズ」を開催！！vol.1 の「へっぽこUIハッカソン」がパワーアップして帰ってきた…ということで、タイトルに「リターンズ」が追加に。
前回とはひと味違うチャレンジとして、イベント作成の過程にAIを取り入れました。
AIという強力な武器を手にしたことで、発想のスピードが上がっただけでなく、アウトプットの幅も広がり、より自由度の高いへっぽこが生まれました！
イベントページ：https://yumemi.connpass.com/event/374077/
これまで開催した以下のイベントを経て、今回が8度目の開催です。
- vol.1 へっぽこUIハッカソン
- vol.2 デザイナーとエンジニアのぶっちゃけNight
- vol.3 デザイナーとエンジニアの語りあわNight!
- vol.4 デザイナーとエンジニアのハロウィントークNight！
- vol.5 この1年はどうだった！？デザイナーとエンジニアの全力振り返りNight！
- vol.6 UIデザインの再発明〜ウチは生成AIしか使わないから
- vol.7 デザイナー×エンジニア猛暑対策LT AIでつながNight！
本記事では、vol.8へっぽこUIハッカソン リターンズの開催レポートをお届けします。
日々の業務から解放されたエンジニアとデザイナーによる、ユーモア溢れるアイデアの数々をお楽しみください！
目次
へっぽこUI 入門講義
ハッカソンに入る前にまず、“へっぽこUIとは何か”を改めて共有するミニ講義を実施しました。
「へっぽこUI」と聞いて思い浮かべるものや要素は、人によってさまざまです。
操作が分かりづらい、必要な情報に辿り着けない、意図した行動が阻害される……そんな不快なユーザー体験を生む要因は、実は表層のデザインだけではありません。
前回のvol.1 「へっぽこUIハッカソン」で行った講義と同様に、UXの5段階モデルの戦略、要件、構造、骨格、表層のすべての段階でダメなUIを作ることができるのか、各レイヤーにおいてどのようなアプローチがユーザーを不快にさせる可能性があるのかを解説しました。
（参考資料）ダメなUIを作るコツ｜yumemi narawa
へっぽこUI 制作
お次はいよいよ本題、へっぽこUI制作ハッカソンの時間です。
今回のお題は、「アラームのUI」「善意が行き過ぎて裏目に出たUI」「なんらかのフォームのUI」「電子決済のUI」の4つ。各グループが気になるテーマを自由に選び、あえて使いづらいUI、へっぽこUIを発想していきました。
制作時間は約50分。短い時間の中でアイデア出しから可視化まで行う、チャレンジングな構成です。
前回と大きく異なるのは、各自のPCでAIをフル活用しながらUIを生成していくという点。Figma Make、Claude、ChatGPTなど、参加者が普段使うツールから初めて触るツールまで入り混じり、それぞれの方法でへっぽこを具現化していきました。
グループ内では「こんな挙動だったら絶対困るよね！」「あ〜、これはユーザー混乱する…！」といった声が飛び交い、デザイナー、エンジニアならではの視点が数多く共有されていきました。
普段自分が使っていないAIの活用方法に驚く場面も多く見られ、「そんな生成の仕方があるのか…！」と新しい発見があったことも、盛り上がりに一役買っていました。
一方で、普段は“使いやすさ”を追求するので、真逆の発想が求められる今回は、少しペースがつかみにくい場面もあったようです。それでも「こんなアプローチもアリかも？」と視野が広がっていく感覚を楽しみながら、徐々にアイデアが転がりはじめ、笑いと発見が絶えない、とてもエネルギッシュな制作時間になりました。
AIとチームワークを武器に、個性豊かなへっぽこUIが続々と誕生していきました。
へっぽこUI 発表！！
作業時間約50分間の中で、とても完成度の高い(?)へっぽこUIを各チームで作成してくれました。そんなへっぽこUIを、この記事でもご紹介します。
「作っちゃう」チーム作成のへっぽこUI
このチームが選択したお題は「電子決済のUI」です。
ぱっと見は普通の決済アプリですが、触るほどに「なんでこうなるの？」が積み重なるユニークな仕上がりでした。
① トップに出てくるのは広告QR
起動直後から広告用QRが全面に表示され、決済コードとの見分けがつきにくい構成に。
② 決済コードはスワイプ後に出現、拡大すると向きが変わる
本来のバーコード・QRは横スワイプでようやく表示されます。拡大すると90度回転し、読み取りづらさが増大。
③ QRタップでライフゲーム起動
メイン機能である決済とは無関係な機能として、コードを押すとライフゲームが始まるユニークな脱線要素も。
④ “High & Low” で支払い額が上下
画面下のボタンを押すとルーレットが回り、結果によって支払い金額が増減する仕組みも搭載。
評価者からは…
「広告QRが最初に出てくる構成による情報整理のズレが印象的だった」「体験と画面意図の食い違いが生む、独特のへっぽこ感が秀逸だった」といった感想が挙げられ、短い中にも“へっぽこらしさ”がしっかり凝縮されたアウトプットとして評価されていました。
「ジュニア」チーム作成のへっぽこUI
このチームが選択したお題も「電子決済のUI」です。
見た目は一般的な電子決済アプリですが、実際に触ると“じわじわ効いてくるへっぽこ体験”が盛りだくさんでした！
① 引き落とし先がランダムで決まる
複数の決済方法を登録していると、その中からランダムで引き落とされる仕様。思わぬ口座が選ばれるスリルがあります。
② チップの支払いが必須
決済時には例外なくチップが強制的に付与されます。ユーザーには拒否権がありません…
③ バーコードが常に動いて読み取りづらい
決済の瞬間に限って揺れ続けるバーコード。店員さんとのタイミングを合わせるのが難しく、なかなか支払いが完了できません。
④ 決済音声で個人情報が読み上げられる
ユーザー名・金額・チップ・残高など、あらゆる情報をその場でアナウンス。静かな店内では破壊力抜群です。
評価者からは…
ランダムな決済方法や読み上げ機能といった“行き過ぎた親切さ”が、むしろユーザー体験を損なう絶妙なへっぽこさを生み出していた、と評価をされていました。
「夜の部」チーム作成のへっぽこUI
続いてのチームは、またしても「電子決済のUI」です。かなり人気のテーマでした。
このチームの作品は、メルヘンで可愛らしい世界観を持ちながら、実際には“決済までたどり着けない”という体験が徹底的に作り込まれていました。
① 支払い金額が「りんご何個分」で表示される
かわいさは抜群ですが、りんごの相場を知らないと金額が全く読めません。
② 支払いのためのボタンが見つけづらい
支払いを開始するには“ポイントチャレンジ開始”ボタンを押す必要がありますが、デザイン上非常に見つけにくい作りになっていました。
③ 広告・動画・ゲームが繰り返されて決済に進めない
ポイントは増えるのに支払いが進まない構造。支払いをしようと思って起動すると、レジ前で待つ人たちの視線が気になってくる、そんな“時は金なり”を体感できるUIでした。
評価者からは…
“とにかく支払いをさせない”という徹底した作り込みがユニークだと好評でした。
特に、りんご表現の世界観や、タイポグラフィの崩れから生まれる天然のへっぽこさに対し、「人格が見えるようで面白い」という声も寄せられました。
還元率が妙に良いという絶妙なバランス感も含め、会場からは笑いが起こっていました！
〜おまけ 司会も作ってみた〜
参加者の皆さんがへっぽこUIを制作している間に、司会を務めた二人もこっそり同じように制作していました！
二人が選んだのは、アラームのUI。二つの観点からへっぽこなUIを目指しました。
①アラーム設定の高難易度化
時間設定は、一の位と十の位をそれぞれスライダーで調整する方式。しかも、なぜか設定値が16進数表示です。
②なかなか止められないボタン配置
停止ボタンの上に降ってくるバナー。押そうとすると逃げていくボタン、5回押さないと止められないポップアップなど、操作の邪魔になる要素がたっぷりです。
今回のイベントまとめ
今回は、日々「良いUI/UXとは？」を追求するデザイナーやエンジニアに、あえて「使いにくいUI（へっぽこUI）」の作成を求めた異色なイベントでした。
この試みにより、参加者がそれぞれ暗黙知として抱えていた「悪いUI」の定義が言語化され、チーム全体での共有が可能になったのではないでしょうか。エンジニアとデザイナー、職種の垣根を超えて「避けるべきポイント」や「視点の違い」を浮き彫りにできたことは、大きな収穫だったと思います。 何より、純粋なクリエイティビティとユニークなアイデアに溢れた、刺激的な時間となりました。
それではまた次回のイベントでお会いしましょう！最後までお読みいただきありがとうございました。