
## いつまで UI をつくり続けるのか

アプリケーションをデザインしながら、ふと思うことがあります。「私はこの先もログイン画面をデザインし続けるのか」── 過去のプロジェクトから Photoshop、Sketch、そして Figma のファイルを振り返ると、プロジェクトの数だけ形を変えたログイン画面のデザインがありました。

<div class="image">
<img alt="さまざまなログイン画面の UI が羅列されている" src="/images/20250305-1.jpeg"/>
<div class="title">さまざまなログイン画面の UI</div>
</div>

当時はデザインシステムの概念もなく、ライブラリも少なかったため、プロジェクトのたびにゼロから UI と画面を起こしました。ログイン画面は ID とパスワードを入力する要件である限り、構成は最適化されています。しかし、世界中では今日も新たなログイン画面と UI がつくり続けられています。

## 使いやすい、は最適化される

UI 設計はユーザーのコンテキストに従い、普遍的な原則があるものは奇をてらう必要はありません。コンピューターとの対話として捉えるインタフェースの議論はさまざまですが、基本的な考えは「道具」に通じます。

たとえば、家にある包丁を並べて柄の部分に注目すると、形状の差はほとんどありません。この道具の場合、接点となる柄はインタフェースです（厳密にはインタフェースは柄だけではありません）。写真にある3本とも、製造された年代や国は違えど、1950年以降、西洋包丁において人間工学が取り入られ、家庭向けにはほぼこの形状に最適化されつつあります。

<div class="image">
<img alt="並べられた3本の包丁の柄に注目しインタフェースと示されている" src="/images/20250305-2.jpeg"/>
<div class="title">包丁とインタフェース</div>
</div>

最適化されると、ユーザーはインタフェースの存在を意識することなく、道具を使いこなせるようになります。そして新たに柄の形状をつくるのではなく、設計の視点は材質、衛生面、環境配慮、和洋の融合などへと向けられることになります。

## 情報設計の視点

<div class="image">
<img alt="わかりにくさの原因として、情報過多、情報の欠落、誤った情報を図示している" src="/images/20250305-3.jpeg"/>
<div class="title">「わかりにくさ」「混乱」の原因</div>
</div>

これは私が情報アーキテクチャの入門でよく使うスライドの一枚です。アプリケーション設計において「わかりにくいから、わかりやすくしたい」という場面では「わかるように何かを書き足す」ことがよく求められます。それが効果的な場合もあり、専門的な用語を使わざるを得ない場合は、適切な情報の補完が必要です。

目の前にある情報がわかりにくいとは、情報が多すぎる・欠落している・誤っているのどれかです。誤った情報とは、完全な間違いではないものの、ユーザーが理解できる範囲ではなかったり、コンテキストに従っていないものも含まれます。

この場合は情報を足すのではなく、修正することが第一選択になります。ユーザーへの情報提供を急ぐあまり説明を追記するケースは、かえって情報過多になり、より混乱を招きます。情報設計に携わるエキスパートは「つくる」だけではなく、再構築に「直す・なくす」選択肢を必ず持っています。

## つくる、なくす

私たちは「つくる」ことで進化し続けています。産業革命以降、大量生産が可能になり、文化や知識も蓄積されますが、量産サイクルは加速し、廃棄が追いつかなくなっていることも事実です。良いモノは永く使い、循環型のモノづくりへとシフトしていくことが持続可能な社会には必要です。たくさんつくらないこと、そして新しくつくる場合は、何かをなくすことも同時に考えることを示唆しています。それは単なる削減ではなく、最適な「平衡」を見極めることでもあります。何を残し、何をなくすのか、このバランスを取ることが、持続可能な社会には欠かせません。

大量生産は物質的なものに限らず、情報も同様です。不要になった情報は、NASA が対策している宇宙ゴミ “スペースデブリ” になぞられ、ネットデブリとも呼ばれます。Google は「世界中の情報を整理」することを理念としていますが、デマの拡散、不適切な書き込み、広告が氾濫したサイトなど、整理は追いつきません。生成 AI によりそれが加速するのは言うまでもありません。正しく理解しなければならないのはネットデブリは生成 AI によってではなく、人が量産するのです。

## デザイナーとしてできること

新しい技術が社会に浸透し、倫理的に正しく使われるには非常に長い時間がかかります。誰もがネットに発信できるようになって、ようやく今の状態です。この記事を書いている現時点で、生成 AI は特定の業界業種で活用され始めていますが、やがて誰もがアプリや情報の生産に利用するようになるでしょう。

つくること自体に制約はありません。私たちが倫理観を持ち、新たにつくる必要があるのか、これまでの不要な情報を更新したり、なくす設計の視点をデザイナー中心に持たなければならないと思っています。

既に最近では、一から UI をつくるのではなく、ライブラリの再利用やアレンジがまず検討される場面が増えています。機能が増えるからといって、新たなレイアウトパターンを模索するよりは、既存のパターンで代替できないかを考えることもあります。文脈は異なりますが、アーキテクチャにおける “Less is more” という本質は、昔から変わることがないのかもしれません。

<div class="image">
<img alt="統合する、選択肢をなくす、あるものでアレンジする、なくす提案をする" src="/images/20250305-4.jpeg"/>
<div class="title">なくす提案に向けて</div>
</div>

## なくすことは新しくかわること

なくすことは、つくることの否定ではありません。それは次の新しい可能性へとつなげる行為です。UI デザインの最適化が進み、ゼロからつくることの意味が変化してきているように、私たちが手を動かす対象や考え方もまた変わり続けています。

デザインの役割は、新しいものを生み出すだけではありません。既存のものを改善し、本当に必要なものを残し、不必要なものをなくし、より良い形へと進化させることもまた、デザイナーの役割です。今後も人が行うデザインの領域はさらに広がるでしょう。しかし、その中で何を「なくす」のかという視点を併せ持つことが、持続可能な「平衡」を保つことにつながります。

つくることと、なくすこと。そのバランスを考えながら、これからもデザインと向き合っていきたいと思います。

Designship 2023 のセッションでお話しした内容をもとに、今思うことを含めて記事にしました。「なくす」というデザインの視点の提案です。

なくすデザイン


## 見た目を良くして

十数年も使われ続け、今も業界では一強で牽引してきた Saas のプロダクト。その UI デザインリニューアルという大きなプロジェクトが昨年から動き出しました。弊社はパートナーとして UI と機能改善の主監を担います。そのプロダクトの初期開発から事業展開、営業までを歴任されたクライアントの部長と MTG を重ねているのですが、どうもその方が話される「デザイン」を理解するのが難しく、私はいつも頭で変換しなければならない。

「今っぽい UI、見た目的に、雰囲気、パッと見て」という言葉が頻出します。恐らく部長は「見た目を良くすること」がデザインすることだと捉えているのだと思います。

この記事をご覧いただいている方がデザイナーであれば「見た目だけではないよね」と思っていただけるかもしませんが、一般的に「デザイン」とはこの部長の視点の方がマジョリティではないかと思います。SNS には時折、パッケージデザインの善し悪しやエレベーターのボタン、デザインの敗北などのネタが散見されますが、デザイナーから離れたこのような視点が時代とともにアップデートされるということはありません。むしろその視点と向き合うことがデザイナーという専門職の使命ではないかと考えています。

## 「◯◯の力」という力のなさ

タイトルにある「デザインの力」という言葉が気になり始めたのは、好きなアーティストの一人である坂本龍一氏の発言がきっかけです。「音楽の力というのは一番嫌いな言葉」というインタビュー記事がありました。（その内容は割愛します）

常に言葉は大切に扱いたい、という職業的な観点があったのかもしれませんが、見出しなどで多用される「デザインの力」はどういう意味を込めて使っているのだろうかと深く考えるようになりました。クリエイティブとは異なる商業デザインは、デザイナーのアウトプットが事業や組織の成長に寄与することが望まれますが、それは「デザイナーの力」であり、またそのデザイナーを支えた「組織の力」でもあります。デザインされたそのものに力が宿っているわけではなく、アウトカムに向かった人々の総力、というところに焦点が当てられるべきです。

こうして見ると「◯◯の力」はさまざまな場面で使われています。例えば「設計力」という言葉をとっても、設計の対象となるものの共通点や本質を見抜こうとする姿勢、専門性、論理的な思考、感性や直感も関与する能力を指します。それらは日々の試行錯誤で磨かれていくものですが「◯◯の力」という抽象的な表現で済ませてしまうと、まるで一朝一夕に習得できるかのような力のなさをもたらしてしまいます。

## デザインを曖昧のままにしない

デザインはプロセスだと捉えられる人もいれば、視覚的に表現されるものだという理解も間違っていません。ここにデザインという意味の曖昧さがあります。曖昧だからこそ「デザインの力」というような抽象的な表現で済ませないようにしたいです。

プロジェクトでデザイナーがまず取り組むべきことは、関わる人とデザインの視点を揃えることです。そうしなければ、プロジェクトにおけるデザインの真価を発揮することが難しくなります。見た目だけに焦点を当てた「デザイン」は本当に解決すべき課題や目的を見落としてしまいます。ただし、それに気付けるのはまずデザイナーです。だからこそ、そのプロジェクトにおける「デザインとは何か」を伝え続ける必要があります。プロジェクトの数だけ、考え続ける必要があるのです。

視点が揃わないと感じたとき、私が考えることは「これからデザインが解決しようとしている課題と貢献は何か」、そして「なぜデザイナーはその選択が適切だと思うか」を伝えるようにしています。デザインは全員で取り組む、そういったカルチャーであったとしても、その道筋を最初に示せるのはデザイナーだけなのです。

## 変わるのはまわりだけ

ここ数年、デザインの民主化や共創の実現など、デザインのまわりにあるフレーズが飛び交っています。デザイン経営というのもあった気がします。そのたびにデザイナー職は多くの人に注目され、その意義が社会に広まることはとても喜ばしいことです。しかし一方で、それらの言葉が表面的に使われるだけで、本質が見落とされる懸念もあります。このバランスがいつも難しいと感じています。

「デザイン経営」において、多くの企業がデザイン部門を立ち上げたり、デザインを活用した新規事業の開発に乗り出しました。しかし、それが単なるトレンドとして扱われ「デザインを導入すること」が目的化してしまった事例も少なくありません。一部の企業では成功を収めた例もありますが、デザインの本質がないがしろにされると、結局は一過性の取り組みに終わってしまうのです。

デザインの対象はますます広がり、プロセス自体も進化していくでしょう。しかし、デザインの本質は変わりません。まわりが変わろうとも、デザイナーはいつでも視点を広げ、対話を通じて社会や組織とより深く関わっていくことのできる専門職です。デザインが単なるフレーズを通じてではなく、実質的な貢献ができる存在であることを、一つずつ証明していくことが常に求められています。

## デザインに人の跡を残さない

これは商業デザイン全体の話ではなく、特にアプリケーションソフトウェアの分野に限定される話かもしれませんが、私は優れたデザインとは、どのデザイナーが手掛けても最終的に行き着く形は同じようになるべきだと考えています。特に「用の美」の考え方に啓発された経験から、優れたデザインには「誰がデザインしたか」といった人の跡が残らず、自然に使われ続けるものこそ理想だと思います。これが後に「デザインの正解はある」と思い至るのだが、それはまた別の機会に述べたいと思います。

ここで伝えたかったのは「デザインの力で何かをしてやろう」という恣意的な意図が感じられるデザインは、短命であることが多いということです。デザインの力を誇示するのではなく、目の前の課題解決のための実直さこそが、デザインに関わる人々に求められる本質的な役割ではないでしょうか。

「デザインの力」といった抽象的な表現に頼ることを避け、デザイナーが主体となり、具体的な貢献や成果を示すデザインの重要性について考えました。

デザインの力という幻想


## UI デザインと他のデザインとの違い

UI デザインは、UI コンポーネント（ボタンやラベルなど）の適切な採用とデザイン、ユーザブル（使えること・役立つこと）が前提にあります。アプリでは OS のガイドラインがあったり、もしくは自らデザインの原則を設けるなど、UI を設計する「意図が明文化できているもの」が持続可能な UI であり、良いとされています。

そして、UI からは設計側のあしらいや存在は消えているべきで、ユーザビリティ以前にユーザーが自然に扱えることが最適な UI デザインであると私は考えています。UI デザインは主役ではない、ここが他のデザインと大きく違う点です。

## 使いにくい UI が生まれるのは

ビジネス上、機能を増やさねばならず追加することになった多くのメニュー、後の仕様変更に伴い、分かりにくくなったことで説明を表記せざるを得ないテキストなどは、まさに不自然な UI です。これらは当初の設計にたいし、変更に対応できなくなった継ぎ接ぎの結果でしょう。また、他の類似サービスから UI パターンを参考にし自社のものに当てはめたりすると、変更に対応できないものに陥りがちです。他をあまり深く意識せず、自社の世界観を作り守り貫くのが UI デザイナーの役割でもあります。

## 持続可能な UI であるために

ガイドラインやデザイン原則を考えることは持続可能な UI にするために有効ですが、明文化のために言葉にする・コミュニケーションを取るといったことが求められます。UI デザイナーの仕事の時間は、作ることやユーザビリティテストよりも、明文化に多くを費やすことだと言っても過言ではありません。

コミュニティやイベントで「そのためにはどう研鑽を深めればいいのか、語彙力そのものに課題を感じている」という意見が多くありました。それに必要なのは何が良くて、何が悪いかの「基準を持つ」ことが第一歩なのではないかと思います。

## 「基準を持つ」とは

アプリやサービスは、業務系や一過性のものを除き、日常、暮らしの中に融け込み、ずっと使ってもらえる、愛されるものになってほしいものです。日常であるべきことは飽きの来ないことであり、かつ他のものよりも洗練されていることです。UI にあしらいや設計者の存在が消えていなければならない理由はここにあります。

そうしたものをデザインするのに必要なことは、私は過去の講演で「感性を磨く」と表現しましたが、曖昧な表現だったと反省しています。どう感じるのか、の思考に必要だったのは、これまでの自分の記憶と新しいことの違いに気付ける、これが自分の「基準を持つ」ことではないかと思います。アプリやサービスだけでなく、日常にあるものが自然に使える、使っていられるのはなぜなのか？をいつも意識するだけで、その積み重ねが自分の基準になって洗練されていきます。基準を持つことができれば、そこで感じることを言葉で説明することもできます。

多くのユーザーは UI を操作するとき、これまでの記憶や経験から使えるかどうかを瞬時に判断します。ユーザーにも基準を持っているということですが、UI デザイナーの仕事は、それを先周りしユーザーを自然にゴールへ運ぶことです。さらに基準を超えた素晴らしいものに出会えば、感動の体験に変わります。そのためには常に正しい基準を持ちながら、設計を言葉にしていくことがデザインの力となっていくのではないかと思います。

## 大切にしたい日本人の感性

日本人の感性は諸外国に比べ素晴らしいと言われるのに、自分が他のものと違っていないか・間違っていないかを気にするのもまた日本人です。海外で流行のアプリやサービスの UI を見ては、疑わずに自分たちもそうしなければならないのでは、と思ってしまいがちです。確かにデザインやインタラクションなどは他のサービスから学ぶこともたくさんあります。大切なのは他のパターンを採用するのではなく、自分が良いなと感じたことをまず言葉にすることです。それが日本人が初めから備わっている大切な感性と所作なのだと思います。心地良い、クールで格好いい、シンプルだ、という判断基準だけでは必ずしも良い設計にはつながりません。私たちの言葉で基準を持つことが UI デザインには必要です。

UI デザイナーとして私が大切にしているスキル「基準を持つ」ことについて。（UI Design Advent Calendar 2016 に掲載していた記事をリライトしました）

UI デザイナーに必要な「基準を持つ」


## UI Lab とは

UI Lab は、デザインとエンジニアリングのワークにフォーカスし、UI を通じて設計手法やデザイン・フロントエンドエンジニアリングに関するスキルや考え方を学ぶ、主に関西で活動する有志のコミュニティです。先日、[フジタジュンコさんによる第1回目のイベント](http://uilab201610.peatix.com/)が終了し、[次回は長谷川 恭久さんによる第2回目](http://uilab201611.peatix.com/)の募集を開始したところです。

UI Lab では設計・デザインに必要な概念やプロセスを学びながら、実践を目的としたワークショップを行います。UI を考える・つくることで、UX デザインはもちろん、現場で実践するための周辺の諸概念やプロセスを習得することがネライです。

## なぜ UX ではなく UI のコミュニティなのか

関西地方ではデザインやエンジニアリングのコミュニティは増えたものの、それでもツール系を除く UX や UI の勉強会は、関東に比べて非常に少ないです。もちろん市場の大きさや企業数により、UI デザイナーという専門職が少ないのは事実ですが、関西をはじめ地方で活躍している UI デザインに関わる方は、web デザイナーやエンジニアがその役割を兼務していることが多いようです。そして UI を学ぶとすれば、やはりネットの情報や読本といった独学によるものが中心です。

以前、UX OSAKA という UX のコミュニティを立ち上げましたが、UX も各地方コミュニティとして確立してきたこともあり発展的に解消。それらの経験を踏まえ、まずは UX の概念や手法より、UI にフォーカスして設計手法や気づきを得ることの方が、ユーザーへの理解の手助けになったり、周辺の知識や概念の理解も深まるのではないかと思い立ちました。UI は取り上げると誰もが使いやすい・分かりやすいと気付くことのできる要素のひとつです。ただし、ユーザビリティをはじめ、ライティングや情報設計、認知心理学、インタラクションなどの知見も必要ですし、ユーザー体験を構成する一部の媒体でもあります。

<div class="image">
<img alt="ユーザー体験の図解" src="/images/20161102-1.png"/>
<div class="title">第1回講師 フジタジュンコさんのブログより引用</div>
</div>

UI といっても Sketch のおすすめプラグインやコンポーネントの作り方といった Tips ではありませんし、ペルソナ、ユーザーインタビューが大事、ということではなく、人と人をつなぐ「インタフェース」を起点とし周辺の知識を深めていくことを UI Lab ではやっていきたいと思います。

## 講師はなるべく現場の方

UI Lab では皆さんと課題を「対話」しながら一緒に考えられるよう、クライアントワークなど現場で活動されている方が講師であることも特徴です。関西は懇親会からが本番！とも言われるくらい懇親会の参加率が高いのですが、懇親会ではなくイベント中にもビアバッシュなどで講師と対話しやすい場を設けています。限られた時間で行うワークショップで、もう少し聞きたかったことや実際はどうなのかを知るための工夫のひとつです。

<div class="image">
<img alt="ディスカッションとグループごとのレビューの様子" src="/images/20161102-2.jpg"/>
<div class="title">ディスカッションでは各グループの考えや気づきを共有</div>
</div>

## UI Lab で会いましょう

UI Lab は、これから UI デザイナーとしても活躍の場を広めたい、エンジニアやディレクターで UI や設計の知識を深めたい、UI をなんとかしたいサービスをお持ちの経営層など、いろんな方にぜひ参加していただきたいです。始まったばかりですが、UI を越えてユーザーのことを一緒に考えていける良いコミュニティになればと願っています。

次回 UI Lab vol.2 は 2016年11月26日(土) 13:30〜サイボウズ大阪オフィス セミナールーム 梅田阪急ビルオフィスタワー 35階にて、[イベントの申し込みはこちらから](http://uilab201611.peatix.com/)（11/6 までの早割チケットあり）

関西で活動するデザインのコミュニティ「UI Lab」を立ち上げたきっかけや背景について。

UI 設計や考え方を学ぶ UI Lab


## 低下するライティングスキル

私たち日本人は、文脈や背景の定義を必要とせず「相手を察すること」で意思疎通を図る「ハイコンテキスト」なコミュニケーション文化だと言われています。LINE や SNS でも短いテキストで会話が成立することは日常です。手書きからメールへ、そのメールは今やチャットに代わり、テキストの発信はどんどん増えています。一方で、語彙力やライティングスキルが低下していると感じることはないでしょうか。コピー & ペーストの氾濫、分かりにくい文章、何かを PR する長文が書けない──。こうした問題はデザインやエンジニアリングの職域に関係なく、成果の質まで下げているかもしれません。

## ライティングそのものが UI である

Basecamp や Campfire を展開している [37signals による『Getting Real』](https://gettingreal.37signals.com/)の中では ”[Copywriting is Interface Design](https://gettingreal.37signals.com/ch09_Copywriting_is_Interface_Design.php)” が提唱されています。優れたインタフェースは、ライティングされたものすべてであり、ピクセルやアイコンにこだわるように文字にこだわる。つまりインタフェースデザインはコピーライティングであると書かれています。スクリーン UI のボタンのラベル、テーブルの項目名を考えるときは、自分の頭の中にある言葉だけで考えるのではなく、使うユーザーと場面を想像してみることです。その一画面では、例えば商品を選んでいるユーザー、今や買おうかと思い悩んでいるユーザー、もっと商品のことを詳しく知りたい思うユーザーなどがいるはずです。アプリやサービスの世界に入ってくれたユーザーを歓迎し、サービス提供側は、そのユーザーのためにライティングされた UI で導く必要があります。

## ライティングを構成するワーディング

ライティングという書くスキルからもう少し UI にフォーカスすると、「ワーディング」というスキルがあります。ワーディングとは、言葉遣いや言い回しを決めることであり、ワーディングによって「世界観が作られる」と私は考えています。ワーディングの正攻法は多くあります。UI とライティングの関係性に初めて気付いたのであれば、ライティングに関する多くの良書も参考になります。以下では、最近の UI でありがちな、ワーディングの禁じ手を取り上げたいと思います。

## ワーディングにおけるタブー

### 他社のワーディングを参考に（模倣）する

「いま」起きていることを見つけよう。

これは Twitter 日本版のヒーローヘッダーです。web やアプリではこうした「〜しよう」という呼びかけ型のコピーが多く見られるようになりました。ニュースを読もう、書いてみよう、検索してみよう。Twitter のように広く知れたサービスでなければ、こうした呼びかけはとても奇妙です。他社には他社の世界観があります。ワーディングでは、流行や模倣でオリジナルの世界観を築くことはできません。どこどこ社のサービスはこういうワーディングだから同じようなテイストにする、という発想では決して良い言葉は生まれません。

### 括弧や装飾記号を多用する

マルチバイト文字を扱う私たち特有の問題かもしれません。装飾記号（■□◆┏など）で目立たせようとすることです。また括弧記号も日本語変換辞書には多く含まれています。特にメールでよく見かける墨括弧【 】で囲まれた文字。見やすいと思われたのか、文字や項目を酷く装飾し文字数を無駄にしています。記号には正しい用法があり、飾りのためにあるものではありません。時代遅れのメール文化から足を洗い、記号ではなく言葉選びに集中すべきでしょう。

### 同じ意味の語彙を多く使う

同じアプリで保存、完了、というような同じ意味のラベルやメッセージは混ざっていませんか。また日本語のラベルには名詞だけでなく、動詞のもの（例えば「保存する」など）も増えています。これはフラットデザインの小さな影響で、テキストリンクだけではボタンとして認識されないことで、ユーザーの操作イメージに近い言葉に進化しました。こうした過程で品詞の統一性が崩れていくことがあります。世界観を維持するのは、たくさんの語彙ではなく、統一されたワーディングです。多くの人が関わるチームでは、独自のワーディングに関するスタイルガイドなどを共有するとよいかもしれません。

## これからのワーディング

コンピューターが AI によって進化すれば、コミュニケーションは音声よりもテキストメッセージングが先駆けになるかもしれません。まるで誰かと話しているかのように、サービスを進行する UI はスクリーン上のボタンや画像だけではなく、対話型のメッセージ UI も含まれるでしょう。そうした流れで、サービス提供側がまず考えなければならないのは「自分たちのワーディング」です。担当者の頭の中にあるワーディングだけでなく、自社やそのブランドの統一されたライティングを築き上げることが求められます。私たち日本人は、短歌や俳句、落語や漫才といった「言葉」を大切にしている文化の国でもあります。グラフィックやスクリーンだけではなく、人間味が感じられるワーディングをこれからも一緒に考えていきたいと思います。

UI デザインが注目される昨今ですが、そこで使用されるラベルやテキスト表現も UI コンポーネントのひとつです。UI デザインに必要な、ライティング・ワーディングのスキルの重要性について。

ライティングは UI デザインである


この記事は[「#UX Tokyo Advent Calendar 2015」](http://www.adventar.org/calendars/1052)第22日目の記事です。

<iframe src="//www.slideshare.net/slideshow/embed_code/key/dV2yCp9MnRLCCx" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/ykazuki/20140326-uiux-digest" title="UIデザインとUXの超基礎「UI Design & UX for ENGINEER」" target="_blank">UIデザインとUXの超基礎「UI Design & UX for ENGINEER」</a> </strong> from <strong><a href="https://www.slideshare.net/ykazuki" target="_blank">Kazuki Yamashita</a></strong> </div>

2年前に公開したこのスライドは、とある勉強会のご依頼があり、UI と UX の違いや基礎を理解するためにと作成したものです。公開からだいぶ経っていますが、何かのきっかけでシェアされたのか、今でも多くの方に見ていただき、もう少しちゃんと練って作ればよかったと少し後悔もしています。

## UX と UI をどう見るか

このスライドのどこに支持を得たのか、何人か読んだ方に訪ねてみたところ、次の一枚で説明した UI と UX の違いが分かりやすいとのことでした。UX という言葉が日本で使われるようになる頃から「UI/UX 言うな（併記するな）」という方もいらっしゃいますし、このテーマもそれを受けてのスライドでした。ここ最近では、UX の概念がそもそも広いため、UX という言葉が使われるシーンや話し手によってその解釈は変わってくると言われています。

<div class="image">
<img alt="スライドより UX と UI の違い" src="/images/20151522-1.jpg"/>
</div>

かなり大雑把な説明ですが、このストーリーでは「目に見えて分からない」ことは UI とし「感情的な体験」を UX としています。このスライドでは UI と UX の違いの説明だけで終わっているのですが、最近ではこの続きをお話しています。

## UI の改善は UX 改善につながらない？

アプリや web の世界において UI が与える UX の影響は少なからずありますが「UI を改善すれば UX が改善される」とは決してならないということです。上の例で「買い方を分かりやすく」「いくらで販売しているか」という UI の部分を改良したところで、UX は改善されるのでしょうか。

<div class="image">
<img alt="スライドよりユーザーのコンテキスト" src="/images/20151522-2.jpg"/>
</div>

言うまでもなく、最悪な UX を招いたのは「水がぬるかった」という事実・コトです。その人が結局求めていたものは「冷えた水」でした。UI という側面での改善は、冷えていないことを表示すべきだったかもしれませんし、常に庫内のものが急速に冷えるしくみを取り入れるべきだったかもしれません。このように考える視点を「その人が結局欲しかった事実・コト」にフォーカスすると、改善のアプローチが大きく変わります。

## コンテキストとは

サービスの利用体験を改善する UX デザインには、コンテキストがすべてだと言っても過言ではないと思っています。UX におけるコンテキストとは「そのときの状況・経緯」です。上の例でのユーザーのコンテキストは「暑い日、のどが渇いた」という部分です。UX デザインの起源である「デザイン思考」のプロセスでも、ユーザーの状況や経緯を把握する「ユーザー理解」のために時間を多く使っていることが分かります。

<div class="image">
<img alt="デザイン思考のプロセス" src="/images/20151522-3.png"/>
<div class="title">デザイン思考のプロセスは「ユーザー理解」が起点</div>
</div>

コンテキストを考えるということは、日常のコミュニケーションでも重要な「相手への共感」につながる身近なものです。ランチでカレーを食べた人へ、ディナーにカレーを振る舞うことは通常しないはずです。コンテキストを考えることは難しいことではありません。

## サービスの本質は共感から

自動販売機の例では、水を買いに来たユーザーと冷えた水までの間に様々なサービスがあります。自動販売機を設置する事業者、自動販売機そのもののマシンメーカー、商品を提供する飲料メーカー。身近にある自動販売機にも、これだけの事業者が介在しています。接点は多いほど「その人が結局欲しかった事実・コト」を考えることが難しくなります。販売機の設計者は、正しく商品が管理・販売される内部構造や、マシンをスリムにするための設計に熱心だったのかもしれません。飲料メーカーは、売れるための味やパッケージデザインを追及しているでしょう。自動販売機では人生を揺るがすような利用体験は生まれにくいかもしれませんが、私たちが提供するサービスや商品によって、人々の利用体験を向上させるということは今の時代に合った考え方だと思います。一般的に、提供側は提供する目の前のものを良くしようとします。間違ったことではありませんが、UX という視点で見るときにはユーザーがゴールに向かうまでの流れをすべて把握し、サービスの本質を考えることが重要です。そのための一つの方法が、コンテキストを考える、つまりユーザーに共感することです。

UX に関する関心度の高さは年々増しています。一方で、UX デザインといえばペルソナだったり、ジャーニーマップ、A/Bテスト という「手法」がメインに取り上げられることも多くなりました。すぐに「手法」に取りかかる前に、ユーザーの理解や、共感することから始めてみてはいかがでしょうか。

コンテキストと共感から始める UX デザイン


この記事は[「#UI Design Advent Calendar 2015」](http://www.adventar.org/calendars/987)第18日目の記事です。

スマフォアプリの普及により、UI デザインの需要は年々増しています。最近になってアプリの UI デザイナーとしてお仕事を始められた方も多いかと思います。UI デザインは、原則や関連知識の理解を深めることも重要ですが、ケーススタディとしてみることでスキルの習得も早くなります。

今回は、これまでユーザビリティの観点で監修したアプリ UI の中から、ユーザビリティテストのスコアリングが低くなる傾向のデザインパターンをご紹介します。それらは少し見直すだけでスコアが改善されるというのもまた特徴です。やってしまいがちな失敗 UI ケースの入門として、ご参考になればと思います。

## スコアリングの指標

アプリ UI のユーザビリティ測定には、アクセシビリティや他の定義を考慮することもありますが、今回のスコアリングは、次の指標を用いています。

- ユーザーがやりたいことを達成できるか（有効性）
- それが最短時間で達成できるか（効率性）
- さらに不快に感じさせないか（満足度）

それでは3つのケースをみていきます。

## 1. メニュー・機能が多くなる

ユーザー提供する機能は「メニュー」に陳列されます。iOS アプリでは「異なるサブタスク間、ビュー間、またはノード間を切り替える (Human Interface Guideline) 」として「タブバー」が用意されています。Android では、いわゆるハンバーガーアイコンによって出現する「ナビゲーションドロワー」がパターンとして用意され、メニューを必要とする最近のアプリではこちらのパターンが多く見られるようになりました。

<div class="image">
<img alt="タブバーとナビゲーションドロワーのイメージ" src="/images/20151218-1.png"/>
<div class="title">iOS タブバー（左）と、Android のナビゲーションドロワー（右）</div>
</div>

iOS の「タブバー」を採用する場合、そのタブ数はガイドラインにより必然的に最大5つまでになるため、アプリではどの機能にフォーカスすべきかを考えることができました。一方で「ナビゲーションドロワー」を採用する場合は、サービス提供側の提供したいものがすべて多く並べられることがあります。

「メニューの多さによる弊害」は過去にも雑記しましたが、UI 設計では「ユーザーの意思決定にかかる時間は、選択する情報量に比例する」というヒックの法則でそれが知られています。意思決定に時間がかかる、つまり効率性が悪くなることは明白です。

<div class="image">
<img alt="ナビゲーションドロワーに並べられた多くのメニュー" src="/images/20151218-2.png" height="414px"/>
<div class="title">ナビゲーションドロワーに並べられた多くのメニューには選択の時間を要する</div>
</div>

メニュー・機能数が多くなる要因は、サービス提供側が安易に必要だろうと考えてしまう錯誤です。ユーザーに本当に必要な機能は、利用シーンのシミュレーションや情報設計をしながら、ユーザーが覚えられる数にまでフォーカスすることで見直します。

## 2. アプリ内にテキストが多い

サービス提供側は、できるだけトラブルのないよう配慮するあまり、テキストによってユーザーを誘導し注意喚起する傾向にあります。結果、アプリ内のスクリーンには多くのテキストが溢れることになりますが、ユーザビリティテストにおいて「書かれてあったことを理解した」というテスターはとても少ないのが実状です。

海外に行くと日本人の識字率の高さを改めて感じます。ひらがな、カタカナ、漢字、アルファベットや絵文字・記号も含めると、多くのキャラクターでテキストを使用するのは日本人の表現特徴であり「書けば分かってもらえる」と考えてしまいがちです。

<div class="image">
<img alt="自動券売機に書かれたたくさんの注意書き" src="/images/20151218-3.jpg"/>
<div class="title">例えば日本の自動券売機の周囲にはたくさんの注意が書かれている</div>
</div>

一方で、表現する側ではなく、利用する側にとってテキストは情報です。アプリでは300〜500ミリ秒という短い時間でユーザーが判断と操作を続けますが、裏を返せばアプリの利用と達成までに、時間を使いたくない潜在的なニーズがあります。結果的にテキストは読まれることなく、サービス提供側の意図した誘導に失敗し、注意喚起できないまま利用体験を悪くしてしまうことになります。

<div class="image">
<img alt="テキストばかりの画面とその改善例" src="/images/20151218-4.png"/>
<div class="title">テキストが溢れる画面（左）、それを改善した一例（右）</div>
</div>

情報を読むための web とは違い、アプリはやりたいことを達成するためのツールです。達成までに添え書きが必要になってしまっている動線やコンテンツは、ユーザーへの優しさではなく、効果のために正確さを欠いているといえます。「書かれていなくてもそうなるだろう期待結果」を考え、ユーザーを自然に誘導できるよう根本から見直します。

## 3. 統一性を欠いている

アプリ UI の監修で、最も見直しが多いのがこのケースでした。デザインの原則のひとつに「反復」がありますが、これは位置やデザイン要素を反復利用することで、そのアプリの世界観をつくり、ユーザビリティにおいては利用の学習性を高める助けになります。統一性を欠くことの一番の問題点は、デザイナーやメンバーが意識せずに発生してしまうことにあります。

デザイン要素の不統一は、デザインガイドラインを制定せずにデザインを進めるケースでよく発生しています。OS が用意しているガイドラインとは別に、独自でデザインを必要とする場合は、デザインガイドラインをまず設計する必要があります。それがなければ流動的なプロジェクトでは、デザイナーによって作りが異なったり、画面や機能によって差異が起こりやすくなります。

<div class="image">
<img alt="統一性の無い UI コンポーネントやワーディング" src="/images/20151218-5.png"/>
<div class="title">同じアプリ内でメッセージのコンポーネントやワーディングに統一がないケース</div>
</div>

もう一つの発生要因としては、デザインやプロジェクトの進行中に、意見を聞き入れすぎて追加する過程で発生することが多いです。最近のアプリ開発では、様々なプロジェクト手法が取り入れられ、アプリに対してより柔軟な開発ができるようになってきました。一方で、開発途中で発生する「追加や改善要求」は、設計当初の設計思想を踏まえず手を入れてしまうことがあります。それにより、デザイン要素や世界観の破綻が起きてしまうケースです。

ガイドラインにより見た目や要素の統一を図るのはもちろんのこと、そのアプリがつくる利用体験上の振る舞いは、関わるプロジェクトメンバー全員が共有しているべきです。

## 失敗なのは UI ではなくプロセス

失敗のケーススタディとして UI を中心にみてきましたが、このケースにあてはまるものすべてが失敗ということではありません。アプリによっては多くの機能が必要なものもありますし、専門的なものや、より注意が必要な場面にはテキストによる注意書きが必要なケースもあるでしょう。今回お伝えしたかったのは、事例に添えて「こういったケースになってしまった要因」を書きました。設計した UI がユーザーのことを考えたものになっているか、プロジェクト全員がそれを共有できているか。もしそれがない状態で今回のようになってしまっている UI であれば、それはプロセス上の失敗といえます。

また3つのケースに共通しているのは、ビジュアルデザインや実装に着手する以前の段階で気付くものばかりです。UI デザイナーがどのタイミングで関わるかはプロジェクトに依るところにありますが、デザインという領域にとらわれず、どういうものを作るか、初期段階からユーザーの利用シーンを考えたり、情報設計に関わっていくことが重要なのは言うまでもありません。今ではプロトタイピングのツールも充実し、形にするまでの時間はずいぶん短くなった分、ユーザーと向き合い考える時間が増えました。ユーザーとサービスをつなぐ「インタフェース」として、UI デザイナーはとても意義のある仕事だと思います。

スマフォアプリで見る UI の気付き


[WCAN mini 2015 Vol.1 「UXデザインプロセスを活用したコンテンツの評価方法」（講師: 長谷川 恭久さん）](http://wcan.jp/news/report-mini2015_1.html)

このセミナーでは web サイトにおけるコンテンツの実状と把握、その評価やより良いコンテンツを提案するための UX デザインの手法として、レクチャーとワークショップを交えて学びます。

良いコンテンツを設計し提供するためには、ユーザーを理解すること、そして既存のコンテンツを評価すること。これらは制作プロセスでは当たり前なことでも「できていない現実」に改めて気付かされます。いくつか自分なりの解釈も含めて、特に印象的だった内容をハイライトとしてレポートします。

## 良いコンテンツとは？

「良い」は誰が決めるのでしょうか。利用者、ユーザーです。コンテンツ提供者は、ユーザーになり代わって良いコンテンツを考えなければなりません。エクササイズとして、とある web サイトをチェックしましたが、大手ですら利用者が求めているコンテンツを適切に提供できていないケースがありました。コンテンツは十分な量があるのに、重複したり表記が分かりにくく、どこに行っても辿り着くことができなかったり。ユーザーが求めているものと、提供者が提供したいものは本当に一致しているのかを疑い、その事実をまず認知することから始まります。

## 「良い」を決めるためにすべきこと

ユーザーは膨大な情報の中、わずかな時間で良いコンテンツを得ることを望んでいます。ユーザーには抱えている課題があり、web サイトを訪れます。それが何かを見極め、適切なタイミングでコンテンツを理解してもらい、課題を達成させることが web サイトの存在意義です。コンテンツを設計する時、次のようなシチュエーションになっていないでしょうか。

- 好みやトレンド「最近は青より赤を使うサービスが増えているので」
- 偉い人の意向「オーナーはフラットデザインが良いと言っているので」
- デザイナーの個人プレー「デザイン経験者である彼女に任せているので」

これではいつまでも「良い」コンテンツから遠いままです。

## UX デザイン手法でコンテンツを考える

### ペルソナ

私たちがユーザーに成り代わるために、その人物像を具現化し、設定するのが「ペルソナ」です。これも恰好のターゲットに仕立て、想像だけで都合良く設定していないでしょうか。そのために Google Analytics などで利用者のデータを整理し、なぜこのペルソナを設定したのか「理由」を説明できることが重要です。データが手元になければ、まずそれを測定するべきです。

<div class="image">
<img alt="ペルソナ" src="/images/20150203-1.png"/>
<div class="title">ペルソナの例</div>
</div>

### ジャーニーマップ

Web マーケティングに携わる方なら一度は聞いたことがあるかと思います。ジャーニーマップには次の要素が含まれます。

- サービスの利用前/利用中/後の「時系列」で書かれている
- ○○した、というペルソナの行動に基づいた記述がある
- サービスに接触した記述がある
- 行動と接触がそのペルソナにどう影響したか、またその時の感情を評価する（※サービスはモノの場合もあります）

ジャーニーマップは検索するとたくさんのパターンが見つかります。[Google による検索結果](https://www.google.co.jp/search?q=journeymap&biw=1685&bih=955&source=lnms&tbm=isch&sa=X&ei=0XHQVN3SFePPmwX6n4GAAw&ved=0CAgQ_AUoAw)をご覧のとおり、壮大なマップほど魅力的に見えますが、凝って作るほど「仕上げた」達成感があるため、そこで思考停止してしまう場合があります。あくまでもユーザーを理解するツールであることを忘れてはなりません。

<div class="image">
<img alt="ジャーニーマップ" src="/images/20150203-2.png"/>
<div class="title">ジャーニーマップの例</div>
</div>

## 改善のためのコンテンツ評価

ペルソナとジャーニーマップによる「ユーザーの理解」が把握・共有できれば、次にやることは現存のコンテンツの棚卸しです。サイトクローラーのようなツールを使用することで、サイトのページ一覧をレポーティングできるものがあります。レポートはスプレッドシートにまとめ、Google Analytics によるページビューや滞在時間などのデータを付加することで定量的な評価ができます。一方でジャーニーマップをもとに、コンテンツの理解のしやすさ、見つけられやすさといった定性的な要素でも評価し、改善策を考えます。ここでは定量的・定性的の両方の評価がポイントとなります。さらに web サイトの運営をどうするかで実現性を考慮した改善策にしていきます。

<div class="image">
<img alt="改善のフレームワーク" src="/images/20150203-3.png"/>
<div class="title">ジャーニーマップと優先度で分類された改善案のフレームワーク</div>
</div>

## 「理解」と「改善」のための UX デザイン

様々な web サイトを見ても、コンテンツはそこに確かに存在しています。制作して時間が経過していれば、それは多すぎるくらいかもしれません。現在の制作環境は、Google Analytics やツールも充実し、競合の多くの情報がインターネット上にあり、周囲との比較もしやすい状況です。だからこそ、まずすべきことは利用者・ユーザーを理解すること、そして量と質による適切な評価で地道にコンテンツを考えることです。UX デザインの手法はそれに役立ちます。セミナー終盤での長谷川さんの言葉が印象的です。

> 「今までは制作に多くの時間を費やしてきました。でも今は技術やツールの進化により制作時間を短縮できるようになりつつあります。つまり、利用者や配信者の理解と制作後の改善に多くの時間を割り当てられるようになったということです」

そのプロセスこそが UX デザインなのではないかと思います。

## ワークショップのススメ

このような UX デザインの手法を取り入れたワークショップは、手と頭を両方使う絶好の機会です。会議や PC の前に座ってデザインしているだけでは、ユーザー像や良いコンテンツもなかなか見えてきませんし、ネットに散在する「手法」を見よう見真似で試すだけでは、フレームワークに沿って正しく考えられているかどうか不安です。実際、UX デザインの手法やツールはクライアントに見合うよう、アレンジが必要なケースが多いです。柔軟な思考を身につけるためにも、ワークショップに参加し慣れてみるのが一番だと思っています。デザイナーやディレクターに限らず、できればクライアントと一緒になって、ワークショップに参加されてもよいかと思います。

長谷川 恭久さんのワークショップは、レクチャーの分かりやすさも好評で、手法の形にこだわらず、参加者のレベルに合わせた成果物のアドバイスもして下さるので、初めての方にもおすすめです。機会があればぜひ参加してみてください。

WCAN mini 2015「UX デザインプロセスを活用したコンテンツの評価方法」と題されたイベントの参加レポート。講師は長谷川 恭久さん。ペルソナ、ジャーニーマップの UX デザインの基本的な手法からコンテンツ評価・改善に至るまでの内容です。

UX デザインで考えるコンテンツ設計


[リクリセミナー第11回「ユーザーのコンテクストから考える ウェブサイトの情報設計」](http://recreators.doorkeeper.jp/events/2829)

イベント講師は大手通信会社にて情報設計を業務としてされている、藤田 淳子さん。1時間の講義と5時間弱の実践ワークショップという大変充実した内容でした。

## 情報設計 IA について

講義対象は web サイトの設計ということで「IA（インフォメーションアーキテクチャ）」のもと、情報設計の概念や、その手法を交えた内容がメインでした。web 系のセミナーはよく開催されますが IA に関する内容のセミナーは実に少ないです。私も同様、講師の藤田さんも「インフォメーションアーキテクト」という肩書きでいらっしゃいますが、IA を職としている方も少ないように思います。web やアプリだけでなく「伝えるメディア」には  IA は必須だと考えています。

## なぜ「IA」が必須なのか

この先も情報過多は避けられません。私が初めて IA に触れたのは1997年、インターネット黎明期でした。でもその頃から、IA 界隈では今の情報過多を予測しており、今後は IA の概念は必須になる論文が多くありました。情報過多のままでは、情報の誤認や迷いが生じ、IT にも不慣れのままになってしまいがち。IAによって「探しやすく」「接しやすく」し、情報が示す目的にユーザーを導くことが必要です。ただし、これはあくまでも情報を「構造化」しただけに留まります。

## モノからコトへ

家電メーカーに勤めていた私は実感していますが、昔は出せば売れる「モノ」の時代でした。ニーズに合ったモノがそもそも無かったからです。でも今はモノで溢れ返っています。そうなれば人はモノでは満足できなくなり、興味や関心は「モノ」から得られる体験「コト」に向くようになります。この体験が充実しているかどうかで、人はそのモノを取り巻く時間に満足するかしないかが決まる、今はそんな時代になりました。UX（ユーザーエクスペリエンス）と言われるようになったのもこういう背景があるのでしょう。

## Web サイトは通過点

デバイスの多様化により、人が情報を得られる手段が増え続けています。PC だけだったのが、携帯電話、スマートフォン、タブレット、Google GLASS のようなデバイスまでもが登場する。そうなれば web サイトはこれらの通過点にすぎず、デバイスに合わせて情報を構造化するだけでは人を容易に「体験」へ導けなくなってしまいます。では何を考えて設計していかなければならないのか？ということです。

## コンテクストとは

日本語では文脈と訳されますが、この言葉と意味はとても難しいです。講義の中では「ユーザーの属性・状態・状況で、どのようにしてユーザーが情報に接するか」ということでした。今回の講義の最重要テーマ「コンテクスト」です。私がコンテクストを説明するときはこういう例え話をしています。

人が何か飲みたいと思ってドリンクを買う時、真夏にスポーツで楽しんだ後であれば乾いた喉を潤し水分を補給する、真冬であれば体を温めるためにホットドリンクを飲む。同じ「飲む」という体験であっても、その場に置かれた人の状況、時期や時間が違えば何を飲むか、そして飲んだときの体験や反応も変わるということです。

これはごく当然のことなのですが、ドリンクを買う行為を web サイトを閲覧すると置き換えるとどうでしょうか。ユーザーがアクセスする時間や時期に変わらず、web サイトは変わらずずっとそこにあります。特定の情報を掲載している web サイトであれば、この情報を欲するユーザーのコンテクストまでを考えて、コンテンツを練り、情報を設計する必要があります。

## コンテクストを考える上で重要な「時間軸・そのときの感情」

講義では、ホスティングサービスの web サイトコンテンツの設計が例にありました。コンテクストを考える時、中心になるのは「時間軸」です。まずホスティングサービスについて関心のあるユーザーの時間軸を定義します。そしてホスティングを必要とする「課題」が起点に始まり、サービスの他社比較をし契約、サービス開始後の運用、というのが時間軸です。

次に考えるのはそのときの感情はどうか？ユーザーはどういう状態にいるのか？という点です。色々な他社のサービスとを並べて比較をしたいのに、ホスティングサービスの概要が何ページにも渡っていれば、そのサービスを諦めてしまうかもしれません。ユーザーがゴールまで至らないということは、この時間軸と感情に沿っていないコンテンツがある、もしくはコンテンツが無く、そこで落ちている可能性が高いといえます。

## 実際のワークフロー

最後にこれらを踏まえた web サイトのコンテンツを考えるワークフローです。

1. 課題は何なのか
2. ターゲットは誰なのか
3. それに必要なコンテンツは何か
4. それらをカテゴライズする

ここまでが構造化です。このひとつひとつに何のために？誰がどういう感情か？そして次に何をするのか？を考えることが重要です。そして、いわゆる画面の設計は次から登場します。

5. ワイヤー・画面設計
6. 評価
7. ビジュアルデザイン

講義中でも言われてましたが、企画中に「ちょっとワイヤー起こしてくれない？」といきなりオーダーされても「できません」というのが自然な答えになるでしょう。

## まとめ

この後はグループごとにワークショップとなりました。ごく一部のステップでしたが、web サイトの企画・初回ディレクション、こういうフェーズについては「IA」はやはり基礎工事であり、画面の前にしっかり設計すべきものがまだまだ多くあることを再認識できます。

社内サイトの構築が例にありましたが、会社では色々な部門があり、それぞれの立場によって意見もあると思います。クライアントワークでも色々な要望が上がると思います。でもそれだけを web ページに詰め込んだり、考えずにワイヤーフレームを起こすのは、もうこれからの web サイト制作としてはほぼ意味を持たない、ユーザーに価値をもたらさないものを作ることにもなりかねません。

1997年、学生時代に「IA」をかじったものの、しばらく見なく聞かなくなった分野だなと感じていましたが、UX という概念をはじめ、IA が進化した姿になり、本当に必要な時代がようやくやってきたのだと思えるようになった、そんなセミナーでした。

リクリセミナー第11回「ユーザーのコンテクストから考えるウェブサイトの情報設計」の参加レポートです。講師は藤田 淳子さん。情報アーキテクチャとコンテクストの視点からウェブサイトの設計を考えます。

すべての記事