[WEB EXPERT DRAFT登録開始!11月29日(水)開催](https://webexpert-draft.jp/)
  1. top
  2. デザイナードラフトReport
  3. Kaizen Platformのデザイナーが見据えるのはUXデザインの向こう側。自らデータ分析し、課題発見から解決までこなす”自走型”デザイナーの実態に迫る。~ 転職ドラフトビールを片手に語りあうシリーズ vol.2

https://s3-ap-northeast-1.amazonaws.com/ddraft/blog/ec90ffff-d81f-414b-b38f-dc561b41d8da.png

Atomic Designや、マイクロインタラクションはもちろんのこと、ユーザー体験価値の発見や、定性・定量調査、データビジュアライゼーションなどもデザイナーがこなす
株式会社Kaizen Platform。新たな技術への取り組みや、同社が求めるデザイナー像を、
Kaizen Platformのデザイナーに直撃した。

(左上より)
永尾 謙明:株式会社リブセンス DOOR賃貸、IESHIL デザイナー
飯田 智美:株式会社リブセンス 転職会議デザイナー
渕上 航 :株式会社リブセンス 転職ドラフト・デザイナードラフト デザイナー
(左下より)
鈴木 一弘氏:株式会社Kaizen Platform サイトソリューション事業本部 デザイナー
白石 宏亮氏:株式会社Kaizen Platform Ad事業部 デザイナー

超少数精鋭!一人のデザイナーが一つのプロジェクトのデザインに全責任を持つ

渕上: Kaizenさんのデザイナーさんは現在3名と聞いて驚きました。10名くらい、いらっしゃると思っていたので・・・!お二人は前職では何をされていたんですか?

鈴木: 前職はYahoo! Japanで主に地図や路線などの地域サービス系を担当していました。ビジネス系や検索なども担当していました。

白石: 私は、富士通にいました。

渕上: えー!富士通ですか?なんだか意外ですね。どんな仕事をされていたんですか?

白石: 元々、大学でUIの勉強をしていて、富士通にはソフトウェアエンジニアとして入社しました。UIにはその後も興味があったので、コードを書いたりデザインしたりしていました。

渕上: デザイナーの分野で、富士通というと富士通デザインがまず思い浮かびますが、エンジニアをされていたのですね。富士通さんをご退職されてすぐにKaizen Platformさんに入られたのですか?

白石: いえ、富士通を退社後は、アメリカのシアトルで大学院に通い、ヒューマンコンピューターインタラクションというUXデザインを含む考えを学んできました。

渕上: 退職後に留学もされていたのですね!その後、Kaizenさんに入られたのは、どんな経緯ですか?

白石: Kaizenの「新しい働き方を創る」というビジョンに惹かれたからです。アメリカはフリーランスが多く、自由な働き方を間近で見ていたので、自分も実現したいなと思っていました。向こうにいるときに、たまたまKaizenの記事を見かけて興味をもったんです。

渕上: たしかに、Kaizenさんは「21世紀の新しい雇用と働き方の創出」というテーマを掲げてらっしゃいますね。

https://s3-ap-northeast-1.amazonaws.com/ddraft/blog/9a178ed4-573c-4af5-921b-12761ff6cfb1.png

渕上: ちなみに、もう一人のデザイナーさんは、どんな方ですか?

白石: 中国籍で、年齢は20代後半です。変わった経歴の持ち主で、大学で都市建築デザインを学んで、学生時代に彼の友人が立ち上げたスタートアップに参画したのち、うちに来たんです

渕上: その方も珍しいご経歴ですね(笑)Kaizenさんは複数プロダクトをご提供されていると思うのですが、デザイナーとしては、どのように役割分担をしていますか?

鈴木: プロジェクトに1デザイナーという配属になっています。設計はこの人、ビジュアルデザインはあの人、という業務フェーズ毎の分業をしていないので、担当プロジェクトに関するデザインは、全部担当することになります。

飯田: そういった意味ではリブセンスもデザイナーは各メディアごとに配属されているので似ていますね。皆さんどれくらいの業務範囲を担当されているんですか?例えば、クライアント企業が利用する管理画面などは、要件定義やIA、情報デザインが複雑だと思うのですが、全部デザイナーがやっているんですか?

鈴木: まず、モデル図をデザイナーとエンジニアが一緒に書いていきます。ステークホルダーは多く、クラウドソーシングのデザイナーやクライアント企業、全体をとりまとめているディレクターなどがいますがそういった方のユースケースは、設計時にすべて書き出すようにしています。

鈴木: アウトラインは企画が作成し、そのアウトラインに沿った開発を検討して、必要に応じてフィジビリティテストを検討する感じです。「つまずきポイントの発見を早めにしよう」という意識が強い会社なので、相手の意見に反論するなど、議論が白熱することはよくあります。

渕上: なるほど、デザイナーが幅広く業務に関わっているのですね。業務範囲が広くなると、タスクの量が多くなりそうですが、タスクの取りまとめをするディレクターのような方はいますか?

鈴木: ディレクターという職種はないのですが、各プロジェクトの進捗管理はプロダクトマネージャーが行っています。また、プロジェクト間をつなぐ役割としてプロジェクトマネージャーというポジションがあり、全体的なスケジュール管理や各プロジェクトで共通する開発などの情報管理をしています。過去には、プロジェクト間の情報連携が足りないために、同じようなものを作ってしまったり、同じシステムに手を加えているためにシステムにコンフリクトが起きてしまったりしていました。そのため、最近はプロジェクト間の情報連携に気を配っています。

https://s3-ap-northeast-1.amazonaws.com/ddraft/blog/b6495ee1-f1f7-4172-9a23-8e4beb280caf.png

Kaizen Platformのデザイナーは、ユーザーの本音を知るためにPythonも使いこなす!?

渕上: 1プロジェクトに1デザイナー配属されているとのことでしたが、プロダクトに関わるデザイナーとしては、みなさんどんな関わり方をされているんですか?

白石: 必要とあらば、ユーザーリサーチのために営業担当に同行してクライアント企業にヒアリングをすることもあります。また、ユーザーを知るという文脈では、デザイナーが自分自身でデータの分析をすることもあります。

鈴木: お客様のウェブサイトの課題発見ツールを開発していたときには、デザイナーも生ログを分析してサイト課題抽出のロジック発見を行いました。弊社のサービスは、JavaScriptのファイルをお客様のサイトで読み込んで頂き、ログを取得できるようにする仕組みがあるのですが、その行動ログをデザイナー自身がSQLを書いてデータ取得し、分析したり、ツールを使ってビジュアライズしたりします。

白石: デザイナーに限らず、プロダクトマネージャーやエンジニアにも、データ分析スキルは求められています。弊社の価値は、データを分析してお客様に改善という形で提供することなので、職種問わず共通して求められるスキルだといえます。

飯田: 分析段階からデザイナーが関わるのは珍しいですね。具体的には、どんなツールを使っていますか?

鈴木: いま担当しているプロジェクトでは、みんなが「Jupyter Notebook(ジュピターノートブック)」を使えるようになろうという話が出ていて、既にPythonベースでJupyter Notebookを使ってデータのビジュアライズもしています。

飯田: デザイナーもPython書けるんですか!?スゴイですね!

白石: データ分析のツールとしては、「Tableau(タブロー)」もよく使います。

鈴木: Tableauは、データベースにつなぐと直感的にグループ化してデータをみたりできるので、重宝してます。

飯田: 数値分析をするときの勘どころは、やっていくうちに養われるものなのでしょうか?

鈴木: 個人的には、お客様が理解しづらかった課題を、どうわかりやすく伝えるかを考える中で、自分の数値分析力が上がったかなと思っています。どういうことかというと、「このバナーのCTRが1%上がると、CVRがこのくらい上がるのでバナーを改善しましょう」と伝えても、お客様が具体的なサイト改善アクションを起こしてくれるケースが少なかったのです。課題だけ提示しても、その背景(コンテキスト)がわからないとなぜその課題の重要度が高く成果がでやすいのか理解が難しいので、行動に結びつかないんです。そのため、課題背景が理解できるようなグラフィカルなデータビジュアライゼーションを、まずお客様に見せた上で具体的な課題を説明するようにしたら、お客様の理解度がグッと上がりました。この経験は勉強になりましたね。

飯田: お客様の手間を減らすために結論だけを伝えたいと思ってしまいがちですが、理解してもらうためにはそれだけではダメなんですね。興味深いです。

鈴木: その過程では、コンテキストを作っている情報はログだけではわからないことも多いと感じました。たとえば、「この広告から来た人はCVが悪いから、あまり投資しないほうがいい」と提案したところ、実は広告の商品テストをしていただけで、CVが悪いことは了承済みだった、なんてこともあります。こうした背景ロジックは人がもっている情報なので、定量データからポンと出した課題では、お客様を動かすことはできないなと思いました。

白石: Why?の部分はこのツールではわからないのですが、その点はユーザーインタビューをするなど、複合的に活用すると、より深くユーザー分析ができると思います。

鈴木: ほかには、ユーザビリティ調査のために「Fullstory(https://www.fullstory.com/)」というツールも使っていて、このツールでは、ユーザーの行動がすべて動画で見ることができます。

https://s3-ap-northeast-1.amazonaws.com/ddraft/blog/bb986131-80f4-4c07-9cb8-ef14a8e7d679.png

鈴木: 1セッションごと別々にユーザー行動を確認できるようになっていて、ユーザーの簡単な属性も確認できます。

渕上: おー!すごいですね!

白石: Fullstoryは、ユーザーのフィルタリングが充実していて、サイト内のあるボタンを押しているユーザー、このページでつまずいているユーザーといった抽出ができます。ユーザーのデータベースとも連携できるので、年齢での絞り込みもできるんです。

鈴木: エラーケースが起きていると想定されているページでは、そのページ内のUIごとにフィルタをかけると、ユーザーの動きがそれぞれのUIごとにわかるので、どのUIがエラーケースのトリガーになっているのかを発見することが出来ます。

白石: この機能を利用して、新機能を追加した時には、みんなで集まって、お酒を飲みながらユーザーの動きをワイワイ見ていました(笑)

飯田: 楽しそう!

鈴木: そうやってユーザーの行動を実際に見てみると、せっかく作ったレポートの画面を、ユーザーが飛ばしてスクロールしているのが見えたりするんです(笑)

飯田: 現実は厳しいですね(笑)

https://s3-ap-northeast-1.amazonaws.com/ddraft/blog/e7f1e7ea-ba44-401b-93c3-604f0d0c506b.png

Atomic Designは、あくまで開発スピードを優先させるための手法

渕上: KaizenPlatformで流行っている、デザイナーならではのツールなどはありますか?

白石: デザイナー向けGitHubと言われている「Abstract(https://www.goabstract.com/)」は試してみたらよかったです。複数デザイナーで同じSketchファイルを編集するときに、バージョン管理が難しくなると思うんですけど、それを解決してくれるツールです。デザイナー同士のコミュニケーションツールとしても、便利だなと思いました。

永尾: KaizenさんではデザインシステムにAtomic Designを導入しているそうですが、その理由を教えてください。

鈴木: Atomic Designを導入した理由は主にふたつです。ひとつは、デザイナーリソースが少ない分、プロダクトの共通UIはパーツ化して、ビジュアルデザインの手作業を減らす工夫をしていく必要があったことです。ふたつめは、フロントエンドエンジニアがコンポーネントベースに開発していると、Atomic Designに対応しないとデザイナーは不必要なものを作ることになってしまうからです。弊社はプロダクトデザインがメインなので、プロモーション系のページ固有なコンテンツが入ってこない分、コンポーネント化しやすかったことも導入の決め手でした。

鈴木: クロスデバイスで同じ機能を提供している場合も、Atomic Designのメリットはかなりあると思います。

渕上: Atomic Designのコンポーネント管理はどのようにされていますか?

鈴木: 現状はデザインガイドラインをエンジニアと共有して、SketchのCraftプラグインのライブラリ管理機能を使ってUIコンポーネント管理をしています。

白石: Sketch自体がアトミックデザインと相性がよくて、Symbolを使って整理できます。

永尾: Symbolは階層が深くなると、編集が煩雑になりませんか?

白石: うちはプロダクト規模が大きくないので、ギリギリ維持できている感じです。今後は、そういった課題も出てきそうですね。

永尾: 私がAtomic Designを導入したキッカケは、もっと効率的にデザインしたかったからなんです。当時のトレンドでもあったので導入したのですが、なかなか運用が難しいなと感じているところです。

白石: 弊社も同じフェーズです。導入し始めて、試行錯誤しているところです。

渕上: Atomic Designを導入して、運用上困ったことはありますか?

鈴木: 今のところは、作業スピードが速くなるというメリットのほうが大きく、そこまで課題は感じていません。強いていえば、イレギュラーな新しいUIを作るときが面倒なことでしょうか。

飯田: イレギュラーなものが必要なときはどうしていますか?

鈴木: 都度相談しますね。「これちょっと違うんだけど、追加してもいいかな?」みたいな感じです。フロントエンドエンジニアから、「既存のコンポーネントでいけませんか?」と聞かれることもあります。

飯田: 導線的に既存のパーツだとどうしてもデザインしづらかったりして、デザイナー的にもう少しこだわりたいけど、リリースタイミングに間に合わない、というときもあると思いますが、そういった際はどうされていますか?

鈴木: 弊社ではまずはローンチを優先させます。ビジュアルデザインのブラッシュアップは、次フェーズに持ち越すパターンが多いですね。

飯田: 開発スピードを優先させるためのAtomic Designだから、ってことですね。今、管理画面を作っているんですが、Atomic Designをせずにリリースしてしまったので、似たようなコンポーネントを何回も作ることになっていて、ツライ状態です(笑)

永尾: Atomic Designはそういう苦労をしにくくなるから、オススメだよ。

飯田: そうなんだ!私もAtomic Design導入しようかな・・・!

https://s3-ap-northeast-1.amazonaws.com/ddraft/blog/64b0bc8f-780f-4840-b413-b4f6e9dd5131.png

デザイナーに求めているのは、クリエイティブスキルより、自走スキル

渕上: 最後に、Kaizen Platformのデザイナーに求められるものはとても多分野に渡ると思うのですが、その中でもコアとなるスキルが何なのかを教えてください。

鈴木: 弊社がデザイナー採用の際に参考にしているのは、Intercom社のデザイナーのスキルマップのマトリックス図(https://blog.intercom.com/how-to-hire-designers/)です。

https://s3-ap-northeast-1.amazonaws.com/ddraft/blog/8879d07a-0f8e-4650-8c77-e94b18837135.png

鈴木: 一番右から、ビジュアルデザインはプロダクトのビジュアルスキンをつくること。その次のインタラクションは、ユーザーがUIを使うときのふるまいや、表現効果の部分に責任をもつこと。その隣のシステムは、エンジニアとオブジェクトモデルや、それを実現するコンポーネント群、インプットやアウトプットの仕様などを一緒にデザインすること。一番左のアウトカムは、プロジェクトが目指すゴールや解決すべき課題の仮説をもち、実現の道筋をつくっていくことです。そして、弊社のデザイナーに求めたい部分はアウトカムのできるデザイナーなんです。

渕上: なるほど!事業会社のデザイナーにはサービスグロースへのコミットが求められますよね。

白石: デザイナーに限らず、弊社のプロダクトメンバーに共通して求められるのは、事業を成長させることです。なので、それをデザインの分野に変換すると、UXデザインや提供価値の定義になるかな、とは思います。

鈴木: プロダクト自体が成長中で、不確実性が高い開発をやっている状況なので、自分の仕事に提供価値があると思えないと、弊社で働くのは難しいかもしれません。ですので、クリエイティブスキルより、自走スキルを重視していますね。コーポレートビジョンである「21世紀の新しい雇用と働き方の創出」に賛同できるかも大事です。どこにいても、誰といても働けるという世界観を実現することを目指しています。

鈴木: また、サービス開発はエンジニアを中心に進む会社なので、システムの分野においても、エンジニアとしっかりコミュニケーションをとって、プロダクトを作れる方が重宝されます。フロントエンドのエンジニアリングとUIデザインの両方ができる人、さらにサービス利用してくれるユーザーへの価値提供について突き詰められる人にとっては、非常に面白い会社だと思います。

渕上: それこそ真のUXデザイナーですね。ありがとうございました!

「クリエイターの価値は世界が決める」
次回デザイナードラフトは、2018年04月01日開催予定!

企業があなたを年収付きで指名する「デザイナードラフト」。
webデザイナー・クリエイター限定の転職サイトです。

「私の実力ではいくらの年収を提示されるのか」
「市場価値を上げるには、今後どんなスキルを身につけるべきなのか」

提示年収を見てから選考に進むか決められるから、転職意欲が高くなくても大丈夫。
自分の年収を知りたいからという人も、ぜひお気軽にお試しください!

facebook
twitter