
## いつまで 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 のセッションでお話しした内容をもとに、今思うことを含めて記事にしました。「なくす」というデザインの視点の提案です。

なくすデザイン

デザイナー 山下一樹（ヤマシタカズキ）がリスナーの皆さんからお寄せ頂いたテーマをもとにお話します。ハウツーや手先のノウハウばかりではない、デザインのまわりにあるお話。今回のテーマは「情報設計の実践方法」。IA が実際に情報を組み立てていく過程が知りたいというメッセージにお応えします。

情報設計の実践方法

情報設計 どう学ぶ？


この記事は[「#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 デザイン


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

情報設計

なくすデザイン

情報設計の実践方法

情報設計 どう学ぶ？

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

ユーザーのコンテクストから考えるウェブサイトの情報設計

情報設計どう学ぶ？