【初心者向け】ReactでモダンなUIを実装しよう【Part3】


willstyle.Uでディレクターをしている藤田です。
私たちが日々仕事をしているウィルスタイルのオフィスは、神戸・旧居留地は商船三井ビルディングの中にあります。1922年に竣工した、築100年を超える建物です。旧居留地のなかでも当時の面影がよく残っていて、ビルの前では毎日のようにウェディングフォトが撮影されています。著名な近代建築で働ける機会なんてほとんどないので、私はこのビルで働けることをすごく誇りに思っています。
以前の記事「見栄えの悪いシステムは、実際よりなんだか使いにくく感じる?」でもご紹介しましたが、UXには「美的ユーザビリティ効果」という言葉があります。見た目が美しいものほど使いやすいと感じられやすい、という現象です。裏を返して言えば、見た目が気に入っているものは、多少の不便は見逃してしまうということです。
そこで、毎日通っている自分たちのオフィスを、あえてUXの目で解剖してみることにしました。今回は「境界をまたぐ瞬間」というテーマに絞ってお話をします。扉を開ける、段差を上がる、靴を脱ぐ。場所が切り替わる瞬間には、ユーザーが迷うポイントと設計の工夫がよく表れると感じるからです。
まず、私が元町駅に着いてから退勤するまでの1日の流れとそのときの気持ちをジャーニーマップにまとめてみました。
5つのポイントには◎と△で評価を付けてみました。
朝8時50分にビルに着いて、最初に触れるのが正面の大扉です。木製の重厚な扉で、ガラス面がはめ込まれています。中央の2枚が観音開きになっていて、内側にも外側にも開きます。そして、取っ手もノブも一切ありません。100年前の設計なのに、人を迷わせない扉です。

取っ手がなく平らな面しかない扉を前にすると、人は自然に「押す」ことを選びます。
知覚心理学の用語で言えば、扉が「押せる」こと自体はアフォーダンス(モノと人のあいだに成り立つ、可能な行為の関係)です。一方、「ここは押すものだ」と人に伝えている手がかり、つまり平らな面や取っ手がないことがシグニファイアです。この大扉は、シグニファイアのお手本のような作りになっています。
しかも内外どちらにも開くので、どちら側から来ても押せば開きます。押すべきか引くべきか分からない扉は「ノーマンドア」と呼ばれます。人間中心設計のバイブルとなっている、『誰のためのデザイン?(原題:The Design of Everyday Things)』で著名な認知心理学者であるDon Normanが提唱した概念です。この扉は引く必要そのものをなくすことでこの問題を解決しています。ラベルも張り紙もいりません。
また、両方向に開く扉には、向こう側の人とぶつかる危険がありますが、扉についた大きなガラス越しに人が来ているかどうかが見えるようになっているので、その危険を減らすことができています。

一方で、商船三井ビルの玄関に君臨するこの扉はかなり重く、ぐっと体重をかけないと開きません。ここは評価が割れるところかなと思います。
ノーマンは『エモーショナル・デザイン』で、人がモノをどう受け取るかを本能・行動・内省の3つのレベルに分けています。この重さは、本能レベルでは「どっしりした格」として、内省レベルでは「さあ仕事だ」と気持ちを切り替える儀式として、プラスに働いています。私自身、毎朝のこの重さが、意外と嫌いではありません
ただ、実際に押すという行動レベルで言えば、マイナスですね。高齢の方、車椅子の方、両手に荷物を持った方には優しくありません。インクルーシブデザインの観点では△とせざるを得ません。
あえて手間をかけさせる設計を、Webでは「ポジティブフリクション」と呼びます。削除前の確認ダイアログが代表例です。ただ、その手間が誰にとっても同じ重さとは限りません。大扉の重さは、ポジティブフリクションとアクセシビリティがぶつかる例だと言えます。


エレベーターで4階に上がると、目の前に我らがウィルスタイルのロゴが入った扉が見えます。ロゴのおかげで、初めて来た方も「ここだ」とすぐ分かります。エレベーターを出てすぐの部屋ということもあり、道案内としては◎かなと思います。
問題はその次です。鍵を開け、丸ノブをひねって、押す。私は毎日のことなので迷いませんし、日本の古い建物ではかなり一般的な形状ですので、多くの人が慣れているノブだとは思います。

改めて、この丸ノブをユーザビリティ的な視点で見てみましょう。皆さんも1度このノブの仕様を忘れて、初めて見たと仮定して考えてみてください。
丸ノブは「握ってひねる」ことは伝えてくれます。ただ、そのあと押すのか引くのかは、ノブを見ても分かりません。シグニファイアが半分しか働いていない状態です。
加えて、ユニバーサルデザインの文脈では握力がなくても使えるレバーハンドルが推奨されることが多く、丸ノブはその点でも不利です。
ちなみに丸ノブの歴史についてはこちらの記事がわかりやすかったので、ご興味あればご覧下さい。
扉を開けると、左手に照明スイッチが2つ横に並んでいます。西側の壁に左右(すなわち南側と北側)に設置してあり、それぞれ南側と北側の照明に対応しています。

スイッチの並びと照明の位置が一致しているので、どちらを押せばどこが点くかを考えずに済みます。ノーマンのいうナチュラルマッピングで、こちらは◎です。



無事に扉を開けられれば、その先は玄関のようになっていて、そこから約8cm上がった木のフローリングを靴下で歩きます。
そう、ウィルスタイルのオフィスは土足禁止です。
入口に「靴を脱いでください」という張り紙はありません。それでも、初めて来た方のほとんどが段差の手前で靴を脱ぎます。(たまに靴のまま上がられる方もおられますが、、、、)8cmの段差そのものが「ここで靴を脱ぐ」と伝えるシグニファイアとして機能しているからです。説明のいらない境界だと言えます。
ノーマンは、人の行動を導く制約を、物理的・文化的・意味的・論理的の4つに分けています。この段差は、物理的に上がれないわけではありません。効いているのは、日本の玄関文化という文化的制約です。
逆に言えば、この境界は文化を共有している人にしか通じません。たとえば、文化圏の異なる海外のお客さまには、ただの段差に見えるかもしれませんね。


12時、打ち合わせのために会議室に入ります。会議室のドアは、一方向にだけ開く押しドアです。
このドアは、私がウィルスタイルの内装で最も好きなものの1つです。理由はその合理性。
押す側には平らなプレートが付いているだけで、掴める場所がありません。反対側には大きな取っ手が付いていて、こちらは引く専用です。
押す側は平らな板、引く側は握れる取っ手。ノーマンが『誰のためのデザイン?』で示している、迷わせないドアの形そのものです。
さらに、押す側には掴む場所がないので、引こうとしても引けません。シグニファイアで正しい行動を示すだけでなく、物理的制約で間違った行動を防いでいます。
ここまでの扉を並べると、こうなります。
同じオフィスの中に、UX的に正解の扉とそうでない扉が並んでいるのは面白いですね。


最後は、1日のうちでいちばん回数の多い境界です。
先にご説明したように、ウィルスタイルのオフィスは土足禁止なので、玄関で靴を脱ぎます。スタッフは、脱いだ靴を靴箱にしまうルールになっています。お客さまも出入りするため、玄関をスッキリさせておきたいという意図です。
靴箱は玄関から少し離れた場所にあるので、朝脱いだ靴は手に持って靴箱まで運びます。トイレはビルの共用で、オフィスを出て廊下を歩いた先にあります。行くのは1日に3〜4回でしょうか。そのたびに靴箱まで靴を取りに行って履き、戻ってきたらまた脱ぎます。昼の外出も含めると、脱ぎ履きは1日4〜5回です。
毎日のことですので、今や慣れてしまっていますが、外出が多い時だと、ときには面倒に感じてしまうこともあります。
土足禁止のおかげで床は汚れにくく、床掃除がかなり楽です。また、なんとなく、自宅のような気持ちで、落ち着いて仕事ができるような気もしますね。手間と清潔さのトレードオフなのかなと思います。
土足禁止のメリットは残したまま、手間だけを減らす案を考えてみると、こんな感じでしょうか。
このように、自社のオフィスを見てみると、「境界」のUXを考えるときの視点は、次の3つにまとめられると言えるかもしれません。
毎日通っている場所でも、UXやユーザビリティという目線で見直してみると、たくさんの発見がありました。
この評価に疑問符がつくUXフリークの皆さんは、ぜひ引用して教えてください。
あなたのオフィスの「境界」は、迷わせない作りになっていますか?
