筋の良さを意識したUIガイドラインへの取り組み

Spacemarket Design

スペースマーケットのデザイン部所属UIデザイナー伊東です。
先日Twitterでリンクとボタンの扱いが話題になっていたのを見かけました。

こういった記事や言及に関連して、スペースマーケットのWebアプリケーションでリンクやボタンをどのように扱っているか（・これから扱っていくか）について、現時点でのUIガイドラインやデザインシステムにおけるオブジェクト指向的なUI設計への取り組みを紹介することで他の組織やデザイナーが何か気付きを得ることができれば、と思ったので記事にしてみます。

特徴

スペースマーケットではWebアプリケーションにおけるテキストリンクやボタンの扱いについて、

  • 使い方の原則

  • 理想的な使い方の例とそうでない例

などをドキュメントとして閲覧できる形のUIガイドラインにまとめています。スペースマーケットのプロダクトに一括で適用するには至らず、現在少しずつスタイルを書き換えたり移行している段階ですが、今後筋の通ったプロダクトのUI設計の根幹を担うはずです。
そしてここでの原則や使用例は、他社のUIガイドラインにおけるそれとは割と違ったものになっているように感じています。これに関してはFigmaのそれを見てもらった方が早いでしょう。

スペースマーケットのデザインシステムからテキストリンクとボタンの項目だけ部分的に抜粋したものを公開しましたが、大きな特徴として

  • :hover スタイルを脱却して:active スタイルへ

  • 「詳細を見る」のように意志を代弁する系の表現から脱却して具体的な遷移先の情報を表現する形へ

  • 「詳細はこちら」のように間接的な案内風の表現から脱却して直接的な表現へ

などに注目してもらえれば幸いです。この辺りは他社のデザインシステム・UIガイドラインだとあまり見られない要素なのではないでしょうか。

これを決めるに当たっては主に筆者が土台となる原則やその背景・設計思想から言語化する形で進めたのですが、世間一般で広く使われているリンク・ボタンの在り方とは距離を置いたものになっていくのを顧みて「本当にこれでいいのだろうか」と内心疑問を持ちながら推進していました。
しかし自分の考えと近そうな言及がされているのを見たことで（よく考えるとHTMLやGUI本来の性質に立ち返って考えた結果なので似た意見があるのは当たり前なのですが）、弊社での取り組みに少し安心感を覚えました。

hoverスタイルからactiveスタイルに

まず1つめの紹介…なのですが、先に取り上げたUIガイドライン（Figma上にまとめたデザインシステムの一部）の方がより詳細に書いてあるのでそちらを見てもらった方が早いかもしれません。ここではnoteでの文章表現を意識した形で、Figmaの箇条書きで捉えきれていない部分を掬い上げる体で言及してみます。

リンクやボタンへポインター（カーソル）を乗せた際にCSSの擬似クラス :hover で何らかの視覚効果を与えて「押せる感」を演出するのは一般的に広く用いられている表現です。
また一部には、そもそも「押せる感」の表現から逸脱した自由なスタイル（ボタンを囲うボーダーをアニメーション的に描画するなど）にしている事例も見受けられます。

button {
  background: var(--color-primary);
}

button:hover {
  background: var(--color-primary-light);
}

/*
そういえばhoverの色って暗くするか明るくするか難しいですよね、
充分なコントラスト比・視認性さえ確保されていればどちらにも妥当性がある。
暗くする理由: 要素の上に手（カーソル）をかざすのだから影になるぶん暗くなるはずだ。
明るくする理由: 暗くすることでフォーカスした要素の存在感が薄まるのはおかしい。逆では。
*/

スペースマーケットでも長きにわたってこのhoverスタイルのお世話になっていました（思想の転換的には過去形ですが、プロダクト自体への反映は完了しておらず今も名残があります）。しかし、そもそもこのhoverというのは一体何を表現しているのか、と改めて考え直したところ、見出しのような結論となったのです。

hoverの際にスタイルを変化させる狙いとして、「これは操作可能な要素なんだな」とユーザーが気付けるようにするのが一般的と思われます。しかし、これを逆に捉えると"hoverするまでその要素は操作可能かどうか想像しにくい"ということにもなり得ます。となると、hoverスタイルに頼るまでもなく、初期表示の段階で何か操作できそうな印象を抱けるような表現の方が認知負荷を低く保てそうです（ドナルド・ノーマンが言うところの"シグニファイア"）。

また、マウスなどのポインティングデバイスによるポインター操作でhoverスタイルの恩恵を受けられるのは基本的にデスクトップOS環境に限られます。モバイルOS環境の場合、hoverスタイルは機能しないのです。
（これに関して「ontouchstart属性でhoverの代わりになる」と紹介しているサイト・記事も見受けられますが、要素へ触る/触らないの決定的な差がある点でこれらは別物で、hoverの代わりとして扱うのは十分に検討と検証を重ねてからでも遅くはないでしょう）

そして、hoverスタイルの起点になるポインター移動は、えてして無意識的に行われるものです。それはユーザーの意識から手、ポインティングデバイスまでが一体化しているからで、基本的にはシステム側には隠蔽された操作として我々人間は捉えているはずです。自身の手元感覚と一体化したような設計を指向しているようなOSのレイヤーならともかく、Webブラウザ内でたまたま訪問したサイトの側がユーザーのカーソル操作の一挙一動に関心を持つような反応を見せることが何を意味するか、またそういった表現に違和感はないか、デザイナーであれば特に意識的になるべきでしょう。
一方で、クリックやタップといった押す操作はユーザーからシステム側へ意識的に働きかける操作です。能動的に何かを開いたり送信したいからリンクなりボタンを押すわけで、無意識に押すということはhoverスタイルの発火と比べると相当少ないように思われます。
つまりユーザーの意識と直接的に接続されているのは押す行為そのものであり、一方でポインターが重なっただけのhoverスタイルに過剰な意味を持たせることについては、視覚的な情報量の肥大化やスタイル管理の手間などを考慮しても得策ではないと考えました。

こういった経緯から、スペースマーケットWebアプリケーションのGUIにおいてはユーザーにフィードバック的な視覚効果を表示して見せるのはポインターが重なっただけのhoverスタイルではなく、要素が操作された（押された）際のactiveスタイルにしていくべきだろう、という方針にしています。実際にhoverスタイルでボタンコンポーネントをマークアップしてみたものは好感触で、自分の手や操作に吸い付くようなGUIらしい直接操作感に少なからず寄与しているように感じ取れました。

button {
  background: var(--color-primary);
}

button:active {
  background: var(--color-primary-dark);
}

/* ボタンを押した時の色は光源から遠くなるぶん暗くするのが妥当なはず */

案内的な表現から自己説明的な表現に

この点については、まず"UIとは何であるか"といったレイヤーから解きほぐしてドキュメント化するような流れとなりました。
「UI」のうちUはuser（利用者）で自明かと思われますが、「interface」についてはその抽象度の高さゆえフワッとしたイメージしかないデザイナー・デザイン組織は存外多いのではないでしょうか（思い返すと自分がUIデザイナーになりたての段階ではそんな感じでした…）。
interfaceを和訳すると「界面」「接点」といった単語に行き着きますが、接点はともかく界面というのはいささか馴染みのない単語です。日常的に用いる機会の少ない単語ということもあって、あまり理解の助けになっていないかもしれません。

これを読んでいる今、もし屋内にいるのであれば部屋の窓に注目してほしいのですが、屋外と屋内を隔てている窓に自分が触るとき、その手に触れた面は屋内側にあるはずです。これがinterfaceで、屋内はユーザー側に、屋外はシステム側と捉えるとイメージしやすくなるのではないでしょうか。
ソフトウェア設計の分野におけるUIという単語が何を表すのか、については「"ユーザーの側にあって入力を受け付ける界面"としてのUser Interface」と捉えるのが率直かつ明快に説明しやすいと感じています。

ここで本題に戻ると、テキストリンクが「詳細はこちらから」「下記のリンクからダウンロードしてください」といった案内形式のラベルで表現されているのをよく見ます。一見、丁寧で親切な表現のように見えますし、デザインや実装を行なった側も親切心でそうしているのだと思われます。

しかし、先の「UIとは何か」を思い出してみると、UIの中にあってこういった案内形式のラベルというのは屋外（システム側）に位置した表現だと捉えられます。その点を踏まえると、本来UI上にあるリンクなどのラベルは、システム側に陣取ってユーザー側を案内するような表現ではなく、屋内の窓の触れる面のようにただ自身の性質をそのまま表現している方がUIの性質に則った形になるのではないでしょうか。

加えて、案内形式というのは対話的な表現なので、対話形式のコマンドを起点に操作するCUI（character-based user interface・いわゆる"黒い画面"にたくさんの文字が並ぶコマンドラインのUI）に近い性質だと考えられます。一方で、リンクやボタンといった表現はGUIのそれなので、GUI上に案内形式でCUI臭いラベルが存在する設計というのは表現が混線したものになっているのです。
（実はボタンだけ例外的で、あまりGUIらしくない性質のUI部品だったりするのですが、詳しくは後で触れます）

それではどのようにすればGUIにおける「らしさ」や「筋の良さ」が備わったラベルになるのかといえば、ただ素直に自身が何であるかを表現したものが望ましいと考えています。
この表現を「自己紹介的」として取り上げるのは対話のニュアンスが含まれてしまう印象ですし、「自己表現的」というのも違ったコンテクストを想起させるような印象があったので、ここでは「自己説明的」な表現として話を進めます。

例えばWebにおけるテキストリンクとは、遷移先ページのURLを設定してそこへ遷移できるようにするものです。そこで、遷移先ページ"っぽく"見えるように、遷移先ページであることをそのまま遷移先ページの情報（タイトルやURL）で表現すればテキストリンク本来の役割として適切に機能しうるものだと考えています。
（WebをベースにしたUI設計を行う上では、ギャレットの5段階モデルのようにソフトウェアとしての側面とハイパーテキストとしての側面の2軸をどのように捉えるかの問題があります。しかしそれ以前に、まずメディウムの特性を知って意識すること自体の重要性をガイドラインへ組み込むことが本稿の趣旨であり、両側面の比較やバランスといった点に関しては話の範囲が広がり過ぎてしまうため割愛します）

例えば、

といった表現の比較だとどうでしょうか。

案内形式の表現に慣れた目で見ると、文字数や情報量、指示的な文になっている点などから上側の方が親切に見えそうです。が、少なくとも下側の方が遷移先の情報（タイトル）のみで直接的かつ自己説明的に表現していると言えそうですし、さらにアイコンなど何らかの手段で外部リンクや新規タブといった遷移自体の挙動も想像できるような表現を加えれば、より認知負荷の低いデザインに仕上がるのではないでしょうか。そしてこの例だとテキストリンクの文字が増えたことでクリッカブル領域も広くなり（フィッツの法則を持ち出すまでもなく）操作効率の向上にも若干は貢献しているはずです。

もちろんこれはGUIの一部を切り取った上での話ですから、実際のWebサイト・Webアプリケーションで用いられるコンテクストに良し悪しは依存するのですが、少なくとも下側が「遷移の結果を想像しにくく認知負荷が高い」とされるようなコンテクストというのはあまり無いように感じます。

同様に操作結果への認知負荷を考慮した取り組みとして、「単純なページ遷移のハイパーリンクはなるべく簡潔にテキストリンクで表現する」「入力項目の送信などSubmit的な操作や、パラメータが付与されるようなロジックを伴った遷移に限ってボタンを使う」といった原則も含めています。
遷移先のページ情報を自己説明的にラベリングしたテキストリンクというのはすなわち目当て（オブジェクト）を扱ったページそのものとなり、そのリンクを押す行為は直接的にオブジェクトへ触れるタスクだと考えれますが、ボタンというのは一連の直列化・自動化された処理のトリガーであり、間接的な操作です。そのためGUIの本質的な直接操作の性質とは相性が微妙で、GUIにおいてはなるべくボタンの使用を控えようと考えています。

また、ジョン・ラスキンが建築設計の文脈で展開した「素材そのものを表現しよう」といった主張（マテリアルオネスティ）と通じる部分があるように思えますが、様々なWebサイトで用いられている"ボタンを模倣したリンク”という存在は、意匠（スタイル）と実際の挙動との隔たりをユーザーへチリツモ的に感じさせかねない懸念があり、操作対象そのものに触れるユーザーにとって"開かれた・やさしいデザイン"から遠ざからないように用法用量を守って使用する必要があると考えています。ハードウェア畑ではありますが、この「素材そのものの特性を活かす・尊重する」設計思想はイームズや深澤直人氏のプロダクトからも見受けられ、"良いデザイン"の一要素として認識されているのではないでしょうか。

さらに抽象度の高い話をすると、GUIに限らずとも丁寧な案内形式の誘導は表現が冗長になりがちなだけでなく、そもそも案内という行為自体が相手を誘導し、自身の望む方向へ駆り立てる・コントロール（支配）するような側面も持っています。このUIにおける誘導や駆り立て・徴用の危うさについては以降の項目で改めて言及します。

ユーザーの意思を代弁した表現からユーザーの意思を尊重した表現に

「詳細を見る」「今すぐ注文する」といったラベルのリンクやボタンは今日あらゆるプロダクトで目にします（私の所属するスペースマーケットでさえ例外ではありません）。もはや定番・主流の表現になっていると言ってよく、ここに疑問を投げかけることさえ不思議がられるような状況です。

こういったユーザーの意思や行動を勝手に代弁するようなラベル表現が広く使われている現状にはマーケティング観点からの要求などによる経緯があると認識しています。筆者が5年ほど前、UIデザイナーになりたての時期に目にしたある記事では「CTAボタンのマイクロコピーは柔らかいカジュアルな表現でユーザーの行動を記載した方がコンバージョンする」といった主旨が実際にA/Bテストした際に得られた計測値と共に展開されていた記憶があります（UIの全体設計においてどのコンテクストでの試行か、といった点についての詳細な言及は無かったように記憶しており、あらゆるプロダクトで汎用的に借用できるラベリングだったかどうか今でも疑問を残しています…）。試しに検索してみると、現在でも似たような主張の記事が数多く見つかります。

個人的にこういった表現には以前から居心地の悪さというか、どこか落ち着かない感覚を抱いていたのですが、ここ1,2年でオブジェクト指向UIデザインの観点を獲得したことでようやくその違和感を多少なりとも言語化できるようになりました。

まず、リンクやボタンを押した結果をラベルから想像しにくく、認知負荷が生じる点について省みなければならないと考えています。今日ではさまざまなWebアプリケーション（もちろんネイティブアプリケーションも）を誰もが日常的に使っていることと思われますが、例えば「今すぐ注文する」といったラベルのボタンがあったとき、

  • 押したらカートに入れる

  • 押したら決済フローに進む

  • 押したら即座に決済が完了し、注文が成立する

この3つのパターン全てを何らかのアプリケーションで経験したことがある、という方は結構多いのではないでしょうか。そしてその時、ボタンを押した結果を想像する上で多かれ少なかれ「先の読めなさ」や「想像しにくさ」「ちゃんと理解しないと押してはいけない感じ」といった認知負荷を経験したのではないでしょうか。

これは操作の結果を直接的に表現せず、「事業者がユーザーに今すぐやってほしいこと」をそのままラベリングしていることに起因した「想像しにくさ」ではないかと考えています。こうした「ユーザーに何をしてほしいか」ベースで仕様を決めるような進め方の場合、タスク指向的でGUIとして使いにくい・手に馴染まない設計に陥りがちな点には意識的になるべきでしょう。

GUIの基本であるところのオブジェクト指向的な性質を素直に表出させるためには、オブジェクト側から「今すぐ〜やってね！」といった形でユーザー側の用途などに関心をもった投げかけを発するのではなく、ただオブジェクト本来の姿をそのまま見せることで”どのように用いられるか"に対する関心を分離すれば良いのではないでしょうか。

オブジェクト指向のUIデザインというと、真っ先に思い浮かべるのは一覧ビューと詳細ビューからなる情報設計かと思われますが、こういったUIのラベルを表現する際にもオブジェクト指向性を意識すると筋の良い形にデザインできることをガイドラインに言語化しておくことが重要だと考えました。
具体的には、ハイパーリンクにおけるオブジェクトとは遷移先のページ自身です。そして、そのリンクを押すこと自体が「もっと見る」というタスクになります。ユーザーが自身の操作をもってオブジェクトへ「見る」というタスクを伝えるわけですから、そこの意思や行動をオブジェクト側で「もっと見る」「今すぐ購入する」といったラベルで代弁する必要はないですし、それをした結果が自分の違和感と繋がっていたのです。

「ハイパーテキスト」はウェブページから別なページに、ウェブサイト内でもウェブサイト間でも、接続するリンクを示します。リンクはウェブの基礎的な特徴です。

HTML： HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML

Webの根幹を成すハイパーテキストは、ハイパーリンクでの参照構造によって成立しています。参照関係を示すハイパーリンクの性質を意識した上で、率直にリンク先のページ情報をありのままに記した方がハイパーリンクとしての機能を果たせると考え、先述のUIガイドラインに言語化したのです。

ただリンク先を見たかったり、カートに入れて送料を含めた合計の金額を見たいだけのユーザーがいるかもしれません。仮にCTAボタンのラベルが「今すぐ購入する」といったユーザーの意思を代弁したような表現になっていても、そういったユーザーにとっては自身の意志と隔たりがあるため、UIの自己帰属感は得にくいでしょう。限られたコンテクストにおけるユーザーの意思や行動をデザイナーが勝手に代弁するのではなく、ありのままに目当て（オブジェクト）のページ情報であるタイトルやURLなどを記すことで「多くの人に開かれたやさしいデザイン」「Webやハイパーテキスト本来の性質に根ざした足腰の強いデザイン」になる。そんな感じに捉えています。

また、ユーザーの意思や行動を代弁するラベル表現の中でも、とりわけ「今すぐ〜する」形式は非可逆的な操作という印象を強く与える可能性が考えられます。フォームの最終的な入力項目を送信するようなSubmit的なボタンのラベルであれば非可逆の操作であることを伝える合理性はありそうですが、例えば単に決済フローのページへ遷移したり、カートへアイテムを入れるなど後からでもやり直しが可能な操作のトリガーに関しては、操作結果に見合った簡潔かつ適切なラベリングにすることでコンバージョンなど事業上の目標・指標にも良い結果をもたらすことさえあるのではないでしょうか（もちろんデザインとビジネスそれぞれの基準や価値は別物なので安易な価値変換や置き換えは避けるべきですが、あるべきデザインをステークホルダーに納得させる上での劇薬的な理屈としては有効かもしれません）。少なくとも現在普通に使われている「ユーザーの意思や行動を記載したマイクロコピー」というものはあくまでもマーケティング観点によるもので、WebのハイパーテキストやGUIの観点ではハック的な手法であることを認識しておくためにUIガイドラインでの言語化が必要だと考えました。

自然に・普通に使えるものにしたい

先に触れた「誘導・駆り立て・徴用」の危うさについて、改めて触れてみます。
タスク指向的なUI表現には、目当てのもの（オブジェクト）が見えない中で限定的なタスク選択を強いることによって、相手（ユーザー）を事業者・提供者の望む特定の行動へ駆り立てる性質があります。

あらゆる人が互いに駆り立て合う社会はまず怖くて疲れるでしょうし、そうした社会の一側面を自らの手でエンパワーメントしかねないことにデザイナーは（是非はともかくとして）意識的にならないといけないように思えます。ユーザーが思い通りに操作できないGUIを生み出す近道でもあるタスク指向性の強いUIデザインにリンクやボタンといった構成要素の時点でも吸い寄せられないよう、弊社ではデザイナーを中心としてこの記事で紹介したようなUIガイドラインでの言語化に取り掛かっています。

そして、GUIらしいオブジェクト指向性を意識したUIデザインは、単にページ数を減らしたり操作の効率を向上させるだけでなく、そういった駆り立ての連鎖と距離を置き、人間が自然に・普通にツールとして扱えるような操作体系への指針にもなると考えています。単にMaster-Detail（一覧・詳細）パターンの情報構造を順序立てて表現するだけではなく、オブジェクト自身が自分とは何であるか知って、語っていることがオブジェクト指向的なUI設計の肝です。そしてユーザーを案内するでもなく、意思を勝手に代弁するでもなく、ただそこにあって自らを語るような表現を指向していくことで、リンクやボタンといった原始的なUI部品ひとつとっても操作感に差が生まれるのではないでしょうか。

ここまでスペースマーケットのデザイン部で扱っているUIガイドラインについて書きましたが、これをベースにプロダクトのUIを改善したり、新規に作ったりするデザイナーの人手が足りておらず、プロダクトにも反映しきれていないのが実情です。
また、そもそもこのガイドラインも未完成の部分を多く残しており、既存項目の見直しも必要だと思われます。

この記事で紹介したように、なんとなく当たり前のように行われている慣習を改めて考え直したり、本当にあるべきUIの姿とは何か議論するような文化のある環境で一緒に切磋琢磨したい（雰囲気は穏やかで緩かったりするのですが…！）UIデザイナーにとっては貴重なデザイン組織だと思いますので、ここまで長文にお付き合いいただいたついでに弊デザイン部の採用記事もご覧いただければと思います。具体的に転職などを検討している段階ではなく興味があるだけの方でも、ぜひお話を伺えれば幸いです。