こんにちは、編集長の白石です。

2015年5月20日、第57回 HTML5とか勉強会「UI/UX」に参加してきました！簡単で恐縮ですが、レポートとまとめをお届けします。

チームでつくるUIデザイン

最初のセッションは、Goodpatch社の小島芳樹さん、ひらいさだあきさんによる「チームでつくるUIデザイン」です。

彼らが日々の業務で実践している、UIデザインやプロトタイピングについてのTipsが紹介されました。

チームでつくるUIデザイン

マシュマロ・チャレンジで理解する、プロトタイピングの重要性

まずはマシュマロ・チャレンジというワークショップについて、TEDで動画が公開されているプレゼンテーションを引き合いに出しつつ、プロトタイピングの重要性を強調。マシュマロ・チャレンジとは、スパゲッティの乾麺をテープで組み合わせて上にマシュマロを置き高さを競う、という（ただそれだけの）チーム作業ですが、意外にも難しい。ここで興味深いのは、幼稚園児のチームが意外にも好成績を収めるとのこと。

なぜなら大人たちは、計画を立ててから最後にマシュマロを置こうとしがちなのにたいして、幼稚園児たちはいきなりマシュマロを上に置きたがり、失敗を繰り返すことで、結果的に良い結果を収めるとのことです。 つまり、プロトタイピングを繰り返すことで結果的に良いものができるということですね。

カスタマージャーニーマップを4コマ漫画で！

そして、よくあるカスタマージャーニーマップですが、作るのに苦労する割に、一旦作ったらあまり見られることもないままになってしまいがち。小島さんはそれを4コマ漫画にしているとのことで、確かに顧客に与える価値がものすごくわかりやすいと感じます。

UI Flows

また、37Signalsが提唱したUI Flowsという手法を使って、（画面遷移というより）UIの遷移を表すという手法を使っているそうです。画面はいきなり作らずにまずは言葉だけで整理するのが大事。

prottの紹介

最後に、Goodpatchさんが作成されているprottを引き合いに出しつつ、プロトタイピングをまずは行ってみることの重要性を協調していました。

0から始めるUXデザイン

次は、NTTコミュニケーションズ株式会社の金智之さんによる「0から始めるUXデザイン」というセッションでした。

この講演では、UXデザインそのものではなく、「0からUXデザインの組織を作る」ことについての様々な知見、体験談を紹介されていました。

0から始めるUXデザイン

金さんはNTTコミュニケーションズという大きな（そして固い）会社で、4年間にわたりUXデザインの重要性を説き、啓蒙や組織づくりに尽力されていたとのこと。おっとそういえば、このHTML5 Experts.jpの運営母体も、NTTコミュニケーションズでしたね！:-)

もともと金さんがUXデザインに取り組んだきっかけは、自分で考えたアイデアを実際のビジネスに落としていくにあたり、悶え苦しんだことだそうです。それを救ってくれたのが以下の二冊の書籍。ただし、「ペルソナ作って、それからどうするの？」のほうは絶版のようです。

年間20ほどのプロジェクトに関わりながら、社内にデザイナーという「新しい職種」を根付かせようと奮闘。 例えば、トランクにユーザビリティテストの機材を一式詰め込んで、ゲリラ的にテストを行って現実を担当者に突きつける…なんてこともされていたそうです。すごい。

そのかいあってか、今年「鶴の一声」によりUX向上が全社的な課題となり、大きく動き出したそうです。何事も、継続していくことで開ける道があるものですね。まとめは以下。大きな会社の組織を変えていくご苦労が忍ばれます…。

カヤックHTMLファイ部のUI・UX

イベントのトリを務めたのは、面白法人カヤック HTMLファイ部リーダーの藤澤伸さんです。

「カヤックHTMLファイ部のUI・UX」と題して、（Web業界では有名な）カヤックHTMLファイ部の現状と、彼らが特に手がけることの多い「ペライチサイト」に関するUI/UXについて紹介がありました。

カヤックHTMLファイ部のUI・UX (第57回 HTML5とか勉強会 / 2015.5.19)

カヤックHTMLファイ部はもともと、HTML5のブームに乗って設立されたチームですが、時代の流れとともに、Webに限らずネイティブ技術も使用するようになっているとのこと。結局、お客様のご要望をいかにして満たすかが重要であって、HTML5はその一手段でしかないということですね。

後半は「ペライチサイトのUI・UX」。UXというと、スマホアプリやWebサービスの文脈で語られることが多いですが、カヤックHTMLファイ部はランディングページ（ペライチ）を手がけることも多い。そういうページにおけるUI/UXでは、「どうやってボタンを押させるか」「どうやって印象に残すか」「どうやってシェアさせるか」など、「一度しか来ないユーザーを、どうやって捕まえるか」が重要です。

例えば「どうやってボタンを押させるか」という課題においては、とにかく目立つ「押したくなるボタン」を配置する。

「どうやって印象に残すか」という課題については、ユーザの滞在時間を伸ばすのが重要で、触って気持ちのよいインタラクションを各所に配置するのが重要。

このスライドで紹介されているページはもうアクセスできないそうですが、ソーシャルボタンや「トップに戻る」ボタンなど、様々なものがインタラクティブに動作するのが印象的でした。

「どうやってシェアさせるか」においては、話題になる体験を作ることが重要。こちらのスライドで紹介されている「NARUTO展」のページは、画面最下部の「トップへ戻る」ボタンを押すと、すごいことがおきます。

「ペライチサイトのUI/UXを考える」というトピックは、今まで深く考えたことがなかった点で、とても面白かったです。

プロトタイピング、組織づくり、ペライチサイトというバリエーション豊かな視点からUI/UXを考えるという、とてもおもしろい体験でした。今回登壇された方々に共通していたのは、なんだか「ぶっちゃけ」感が強かったこと。「それ言って大丈夫？」みたいな発言もちらほら…だからこそ面白かったのですが、レポートやスライドではお伝えしきれないのが残念。

ライブの雰囲気を少しでも味わいたい方は、こちらの動画からどうぞ！

ほか、雀巽さんのブログはとても詳しく、よくまとまっていらっしゃってオススメです。 第57回HTML5とか勉強会 －UI/UX特集－ に参加しました！

ひろみつさんのグラフィックレコーディング結果も載せときますね。

今日がんばって手持ちのノートとペンでなんちゃってグラレコをしてみたんだけど、筋肉なさすぎて難しかった…!!! #html5j

@hiromitsuuuuuが投稿した写真 – 2015 5月 19 9:18午前 PDT

HTML5 Experts.jpが誇るエキスパートたちに、「UX」というテーマでインタビューするシリーズ、いよいよ最終回です。

今回は、面白法人カヤックでHTML5を使ってバリバリ仕事をしていらっしゃる田島真悟さんと君塚史高さんに、いろいろとお話を聞いてきました。 カヤックさんに聞いてみたかったテーマは主に二つあります。

• 技術力に定評のあるカヤックさんが、HTML5やJavaScriptとUXについてどう考えているのか？
• 一見自由が利きそうにない「受託開発」という形態の中で、いかにUXを追求しているか？

ではどうぞ、お楽しみください！

クライアントのニーズを掘り下げると「体験」に行き着く

白石: 今回は、HTML5を普段からお仕事で活用していらっしゃるお二人に、UXというテーマでいろいろお話をお聞きしたいと思っています。どうぞよろしくお願いします。

田島＆君塚: よろしくお願いします。

白石: 皆さんは、普段どんなお仕事をされているのですか？

田島: 私たちはクライアントワークを行うチームで、普段は受託開発をしています。企業のお客様から依頼を受けて、キャンペーンサイトを作るお仕事が多いですね。

君塚: 私も田島と同じチームで働いています。あと、弊社にはHTMLファイ部という部署がありまして、私はそこのリーダーを務めています。

田島真悟さん

君塚史高さん

(invalid jsdo.it code)

君塚: RAIZIN Coolは、もともとRAIZINというエナジードリンクの「クール」版を発売する際に、「クールさ」を表現したいというご要望があったんですね。そのご要望を満たすためにどうしたらよいかを考えて、結局HTML5のCanvasを使用しました。ついでに言うと、技術的にもクールでしょ、と(笑) 。実際に技術的な部分が評価されて、海外でも話題になったのはうれしかったですね。

「絞り込み」こそ、とがったユーザー体験のカギ

白石: 体験という観点から、他に面白い事例とかありますか？

田島: 「キュウソネコカミ グッズでんたく」は、ユーザー体験という点では面白いんじゃないかと思います。これは、キュウソネコカミというバンドのライブイベント向けに開発したWebアプリです。どんなアプリかというと、ライブのグッズ売り場で並んでいる時に暇つぶしをしてもらうためのアプリですね。「電卓」という名前からも分かる通り、グッズを選んでいくと、事前にいくらお金がかかるのかわかるというサイトです。

キュウソネコカミ グッズでんたく

公式キャラクターの「ネズミくん」が、選んだアイテムに関して一言つぶやく

Webアプリとネイティブアプリ、その長所と短所

白石: 今の事例は、Webじゃなくてスマホアプリであっても成立しそうな事例ですよね。インストールのひと手間はかかっちゃうでしょうけども。何か、「Webならでは」の事例ってありますか？先ほどおっしゃっていた、Webとアプリの長所と短所という点について掘り下げて聞いてみたいんですが。

田島: 以前ドミノ・ピザ様向けに「世界最短のタイムセール」というキャンペーンアプリを作らせていただいたことがあります。どんなアプリかというと、「時・分・秒・0.1秒」の数字が全部揃った時にタイミングよくボタンを押すと、ピザが半額で買えるというFacebookアプリです。チャンスは1時間に1回、0.1秒しかありません。

世界最短のタイムセール

「受託開発だけどUXに妥協しない」ための仕事術

白石: 以前長谷川さんや木達さんにインタビューした際に、「受託という仕事の形態だと、作り手がユーザー体験をコントロールできる範囲はどうしても限られてしまう」という議論がありまして。一方でカヤックさんは先程からお話をお聞きしていると、受託開発をしつつも「体験」には妥協していないように思えます。どのような仕事の進め方をされているのでしょう？

田島: まずお客様からご要望をいただいたら、それを満たす手段を検討するためにブレインストーミングを実施します。弊社はブレストを非常に重視していまして、そのブレストにはデザイナーやエンジニアも参加します。技術的な知見がないと出せないアイデアもありますし、新しい技術を積極的に活用していくためにも、デザイナーやエンジニアと一緒にブレストするのは非常に大事ですね。

以降は、そんなに変わったところはないと思いますよ。ディレクターがワイヤフレームを作って、デザイナーがデザインカンプを起こす。そうしてお客様と仕様を詰めていって、その後サーバサイドエンジニアとフロントエンドエンジニアが共同で実装にあたる…という流れです。

白石: そういう「仕様が固まってない」状態からの提案・開発となると、お客様からの仕様変更とかも多いんじゃないでしょうか。開発のスピード感はどうやって出しているんでしょう？

田島: うーん…うちらは、普段から結構短納期の仕事をよくこなしているので、普段から鍛えられている、っていうのはあると思いますね。

君塚: 一言で言うと「頑張る」(笑)。

君塚: とはいえ、仕様変更を「前提」として考えているという態度を徹底しているのは、大きいかもしれません。限られた期間、予算の中でできる限りお客様の要望の変化に追随していく。それを続けていくと、勘も養われてくるんですよね。仕様が変わりそうなところ、そしてもっと大事なのは、仕様が変わらなそうなところがどこか…というのがわかってくる。

そういう「固い」部分って、プロジェクトが違っても共通している部分がある。繰り返すごとに、再利用できるコードも増えてくるわけですね。以前使ったコードを組み合わせて作る…ということで、もっと早くなる。また、仕様が変わりそうなところのあたりがつくと、あとから変わってもいいように作っておく。そういう積み重ねがあるおかげで、仕様変更自体は多いけど、無駄な作業があまりないという状況が作れているんだと思います。

白石: なるほど。こうしてお話をお聞きしていると「作り手であるカヤックさんの裁量が大きい」ということが感じられるんですよね。カヤックさんの中でブレストして提案していくっていうのは、結局のところ作るものを自分たちで企画しているということですよね。それってよく考えると、「お客様のご要望に従って作る」という受託開発のイメージとは、逆と言ってもいいかもしれない。

君塚: そうですね、「言われたとおりに作れ」っていう「プリンター」みたいな仕事は、ごく稀にしかないです。クライアントさんと一緒に作り上げていく…という感覚の仕事が多いですね。

白石: ぼくもカヤックさんとお仕事させていただいてます（※HTML5 Experts.jpのサイトはカヤックさんが制作）が、「面白法人」に向かって「プリンター仕事」発注する気にはなかなかならないですしね(笑) 。企業としてのブランディングが確立しているというところも、要因の一つかもしれませんね。

ただ、営業の時点でお客さんとの上下関係ができちゃっていたり、契約上作り手に自由度が全くなかったり…ということはないんでしょうか？ぼくも以前受託案件を生業にしていましたが、作り手の自由度って、そういう「立場」「力関係」や「契約」と言った、開発以外の部分に相当縛られると感じています。

君塚: 弊社には営業専門の社員はいなくて、ディレクターの繋がりでお仕事をいただくことが多いので、そもそもそういう問題が起きにくいというところはあるのかもしれません。ただぼくは前職で飛び込み営業やってた経験がありまして、その経験を踏まえてお答えするのですが、うちの会社はコミュニケーションに裏表がないなあ、とは思いますね。

例えば、デザイナーやエンジニアなどの作り手が、お客さんに伝えたいことがあったとします。その仕様変更は受けるのが難しいとか、より良いアイデアとか、なんでもいいんですが。そういう現場の意見を、間に入っている営業が「お客さんとの関係がこじれると面倒だから」とか、そういう理由で握りつぶしたりしてしまうことがあるんですね。

この会社（カヤック）にはそれがないなあ、と。基本的に、ディレクターはお客さんに何もかも正直に伝えるんです。例え面倒な話だったとしても、その時点で「正しい」と思ったことは正直に伝える。それが通らなかったなら、相応の理由があるわけだし、その理由を聞いて現場も納得する。こういう、みんな正直で正しいことが通りやすい、駆け引きのないコミュニケーションを行う文化が、結局はフラットで対等な関係を生んでいるんじゃないかなあ…と思いました。

白石: なるほど。率直なコミュニケーションと鍛えあげられた現場力が、クライアントとの対等な関係を生み、それがユーザーにとっての最高の体験を追求できる環境づくりに繋がっている…とまとめさせていただいて、本日のインタビューは終わりにしたいと思います。

長い時間のインタビューにお付き合いいただき、本当にありがとうございました！