コードの先にある「見え方」を知る：エンジニア向け UI/UX ワークショップレポート
株式会社Facilo（ファシロ）では、エンジニア向けのUI（User Experience）/UX（User Interface）ワークショップを実施しました。狙いは、UI/UX を“専門職の知識”に閉じず、実装者の目線としての “UI/UX的な視野”を広げること。当日の参加者は、PdM、デザイナー、フロントエンドエンジニア、サーバー・ML領域のエンジニアと、UI/UXが主務ではないメンバーが中心となりました。
共通言語という「武器」を揃える
ワークに入る前に、短い座学を挟みました。ここでは、知識を詰め込むのではなく「ワーク中に使える言葉・法則を手元に増やすこと」をゴールにしています。
座学（前半）：アフォーダンスとシグニファイア
たとえばドアノブは、初めて見た人でも「掴んでひねる」と行動を想像できます。このように、人とモノの間に「こう使えそう」という関係性が生まれている状態を「アフォーダンス」と呼びます。
一方で、そのアフォーダンスをユーザーに伝える“合図”が必要になる場面があります。下にスクロールできそうなデザインでも、スクロールできることを示す要素（合図）が見えないと、ユーザーは気づけません。この“合図”が「シグニファイア」です。
この2つを押さえておくと、UIを見たときに「ユーザーは次に何をしそうか」「その行動を誘導できているか」「誤解の余地はないか」を言語化しやすくなります。
座学（後半）：人間の知覚は “足し算” に鈍い
座学の後半では、UI/UXに関わる法則として、次の2つを紹介しました。
ウェーバー・フェヒナーの法則
こんな経験、ありませんか？
待ち時間0分だったところに「3分待ち」が追加されると長く感じるけど、30分待ちが33分になっても、心理的な差は小さい。
どちらも +3分 ですが「人間の知覚は線形ではなく対数的で、刺激の“絶対値”ではなく“比”で感じやすい」という法則です。
ヒックの法則
こんな経験、ありませんか？
ペンを買うと決まってるから1分で終わると思っていた買い物が、 いざ売り場に行ってみると100種類くらいあってスペック比較が始まる。
「選択肢が増えるほど判断にかかる時間が伸びていく」という法則です。少ない選択肢に1つ増える影響は大きいですが、すでに多い場合は1つ増えても影響が小さい、といった非線形な特徴も含めて共有しました。
この2つをUIに応用すると
UIがごみごみしてくると、ユーザーは新しいものに気づきづらくなる
新機能を強調するためには、UIの引き算が必要になる
という話に繋がります。機能を足すことだけでなく、複雑度を下げる意思決定がUXを左右する、という前提を揃える意図で共有しました。
座学の最後には「ワーク中の頭の片隅に、これらのキーワード・法則を入れてやってみよう」とメッセージを置き、知識を“使うモード”へ切り替えてからワークに入りました。
ワーク１：デザイン分解
ワーク1のねらいは「デザインの構造や意図を読み解く目を養うこと」です。
座学で出てきたアフォーダンス／シグニファイアといった観点で、グループごとに良い点・悪い点を分類しながら書き出していきました。題材は「持ち寄ったデザイン・UI」のほか、駅・コンビニのセルフレジなど身近なUIでも問題ない、という設計でした。最後は各チームが5分程度で「こういうUIを見つけて、こう考えました」と発表する流れにしています。
たとえば当日は、以下のような例が挙がりました。
ダンボールカッター
これは宅配が届いた時に、段ボールを留めているテープを切るための商品です。（ダンボールを切るわけじゃないから、「テープカッター」かも？）
刃の部分はプラスチックで安全
玄関などの金属製ドアに貼れる＝「使う場所」まで設計されている
「玄関で開封作業をすることで室内を汚したくない」というニーズにも応えられるのではないか
といった意見が出ました。
グリーン車のランプ
グリーン車の座席で緑のランプがついている場合、「座れない席」を意味します。ただ、緑は “OK” のシグナルであることから、「座れる」と認識してしまう人がいるかもしれません。
ここで議論になったのが「これは誰のためのシグニファイア（目印）なのか」という点です。
ランプのすぐ下に座席があるので、乗客は空席かどうかを一目で判断できます。「乗務員が“支払い済み”かどうかを明確にするためのサインなのではないか」という意見が出ました。
券売機周辺のアクセシビリティ
黄色い点字ブロックの先には、点字案内板とアクセシビリティに配慮された券売機があります。普段の生活でアクセシビリティを必要としていない人にとっては、「動線が設計されていること」を再認識する新鮮な体験でした。
レイアウトを少し変更しただけでも「この動線設計は見直しが必要になるかもしれない」というような想像がしやすくなります。
ご覧の通り、ワーク1では答えを確定することがゴールではありません。ユーザーの目線から一歩離れて、制作者が 「どういう意図でデザインしているか」に関心を持ち、視点を増やすためのワークでした。
プロダクト開発では、課題を解決するための機能を実装することが多いと思います。その機能の見せ方・配置の仕方には無数のアプローチが存在し、そこをどう調整するかこそが、デザインの醍醐味です。
ワーク２：ペーパーモック作成
ワーク2のねらいは「与えられたテーマに沿ったデザインを構築する力をつける」ことです。
「Facilo上でユーザーに物件を提案する」というゴールは同じでも、アプローチが異なると、出てくるUIも変化する。その差分を体感するワークにしています。
各チームに与えられたテーマは、以下の通り。他チームのテーマを知らないまま進行します。
Aグループ：Faciloの詳細ページに遷移させたい
Bグループ：Faciloの詳細ページに行かなくても色々したい
Cグループ：Faciloの機能をアイコンだけでスッキリ表現したい
Dグループ：Faciloの機能を言葉で表現したい
グループには、“コンポーネント（画面パーツ）” と “ウィンドウ（画面枠）” を素材として配り、画用紙上にFaciloのマイページ（物件リスト）を作成していきます。紙に切って貼る形式なので、実装やデザインツールの習熟度に引っ張られず、「このテーマなら何を目立たせるべきか」「選択肢は増やすべきか減らすべきか」といった意思決定に集中できます。
Faciloの機能を洗い出して整理するチームや、PdMに確認をとる様子など、対面ならではの濃密な会話が多く生まれていました。
発表の様子
作成したマイページは、デザインの意図を知らない隣のグループの代表に操作してもらいます。その様子を見ながら「このUIでテーマが達成できるか」「想定通りに使われるか」を検証しました。
座学で紹介したヒックの法則（選択肢が多いほど判断が遅くなる）や、ウェーバー・フェヒナーの法則（変化が多いと気づきにくくなる）は、このワーク2で効いてきます。新しい導線を足すだけではユーザーは気づけない場合があり、むしろ「何を引き算するか」「どこまで単純化するか」の判断が、テーマ達成に直結します。会話のなかでも「どこがシグニファイアなのか」という問いが自然に出てきていました。
このワークに、いわゆる“正解”はありません。各チームがテーマに沿って作ったUIを、別チームのメンバーに触ってもらい、どう使われるのかを観察することがねらいです。
発表の場では「そう触っちゃうかー！」という声が上がることもあり、作り手の仮説があっさり崩れる場面も。ただ、その“悔しさ”と“面白さ”が同居する感覚こそがデザインの醍醐味です。今回のワークを通じて、Faciloのメンバーにそれらを体感してもらえたと思います。
（執筆・撮影：Frontend Engineer 折原 レオナルド賢）
Faciloでは、ともに働くメンバーを募集しています。ご興味をお持ちいただけましたら、こちらの採用サイトからぜひご連絡ください。