Figmaã®ã‚³ãƒ¡ãƒ³ãƒˆã‚’è¦ç´ ã«å¸ç€ã™ã‚‹æ–¹æ³•

（この記事の読了目安：3分）

皆さん、UIデザイン時のエンジニアとの情報連携を行う際、どのツールを使っていますか？私はFigmaを愛用しています。

ただ、このFigmaに一点だけ気に入らない箇所があります。それはコメントが要素に吸着しない（くっつかない）ことです。これができないせいで、修正等で要素のサイズが変わったり場所が変わった際、すべてのコメントの位置を手作業で修正するという無駄な作業が発生していました。

いつかアップデートで修正されるだろうと思って我慢していましたが、全く修正されず・・・。もはや諦めていたのですが、つい最近Figmaでコメントを要素にくっつける方法を発見したので、今回はその方法を皆さんにお伝えしようと思います。

目次

• Figmaのコメント仕様について
• Figmaのコメントを要素に吸着する方法
• Figmaについて思うこと

Figmaのコメント仕様について

まず、Figmaのコメントが何に対して吸着しているのかを知りましょう。別に知らなくても問題はないので読み飛ばしても構いません。

結論から言うと、Figmaのコメントはキャンバスに配置されている最も外側のframeに吸着します。また、その位置はframeの左上を起点としてx軸y軸固定の絶対座標で配置されます。

このため、本来吸着したいと思っている下層の要素にフォーカスを当ててコメントをしようが、最も外側となるframeに貼り付けられてしまうので、要素を編集した際にコメントだけ置き去りにされてしまうという現象が発生するのです。

しかしこのコメントの配置仕様には裏技のような挙動があり、それを逆手にとることでコメントを要素に吸着させることが可能だということがわかりました。

Figmaのコメントを要素に吸着する方法

本題です。Figmaのコメントを要素に吸着する方法は非常に単純です。要素をまず本来配置したいframeの外側に一度配置してからコメントし、コメント後にドラッグ＆ドロップで本来配置したかった位置に再配置すること。たったこれだけです。順を追って説明します。

1.要素をframeの外側に配置してからコメントする

Figmaのコメントはキャンバスに配置されている最も外側のframeに吸着するという仕様を利用するための作業です。

本来配置したいframeでコメントをしてしまうと、入れ子になっているframeのうち一番外側のframe（多くの場合画面全体の枠がこれに該当する）の左上を起点として絶対配置でコメントの位置が決定されてしまうため、要素を動かした際に追従してこなくなってしまいます。

逆に言うと、コメントを追従させたい要素単体のframeに対してコメントを吸着させてしまえば、それをどこに動かそうがコメントは吸着してくるということです。

2.コメントを吸着させた要素をドラッグ＆ドロップで再配置する(追記あり)

1でコメントを吸着させた要素のframeをドラッグして、本来配置したい部分へドロップします。この際、Cmdキー(WindowsだとおそらくCtrlキー)を押しながら配置することで、Autolayoutでスタックされた要素の中に差し込むことが可能です。

あとは、この要素をどう動かそうが、コメントは要素のframeに対して追従してきます。

ここで注意すべきなのは、別のframeの中に再配置した後のコメントを動かしてしまうと、吸着対象が最上位frameに対して再設定されてしまうということです。要するに、コメント自体を動かそうとすると、要素とコメントの連結が解除されてしまいます。

もしコメントの位置を調整したい場合、要素を再度frameの外側へドラッグ＆ドロップで移動し、位置調整が終わってから元の位置へ再配置してください。

【追記】もっと効率良く吸着させる方法

ドラッグ&ドロップでもとあった位置に戻そうとすると、別のframeに取り込まれたり、絶対配置要素では使えなかったりと色々不都合がありました。

そこで、もっと効率良く吸着状態で元の位置に戻す方法を考案しました。コメントを吸着したい要素をドラッグで抜き出したあと、コメントをしたらCmd+Z(Ctrl+Z)でUndoしてください。すると、コメントは残ったまま要素の位置だけがUndoにより元の位置に戻るので、吸着を維持したまま簡単に元の位置に要素を帰すことができます。

これは、FigmaのコメントはUndo操作の対象にならず独立しているために実現できる裏技です。個人的にこれでかなり楽にコメント吸着を利用できるようになったので、おすすめです。

Figmaについて思うこと

やや裏技的な解決方法となりましたが、上記のような手順を踏むことでメンテナンスに耐えうるデザインファイルを作成することが可能となりました。というか、いくらググっても誰もこの問題を指摘していなかったので、もしかしてFigma使っているのって日本中で自分だけ？と錯覚してしまったほどです。

開発が進んでくると1画面に対して50個以上のコメントが付くこともあり、要素をちょっと動かしただけでこれら全ての位置を調整するとなると膨大な時間が浪費されてしまって最悪の気持ちだったのですが・・・。

正直、コメント機能を要素に吸着させたいなどというのはUI開発現場における基本的な要求であるはずなので、こんな面倒くさい手順を踏まずともFigmaの基本機能として選択中の要素に対して吸着するようにしてくれと思ってしまいますが、ずっと改善されていないことから、きっとFigma開発チーム内でもFigmaの認識はちょっとリッチなプロトタイピングツール止まりなんだろうな・・・と悲しくなってしまいます。

component定義を採用した（紙芝居プロトタイピングツールではない本当の意味での）UIデザインツールの先駆けであり、webベースアプリなのでエンジニアに対しても導入促進しやすい点が唯一無二のFigma。頑張ってほしいところですが、日本語対応も全然なところを見ると日本市場は見向きもされてないっぽいですね。うーむ・・・。

もっとスマートな解決方法をご存じの方がいらっしゃいましたら、ぜひ教えてください。

ローソンのPB商品パッケージはデザインの敗北なのか？を真面目に考察してみた

ローソンのPB商品パッケージはデザインの敗北なのか？を真面目に考察してみた

（この記事の読了目安：5分）

お久しぶりです。東京の端くれでデザインなるものを嗜む者です。

はじめにお断りしておきますが、私は専門のグラフィックデザイナーではありません。なので、今回のテーマであるローソンPB（プライベートブランド　以下PBと表記）商品のパッケージ改修については門外漢なのですが、世間が叩いてる箇所に色々な視点があって面白かったので、考察記事にしてみた次第です。ローソン公式の見解や意図とは違う推察があるかもしれないので、その点はご容赦ください。

目次

• ローソン新しいPB商品のパッケージはなぜ叩かれているのか
• 購買意欲をそそられないという意見について
• オシャレさ優先の自己満足デザイン（笑）という意見について
• インダストリアルデザインにおいてシンプルであることとは
• 「余白が多い」・「文字が小さい」のはなぜなのか
• 他のPB商品と区別ができないという意見について
• 結局、これはデザインの敗北事例なのか？
• さらに実店舗を見てわかった、コンビニの業態的な落とし穴
• デザイナーの人格を叩くのではなく、成果物に対するフィードバックをしよう

ローソン新しいPB商品のパッケージはなぜ叩かれているのか

色々な怨嗟の声がこだまするSNSですが、ローソンPB叩きの声を大別すると以下のようなパターンに分かれてるのではないかと思います。

• 購買意欲をそそられない
• オシャレさ優先の自己満足デザイン（笑）
• 他のPB商品と区別ができない

では、これらの意見について、ひとつひとつ考察していきます。

購買意欲をそそられないという意見について

メーカー製商品のパッケージと並べて撮影し、「これ作ったデザイナーはこのパッケージで買いたいと思うのか？」のような怨嗟の声をあげるパターンです。個人的には、この意見は「叩く視点」がズレていると感じます。

そもそもPB商品を購買する理由は何でしょうか？「メーカー品に比べて安い」というのが、唯一にして最大の優位性ではないでしょうか。ローソン側もそれは重々承知していると思います。

（画像：PB商品の強みは圧倒的な安さにある）

つまり、PB商品において購買意欲は主に「価格」によって決定されているので、パッケージから美味しさが伝わってこないとか、シズル感がないとか、そういった意見はすべて的外れだという風に解釈して、今回の議論からは切り分けることが妥当でしょう。

個人的にはメーカー製品と遜色ないパッケージのPB商品を、メーカー製と間違えて買ってしまった時の方が、ストレスが大きいです。PBには「どの商品よりも安い」というPBにしかない役割があり、それを正しく伝えることがPBのパッケージデザインに求められる絶対条件※です（※注：プレミアム商品は除く）。

オシャレさ優先の自己満足デザイン（笑）という意見について

「デザインは見た目をオシャレにすることじゃない！」という、ある意味正しいデザイン知識をお持ちの方々に多い怨嗟の声です。個人的にはこの意見も「叩く視点」がややズレていると感じます。

なぜこの声が大きいか考察してみたのですが、おそらく賞賛側の声が「可愛い〜！」とか「インスタ映えする〜！」とか、そういうコメントばかりなのに加えて、担当デザイナーの声として切り取られているのが「女性でも手に取りやすいように〜」のような発言なので、このパッケージ変更の方針が、キラキラのアーティスト系デザイナーの手によるものだと認識しているのかなと思っています。

しかし、皆さん可愛いパッケージイラストに引っ張られてますが、私は今回のパッケージ変更の路線はガチガチのインダストリアルデザイン思考による極めて合理的なもので、キラキラ✨とかインスタ映え📷とは、対局な方針に基づいていると考えています。

インダストリアルデザインとは、工業製品において商品を大量生産・大量消費に耐えうる設計にすることを指します。ということを念頭において、今回の新PBパッケージの特徴である「シンプルさ（裏返すと区別できなくなってしまったこと）」や「余白の多さ」は、オシャレさ演出のためでしょうか？

そこには違う意図があるように思いませんか？

（補足：今回のPBリニューアルプロジェクトのメインデザイナーの方の対談記事をいくつか拝見しましたが、とてもロジカルかつ現実的にに物事を考えられているタイプのデザイナーで、決して感覚と思いつきでものづくりをするタイプではなかった印象です。）

インダストリアルデザインにおいてシンプルであることとは

まず、シンプルさについて。これは大量の商品ラインナップを扱うPBならではの課題を解決するための方針転向だと推察できます。パッケージデザインを一つ一つ手作りするというのは、皆さんが思っている以上に時間と労力を要する作業です。

メーカー製商品がなぜあんなに美味しそうで魅力的なパッケージなのかというと、デザイナーが多大な時間と労力をかけているためです。なぜこれができるかというと、メーカー製品は製造する商品ラインナップが限定的であるためです（例：乳製品メーカーならコンビニにあるのは牛乳・ヨーグルト・バター・チーズくらいなので、時間と手間をかけられる。）。

当然、あらゆる商品ラインナップを網羅するPBで、このように非常にコストのかかる工程を毎回踏んでいる余裕はありません。そのコストをカットするため、文字の差し替えだけで大部分が完了するパッケージのテンプレートを用意した結果、「ミニマルでシンプルな今っぽいオシャレパッケージ」になった。というのが、今回の事の顛末かなと推察されます。

とはいえ、シンプル＝悪・オシャレ＝悪ではありません。シンプルでありながら、わかりやすく使いやすいというデザインになっていれば、このようなオシャレさが悪目立ちするような批判は生まれなかったのではないでしょうか。

「余白が多い」・「文字が小さい」のはなぜなのか

今回のパッケージのもう一つの特徴として、パッケージ全体に対する余白の多さが挙げられます。

一般的に余白多めの文字が小さいデザインは、余計な装飾を排除したオシャレで洗練されたグラフィックに用いられる手法の一つです。ただし、インダストリアルデザインの文脈で考えると違った理由が見えてきます。

それは、印刷に使用するインクの量が少なくて済むということです。

シズル感のある大きな商品写真や、大きく判読のしやすい商品名などを実現するには、パッケージに印刷するためにそれ相応のインク量が必要です（インクのコスト感については、門外漢なので完全に的外れの可能性もありますが・・・）。

先述の通り、PB商品における絶対的な価値は「他の商品より安いこと」であるため、パッケージの原材料費においても徹底的なコストカットを実現できる余白の多さは、非常に合理的な選択だったと言えます。

文字が小さい理由も、最も使用量の多い黒インクを少しでも削減するためのギリギリのラインを攻めた結果だと推察されます。

ここまで合理的なデザインであるのにも関わらず「オシャレさ優先（笑）」などと言われてしまうパッケージデザイナーの方の無念を汲んで代わりに解説してみましたが、これは決して公式見解ではないのでその点は悪しからずご了承ください。

とはいえどのような意図や経緯があったにせよ、結果として視認性が悪いというのはパッケージとしての役割の大前提が達成されていないレベルの問題ですので、パッケージデザインとしては総合的に失敗している事例と言えるでしょう。

他のPB商品と区別ができないという意見について

（画像：同じイラストを用いているため同じ商品に見える別のビール）

最後の叩き視点ですが、これについては全面的に同意です。今後パッケージを改善していく上で最も重要な視点は、間違いなくここです。

インダストリアル路線でテンプレート化したパッケージですが、それに伴って中身を知るための情報としての写真やイラストを控えめにしすぎてしまった（しかも、ある系統の商品は別商品で全く同じイラストを用いている）ことで、商品名を全部読まないと区別できない非常に不便なパッケージになってしまっており、視認性・識別のしやすさなどにおいて商品のパッケージデザインとしては完全敗北していると感じます。

同様のインダストリアルデザイン思考路線で（パッケージに対する批判があまり聞かれないという意味で）成功している無印良品などのパッケージデザインは、なぜほぼ文字だけのシンプルでオシャレなものでありながら、しっかりと区別がつけられるのか？

私なりに考えてみましたが、無印良品のパッケージは極力中身の見える透明な袋を利用しており、不透明な袋を利用せざるを得ない場合は大きめのイメージ写真を用いています。また、英語と日本語を混在させない、商品名は最も大きい太字にする等、徹底して統一した商品名表記フォーマットに則っているというのも特徴でしょう。

（画像：無印良品の中身が良く見える透明パッケージ）

（画像：無印良品の大きな写真で中身がイメージできる不透明パッケージ）

対してローソンPBは透明の包装もありますが、中窓になっているなどで全面ではなかったりして視認性はあまり高くありません。また、透明な袋であっても、食パンのように中身が見えても区別がつかないような商品もあります。不透明袋を用いる場合は、こじんまりした写真やイラスト以外に内容物を判別する手段がありません。さらに、豆腐や納豆やサラダなどは、商品名で最も目立つ部分の表記が唐突にオシャレフォントの英語になっており、PB全体での商品名表記ルール※がまだ曖昧な印象です（※パッケージの中のどこが商品名なのか、ぱっと見でわかるルールのこと）

（画像：ローソンの中窓になっている透明パッケージ）

（画像：ローソンの商品名がオシャレフォント主体の不透明パッケージ）

以上の観点から、ローソンPBパッケージデザインの次なる改善課題は「安さに寄与する」という大前提を満たしつつ、商品の区別のしやすさを担保することと見て間違いないでしょう。商品開発部門の皆さん、頑張ってください。

結局、これはデザインの敗北事例なのか？

改めて結論を書きますが、個人的な感想としてはデザインの敗北と呼んで差し支えない事例だと思います。

ただ、その際の視点として「美味しそうに見えない」や「自己満足アート作品」などの、グラフィックの方針や作者の趣味嗜好・制作姿勢についての意見は問題の本質ではない気がしたため、あのパッケージが生まれるまでにどんな経緯があったのか推察して考察してみた次第です。

今回の問題の本質は、商品情報を購入者に伝えるのが役割（発見できる、区別できる、理解できる 等）であるパッケージデザインというデザイン分野の大前提において未達という、いわば競技レギュレーションに違反しているような状態にこそあり、すでに皆さんがご指摘のように公共性の高い施設・製品群におけるユニバーサルデザイン視点の軽視（あるいは特定の層という一面性に特化しすぎた）というのが、最も大きかったと言えるでしょう。

逆に、今のパッケージのようなオシャレでミニマルなクリエイティブ方針のままでも、課題の本質である識別性さえ改善すれば、すんなりと受け入れられると思っています。ゆえに十分にリカバリー可能な敗北だと思いますので、旧パッケージに戻すといった撤退戦のような対処になってしまわない事を期待しています。

さらに実店舗を見てわかった、コンビニの業態的な落とし穴

この記事を書くにあたって、実際に近場の無印良品1店舗とローソン2店舗を、比較のために見てきました。

そこで気づいたのですが、無印良品はすべての陳列棚でしっかりと商品名ラベルが確認できるように照明や配置が綿密に調整されている一方、ローソンは店舗ごとに陳列ルールも什器のタイプもまちまちで、商品名ラベルが完全に影になって隠れてしまう商品もありました。

（画像：ローソンの影に隠れてしまって商品名が判読できない陳列状態）

これは、コンビニがフランチャイズ経営というモデルを用いていることによる盲点だと思います。恐らく、商品開発時点では本部直轄の店舗で実証実験をしていたのだと思いますが、実際に多いのは、陳列ルールが各店舗に委ねられるフランチャイズ経営の店舗であり、現場まで本部の目が行き届きません。

結果として、このような設計時の意図と違う陳列方法が多発してしまい、識別性をより一層損なうという結果になってしまったのでしょう。設計時にコンビニの業態的な特性や現場の実情についてもう少し考慮が及んでいれば、回避できた問題だったかもしれませんね。

デザイナーの人格を叩くのではなく、成果物に対するフィードバックをしよう

皆さんにお願いがあるのですが、世の中で何か不便なデザインを見つけた時は「このデザイナーと意思決定者を解任しろ！」とか「デザイナーはバカだ！」とかの人格に対する攻撃ではなく、「この製品はここがクソだった」や「もっとこうすればいいのになんで？」など、人格ではなく成果物に対する批判をしていただけないでしょうか。

デザインを生業として者として擁護すると、デザインはデザイナー１人の意向で作られているわけではありません。そこには経営上の目標があり、予算など様々な制約があり、それでも解決したい課題があり、関係部署や他社の動向に対する配慮が必要などなど、さまざまな変数の間を縫うように、大勢の力を借りながら作りあげる必要があります。

このような状況で、「デザインがクソなのはデザイナーがすべて悪い！」などと言われると、これからデザイナーを目指す有望な人材がいなくなってしまいます。世界的デザインコンサルティングファームIDEOのCEOであるティム・ブラウンも講演で使った、1900年代の著名なインダストリアルデザイナー Raymond Loewy氏の言葉を借りるならば

Design is too important to be left to designers.
デザインはデザイナーだけに任せるには重要すぎる。

です。

批判意見自体はあって当然ですし、製品をより良くするために必要なものです。ただ、製品に対する批判を個人に対する批判に帰結させるのは、やめてください。個人をいくら叩いても企業は動きませんし、何も改善されませんよ。

今回の件をみて、SNS上での集団心理を得た批判意見の広がり方について恐ろしいと思う一方、ネガティブな感情であれなんであれ、あの規模のユーザーテストとマーケティングデータが（無料で）大量に集められているのは凄いことだと関心しています。

このようなユーザーからの大量の声を、企業とユーザーのお互いにとって有益な形で健全にフィードバックされる社会になることを願っています。

この記事はnoteの個人ブログからの転載記事です。

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

（この記事の読了目安：3分）

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

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

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

目次

• AdobePhotoshopCC2019のクソ仕様について
• 自由変形の挙動を2018以前の状態に戻す方法
• 操作の一貫性を保つことの重要性

AdobePhotoshopCC2019のクソ仕様について

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

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

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

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

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

手順１：上部メニューから「環境設定 ＞ 一般」を開く

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

手順３：OKボタンを押せば完了です

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（この記事の読了目安：じっくり読んで5分 サクッと読んで2分）

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

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

目次

• 「UI/UX」表記批判でよくみる意見
• 言葉の本質について考える
• 私(たち)の考える「UI/UX」の定義
• こんな下らないことでストレスを抱えるのはもうやめよう

「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の包括関係がどうのこうのと言ってもイメージできないと思うので、概念の図解を追加しました。

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

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

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

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

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

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

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

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

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

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

（この記事の読了目安：ざっくり5分 じっくり10分）

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

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

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

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

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

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

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

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

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

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

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

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

• 誤認部門：「余計なお世話」
• 誤操作部門/エンターテイメント特別賞：「スパイ専用トイレ」
• 意味が伝わらない部門：「テプラ待ち」
• 意味が伝わらない部門/ソリューション乖離部門：「ペット」
• 精神不快部門/国際特別賞：「30秒で支度しな」
• 身体危険部門：「孔明の罠〜アイスバケツチャレンジ編〜」

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

No.1「余計なお世話」

【ノミネートコメント】

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

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

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

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

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

【ノミネートコメント】

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

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

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

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

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

No.3「テプラ待ち」

【ノミネートコメント】

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

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

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

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

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

No.4「ペット」

【ノミネートコメント】

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

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

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

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

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

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

【ノミネートコメント】

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

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

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

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

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

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

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

【ノミネートコメント】

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

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

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

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

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

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

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

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

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

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

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

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

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

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