
## 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 デザイナーのキャリア

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 デザインである


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

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

UI デザイナーのキャリア

UI デザイナーのスキル

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

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

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