ついけん

実名Q&AサイトQuoraデザイナーの講演「もしデザイナー歴2ヶ月半の若者がデザインの話をしたら」

kokumaijp ライター: kokumaijp
カテゴリー: ビジネス
投稿日:2011/7/9
タグ: Quora デザイン デザイナー シリコンバレー 上杉周作 もしデザ

keyboard_and_hand
米シリコンバレーではデザイナーがどのように開発にかかわっているのか? 実名制Q&Aサイトとして有名なQuora(クオラ)でデザイナーとして働いている上杉周作(うえすぎ・しゅうさく)さん @chibicode による公開講座が7月8日に慶應義塾大学湘南藤沢キャンパス(SFC)にてありました。

参加された@kmotoyoshiさんが講演内容の要旨のメモを書き起こされており、ご厚意により「ついけん」に転載させていただきました。

7/19追記あり

上杉周作さんのFacebookページはこちら。
ちびこーど。

今回の講演についての上杉さんのブログ記事はこちら。
chibicode - 慶應SFCでの講演のあとがき。

講演の動画がYouTubeに公開されています。まとめはこちら。
もしデザ

講演概要より引用
講師
上杉周作さん(@chibicode

講演タイトル
「もしデザイナー歴2ヶ月半の若者がデザインの話をしたら」

講演概要
フォトショもイラレもまともに使えない新米デザイナーが、アメリカの大学や仕事を通してデザインについて感じたことをお伝えします。講演を聞いたみなさんが「デザイン」とは何か、誰かに一行で説明できるように。技術的な話はしないのでITに興味のない方にも楽しんでもらえる内容にしたいと思います。その他米国Web業界の動向やキャリアの話もします。

略歴
1988年1月26日生まれ。小学6年まで横浜みなとみらいで暮らす。親の仕事の関係で中学からアメリカ東海岸に引越す。現地の中学と高校卒業。Carnegie Mellon大学のComputer Science学部入学。プログラミングを始める。大学二年目の夏にApple、三年目の夏にFacebookでインターン。学部卒業後、同じくCarnegie Mellon大でHuman-Computer Interaction修士卒業。シリコンバレーに引っ越してPalantir Technologiesでエンジニア。6ヶ月後転職してQuoraでデザイナー。 ←今ココ。


映画「SUPER 8」(スーパーエイト)の監督(J.J.エイブラムス)もQuoraを使っており、有名人が使っているイメージが強いが、実は有名人ばかりでもない。

例えば、911の時にWTCの中に居た人、ビルの43Fに居た男性が長文の回答をしてくれている。実名性なので、良い回答を書いて名を売ることがモチベーション。Googleは世界中の情報を集めることが目的だが、Quoraは世界中の知識を集めることが目的。

なぜシリコンバレーではデザイナーが居ないのか、という質問があった。ここ5年間くらいで開発スピードがものすごく早くなった。Ruby on RailsやiOSなどがでてきたため。これまでは毎月一回でよかったのが、今は毎日のように開発が進むため、デザイナーにいちいち頼んでいることができない。技術もわかるデザイナーの需要がものすごく高まっているが、そういう人材は希少。

大学での教育も追いついておらず、即戦力になる人が少ない。世界にでて行きたい大学生にとってはすごいチャンス。ファイナンスなどでは人材が多いが、デザイナーができる人はほとんどいない。新しくできた分野なので、今からはじめても間に合うし、差別化できる。Photoshopが使えなくても、絵心がなくても自分は飯を食えている。

今日のテーマ:
1 デザイン、デザイナーとは?
2 製品のデザイン
3 人材とデザイン


<デザイン、デザイナーとは?>

自分はデザイナー歴が2ヶ月半。シリコンバレーでのデザインとは何か? シリコンバレーではものすごく難しい問題を技術で解決する風土がある。Quoraが解いている問題は、どうやって人々の知識を集めるか。

学校のテストと違ってシリコンバレーの問題は満点をとらなくても良い。また、個人戦ではなく団体戦。他の人よりも早く問題を解くためには、資金を集めることが必要。また、学校と違う点のもう一つは、ある程度答えが書いてある。Yahoo!はカテゴリーアプローチだったが、Googleがでてきて、それは正解ではなかったことが分かった。

シリコンバレーがユニークな点。アイディアに公式はない。失敗しても誰も責めない。成功した人がシリコンバレーを助ける。成功したお金は、投資家になったり、アドバイザーになったりして、大体シリコンバレーに戻ってきている。大学生の合格者が受験生を応援するような風土。

エンジニア、ビジネスマン、デザイナーがいるが、デザイナーの役割は? エンジニアが作ったものをビジネスマンが売る前にちょっときれいにすることが役割ではない。エンジニアとビジネスマンが解けない問題を解く。

ファッションの例。日本で流行っていた電車男の話。当時おたくだった俺はそれを真に受けて、2ちゃんねるの有名人だった名無しさんにアドバイスをもらって、アメリカにFINEBOYS(ファインボーイズ)というファッション雑誌を送ってもらった。

自分に合う服を探すことが重要だが、そのためにはたくさんのお店を回るなどものすごい時間かける必要がある。しかし、そのおかげで、初対面のときに大体性格が分かる。会う人がその人のことを考える必要がなくなる。それがファッションだと思った。

デザイナーも同じ。かわいい、あるいはかっこいいものを作ることではなく、誰からも見えない決まりを作ることがデザイン。

「誰からも見えない決まりを作ること」とは?

Mac OS X 10.7につく新機能は250。10.6にくるまでに膨大な機能があったはずだが、ほとんどユーザーは意識することがない。それがデザイナーの役割。

Macは一番上のメニューバーが置いてあり、Windowsのようにウィンドウ上には置いていない。

ボタンが大きければ大きいほどクリックしやすいというシンプルな法則がある。ウィンドウにメニューのボタンを置くと小さくならざるを得ないが、Macの場合は画面の上部にある。画面の最上部を通り越すことがなく、仮想的なボタンの大きさがWindowsよりも大きいため、Macの方が押しやすい。

例えば、ファイルメニューの「ファイルを開く...」、「場所を開く...」などの「...」は、次に何かアクションがあるということを暗黙的に示唆している。(名探偵コナンのセリフにも多いのと同じに)

Macの検索ボックスは角が丸くなっている。サファリの検索窓やSpotlightの検索窓も同じ。こういう「見えない決まり」を作ることがデザイナーの仕事。ユーザーはまったく意識する必要がない。複雑なものを複雑に見せない。


<製品のデザイン>

github.comという、プログラマーのためのソーシャルネットワークがある。プログラマーをフォローすることに加え、プロジェクトをフォローすることができる。プロジェクトはオープンソースベース。ここで公開されているコードを流用して使うことができる。

473もフォローしており、膨大なオープンソースのプロジェクトをフォローしてしまっている。どう整理したら良いか。githubアプリの開発キットを使うと、色々な情報を取得してオリジナルのプログラムを作ることができる。

プロジェクト名、最終更新日、フォローしているプログラマーの情報、プログラム言語の種類も取得できる。今日のためにデモアプリを作ってみた。

ある人のがフォローしているプロジェクトの一覧。名前、説明、フォロワー数、更新日が表示される。ただ、このままだと見た目が悪い。そこで、デザイナーが登場する。実況しながら見た目を改善する。

まず、CSSを入れる。container()、header()、Title()、subtitle()、main_content()、col、language()、repo()など。

わさびの自殺、というカラースキンを使うと、タイトルが赤くなり、カラムのタイトルは緑っぽいアイコンがつく。だいぶ見た目が良くなった。(ここまでで5分)ただ、ここで問題が発生。ビジュアルデザイナーしか関わらないと、見た目がは良いが、400以上の一覧を全て下にスクロールしなければらない。

ここで、UIデザイナーが参画(同じ上杉氏の一人二役)。表示設定というボタンをJavaScriptで作れば、フォロー数で絞り込んだり、最終更新日で絞り込む、言語で絞り込む、というペインが上部に登場。昨日、この機能を徹夜で作った。

まだ足りない。ここで、プロダクトデザイナーも登場(一人三役)。(会場笑い) このアプリの目的は? どのオープンソースプロジェクト(のコード)を使えば良いか知りたい、ということが目的のはず。

使う言語が大体決まっている。一番得意な言語を使うはず。俺がフォローしているのはJavaScript。それをまず最初に表示させる事がはじめの決断。ロゴが小さくなり、少しデザインが変わった。今はJavaScriptだけ表示設定させる。(見えない決まり1)

次に、プロジェクト名はフォローされているプロジェクト名で三つに別れる。2000人以上のフォロワーがあるプロジェクトは有名。忘れない。200以下は使い道があまりない。間のものは、使い道があるが数が多いため、忘れがち。

すなわち、200~2000人のフォロワーがあるプロジェクトが一番使い道がある。従って、デフォルトでは、その範囲で表示させる。(見えない決まり2)

次に、一番重要な説明を表示させる。デザインは揃える事が重要なので、名前を右よりに揃えて、説明を左揃えに表示させる。右揃えは弱いので、名前はそれほど重要ではないが、説明が重要。(見えない決まり3)

また、説明文を使ってカテゴリ毎にまとめて表示させるさせることもできる。例=jQueryというカテゴリー名が入っている単語が含まれている説明文の文字列をインデックス化させてマッチした結果をカテゴリー別に表示。templateとtemplatingを自然言語処理して、色々な変化形を処理することができる。(=steming) こういうのを、デザイナーがエンジニアに指示する。

デザインは、見た目よりも、目的を達成できるかどうかが大事。目的→デザイン→機能という順番。プロダクトデザイン思考。シリコンバレーでこの手法が使われはじめている。

どのプロジェクト?
→一つの言語(JavaScript)
→デフォルトで表示させる範囲(200~2000)
→プロジェクトの説明

Quoraが重視すること:
・知識を集めること
・Q&Aと実名という公式
・重要なこと=同じ質問は一つだけ
→Yahoo!知恵袋はいくつも同じような質問があり分からない。Quoraでは質問を入れるボックスと検索ボックスが同じボックスになっている。結果的に、ユーザーは同じような質問は入れなくなった。
(デザインとして、それぞれ質問を追加する機能と検索する機能を別個に設定するのではなく、二つ以上同じ質問を作らせないという目的からデザイン→見えない決まり→機能という流れで作ったのでこういう形になった)

ユーザーの要望→機能→デザインという流れの問題点。どんどんユーザーの要望を取り入れていくと、製品のビジョンが揺らいでしまう。プロダクトデザインは違う。まず、ビジョン→目的→デザイン→機能(エンジニア)→ユーザー(フィードバック)→デザインに戻る。この流れでは、ビジョンと目的は絶対に揺らがない。意味のある会社を作るときは、ユーザーにビジョンと目的を変えさせない。

目的に沿わない機能が絶対でてこない。ユーザーの話をきかない訳ではないが、ユーザーが先攻になるか後攻になるかが違う。Appleのスティーブ・ジョブスがユーザーの声を聞かない、という話があるが、そんなことはない。iPad2では、GarageBandのように面白いアプリが多かったが、ユーザーの声を聞いた上で、Appleのビジョンに基づいて出した。ビジョンが先行した結果。


<人材とデザイン>

普通のエンジニアでもシリコンバレーでは争奪戦になっている。ダメな人を採用する一番のデメリットは、噂話に基づいた転職が多いため、ダメな人がいる場合は友達から噂を聞いて、優秀な人が来なくなってしまうというリスクがある。

ヒントは、デザインと教育。俺はカーネギーメロン大学にいたが、あまり勉強しなかった。アメリカではかなり大学で勉強する。アイビーリーグでは、皆が勉強するするため、ほとんどがAをとるという問題がある。宿題は時間をかければ成績があがる。カーネギーメロンでは宿題の比率を低くして、テストの配分を高くしている。俺はそこで宿題に時間をかけずにテストに時間をかけた。その結果プログラミングは身につかなかった。

カーネギーメロン大学では生徒がコースを作って単位を与えることができるというシステムがあった。(成績はつかないが単位はもらえる) 夏休みにFacebookでインターンをしながら、実用的な、学校では教えてくれないプログラミングを教えるクラスを作った。(Shu Uesugi RPG) 普通の授業とは違って成績はつかなかった。そのため難しいテストで成績をならす必要はなく、宿題を出した。絵本をWeb上に作って、宿題(チュートリアル)とした。codeは画像を貼って、コピペできなくした。

単位がとれる=何かを学んだ、という状態にした。

成績がつかない方が、逆に皆が真剣に取り組むようになった。ショートカットができないようにした。真面目に前から取り組んだ人たちに対してcodeをもらうことができない雰囲気を作った。(遅れた人もプライドがある)

この取り組みで、カーネギーメロンで賞をもらった。シリコンバレーでは、人を面接するときは、知識を聞かない、という暗黙の了解がある。逆に、簡単なプログラミングの問題を出す。ものすごいたくさん量があるので、覚えることが難しい。初心者が早く綺麗に書くことはできないが、上級者は簡単な問題を完璧にできる。ショートカットさせないという点では同じ。(人材を集める際の見えない決まり)

例:動的計画法に基づくコードをかけるかどうか、を面接で聞く。

ここまでのまとめ:
・見えない決まりを作る
・プロダクトデザインは目的から
・人材にはショートカットさせない
→今日のプレゼンではパワポを使わなかった。一週間前にKeynoteの使用期限が来れたこともあるが、ノートの各ページに3点ずつ主張を書いて話をした。その構造を見せたくなかった。
アメリカでは、すべて三つで話す。三つで話すと説得力がある。

一日7時間やった場合は二年で五千時間に達する。目標を立てる場合は、以下のように考えると良い。毎日何かをやる。3日に一回、9日に一回、27日に一回、81日に一回、243日に一回、729日に一回(ここでちょうど二年)というタイミングで実績を振り返る。


<まとめ>

夢はどこかの場所に落ちている。今日来ているWondershake(iPhoneアプリ)の開発者(Yamato Muraokaさん @yamat_o)も、サンディエゴで夕日をみているときに思いついた、とブログに書いていたが、人間にとって場所の暗示は大きい。(例:理科室の骸骨。アメリカには理科室がなかったので理科のことをぼーっと考えなかった)

慶応SFCにも夢につながる良い暗示がかっているが、シリコンバレーにも良い暗示がかかる雰囲気があるので、ぜひ遊びにきてください。


<質疑応答>

Q. FacebookやAppleでインターンされたと聞いたが、仲間でどんな人がいたか。
A. Appleの時は年寄りのチームであったため、子育ての話が多かった。Facebookではもう一人日本人がいる。ものすごい人。Facebookのエンジニアには、あまり起業を夢見ている人は居なくて、技術を使って大きなことをやりたい、という人が多かったが、一緒に何かやりたい、という人は3~4人しかいなかった。アメリカでは、共同創業者を探すためのデーティングサイトがあるくらい。気が合う人はなかなかいない。

Q. どんな会社、チームが理想か。
A. 頭がよければプログラミングは学べる。最初の週80時間ものすごい勢いでやって翌週はそれを40時間でできるようになるような人がいい。

Q. もし、今から何も技術がない状態で何かはじめるとしたら何をやるか?
A. 何かをうまくなるためには、2年ぐらいかかるが、2年後はどうなっているか分からない。Quoraができたおかげで、Quoraのヘビーユーザーを採用している。コミュニティマネージャー的な位置づけ。ハリーポッターの専門知識がものすごいあるような人たち。なので、自分がやってきたことで、無駄なことは何もない。色々な場所で、自分がこれまでやってきたことが役に立つかもしれないと考える。プログラミングができるようになることはそんなに難しくない。

Q. ユーザーからのフィードバックをどう反映させているか。
A. デザイナーが判断する。

Q. シリコンバレーと日本の違いは?
A. シリコンバレーでは、起業家に対して異常なほどの憧れがある。できる人が独立していないと、何故独立していないか聞かれる。スタンフォードとUCバークレーが隣同士にあり、ものすごい優秀な人が輩出されている。

Q. デザイナーをどう探せば良いか?
A. 自分がデザインの勉強をして、デザイナーの気落ちを理解することが重要。古典的な本を読むこと。

Q. デザインは妥協したくないが時間の制約がある場合がある。どうしているか?
A. 機能をしぼる。サイトを作ってダミー機能を入れておく。押したらリクエストが送られるような仕組みを入れる、という有名な話もある。

Q. シリコンバレーの技術者の弱点は?
A. Quoraにはいないが、なかには人を見下す、あるいは面接で落ちた人を馬鹿にする人もいる。途中の人までで、面接を切り上げてしまう会社など。エンジニアで本を読まない人もいる。


個人メモ提供: 本好宏次さん @kmotoyoshi
文責: @kokumaijp

Togetter
7/8(金) 「もしデザイナー歴2ヶ月半の若者がデザインの話をしたら」by上杉周作( #moshideza)

上杉周作氏の慶応湘南キャンパスでの講演「もしデザイナー2ヶ月半の若者がデザインの話をしたら」


講演の動画

もしデザ @ 慶應SFC • 2011/7/8 • #moshideza • Part 1


もしデザ @ 慶應SFC • 2011/7/8 • #moshideza • Part 2


もしデザ @ 慶應SFC • 2011/7/8 • #moshideza • Part 3


もしデザ @ 慶應SFC • 2011/7/8 • #moshideza • Part 4


もしデザ @ 慶應SFC • 2011/7/8 • #moshideza • Part 5


もしデザ @ 慶應SFC • 2011/7/8 • #moshideza • Part 6




blogrankbanner_12

トラックバックURL

コメントする

名前
 
  絵文字
 
 
こちらもフォローして!
あわせて読みたい
あわせて読みたい
なかのひと
携帯アクセス解析