酔いどれデザイン日誌 - Drunken Design Diary -

都内でデザインファームを営む酔っ払いが、UI/UX論やデザイン思考論を書き殴ります。

都内でデザインファームを営む酔っ払いが、UI/UX論やデザイン思考論を書き殴ります。

Photoshop CC 2019で画像の自由変形比率がおかしくなった時の直し方・戻し方

Adobe Photoshop CCをお使いの皆様、Photoshop CC 2019にバージョンアップした際に「変形」の挙動がおかしくなってしまったのではないでしょうか?

具体的には、Shiftキーを押しながらドラッグが比率固定だったものが、Shiftキーを押しながらドラッグが比率変動に変わってしまったというものです。これ実はバグではなく、Adobe側の仕様変更らしいのですが、今までの学習が無駄になるだけでなく、同じソフトの中でShiftキーの意味が逆転しているという最悪の仕様変更なのです。

今回は悩めるPhotoshopユーザーに向けて、その直し方・戻し方を解説します。

目次

AdobePhotoshopCC2019のクソ仕様について

f:id:information_architecture:20190624163227p:plain

まず最初に、今あなたのPhotoshopが陥っている現象が、この記事の内容と合致しているか確認しましょう。

比率が変わっていることが分かりやすくするため、画像はいらすとやさんからブエルのイラストをお借りしました。

上記画像のように、Command+T(windows版の場合Control+T)で自由変形モードにしたあと、Shiftキーを押しながら丸で囲った四隅をつまんで大きさを変更した際、シェイプは比率固定で、画像は比率変動になっている場合は、2018から2019へアップデートした際のクソ仕様変更による不具合ですので、この記事のやり方で直すことが可能です。

自由変形の挙動を2018以前の状態に戻す方法

このクソ仕様、なぜか最近までは設定ファイルを弄るしか元に戻したり直したりする方法が存在しなかったのですが、恐らく全世界からの怒りのフィードバックがあったのでしょう、つい先日のアップデート(ver 20.0.5)によってついに環境設定項目の中に従来の自由変形に戻すオプションが追加されました。もう2018をわざわざダウンロードしなおす必要はありません!

手順1:上部メニューから「環境設定 > 一般」を開く

f:id:information_architecture:20190624163341p:plain

手順2:オプションから「従来方式の自由変形を使用」にチェックを入れる

f:id:information_architecture:20190624163355p:plain

手順3:OKボタンを押せば完了です

以上の手順で、ver2018までの使い慣れたShiftキー挙動に戻すことが可能です。

操作の一貫性を保つことの重要性

なぜAdobeは、こんなクソ仕様を採用してしまったのか。Photoshop CC (ver20.0)のリリースノートを見てみましょう。

要約すると「比率固定の方がよく使うだろ?だから毎回shiftキーを押す手間がなくなるよう、デフォルト値を入れ替えておいてやったぜ!」ってことみたいです。

まあこれだけならなんとか理解できます。クソお節介ですが。理解不能なのは「ただし、パスとシェイプ(と文字)はベクターデータだから今まで通りデフォルトで比率が変わるけどな!」という部分です。Adobeは配置されたオブジェクトがベクターデータかラスターデータか、人間がパッとみて分かるとでも思ってるんですかね?

この結果、取り込んだオブジェクトの形式によって同じ自由変形機能でもShiftキーの挙動が真逆になるという、最悪のエクスペリエンスを生んでしまいました。

AppleのHuman Interface Guidelinesをはじめ、あらゆるデザイン原則では、操作・意味の一貫性が強く求められていることは、デザイナーであれば誰でも理解していると思います。

仮にも世界最大級のデザインツールを開発している天下のAdobe様が、こんな基本的なことに配慮せず操作上の矛盾点を生んでしまったことは問題があると、個人的には思います

操作の一貫性とは、そのソフトウェア内部だけに閉じた話ではありません。同様の操作、たとえば今回の場合「何かのオブジェクトを拡大縮小する際、そのデフォルト値は比率固定か比率変動か」という国際的な標準的操作感を学習する大元となるツールが迷走してしまったということになり、今後でてくる後発の編集機能を備えたツール開発に混乱をもたらす恐れがあります。

Adobeは元に戻すオプションを提供したから良いだろうと考えているのかもしれませんが、今回の仕様変更の問題はそういう使い勝手のカスタマイズのような小さな話ではなく、ある操作に対する世界的なメンタルモデルを揺るがすほどの問題だと私個人としては感じてしまいました。ある日突然、車のブレーキペダルが右側、アクセルペダルが左側に配置された車が発売されるようなもんです。信じられませんよね?

Adobeはこの機能をユーザーエクスペリエンスの向上として軽微な機能改善の一貫と捉えているようですが、今回の場合、逆転するのをデフォルトとするのではなく、従来方式をデフォルトとしたうえで「デフォルト値を逆転させるオプション」を便利機能として提供すべきだったと思います。

f:id:information_architecture:20190624163429p:plain

ユーザーインターフェースの改善活動には、こういった落とし穴があることを改めて認識させられ、UIデザインをする身として良い反面教師となる事例でしたね。

最後はとくに意味のないブエルの画像でお別れしましょう。ハブアグッドデザインライフ!

そろそろ「UI/UX」表記論争に決着をつけようじゃないか

突然ですが「UI/UX」という表記について、皆さんどう思いますか?肯定的ですか?否定的ですか?おそらく2019年現在では、否定意見の方がやや優勢かなと思います。

結論から先に書くと、私はもうこの表記は堂々と使って良いと思ってます。そんなわけないだろう!!!と怒る気持ちはわかります。まあ、言い分を聞いて行ってください。

目次

「UI/UX」表記批判でよくみる意見

一般人の間ではどうか知りませんが、少なくともデザイナー界隈では「UI/UX」という表記は、一部で禁忌に近い扱いを受けています。

否定派の皆様の主な主張は以下のようなものが多いのではないでしょうか(自分調べ)。

  • UIとUXは字面が似ているだけで全くの別物!
  • UIとUXの重要度は全然違うので並列で扱うな!
  • UXは誰もが当然意識すべきなのでわざわざ書かなくていい!
  • UIから得られる体験だけがUXじゃない!
  • ユーザビリティのことをUXって言っていて気持ち悪い!

はい、全部正しいです。ぐうの音も出ないほどの正論ばかりです。でも最近思うんです。UI/UXって表記を使ってる人も、こんな基本的なことくらい当然分かっててあえて使ってるのでは??と。

例えば私は開発サイドやビジネスサイドの人間とコミュニケーションを取ることがよくありますが、彼らとの話にはよく「UI/UX」という言葉が登場します。しかし私はそれらを訂正することはしません。なぜなら、私と彼らが使うUI/UXという言葉の認識が合致しているためです。

なお、否定派が危惧しているUI≒UXという誤認問題は、UI/UXという表記をどう解釈するか以前の非常に低次元な問題なので、今回の言葉の定義の問題からは明確に切り離して進めさせて頂きます。

言葉の本質について考える

「言葉」とは一旦何なのでしょうか。その本質は、自分と相手が同じ概念モデルを持ち、相互伝達できることにあると私は考えます。

この役割を全うする上で、確かに辞書に無い表現や意味は正しく訂正していくのが正義なように感じてしまいます。しかし、本当に辞書が絶対的正義なのでしょうか?私はそうは思いません。なぜならば、言葉は時代によって刻々と変化していくものであり、特に慣用句などでは元の意味や表記ルールを失い過半数が誤用をしたままそちらが正しい意味として認められたケースがいくつもあるからです。

有名な例は「存亡の危機」でしょう。正しくは「存亡の機」なのですが、国の調査(28年度)によると83%の人が誤用の方を正しいと認識しており、むしろ本来の存亡の機とはやや違ったニュアンスの新しい慣用句として広く定着したという事例です。

この事例からわかるように、言葉(特に慣用句)の意味は本質的に、誰か語学の専門家が中央集権的に決定するものではなく、コミュニケーションが成り立つことを最優先として自然発生的かつ大衆からのボトムアップ的に確定されていくものなのではないでしょうか。

これはインターネットミームの構造と非常によく似ています。(笑)が時代と共に「w」になり現在は「草」という言葉で普及していますが、この「草」という言葉の新たな意味はミーム化をうけて三省堂の新国語辞典に掲載されたことで話題になりました。

つまり言葉とは、本来の正しい意味を維持することよりも、その時代の大多数が同じ概念モデルをもって認識できることの方が重要であり、定義は常にアップデートされていくというのが私の考えです。

これをUI/UXという言葉の問題に置き換えると、UI/UXという表記が登場した当時は確かに否定派の人達が主張するように「UI」や「UX」という単語に対する誤った認識を含んだ意味合いで使われてたのかもしれませんが、元の意味がどうだったかという事に意味はなく、これらに対する理解が十分に進んできた今の時代であれば、また違った意味をもつ言葉として再定義されてもいいのではないだろうか?ということが言いたいのです。ということで今日ここで改めて定義してしまおうと思います。

私(たち)の考える「UI/UX」の定義

じゃあおめぇの考えるUI/UXの"正しい意味"ってヤツを早くしめせよオラオラとか聞こえてきそうなので、書きます。ただし、これは私が中央集権的に「こうすべきだ」と強制する定義ではなく、言葉の認識に対する一定の指針を示す目的で、あくまでこれまで「UI/UX」という単語を使ってコミュニケーションをとってきた数多の人たちの概念モデルの平均値をとった認識を代筆している。というスタンスであることを予めお断りしておきます。

大前提として、UIはUserInterfaceであり、UXはUserExperienceです。それ以上でも以下でもありません。そもそもここを誤認している人はまず理解してきてください。

いいですか、もう私はこの記事の公開以降、UI/UXと書いてる奴はクソだモグリだ的な話には一切耳を傾けませんよ。もうこれ以上不毛な話はしたくないので。

UI/UXとは、「UserInterface操作から得られる限定的な接点および時間軸におけるUserExperienceのこと」である。

はい。誰がなんと言おうと、私はこの意味で「UI/UX」という表記を堂々と使います。「/」という記号の捉え方として、従来の否定意見にあったような並列関係ではなく、包括関係と捉えているのがポイントです。

また、私個人としてはこの「〜〜から得られる限定的な接点および時間軸におけるUX」という定義において、●●/UXの●●部分には別に何が入ってもいいとも考えています。PR/UXでも、CS/UXでも、Sales/UXでも、なんでも応用できます。なお単純にユーザー体験全体を指し示したい時は、捻くれずただ「UX」と記載すればいいだけの話です。なにも難しいことはありません。

【追記】この記事を最も必要としているであろう初学者の方に対して、いきなりUXの包括関係がどうのこうのと言ってもイメージできないと思うので、概念の図解を追加しました。

f:id:information_architecture:20190328044023p:plain

f:id:information_architecture:20190328044030p:plain

もしこの定義にまだ違和感がある方がいらっしゃったら、コメントでもDMでもなんでもください。ただし、記事の内容や趣旨を理解した上での言葉の意味定義に対する意見はお受けいたしますが、「お前の定義は間違っている!」「この通りに修正しろ!」みたいな話はお断りします。あくまで言葉の意味はボトムアップ的に決定されるというスタンスですので。

ご賛同いただける方は、これからも遠慮せずバンバンUI/UXという言葉を使って行ってください。意味や解釈はUIの形態が多様化するにつれて刻々と変化していくでしょうが、その言葉を使い続けることによって共通認識(概念モデル)が醸成されていくことが、なにより重要なのです。

なお、誤用の例からひとつ確実に言えることは、いくら誤用(とあえて表現しますが)されたとは言え「存亡」「危機」「(時)機」という、慣用句を構成する単語の意味は全く穢されないということです。

UI/UXという言葉は、UserInterfaceとUserExperienceの2語が連結した極めて慣用句に近い言葉ですが、上記の例からわかるように、UI/UXという表記を誰がどう解釈しようが、UIおよびUXという元の単語の意味を歪めることは絶対にありませんので、どうぞご安心ください。

こんな下らないことでストレスを抱えるのはもうやめよう

どうも「UI/UX」にアレルギーを起こしている人は、総じてその書き手がどんな考え方や捉え方でその言葉を使ったかを加味せず、条件反射的に批判をしているように感じます。これは「正しいと定義されていないものは間違いだ!」という極めて原理主義的なスタンスであり、また、正解から外れた言葉は問答無用で矯正するというのはやや過激派的な危うい発想にも感じます。

そういったUX原理主義過激派の方々全員に「あなたはそう考えてるかもしれませんが、私はこう考えてます。」と言って回れればいいのですが、そうもいかないのでこうして記事の形で自分の考えを明記するに至りました。

言葉を使っただけで誰か(とくに先輩的な人物)から批判されるかもしれないという環境は、初学者が発言時に余計な萎縮してしまうのでよろしくありません。

こんな些細な言葉尻で神経をすり減らす人が居なくなり、もっと有意義で本質的な「UX」についての議論が行われることを期待しています。

バッドデザイン賞を勝手にノミネートしてみた-2018年度版-

今年も残すところあと1週間あまりとなりましたね。早いものです。

激動の平成30年間、数々の偉大なグッドデザインプロダクトが世界を激変させてきましたが、一方で「どうしてこうなったの?」というものも世の中にはまだまだ沢山あります。

私は職業柄、日常生活で見かけたそういった好ましくないデザイン事例をストックしておりまして、去年はそれらをまとめて記事にしてみたところ意外と反響が大きくてびっくりしました。皆さんもわざわざ声には出さないけど色々思うところはあったんだなぁと。

しかしながら、未だに公式にバッドデザイン賞を認定する機関は現れていません。去年も書きましたが、グッドデザイン賞のように良いものを良いと評価することも大切ですが、良くない部分を無視し続けていたのでは、いつまで経っても不便なものは不便なままです。

ということで、今年も勝手にやってしまいました。あくまでジョークコンテンツとしてお楽しみください。

本アワードで扱うバッドデザインの定義

  • 誤操作や誤認を誘発する意匠
  • 身体的な危険が伴う意匠
  • 精神的な不快感を誘発する意匠
  • 情報が全く伝わらない意匠
  • 課題とソリューションが大きく乖離した意匠

※なお「ダサい」「カッコ悪い」などの主観的なバッドデザインはノミネート対象外とする。

このアワードを通じて普段当たり前のように享受しているデザイン(DESIGN)の大切さと、プロジェクトにデザイナーを入れることの重要性を感じて頂ければ幸いです。

また、渾身のバッドデザイン事例をお持ちだという方は是非「#バッドデザイン賞2018」でTwitterなりInstagramなりにノミネート(投稿)してみてください。あとでエゴサしてニヤニヤします。

ええ?去年出し尽くしたからもうさすがに無いだろって?無くなってれば良かったんですけどねぇ・・・

バッドデザイン賞ノミネート作品一覧

今回は、2018年に新たに撮影したバッドデザイン事例の中から厳選した6事例を紹介します。街中で撮影する都合上プロダクトの事例が多くなっていますが、特に他意はありません。それでは、メリー・バッドデザイン!

No.1「余計なお世話」

f:id:information_architecture:20181219030132j:plain

【ノミネートコメント】

多くの場合において案内板やテプラなどの後付け情報はバッドデザインを救うが、これは全く逆に作用してしまった残念な事例だ。武蔵小杉にて発見。

今見えている「ここを押す」は、実は出口側のものが半回転して停止している状態なのだ。つまり馬鹿正直に案内を信じてゲートに突っ込むと華麗な前方宙返りをキメる羽目にになる。

案内板をよく見ると、結束バンドでゲートに固定されている。そう、この案内板はゲートの付属品ではなく、誰かの親切心によって後から設置されたものなのだ。無計画な親切心は、時に他人を傷つけるんだなぁ。

そもそも「ここを押す」という案内の意味もよくわからない。バーの上側は押したらダメなのか。というか素直に入口/出口でよかったのではないか。考え始めると疑問が尽きない、堂々の誤認部門ノミネート作品である。

No.2「スパイ専用トイレ」

f:id:information_architecture:20181219030227j:plain

【ノミネートコメント】

これは、世にも珍しいスパイ体験ができる画期的なトイレ型アミューズメント施設だ。渋谷にて発見。

このトイレに入るためには、事前に敵の幹部から盗み出した4桁の英数字に加えて2種類の図形を組み合わせた非常に強固なパスコードを用いる必要があるが、ロックを突破したところで安心してはいけない。ドアノブをよく見て欲しい。ここに示された方向と逆側にノブを回してしまうと、なんとドアが再ロックされてしまう

このラストミステリーに気付かなければ、無慈悲にもブラストビートを刻み続ける膀胱のせいで正常な思考を失っている状態で、正しいパスコードを永遠にリトライさせられ続けるのだ。えげつない。

よく見ると番号の並びも一般的な計算機や電話番号のような横方向配列とは異なる独特なもので、直感的に入力ができない。そもそもなぜ片側にしか回してはいけないドアノブがレバー型ではないのか。というか、たかがトイレのロックにしては厳重すぎやしないか・・・

一般的な形状というものがなぜ一般的として定着しているのかという真理を、体験型アミューズメントを通じて楽しく我々に教えてくれる、見事な誤操作部門・エンターテイメント特別賞ノミネート作品である。

No.3「テプラ待ち」

f:id:information_architecture:20181219030321j:plain

【ノミネートコメント】

トイレ繋がりでもう1事例。日本のトイレは世界最高峰の技術力で排泄体験-エクスペリエンス-を最高なものにするだけでなく、インテリアとしてもハイセンスでスタイリッシュなのが売りだ。

しかしこのトイレは、もうすぐ誰にも流せなくなるだろう。余計なものを極限まで削ぎ落としたシンプルなデザインは、削ぎ落とされてはいけないものまで削ぎ落としてしまった。

恐らくデザイン部門の「素材の風合いを活かしたい」という要望と、技術部門の「機能説明を明記してほしい」という要望が悪魔合体した結果生まれた負の遺産だと思われる。

公共空間に設置される可能性がある時点で摩耗することくらい想定済みだと思うのだが・・・でも大丈夫、日本にはテプラという最強の発明品があるからね!

テプラが生まれた理由を我々に再認識させてくれた、意味が伝わらない部門有力候補のノミネート作品である。

No.4「ペット」

f:id:information_architecture:20181219030416j:plain

【ノミネートコメント】

わけがわからない。某マンション内エレベーターで発見。

あまりにわからなすぎて逆に気になってきたので、このボタンについてGoogle先生に聞いてみた。「あらかじめ押しておくと乗り場でペットランプが点灯し、動物が苦手な人がペットと同乗してしまうトラブルを防ぐ効果があるボタン」らしい。・・・は?

意味がわかったところで納得ができない。これではペットを連れた人が最初に乗っているケースしか想定されておらず、ペットが苦手な人が最初に乗っていてあとからペットを連れた人が乗り込んでくるケースには対応できない。

しかもよく見ると、「ペットボタンは行き先階ボタンを押す前に押してください」と注意書きがある。なんで閉じるボタンより下に設置したのか・・・

インターフェースにおけるラベルの大切さと機能仕様を詰めることの重要性を痛感させられる、文句なしの意味が伝わらない部門・ソリューション乖離部門ダブルノミネート作品である。

No.5「30秒で支度しな」

f:id:information_architecture:20181219030644j:plain

【ノミネートコメント】

前回「世界にはたくさんの〜」と言っておきながら日本の事例ばかりだったので、ここらで海外事例をご紹介。トルコ・イスタンブールで発見。

トルコの公共交通事情は思ったよりも発展していて、日本と同じようにプリペイド式ICカードで乗車することが当たり前だ。しかも日本語表示対応ときたもんだから素晴らしい。トルコ大好き。

しかし日本の券売機と決定的に違う箇所がある。よく見ると「時間:20」と表示されている。実はこの券売機、操作を開始してからお金を投入して発券されるまで30秒のカウントダウンがあり、時間をすぎると強制的に中断→最初からやり直しとなる。せっかちすぎない??ド●ラおばさんでもあと10秒は待ってくれるんだけど・・・

なおこの画面、タッチパネルに見えるがタッチパネルではない。壊れてると勘違いした客が隣のレーンに横入りするせいで券売機周辺のカオスゲージは加速度的に上昇して行く。

さらに追い討ちをかけるようだが、日本の券売機のようにお金を入れてから何円チャージするか選ぶ方式ではない。入れたお金が全額問答無用でチャージされてしまう仕様なのだ。彼らにおつりという概念は無い。私は焦って、この後3回目のやり直しで100TL(約2000円)入れてしまったが、あとで確認すると目的地まで2.5TL。あきらかに買いすぎた。

国民性が違うとシステムの仕様も全然違うという当たり前の事実に気付かせてくれた、遠い異国からの精神不快部門・国際特別賞ノミネート作品である。

No.6「孔明の罠〜アイスバケツチャレンジ編〜」

f:id:information_architecture:20181219030929j:plain

【ノミネートコメント】

これは写真でみると何の変哲も無いただのポットだが、非常に巧妙な罠が潜んでいる。写真左のポットがロックなしで写真右の状態になる。あとはわかるな・・・某旅館の客室で発見。

人間には高度な学習能力と予測能力が備わっている。以前見た形状を記憶し、次回から効率よく物を使えるようになるという大変素晴らしい脳の仕組みだ。

このようなポットは、料理屋などでほぼ毎日見ている。否、見ていたと錯覚していた。私は自分の脳の認知能力に裏切られて、到着早々に1リットルの氷水をパソコンとカメラと財布の上にぶち撒けた

こんな芸当ができるのは、諸葛孔明をおいて他に居ない。いや孔明であってくれ、頼む。

同じ形=同じ振る舞いを期待するシグニファイア(可能性を示唆する意匠)の原則に加えて脳の認知能力の脆弱性までをも逆手に取った、非常に狡猾かつ巧妙な身体危険部門ノミネート作品である。

生活者がフィードバックすることで住みやすい社会を作って行こう

如何だったでしょうか。去年大きな反響を呼んだことで多くのコメントを頂き、その中に「素人なのでプロが作ったデザインにケチを付けるのは恥ずかしいと思っていた。」という意見がいくつかありましたが、そもそもすべてのデザインは『素人である生活者』の皆さんのために作られているはずですので、生活者側が変だ・不便だと思った時点でそれはいくらスタイリッシュで先進的であろうと、バッドデザインです。

オシャレさスタイリッシュさが先行して利用者を無視しているプロダクトはもはやアート作品であり、デザインドプロダクトと呼ばない方が妥当でしょう。アートを否定するわけではありませんが、製品として市場で販売する以上、最低限は利用者を意識すべきだと私は思います。逆に機能的でもダサすぎれば売れないのはわかっているので、何事もバランスですね。

また、最後の事例のように誤操作や誤認は時に身体や資産に大きな損害を与える危険をも孕んでいることは誰かが言い続けていかなければならないと思い、今年も断行しました。

たかがデザイン、されどデザイン。企業のデザイン担当者の皆様におかれましてはこれから新しい時代に変わって行くにあたり、改めてデザインの基本の一つである「正しく伝える」ことを意識する重要性を認識していただければ幸いです。

私は、生活者全員がバッドデザインをフィードバックしていく文化が根付いていくことで、世の中が少しずつでも暮らしやすくなっていくことを願っています。

一応の成果(?)なのか、去年のエントリーNo.4の「乱視案内板」は現在、再施工されて見やすくなっていることを確認しました。このブログか、もしくは他の生活者からのフィードバックが担当者のもとにまで届いたのかもしれませんね。

この記事を読んだ皆さんも、日常生活のなかで不便だと思ったものはどんどん発信してみてください。通常、企業はユーザの声をお金で買っていますので、彼らにとっても不便さのフィードバックは嬉しいはずですので。

それでは皆さま、良いお年を!

UIデザイナーは何にコミットすべきか?どこへ向かうべきか?

はい。前回の記事から1年近く経ってしまいましたね。光陰矢の如しとはこのことかと身を以て感じ候。あまりに更新してなさすぎて、はてブProの課金が切れて一時アクセス不可になっていたのを人から指摘されるまで気づかなかったほどです・・・すみません、ありがとうございました(シェア数とかリセットされちゃいましたが・・・)。

さて、この1年はUIデザイナーとしての立ち回りが一番多く、いろんな現場でいろんな思想をもったいろんな人たちと一緒に仕事をしたりお話したりしてきました。そんな中で、まあ流行りというのもありますが「UIデザイナー」という肩書きの人、増えたなぁというのが興味深くてですね。多分、みんな最初からUIデザイナーでデザイナーのキャリアスタートさせたわけじゃないと思うんですよね。途中のどこかのタイミングで●●デザイナーからUIデザイナーに転生(?)したのかなと。

そういう背景もあってか、結構人によって思想とか重要視するものの順位がまちまちだったりしていて、肩書きこそ同じでも全然違うスキルセットだなっていう人も居たりしまして。それはそれで面白いんですが、一応ここはデザイン系考察ブログ(いま命名した)なので、ここはいっちょ自分なりの「UIデザイナー観」みたいなものを書き残しておこうかなと、思い立った次第でございます。

ということで、「UIデザイナーは何に留意すべきか」というところと、「すでにUIデザイナーだけど、この先どのようにキャリアを積めばよいか」ということについて、自分なりに書き記したいと思います、来年UIデザイナーに転生しようと思っている方、参考にしてみてね。

目次

UIデザイナーは何にコミット(責任を持つ)すべきか?

いきなり核心に迫るスタイル。いまUIデザイナーだよという人もそうでない人も、UIデザイナーは何に最も留意し責任を持つべきか考えてみてください。多分、自分の業界や現在の立場、プロダクトのプラットフォームなんかによって重要視している文脈がだいぶ違うんじゃないかなと思います。

結論だけ先に書くと、私は「情報と価値のロスを可能な限り回避すること」があらゆるジャンルのUIデザイナーにとって最も大切だと、現時点では考えています。地味だと感じますか?では、これが最も大事であると考える理由を以下に示します。

「UIデザイナーは何にコミットすべきか」と質問した時、よく出そうな回答は「使いやすさ」と「綺麗さ(気持ちよさ)」でしょうか。たしかにどちらも大事ですが、私はそれらはUIデザインにおいては最後の1%、職人的な仕上げのこだわりの領域だと思ってます。なぜならば、いくらオシャレで使いやすいUIだったとしても、価値の50%にしかアクセスできなければ、そのUIはインターフェースとしてはクソだからです。どういうことでしょうか。

「インターフェース」は何のために存在するのか考えてみてください。迷わずクリックするためでしょうか?クリック感で気持ちよくなるためでしょうか?違いますよね。クリックをするという行為の前提として、ユーザがそのボタンをクリックする理由が必要です。つまりユーザが何らかのシステム(非電子の機構も含む)を操作して望んだ結果を得るためのものであるはずです。いくら操作がスムーズであっても、いくら綺麗であっても、望んだ結果が望んだ通りに得られないのであれば、それはインターフェースとしては失格ということです。(余談ですが某クッキーゲームはクッキーを増やすことが目的なので、気持ちの良いクリック感こそが最も大事ということでOKです)

f:id:information_architecture:20181211181415j:plain

では、ここでいう「情報」と「価値」の関係性について、もう少し具体的に例を出してイメージしてみましょう。エレベーターの開くボタンがあります。これをシステム仕様書通りに情報表示するとするならば「押している間エレベーターのドアは閉まることがなく開き続け、指を離して1秒後に閉じ始めるが、閉じている最中に再度押すと開くこともできるボタン」となります。長すぎですね。こんなものは誰も読みません。そこでUIデザイナーの出番です。情報をデフォルメ(強調のための簡略化)していくことで、システムエンジニアではない一般の子供からご老人まで、誰でも理解して価値を得られるようにしていく必要があります。その結果、三角形を二つ並べたおなじみのアイコンや、「OPEN」のようなギリギリ大事な情報をロスしない状態まで削ぎ落とされて今皆さんがご存知のあのボタンが生まれました。(なお、おなじみのあのアイコンは誤クリックが多いため最適解ではないという意見も多いですが今回の趣旨とはズレるため無視。)

このようにある一定の状況において、ある目的をもったユーザが目的を達成できるようにするユーザビリティデザインプロセスはISO 9241-11などで定義されているのですが、ここを掘り下げると長くなりすぎるため、ここでは情報をロスせず価値を最大限保った状態でユーザへ伝えるのがユーザインターフェースを作る上で最も大事であることがなんとなくわかりましたよね?という話で締めさせてください。

伝言ゲームで価値はロスする

f:id:information_architecture:20181211175001j:plain

前章では、綺麗さや使いやすさはUIにとって最も重要視すべき要素ではないということを説明したうえで、情報と価値のロスを回避することが最も大事だと述べました。では、「情報と価値のロス」は何故発生してしまうのでしょうか?

最もわかりやすい例が、伝言ゲームです。子供のころやりましたよね。最初はAだった情報が最後にはBになってしまう、あれです。情報というのはどうやっても伝達する媒体が多ければ多いほど、そして媒体の抵抗が大きければ大きいほどロスしていくものです。たとえば簡単な一文の伝言ゲームでも、間に日本語も英語も話せない外国の方を数人並べるだけでロスする情報量は飛躍的に増大するでしょう。実はこれが、UIデザイナーのすぐ近くでもよく起こっています。

UIが必要なプロダクトの開発現場における伝言ゲームの登場人物とは誰でしょうか。趣味でもない限り、まずビジネスゴールが最上位にあり、それを達成するためのシステム要件を設計し、要件を満たすプログラムを書き、プログラムをユーザが使えるようにUIをデザインするといったプロセスを辿ります。つまり、伝言ゲームの登場人物は自分を省いたこれら各ステップのステークホルダー、事業責任者(PO)・システムエンジニア・プログラマです。彼らの言語を理解しないことには、情報のロスは避けることができません。

ここはUIデザイナーが所属する組織体制や、新人かベテランかで大きく認識が異なる点ですが、私はUIデザイナーは下流工程ではなく上流工程にコミットすべきだとずっと言い続けています。何故ならば、それぞれ言語や思想の異なる3人の伝言ゲームを経て降りてきた仕様通りにデザインを起こすと、情報が大幅にロスしてしまっていて、ユーザが本当に達成したい目的と乖離している可能性が高いからです。もちろん、前3工程がすべて有能なトリリンガルばかりなら全く問題はないのですが、多分そこまで恵まれたチームというのはレアケースだと思います。ですので、ユーザに最終的に触れる情報を扱う最終防衛ラインであるところのUIデザイナーがここにコミットできなければ、クオリティが手前の工程の人間に左右されがちという非常に不安定なプロジェクトチームになっていまいます。

ちなみにUIデザイナーだけでなく、もちろん手前3工程の人それぞれが他の工程に対する知見を深めるに越したことはないのですが、現実的な話をすると上流工程側は下流工程の言語を理解する重要性はそこまで高くありません。社長がプログラミング出来なくていいのと同じです。下流工程側に居る人は正確なプロダクトを実装するために自分より上流工程で行われた意思決定や設計の意図を正確に把握しなければならない一方、上流工程側でそのやり方についてマイクロマネジメントしてしまうと、現場がめちゃくちゃになります。マイクロマネジメントがクソな理由はあえて述べません。

まとめると、情報のロスを限りなく少なくするためにはすべてのメンバーが自分よりも上流の工程についての知見を深める必要があり、かつ全行程において最も下流工程に位置するフロントエンドエンジニア/UIデザイナーこそが、最も幅広い知見と視野を持っているに越したことはないということです。

 

UIデザイナーの次のステップは何か

ここまでまじめに読んでいただいた方ならもうなんとなく結論がわかったと思いますが、流し読み勢のために改めてここまでの内容を3行でまとめます。

  • UIデザイナーは使いやすさや綺麗さ以前に「価値の維持」にコミットすべき
  • 「価値」とは、特定のユーザが特定の状況下においてある目的を達成できることを指す
  • 「価値」を維持するためには、自分よりも上流工程の人の言語を正しく理解する必要がある

ということは、上流工程側の言語を理解していくことがUIデザイナーのキャリアにおける次のステップとして適切そうですね。

ここから先は私の業界特性上、デジタルコンテンツに限ったUIデザイナーの話になります。リアルプロダクトのUIデザインはまた考慮すべき項目が異なると思いますので、その道のプロの方、誰か教えてください。

誤解を恐れず言ってしまうと、「形を作れるだけ」というUIデザイナーは、今後どんどん需要が無くなっていくでしょう。なぜならば、UIに奇抜さやオリジナリティは大抵のケースにおいて求められていないから(=すでにあるコンポーネントの組み合わせで十分なことが大多数だから)です。みんな大好きニールセン博士によると、学習効率もユーザビリティの一要素となります。つまり、Webブラウザとかスマホアプリといった同一プラットフォーム上においては、ある程度一定のデザインルールに則ったUIの方が、オリジナリティ溢れるUIよりも使いやすい。ということになります。そしてそれらを誰でも簡単に実現できるMaterial UIコンポーネントをはじめとしたフレームワークが多く充実してきており、「綺麗なボタンをデザインできます」は、徐々に職人的こだわりの領域となってきています。(アミューズメント機器やゲームにおいてはその限りではありませんが、ボタンはボタンであると認識できるギリギリの情報は保ってデフォルメする必要があります。)

ということで、現在sketchをはじめとした描画ツールでモックアップまでしか作っていないUIデザイナーの皆さんは、まずは次のステップとしてフロントエンドエンジニアやサーバサイドエンジニアたちが使っている言葉を勉強してみるといいでしょう。優しいエンジニアの人ほど「デザイナーに余計な負担をかけたくない」という心遣いでモックアップ通りによしなに実装してくれていると思いますが、このUIモックアップがどのように実装されて機能するか知りたい!知った方がスムーズにプロジェクトが進行すると思う!というような事を伝えてみましょう。よほどパツパツでない限り教えてくれるはずですよ(for engineers:実装が難しそうなUIが減りますのでぜひ教えてあげてください!書ける必要はありません。どんな工程があって何をやってるのか理解できれば十分です。)

もうフロントエンド技術もサーバサイドとの連携もある程度理解してるよ!という方は、システム要件定義のほうに首を突っ込んでみましょう。ここを担当している人はプロジェクトによってまちまちだと思いますが、大抵プロダクトオーナーかシステムエンジニアの人が握ってるはずです。いつもは雲の上で何やってるかわからない要件定義かもしれませんが、フタを開けるとなんてことはないビジネスサイドと開発サイドの要望のすり合わせ作業です。どの機能が求められており、どの機能から優先して実装していくかみたいなことを話しています。「どの機能が求められているのか」についてはUIデザイナーであるあなたが最もユーザに近い位置にいるはずですので、あなたの意見はきっと大歓迎のはずです。特定のユーザが特定の状況において目的を達成するためにはどんな機能があればよさそうか、バンバン発言してみましょう!

要件定義もすでに首突っ込んでるよ!というかたは、いよいよビジネスゴールを達成するところまでコミットしてみましょう。ここまでくるともはやUIデザイナーという枠組みではなく、プロダクト/サービス全体のデザイン責任者といったほうが妥当になってくるでしょう。もはやあなたがプロダクト/サービスの良し悪しを決定する要です。正解はありませんので、これまで経験してきた下流工程で行われていることを意識しながら、最高のユーザ体験を作り上げるために最適な選択をして行ってください。

まとめ

想像以上にまじめな内容になってしまいました。2017年・2018年は色々なツールやフレームワークが充実してきたことで、これまでよりも多くの人たちがUIデザインについて触れるキッカケが多くなった年だったかと思います。もともとUIデザイナーだった人も、思い切って肩書きごとUIデザイナーに変えてしまった人も、これから転生しようかなと企んでいる人も、またこれからUIデザイナーを拡充していこうという経営者や人事部の方にとっても、この記事が何かしらの道標になれば幸いです。

余談:プロジェクトマネージャーとプロダクトマネージャーについて

会社によってはデザイナーやプログラマ(スペシャリスト)からプロジェクトマネージャー(管理職)へのステップアップを以って「昇進」としているところもあるように思いますが、私はあの昇進は間違っていると思います。スペシャリストとして技術を深く掘り進め極めていくことが昇進の代わりという会社ももちろんあるでしょうが、少なくともデザイナーやプログラマの上位職があるとすれば、プロジェクトマネージャー(人的リソースの管理)ではなく、プロダクトマネージャー(製品クオリティの管理)であるはずです。

なぜかプロダクトがどう実装されているか知らないディレクター上がりの人がプロダクトマネージャーになり、進行管理なんかやったことないスペシャリストがプロジェクトマネージャーにされるのをみていてモヤモヤしたので、書き残させていただきました。プロダクトにずっと向き合ってきた人がいきなりスケジュールを統括しろと言われるのは、スキルの連続性が失われており不自然ですよね。どっちも英語略称にするとPMなのがややこしいんだと思います。

バッドデザイン賞を勝手にノミネートしてみた-2017年度版-

忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。

さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか?私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの?」というレベルのバッドデザインがあったりするんですよね。

良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。

【追記】Twitterの方で一部画像が自分で撮影したものではないのでは?とご指摘頂きました。確認調査してみましたが、No.3にネット上で拾ってきた事例の画像が混じってしまったようです。お詫び申し上げると共に、来年度版を実施する場合は、掲載写真の管理を徹底するよう注意致します。すみません。

本アワードで扱うバッドデザインの定義

  • 誤操作や誤認を誘発する意匠
  • 身体的な危険が伴う意匠
  • 精神的な不快感を誘発する意匠
  • 情報が全く伝わらない意匠
  • 課題とソリューションが大きく乖離した意匠

※なお「ダサい」「カッコ悪い」などの主観的なバッドデザインはノミネート対象外とする。

このアワードを通じて普段当たり前のように享受しているデザイン(DESIGN)の大切さと、プロジェクトにデザイナーを入れることの重要性を感じて頂ければ幸いです。

また、自分も渾身のバッドデザイン事例をお持ちだという方は是非「#バッドデザイン賞2017」でTwitterなりInstagramなりにノミネート(投稿)してみてください。あとでエゴサしてニヤニヤします。

バッドデザイン賞ノミネート作品一覧

今回は2017年に撮影したバッドデザイン事例の中でも、選りすぐりのレジェンド級バッドデザインたちを部門別にノミネートさせて頂きました。街中で撮影する都合上プロダクトの事例が多くなっていますが、特に他意はありません。それでは行ってみましょう!

No.1「危険そうなボタン」

f:id:information_architecture:20171206165121j:plain

【ノミネートコメント】

巨大な筐体に1つだけ搭載されたボタン。押したらヤバそうなカラーリング。ダメ押しで注意の表記。このいかにも危険そうなボタン、実は「エレベーターの呼び出しボタン」である。誰が押すんだこのデザイン・・・金沢の地下通路で発見。

良く見ると下の方に車椅子専用のボタンが付いているが、多分車椅子の人も赤色と注意書きしか目に入らないんじゃないかな。 どう見ても非常ベルが鳴りそうな、見事な誤認デザイン部門ノミネート作品である。

【追記】「注意」のところに何て書いてあるか読めねーよというご意見が多かったので追記します。「戸に触れないこと。けがをする恐れがあります。」と書かれています。なぜ戸に貼らなかった・・・

No.2「フェイクボタンonテプラ」

f:id:information_architecture:20171206165141j:plain

【ノミネートコメント】

エレベーターつながりでもう1事例。私はこの時生まれて初めてボタンに「ボタン」というテプラが貼られているのを見た。

どう見ても光っている部分の階数が書いてあるブロックがボタンにしか見えない。というか実際テプラがあってもそちらを押してしまった。

シグニファイア(可能性を示唆する意匠)が完全に逆に作用した錯視効果の極致であり、人間は本能的に一番出っ張っているところを押したくなるものなのだという事を再確認させてくれる悟りプロダクト。

何故ボタンと階数表記を並べなかったのか。というかボタンを光らせるのではダメだったのか。考え始めると疑問が尽きない、見事な誤操作デザイン部門ノミネート作品である。

No.3「デュアルテプラ」

f:id:information_architecture:20171206165201j:plain

【追記】こちらの写真は、Twitterで静岡茶さまが公開されたツイートからの転載になります。

【ノミネートコメント】

テプラと言えば貼られたらデザイナーの負けでおなじみだが、これは滅多にお目にかかれない1つのアイコンに2つのテプラが貼られてしまった事例だ。

アイコンだけでは意味が伝わりきらない問題は遥か昔から言われ続けているが、アイコンが何の絵なのかまで併記されたのはこれが歴史上初ではないだろうか。

恐らくスタイリッシュにしようと曲線を極力排除した結果、注射器にしか見えなくなって救護室と間違えて入ってくる人が多かったのだと推測される。

無駄にスタイリッシュにしてもロクなことにならないという教訓を我々に与えてくれる、見事な意味が伝わらない部門ノミネート作品である。

No.4「乱視案内板」

f:id:information_architecture:20171206165217j:plain

【ノミネートコメント】

もう、見たまんまである。新木場で発見。案内板としての意味を全く成していないので、都は今すぐ撤去して再施工すべきだと思う。

この案内板がどうなっているかというと、古い案内板の上に(前の案内板を剥がさずに)新しい案内板が張られているのでバックライトで透け透けになっているのだ。雑施工極まりない。

なおこの状態になるのは夜間のみであり、昼間は普通に読める。バックライトが付いてる事を確認して施工すればこんな面白いことにはならなかっただろうと思うと、ある意味公共工事の怠慢が生んだ奇跡の産物と言える。

仕様の確認とチェックフローは怠らないようにしようという戒めを我々に教えてくれる、見事な意味が伝わらない部門/イージーミス特別賞ノミネート作品である。

No.5「ふれあえない灯」

f:id:information_architecture:20171219230615j:plain

【ノミネートコメント】

「ふれあい灯」と称されたこの装置は、ボタン押すと上に搭載されたランプが光り、けたたましい音が鳴って周囲の人の視線を集めることで困った人を助けることができるのだそうだ。・・・え?

取り扱い説明には「(中略)外国人の方で、お手伝いを必要とされる方のための〜」とあるが、英語表記は一切無い。ゆえに外国人が困ってもこれを押すことは絶対に無い。

また下段には「このランプが点滅していたら、お手数ですが近くの社員をお呼び止め〜」とあるが、なぜ他の客にそれをやらせるのか理解が及ばない。ランプも音も無くして社員の持ってる端末に直接通知が飛ぶとかではダメだったのか・・・というか困ってる人が直接社員を呼び止めるではダメだったのか・・・

そもそも困っている時にわざわざボタンのところまで移動する人が居るのだろうか。人は大抵、困ったことが起こったその場所で人を呼び止めるものである。ソリューションとしても入り口で「要介助/need help」と書かれた名札を配った方がはるかに効果的で安上がりな気がする。

360°あらゆる方向にツッコミどころ満載な、見事なソリューション乖離部門ノミネート作品である。

No.6「孔明の罠」

f:id:information_architecture:20171206165254j:plain

【ノミネートコメント】

写真では分かりにくいと思うが、全く同じデザインの2枚の連続したドアがあり、手前側がスライド式の自動ドア、奥側が観音開きの手動ドアになっている。これは本当に危ない。

タチの悪いことに手前(1枚目)が自動なので、2枚目も自動と誤認させ高確率でガラスに衝突するような巧妙なトラップになっている。実際撮影中にサラリーマンが何人か激突していた。これはきっと諸葛孔明の仕業に違いない。もし手動と自動が逆の順番ならここまで危険にはなっていなかっただろう。

このビルを設計した人は、カッコよくて美しいエントランスの設計図を引くより先に、人間工学と認知心理学の基本をきっちり勉強してきた方が良いと思う。

同じ形=同じ振る舞いを期待するシグニファイア(可能性を示唆する意匠)の原則を逆手に取った、非常に狡猾かつ巧妙な身体危険部門ノミネート作品である。

生活者がフィードバックすることで住みやすい社会を作って行こう

如何だったでしょうか。人様のつくったものを気安くバッド呼ばわりするのは正直気がひけるのですが、誤操作や誤認は時に身体や資産に大きな損害を与える危険をも孕んでいることが理解できたかと思います。

たかがデザイン、されどデザイン。目先の格好良さや目新しいソリューションを採用しようとする前に一度立ち止まり、デザインの基本の一つである「正しく伝える」ことを意識することの重要性を改めて認識していただければ幸いです。

これからも引き続き街中のグッドデザインとバッドデザインを勝手に収集していくつもりなので、気が向いたら2018年版もやるかもしれません。

なお、今回はあくまで私のバッドデザイン事例ストックの中からのノミネートなので、世界全体に無数にあるバッドデザインのほんの一部にすぎません。

私は生活者全員がバッドデザインをフィードバックしていくことで、世の中が少しずつでも暮らしやすくなっていくことを望んでいます。

ユーザーが正しくフィードバックを行える習慣が根付けば、企業が高いお金と長い時間をかけてユーザー調査などする必要がなくなるのです。せっかくのインターネット社会なのですから、どんどん活用していきましょう。

皆さんも普段疑問に思っていたバッドデザインをどんどん発信してみてください。いつかそれが設計者の目に留まり、改善されていくかもしれませんよ。