もう"UI/UX"と言わないで！弊社のエンジニアに知ってもらいたいUIとUXの基礎知識

この記事は UX Tokyo Advent Calendar 2015 の18日目として投稿しています。

---

こんにちは、とあるベンチャーでエンジニアをしている yachibit です。
UXやHCDに興味を持ちはじめてからまだ日の浅い人間なので恐縮ですが、UX Tokyo Advent Calendar 2015 に投稿させていただきます。

さて、早速本題に入りましょう。
釣りっぽいタイトルですみません。本投稿で、"UI/UX"という表現が間違っているから用語を正しく使え！といって斧を投げたいわけではありません。
UIとUXという概念を整理して理解することで、今後のサービス開発をより良いものにしたいという思いからこういった記事を書いています。

UIとは？

UI(= User Interface)は読んで字のごとくで、機械やコンピュータ、システムとその利用者の間で情報をやりとりするための接点のことです。
MVCモデルで言うところのView層に当たるのだと理解しています。

UXとは？

一方のUX(= User Experience)は、少し複雑です。
"ユーザー体験(経験)"と直訳してもいまいちピンと来ないので、諸々な定義を覗いてみましょう。

ISO9241-210:2010

製品やシステムやサービスを利用、および/もしくは予想された使い方によってもたらされる人々の知覚と反応

と定義されています。 「予想された」とあるように、利用の最中だけでなく、利用前や利用後も含めた時間軸を伴った概念であるということがわかります。
また「人々の知覚と反応」から分かるように、UXは製品やサービスに対して、利用者個人が内面で抱く評価や感情のことを指していると考えられます。

UX白書

2010年にドイツで行われたUXセミナーの成果をまとめたものです。
その中で、「ユーザーエクスペリエンスの期間」として下記の図が紹介されています。

• UX WhitePaper
• UX白書(日本語訳)

システム操作による体験はもちろんですが、それはユーザー体験のほんの一部(一時的UX)に過ぎません。
例えば、転職サイトのUXを例にとって考えてみます。 ユーザーは職場での出来事やこれまでに使用したことのある様々な転職媒体やサービスでの経験をもとに、何かしらの期待を持ってそのサービスを使いはじめます。
ユーザーはサイトのおしゃれさやコンテンツの質、量の充実度や使いやすさなどを見ながら、プラスやマイナスの感情を抱きます。 その後も内発的または外発的な動機によりそのサイトに再訪問し再び使いはじめます。
応募や面接の際も、そのサービスのツールとしての使いやすさや面接前後のフォローなど様々なタイミングと接点でサービスに触れながら何かしらの評価なり感情を蓄積していきます。 それが他のサービスより優れていれば使ってもらえますが、劣っていれば使ってもらえなくなります。

Jordan(2000)による消費者の欲求階層

『人間中心設計の基礎』にも紹介されている、Jordan(2000)の消費者の欲求階層です。
システムには機能があることが大前提ですが、それが使いづらくてはどうしようもないのでユーザビリティを高めることが重要です。 ただし、使いこなせるだけでもまだ何かが足りません。それを超えるような嬉しさのようなものを付加していかなければならないのです。

「ユーザビリティ」を甘くないほうがいい

ユーザビリティという言葉が出てきたので、簡単に触れておきます。
まずISO9241-11でのユーザビリティの定義を見てみます。

ある製品が、特定の利用者によって、 特定の利用状況下で、 特定の目標を達成するために用いられる際の、有効さ、効率及び満足度の度合い。
・ 有効さ: ユーザーが、指定された目標を達成する上での正確さと完全さ
・ 効率: ユーザーが、目標を達成する際に正確さと完全さに費やした資源
・ 満足度: 不快のないこと、及び製品使用に対して肯定的な態度

開発の現場で、「使いやすいものにしたい」という言葉をよく聞きます。
この「使いやすい」というのは、ユーザビリティの定義でいうところの効率や満足度のことを指していると考えられます。 もちろんそれらを高めることは重要です。
しかし、その前に絶対に見落としてはならないのは有効さに欠陥があることです。
例えば、とある入力フォームを開発しているとします。仕様通りのデータ構造と入力フォームを用意し、このフォームは正常に動作します。
しかし、実際にユーザーに使ってもらうと、どんなコンテンツをどの程度の量入力してよいか迷い、途方に暮れ、最終的に編集ページを閉じてしまうなんてことがあります。
製品が有効に機能しなければ、我々が作っているものはゴミと同然なのです。

UXについて考えるということ

我々が日々開発している対象は、モノではなくコトであると認識しながら開発を進めていくことが、UXについて考えることの本質ではないかと思っています。
「モノからコトのサービス開発へ」といった言葉は、言われてみれば当たり前のことですし、使い古された言葉ですが、この認識を持つことは非常に重要だと思います。
ユーザーはUIやシステムを使うことが目的ではありません。つまり、「ユーザーへの価値 ＝ 機能」ではないのです。
開発に携わるメンバー各自が、UIや機能を作りさえすれば良いと矮小な視点で開発に臨んでいては、優れたサービスが出来るはずもありません。 コトをつくるための手段としてモノを作っている、そういった視点で開発に臨んでくことが、よりよいサービスを開発するための基本姿勢ではないかと思います。

家カンバン with Trello

id:ninjinkun さんの

家カンバン - ninjinkun's diary

という記事に影響を受けて、家カンバンを始めてみた。

個人的には、家でも外出先でもタスクを確認したいので、ホワイトボードではなく、Trello を使ってみた。Trello であれば、PC/スマホの両方で使用することができる。

一般的なToDoリストだと、タスクの分類ができないため、とりあえず積んである大量のタスクの中に仕掛中のタスクが埋もれてしまうという問題があった。
そこで、Pivotal Tracker 風に「Current / Backlog /Icebox」のような分類をすることで解決を試みた。
Iceboxがあるので、仕掛中のタスクが埋もれることを気にせずどんどんタスクを追加できる。

Trello だと、DescriptionやCommentにタスクの詳細やリンクを記述できたり、タスク内小タスクを作成できたり、締め切りを設定できたりしていろいろ便利。

日本語で 人間中心設計/HCD について雑に話せる Slack チームができたぞ！！！

HCD 界隈の方々がチャットで気軽に情報交換や議論できる場があるとよいのではと思ったので、Slack に hcd-jp というチームをつくりました。
どなたでも参加できるのでお気軽にどうぞ。

https://hcd-jp.herokuapp.com/

追記: 2015/10/14

雑に話せるの"雑"とは？

id:bash0C7 さんが、"雑"の概念をわかり易く記載してくださっていて素晴らしすぎるので、参照させていただきます。

雑に発言するとは、場の膠着をといて実のある行動に動くための第一歩です。 更に言い換えると、誰もが正解わかってないというのを前提に、とにかく発言を投げ合って本当に解くべき何かを見いだすための問題解決の方法とも言えます。(中略)
雑な認識からはじめましょう。雑に言い合いましょう。雑な発言を許容しましょう。

bash0c7.hatenablog.com

上記の記事をご紹介くださった @chachaki さんにはこの場を借りて感謝を申し上げます。

人間中心設計の基礎 (HCDライブラリー (第1巻))

Controller concerns のテストをRSpecで書く - Rails, Rspec Rails 3.*

Anonymous Controllerを使えばこんな感じで書けるっぽいのでメモ。

# app/controllers/concerns/foo.rb

module Foo
  extend ActiveSupport::Concern
  # logic
end

# spec/controllers/concerns/foo_spec.rb

require 'rails_helper'

Rspec.describe Foo do
  controller ApplicationController do
    include Foo
  end

  # test
end

refs

anonymous controller - Controller specs - RSpec Rails - RSpec - Relish

表参道.rb #5 で人間中心設計について発表しました

表参道.rb #5 は原点に帰って、Sansan株式会社でのLT大会でした。

私は『エンジニアが人間中心設計をやってみた』というタイトルでLTをしてきました。
*.rb らしくない内容の発表なので少し申し訳ない気持ちですが、多様性は善ということでお許しください。

speakerdeck.com

omotesandorb.connpass.com

人間中心設計の基礎 (HCDライブラリー (第1巻))

産業技術大学院大学で「人間中心デザイン」を学び始めました

産業技術大学院大学が開講している 履修証明プログラム「人間中心デザイン」 を履修することにした。

履修証明プログラム「人間中心デザイン」とは？

「人間中心設計（Human Centered Design）」の専門家を育成する文科省認定の社会人向けプログラムである。安藤昌也 氏を始め、人間中心設計やUXの第一線で活躍されている方々が講師を担当してくださる、大変貴重なプログラムである。

きっかけ

現在の職場にジョインしてから2年ほどの間、私はユーザーに使われないものを量産して時間を無駄にしてしまったと反省しており、その原因はいろいろ考えられるが、ひとつは、ユーザーの行動や心理を理解しようとしなかったこと、ユーザーはどんな課題を抱え、解決を望んでいるかを知ろうとしなかったことが大きいのではないかと考えている。
"Make something people want" -人が欲しいと思うものを作れ- というポール・グレアム 氏の言葉は有名だが、人が欲しいと思うものを作るには、人が欲しいと思うものを理解する必要がある。
それらを理解するための手法を学ぶべく、様々な書籍を読み漁る中で『リーン顧客開発』や『ユーザビリティエンジニアリング』のような素晴らしい書籍と出会い、強く感銘を受けた。そして気が付くと、それらの大本の学問である「人間中心設計」についてより深く体系的に学びたいと思うようになっていた。そんなタイミングで出会ったのが、前述のプログラムである。

目標的なもの

ユーザー調査・分析やユーザビリティ評価を実戦で回せるようになることが第一だが、それによってチームとしてのアウトプットの精度が上がり、開発効率が上がる（同じ開発工数でより高い成果が出せる）ことを目指していきたい。
また、せっかくお金と時間を投資して学ぶのだから、人間中心設計専門家 のような資格を取得できると、キャリアの可能性が広がっておもしろいのかもしれない。

人間中心設計の基礎 (HCDライブラリー (第1巻))

リーン顧客開発 ―「売れないリスク」を極小化する技術 (THE LEAN SERIES)

ユーザビリティエンジニアリング（第2版）　―ユーザエクスペリエンスのための調査、設計、評価手法―

正直教えたくない、本当に美味しい表参道のランチ 14選

私が表参道にオフィスを構える弊社に転職してから約1年半の間に食べ歩いたランチの中から厳選した14店を紹介したいと思います。 下記に挙げたお店は金額が少々のお高めのお店が多いですが、表参道で美味しいランチを食べようと思ったら1,500円以上はかかると覚悟していた方が幸せになれると思います。

1,500円以下

1. ナポリマニア

1,500円は覚悟しておけと言いながら、いきなり1,000円以下のお店が登場です。あまりのコスパの高さから言及せざるを得ませんでした。 800円でこのクオリティの石窯焼きピザが食べられるとは… 日本に生まれてよかった！ かなりの大きさなので、お腹を空かせた成人男性でも十分満足頂けると思います。

金額: 800 円程

食べログ: http://tabelog.com/tokyo/A1303/A130301/13125763/

2. 伊豆の旬 やんも 南青山店

表参道のランチといえばここを挙げないわけには行きません。 「新チューボーですよ！」の「ぶり大根」会で街の巨匠としても取り上げられていたお店です。 ランチの焼き魚は日替わりで5種類ほど用意されています。塩焼きや柚香焼きなど、魚の味を活かした調理法と絶妙の焼き加減で、魚の美味しさを最大限に楽しませてくれます。 私が大好きなのは、鯖の塩焼き。皮はパリっと香ばしく、身はふっくらとジューシーに火入れされています。鯖ってこんなに美味しい魚だったんですね。

金額: 1,100 円程

食べログ: http://tabelog.com/tokyo/A1306/A130602/13004684/

3. 玉笑

表参道駅から徒歩10分程離れた閑静な住宅街にある、隠れ家的な蕎麦屋さん。近代的なコンクリート造りの白い建物の階段を登ると、麻の暖簾と木の扉が落ち着いた雰囲気で出迎えてくれます。 粗挽きの蕎麦はざらりとした食感で、香りと甘みが口いっぱいに広がります。

金額: 1,050 円程

食べログ: http://tabelog.com/tokyo/A1306/A130601/13129390/

4. IL PACIOCCONE

表参道駅から徒歩約13分と立地は少し悪いですが、そのぶん圧倒的なコスパで本格的な味を楽しませてくれるトラットリア。 私が頼んだのはエビとトマトクリームソースのタリアテッレ。エビの風味が溶け込んだ濃厚なソースにモッチモチの自家製麺がしっかりと絡んでいました。デザートにはシフォンケーキも付いてくるので、お得感もあります。

金額: 1,000 円程

食べログ: http://tabelog.com/tokyo/A1306/A130602/13004717/

5. TRINITE

1,000円前後で上質な洋食が食べられるお店です。 ハヤシライスは濃厚でリッチな味わい。ほのかに振りかけられたブラックペッパーは爽やかなスパイシーさをプラスしてくれます。 メインの他にもレンズ豆のサラダやスープも付いてきました。

金額: 1,000 円程

食べログ: http://tabelog.com/tokyo/A1306/A130602/13122476/

6. RED PEPPER

表参道交差点のすぐ側にあるトラットリア。小じんまりとした店内は親しみやすい雰囲気でした。 アツアツに熱され、表面はグツグツを音を立てながら運ばれてきました。2枚のラザニアパスタの間にミートソースが挟まれており、クリーミーなソースは、濃厚すぎず優しい味わいでした。

金額: 1,500 円程

http://tabelog.com/tokyo/A1306/A130602/13007408/

7. Chinese Restaurant Essence

青山通りを外苑の方に10分ほど歩いたところにあるお店。化学調味料不使用の健康的な薬膳中華が楽しめます。 私は中華粥と汁なし担々麺のセットを注文しました。中華粥は貝柱など海鮮の出汁が効いており、優しい味わい。汁なし担々麺はそれほど辛くなく、山椒やナッツの香ばしさが効いており、香り高い味わいでした。

金額: 1,000 円程

食べログ: http://tabelog.com/tokyo/A1306/A130602/13039870/

8. Napule

弊社の入っているビルの隣にあるピザの名店。ランチ時には毎日行列が絶えないほど人気店です。 青いタイルの床や高く開放的な天井が、まるでイタリアに来たかのような気持ちにさせてくれます。 分厚くふっくらとした生地は、味も食べ応えも申し分なし。早めの時間（11時30分頃）に行けば並ばずに入れると思いますので、ぜひ一度お試しください。

金額: 1,400 円程

食べログ: http://tabelog.com/tokyo/A1306/A130602/13003493/

9. 鮨 竹匠

表参道でカウンターの鮨が食べられる！ ランチメニューは、竹: 1,000円、匠: 1,500円、特選: 2,500円 と3ランク用意されています。高級感のあるカウンター越しに、店主が一貫ずつ握ってくれます。表参道でこの値段で鮨が食べられるのは嬉しい限りです。

金額: 1,000 円程

食べログ: http://tabelog.com/tokyo/A1306/A130602/13146921/

2,000円以下

10. Two Rooms Grill

歪な形状をした表参道のランドマーク AOビルの5階にあるこちらのお店。ランチ時には高級そうなスーツを召したエグゼクティブっぽい方々で賑わっています。 コースは金額によって数種類用意されていました。 前菜は、ビーフフィレのたたき。レアな状態で火入れされたフィレに粗塩やガーリックがパラパラとかかっています。しっとりとジューシーかつ、上品な味わいでした。

本日のパスタは、ショートパスタにチキンを合わせ、その上に雪のように繊細にチーズが振りかけられた一皿。テーブルに運ばれた瞬間、目の前にチーズの香りが広がりました。シンプルな味付けのパスタにチーズの濃厚さがプラスされてとても良いバランスでした。

夜はバーとしても利用できるので、デートなどの際にはオススメです。

金額: 1,850 円程

食べログ: http://tabelog.com/tokyo/A1306/A130602/13077635/

11. AW kitchen figlia 青山店

花屋さんのように可愛らしい外装が特徴的なこちらのお店。手打ちパスタと契約農家から仕入れた野菜のバーニャカウダが有名だそうです。

蓮根といくらの冷製スパゲッティーニ。いくらのオレンジと菊の淡いイエローがなんとも色鮮やか。あっさりしたパスタの味付けに、いくらの塩味が程よくマッチしていて絶品でした。

マッシュルームとグアンチャーレのクリームソース ラディアットリ。モッチモチなショートパスタに、肉の旨味が溶け込んだ濃厚なクリームソースがしっかりと絡み、これまた絶品でした。

デザートは洋なしの赤ワインコンポート。芳醇なコンポートに、酸味の効いた洋なしのシャーベットがマッチします。

私が来店した際はクリスマスの時期だったためか、2,500円の特別コースしかありませんでしたが、普段は1,800円ほどのランチコースがあるそうです。

金額: 2,500 円程

食べログ: http://tabelog.com/tokyo/A1306/A130602/13023533/

4,000円以下

12. クラシカ表参道

ウェディングパーティーも行なわれるという店内は、クラシックで格式のある雰囲気でした。

鯛のカルパッチョ。手前の透明なジュレはトマトのジュレ。奥の黒く薄い煎餅状のものは、イカスミで出来ていました。

鶏の赤ワイン煮込み。ナイフを入れると、簡単に身がほぐれるほど柔らかく煮こまれていました。

りんごのコンポートやレモンシャーベットを層にしたデザート。味も食感も複雑で楽しいデザートでした。

金額: 2,800 円程

食べログ: http://tabelog.com/tokyo/A1306/A130602/13170836/

13. MOSAIQUE

曲線を活かしたモダンな雰囲気の店内。 1,200円のコースもありますが、メニューの内容から3,100円のコースがお得感を感じたのでそちらを注文しました。

ズワイガニ、グレープフルーツのジュレ、アボガドのペーストを合わせた前菜。意外な食材の組み合わせが絶妙にマッチしていました。

牛のほほ肉の赤ワイン煮込み。

洋なしのコンポート バニラアイス添え。

金額: 3,100 円程

食べログ: http://tabelog.com/tokyo/A1306/A130602/13120974/

14. Restaurant REIMS YANAGIDATE

最後に紹介するのは本格フレンチが楽しめるYANAGIDATE。 アミューズ、前菜2品、メイン、デザート、飲み物とランチで食べるには贅沢すぎる品数。 球体状のガラスの器や、ドライアイスの冷気が立ち上る器など、盛り付けにも技巧が凝らされており、見ていてとても楽しい気持ちにさせてくれます。

カニとアボカドのタルタル キャビア添え トマトとバジルのソース。

塩漬けにした豚肉のテリーヌ。

鮮魚のポワレ シャンパン風味のブールブランソース。トリュフも乗っています。

金額: 3,700 円

食べログ: http://tabelog.com/tokyo/A1306/A130602/13001305/

いかがでしたか？ ランチのまとめ記事などではなかなか取り上げられないような、お値段高めのお店も取り上げてみました。表参道に来た際は、ぜひいろいろなお店に足を運んでみてください。