Margaret Gould Stewart: How giant websites design for you (and a billion others, too)

マーガレット・グールド・スチュワート: あなたの（そして何十億人の）ための巨大なウェブデザインの方法

翻訳: Masako Kigami 校正: Mari Arimitsu

What do you think of when I say the word "design"?

「デザイン」という言葉から 何を思い浮かべますか？

You probably think of things like this,

こういうモノですか？

finely crafted objects that you can hold in your hand,

手に取れる お洒落な工芸品だったり

or maybe logos and posters and maps

ロゴやポスター 地図など

that visually explain things,

視覚的に訴える

classic icons of timeless design.

流行り廃りのないデザインではないでしょうか

But I'm not here to talk about that kind of design.

でも今日 私がお話ししたいのは

I want to talk about the kind

そのようなデザインではなく

that you probably use every day

おそらく毎日 使っているのに

and may not give much thought to,

あまり考えたことがないモノ

designs that change all the time

デザインがよく変わるのに

and that live inside your pocket.

持ち歩いている物についてです

I'm talking about the design

私がお話しするのは

of digital experiences

デジタル体験のデザイン—

and specifically the design of systems

特に システムデザインについてです

that are so big that their scale

それらはとても大きいので

can be hard to comprehend.

規模を把握しづらいのです

Consider the fact that Google processes

例えば Googleは毎日

over one billion search queries every day,

10億件以上の検索を処理しており

that every minute, over 100 hours

毎分100時間以上の映像が

of footage are uploaded to YouTube.

YouTubeにアップロードされています

That's more in a single day

これはアメリカの大手放送会社３社の

than all three major U.S. networks broadcast

過去５年間の放送分を超えた映像が

in the last five years combined.

１日でアップロードされている計算です

And Facebook transmitting the photos,

Facebookでは

messages and stories

12億3千万人以上の

of over 1.23 billion people.

写真やメッセージやストーリーが 発信されています

That's almost half of the Internet population,

これはネット人口の約半数で

and a sixth of humanity.

世界の人口の６分の１にあたります

These are some of the products

私のキャリアを通じて

that I've helped design over the course of my career,

デザインに携わった製品もありますが

and their scale is so massive

規模がとても大きいため

that they've produced unprecedented

これまでに無い デザイン上の

design challenges.

課題が生じています

But what is really hard

しかし 規模が大きなデザインの

about designing at scale is this:

本当に難しい点とは何でしょうか

It's hard in part because

難しい部分は

it requires a combination of two things,

２つの組み合わせで

audacity and humility —

「大胆さ」と「謙虚さ」です

audacity to believe that the thing that you're making

大胆さとは 全世界が欲して 必要とする何かを

is something that the entire world wants and needs,

作っていると信じることです

and humility to understand that as a designer,

そして 謙虚さとは デザイナーとして

it's not about you or your portfolio,

自分や自分の作品集のためではなく

it's about the people that you're designing for,

誰かのためにデザインすること

and how your work just might help them

また デザインを通じて 人々の暮らしを

live better lives.

いかに良くするかということです

Now, unfortunately, there's no school

残念なことに 「人類のためのデザイン入門」を

that offers the course Designing for Humanity 101.

教えてくれる学校はありません

I and the other designers

これらの製品に関与している

who work on these kinds of products

私や他のデザイナーは

have had to invent it as we go along,

模索しながら作品を生み出し

and we are teaching ourselves

切磋琢磨することで

the emerging best practices

規模の大きなデザインの ベストプラクティスを

of designing at scale,

見出そうとしています

and today I'd like share some of the things

今日は私達が数年かけて

that we've learned over the years.

学んだことをお話ししたいと思います

Now, the first thing that you need to know

規模の大きなデザインで

about designing at scale

まず知っておくべきことは

is that the little things really matter.

細部が本当に重要だということです

Here's a really good example of how

これは とても小さなデザインの要素の

a very tiny design element can make a big impact.

影響が いかに大きいかを 示した良い例です

The team at Facebook that manages

Facebookで 「いいね！」ボタンを

the Facebook "Like" button

管理しているチームは

decided that it needed to be redesigned.

デザインの変更を決めました

The button had kind of gotten out of sync

ボタンは 私達のブランドの進化と共に

with the evolution of our brand

まとまりがなくなったので

and it needed to be modernized.

最新のものにする必要があったのです

Now you might think, well, it's a tiny little button,

小さなボタンに過ぎない

it probably is a pretty straightforward,

かなり単純で簡単なデザインだと

easy design assignment, but it wasn't.

思われるでしょう それが違うんです

Turns out, there were all kinds of constraints

このボタンには デザイン上の

for the design of this button.

様々な制約がありました

You had to work within specific height and width parameters.

縦横の決まった設定値内で 作成する必要があるのです

You had to be careful to make it work

多言語で機能するよう

in a bunch of different languages,

気を配る必要もありました

and be careful about using fancy gradients or borders

また お洒落なグラデーションや ボーダーも要注意です

because it has to degrade gracefully

昔ながらのウェブブラウザの

in old web browsers.

優雅さを損なうからです

The truth is, designing this tiny little button

ですから この小さなボタンのデザインには

was a huge pain in the butt.

大変苦労しました

Now, this is the new version of the button,

そして これが新しいバージョンです

and the designer who led this project estimates

このプロジェクトのデザイナーは

that he spent over 280 hours

280時間以上 つまり何か月もかけて

redesigning this button over the course of months.

このボタンのデザイン変更に 取り組みました

Now, why would we spend so much time

なぜ こんなに小さなものに

on something so small?

膨大な時間を費やすのでしょうか？

It's because when you're designing at scale,

規模が大きなデザインを作る場合

there's no such thing as a small detail.

些細なものなどないからです

This innocent little button

この他愛のない 小さなボタンが

is seen on average 22 billion times a day

１日に平均して220億回

and on over 7.5 million websites.

750万以上のウェブサイトで 閲覧されているのです

It's one of the single most viewed design elements ever created.

今までに最もよく見られた デザインの１つです

Now that's a lot of pressure for a little button

小さなボタンにしては とてつもない重圧で

and the designer behind it,

その裏にはデザイナーがいますが

but with these kinds of products,

この種のデザインは

you need to get even the tiny things right.

細部まできちんとする必要があるのです

Now, the next thing that you need to understand

次に理解すべきことは

is how to design with data.

データを伴うデザインの方法です

Now, when you're working on products like this,

このような製品を作る時は

you have incredible amounts of information

その製品がどのように使われるかという

about how people are using your product

膨大な情報を集めることが

that you can then use to influence

デザインを決める際に

your design decisions,

有用になります

but it's not just as simple as following the numbers.

でも数に従えばいい というものではありません

Let me give you an example

ご理解いただくために

so that you can understand what I mean.

例を挙げて説明します

Facebook has had a tool for a long time

Facebookは長い間

that allowed people to report photos

私達のコミュニティ基準に 違反する写真—

that may be in violation of our community standards,

スパムや嫌がらせを 報告できる

things like spam and abuse.

ツールを持っています

And there were a ton of photos reported,

報告を受けた写真は大量にありましたが

but as it turns out,

蓋を開けてみると

only a small percentage were actually

コミュニティの基準に違反したものは

in violation of those community standards.

実際は わずかしかありません

Most of them were just your typical party photo.

大半は典型的なパーティーの写真でした

Now, to give you a specific hypothetical example,

ある例を紹介しましょう

let's say my friend Laura hypothetically

私の友人のローラが —仮にですが—

uploads a picture of me

カラオケの飲み会での

from a drunken night of karaoke.

私の写真をアップロードするとします

This is purely hypothetical, I can assure you.

あくまで例です 念を押しておきます

(Laughter)

（笑）

Now, incidentally,

ちなみに

you know how some people are kind of worried

Facebook上で

that their boss or employee

上司や同僚に

is going to discover embarrassing photos of them

自分の恥ずかしい写真を見られることを

on Facebook?

心配する人もいます

Do you know how hard that is to avoid

Facebookで働いている人間には

when you actually work at Facebook?

避けて通れません

So anyway, there are lots of these photos

とにかく 誤って スパムや嫌がらせと

being erroneously reported as spam and abuse,

報告された写真は多いのです

and one of the engineers on the team had a hunch.

チームの技術者の一人には 先見の明がありました

He really thought there was something else going on

本当にこれから起こることを

and he was right,

正しく見通していたのです

because when he looked through a bunch of the cases,

彼が多くのケースを検証したところ

he found that most of them

自分が写っている写真を

were from people who were requesting

削除してほしいという

the takedown of a photo of themselves.

要望が大半だったのです

Now this was a scenario that the team

これはチームが考えたこともない

never even took into account before.

シナリオでした

So they added a new feature

そこで 友人にメッセージを送って

that allowed people to message their friend

写真の削除を依頼するという

to ask them to take the photo down.

新しい機能を追加しました

But it didn't work.

でも うまく行きませんでした

Only 20 percent of people

20％しか友人に

sent the message to their friend.

メッセージを送らなかったのです

So the team went back at it.

そのため チームは 行き詰ってしまいました

They consulted with experts in conflict resolution.

そこで 調停の専門家に相談し

They even studied the universal principles

婉曲表現の普遍原理についても

of polite language,

学びました

which I didn't even actually know existed

私は婉曲表現というものを

until this research happened.

この研究が行われるまで 知りませんでした

And they found something really interesting.

そして 面白いことを見つけたのです

They had to go beyond just helping people

友人に写真の削除依頼をする以上の 手助けをしたのです

ask their friend to take the photo down.

友人に写真の削除依頼をする以上の 手助けをしたのです

They had to help people express to their friend

その写真でどんな気持ちになったかを

how the photo made them feel.

友人に伝えることにしたのです

Here's how the experience works today.

その経験が今に役立っています

So I find this hypothetical photo of myself,

例えば私がこの写真を見つけたとします

and it's not spam, it's not abuse,

スパムでも嫌がらせでもありません

but I really wish it weren't on the site.

でも 私はFacebookに載せて欲しくありません

So I report it and I say,

そこでFacebookに報告するのは

"I'm in this photo and I don't like it,"

「この写真に自分が写っているのが好ましくない」

and then we dig deeper.

それから更に掘り下げます

Why don't you like this photo of yourself?

なぜこの写真が 好きではないのでしょうか？

And I select "It's embarrassing."

「恥ずかしいから」を選択します

And then I'm encouraged to message my friend,

すると 友達にメッセージを送るよう促されます

but here's the critical difference.

これが大きな違いを生むのです

I'm provided specific suggested language

奨励される特定の言葉を選んで この写真によって

that helps me communicate to Laura

私がどう感じたかを

how the photo makes me feel.

ローラに伝えることができます

Now the team found that this relatively small change

私のチームは このちょっとした変化の

had a huge impact.

影響力が甚大なことに気づきました

Before, only 20 percent of people

以前は20％の人しか

were sending the message,

メッセージを送らなかったのに

and now 60 percent were,

今では60％の人が送っています

and surveys showed that people

各種の調査によると

on both sides of the conversation

双方の会話で 結果的に良くなったと

felt better as a result.

感じていることが分かりました

That same survey showed

同じ調査で

that 90 percent of your friends

友人の90％が どうして怒らせたのか

want to know if they've done something to upset you.

知りたいと思っていることも分かりました

Now I don't know who the other 10 percent are,

残りの10％については分かりませんが

but maybe that's where our "Unfriend" feature

「友達解除」機能が

can come in handy.

役立つかもしれません

So as you can see,

ご覧の通り

these decisions are highly nuanced.

これらの決定は非常に微妙なのです

Of course we use a lot of data

もちろん 決定を通知するために

to inform our decisions,

沢山のデータを使いますが

but we also rely very heavily on iteration,

私達が多いに頼るのは 反復

research, testing, intuition, human empathy.

研究 テスト 直感 人情などです

It's both art and science.

アートであり 科学なのです

Now, sometimes the designers who work on these products

さて このような製品を作るデザイナーを

are called "data-driven,"

時に「データ駆動型」と呼びます

which is a term that totally drives us bonkers.

私達を完全に虜にする言葉です

The fact is, it would be irresponsible of us

私達は自分達のデザインを厳密に

not to rigorously test our designs

テストする責任があります

when so many people are counting on us

多くの人々から きちんとするよう

to get it right,

期待されているのですから

but data analytics

でもデータ分析は

will never be a substitute for design intuition.

デザインのインスピレーションにはなりません

Data can help you make a good design great,

データは良いデザインを 素晴らしいものにできますが

but it will never made a bad design good.

悪いデザインを良くすることは できないのです

The next thing that you need to understand as a principle

次に原則として 理解すべきは

is that when you introduce change,

変更を導入する時で

you need to do it extraordinarily carefully.

非常に注意を払う必要があります

Now I often have joked that

私がよく使う冗談ですが

I spend almost as much time

変更自体に掛ける時間と

designing the introduction of change

同じくらい 変更を導入する時の

as I do the change itself,

デザインに時間を費やします

and I'm sure that we can all relate to that

それは私達がよく使う物が変化し

when something that we use a lot changes

慣れる必要がある時と

and then we have to adjust.

すべて繋がっているのです

The fact is, people can become

実際 私達は悪いデザインを

very efficient at using bad design,

とても効率よく使うことができます

and so even if the change is good for them in the long run,

長期的には 変更が良いことであっても

it's still incredibly frustrating when it happens,

変更されると 物凄くイライラします

and this is particularly true

ユーザーが内容を作るものなら

with user-generated content platforms,

なおさらです

because people can rightfully claim a sense of ownership.

持ち主が自分のものだと 主張できるからです

It is, after all, their content.

事実 ユーザーが書いた内容なのですから

Now, years ago, when I was working at YouTube,

何年も前 YouTubeで働いていた時

we were looking for ways to

もっと多くの人に ビデオを評価してもらう

encourage more people to rate videos,

方法を模索していました

and it was interesting because when we looked into the data,

データを見て面白いと感じたことは

we found that almost everyone was exclusively using

大半の人が 最高の５つ星評価だけを使い

the highest five-star rating,

大半の人が 最高の５つ星評価だけを使い

a handful of people were using

一握りの人が

the lowest one-star,

最低の１つ星評価をしたのです

and virtually no one

そして 実際 誰一人として

was using two, three or four stars.

２つ星､３つ星､４つ星を 使いませんでした"

So we decided to simplify

そこで デザインを単純化し

into an up-down kind of voting binary model.

良いか悪いかの２つで 投票するようにしました

It's going to be much easier for people to engage with.

誰でも参加できるよう 単純になりましたが

But people were very attached

ユーザーは５つ星評価の方に

to the five-star rating system.

馴染みがありました

Video creators really loved their ratings.

ビデオ製作者は 評価されるのが大好きでした

Millions and millions of people

何百万人もの人が

were accustomed to the old design.

従来のデザインに馴染んでいました

So in order to help people

そのため ユーザーに

prepare themselves for change

変化に適応し もっと早く

and acclimate to the new design more quickly,

新しいデザインに慣れてもらうため

we actually published the data graph

データやグラフを

sharing with the community

コミュニティと共有しながら

the rationale for what we were going to do,

何をしようとしているのかを 説明しました

and it even engaged the larger industry

この会話を通じて 大きな業界と関わることができ

in a conversation, which resulted in

結果的に 私の一番お気に入りの

my favorite TechCrunch headline of all time:

TechCrunchの見出しになりました

"YouTube Comes to a 5-Star Realization:

「YouTubeが５つ星評価について 下した評価は—

Its Ratings Are Useless."

『役立たず』だった」

Now, it's impossible to completely avoid

さて 多くの人々が使う製品のデザインを

change aversion when you're making changes

変更する時 それに伴う反感から

to products that so many people use.

完全に逃れることはできません

Even though we tried to do all the right things,

どんなに正しいことをしたくても

we still received our customary flood

お決まりのビデオ抗議や

of video protests and angry emails

怒りのメール セキュリティチェックが必要な

and even a package that had to be scanned by security,

小包さえ 大量に送られて来ます

but we have to remember

私達が覚えておくべきは ユーザーが

people care intensely about this stuff,

この手の変更に 非常に繊細だということです

and it's because these products, this work,

なぜなら これらの製品が この作品が—

really, really matters to them.

彼らにとって 非常に大切だからです

Now, we know that we have to be careful

さて デザインの細部にわたって 気を配る必要があることを

about paying attention to the details,

ご理解いただけたと思います

we have to be cognizant about how we use data

デザインする過程で どのようにデータを使うのかを

in our design process,

認識しなければなりません

and we have to introduce change

そして 非常に注意深く

very, very carefully.

変更を導入しなければいけません

Now, these things are all really useful.

これらは すべて役に立つのです

They're good best practices for designing at scale.

規模の大きなデザインをするには うってつけの手法です

But they don't mean anything

ただし より基本的なものを

if you don't understand something

理解していなければ

much more fundamental.

何の意味もありません

You have to understand who you are designing for.

誰のためにデザインするのかを 理解しなければなりません

Now, when you set a goal to design

全人類のために

for the entire human race,

デザインする目標を立てたなら

and you start to engage in that goal in earnest,

真剣にその目標に向かって 努力し始めると

at some point you run into the walls

ある時点で 現実の壁に

of the bubble that you're living in.

突き当たります

Now, in San Francisco, we get a little miffed

例えば サンフランシスコで 携帯が圏外になった時

when we hit a dead cell zone

私達は少々苛立ってしまいます

because we can't use our phones to navigate

携帯のナビで 新しくできた

to the new hipster coffee shop.

お洒落なコーヒーショップに 行けないからです

But what if you had to drive four hours

でも 安定した電気がないので

to charge your phone

携帯を充電するために

because you had no reliable source of electricity?

４時間運転する必要があれば どうでしょうか？

What if you had no access to public libraries?

公共図書館へのアクセスがなかったら？

What if your country had no free press?

皆さんの国で報道の自由がなかったら？

What would these products start to mean to you?

これらの製品はどんな意味を 持ち始めるのでしょうか？

This is what Google, YouTube and Facebook

これが 世界の大半の人達が見る Google

look like to most of the world,

YouTube Facebookです

and it's what they'll look like

そして ネットを始める

to most of the next five billion people

次なる50億人の大半が

to come online.

それを見ることになるのです

Designing for low-end cell phones

低価格の携帯のデザインは

is not glamorous design work,

魅力的なデザインの仕事では ありませんが

but if you want to design for the whole world,

全世界のためにデザインしたいなら

you have to design for where people are,

自分がいる所ではなく 人々がいる所のために

and not where you are.

デザインをしなければなりません

So how do we keep this big, big picture in mind?

この巨大な構想を どうやって心に留めて置きますか？

We try to travel outside of our bubble to see, hear

私達がデザインするための人々を 見たり 聞いたり

and understand the people we're designing for.

理解するために 外に飛び出すことです

We use our products in non-English languages

私達の製品が これまでと同じように機能するよう

to make sure that they work just as well.

非英語圏にも対応させます

And we try to use one of these phones from time to time

彼らの現実を把握するため

to keep in touch with their reality.

時には携帯電話で連絡を取ります

So what does it mean to design at a global scale?

地球規模でデザインする意義は 何でしょうか？

It means difficult and sometimes exasperating work

製品を改善・発展させることは 難しく

to try to improve and evolve products.

時として腹立たしい仕事です

Finding the audacity and the humility to do right by them

そこに「大胆さ」と「謙虚さ」を 求めることは

can be pretty exhausting,

かなり骨が折れるでしょう

and the humility part,

謙虚さの部分では

it's a little tough on the design ego.

デザインする際のエゴが 少し厄介です

Because these products are always changing,

なぜなら これらの製品は 常に変化し

everything that I've designed in my career

私のキャリアにおいて デザインしたモノすべてが

is pretty much gone,

瞬く間に無くなり

and everything that I will design will fade away.

これからデザインするモノのすべてが いずれは廃れていくからです

But here's what remains:

しかし 残るものもあります

the never-ending thrill

自分でも理解できないほどに

of being a part of something that is so big,

大きな何かの 一部になれるという

you can hardly get your head around it,

終わりなき感動や

and the promise that it just might change the world.

世界を変えることができるという 望みです

Thank you.

ありがとうございました

(Applause)

(拍手)