This page is intended for users in Japan(English). Go to the page for users in United States.

ブロックチェーンはUIが命。PoLで大事にしているデザインの話。

田上です。techtecチームでPoL(ポル)のPdMを担当してます。

Mediumでは、プロダクト開発やチーム作り、コミュニティ形成などtechtecチームで大切にしているいくつかの想いを、チーム内で言語化して共有するために書いていきます。
techtecチームはこんな場所なんだなぁという参考にもなれば嬉しいです。

今回は、プロダクト開発におけるデザインの考え方についてです。

2012年6月の創業後、凄まじい勢いでデカコーンへと成長した、世界最大の暗号通貨取引所Coinbaseのブログ「Welcoming more women designers to crypto」をご覧になったことのある方は、どれ位いるのでしょうか。
※英語ですが、そんなに長くないのでぜひ一度読んでみてください。

このブログは、Coinbaseでデザインマネージャーを務めるNina Samarguliani氏によって書かれました。

ブログ内では、ブロックチェーンが創る未来や現状の課題などについて触れられていますが、彼女が最も強調しているのが以下の箇所です。

That complication is a call to action for designers; we can and should be using all of our tools to simplify the complex, and make this technology accessible to everyday users.
私たちデザイナーの使命は、先端テクノロジーのような複雑なものを単純明快にすることで、テクノロジーを日常生活に溶け込ませ、ユーザーがシームレスに利用できるようにすることである。

前後のコンテクストから意訳しましたが、要するに、先端テクノロジー(当該ブログにおいてはブロックチェーン)におけるデザイナーの役割とは、テクノロジーを意識する必要のないUXをユーザーに提供することである、と彼女は訴えているのです。

これはまさに、僕がtechtecチームのみんなとPoLを通して実現したいことの一つです。

今回は、僕らtechtecチームがPoLを開発する上で最も大事にしている、デザインに対する考え方について紹介したいと思います。

PoLの開発スタイル

デザインの話に入る前に、現在のPoLの開発スタイルについて全て公開しておきます。(※PoLはブロックチェーンのオンライン学習サービスです)
まず、チーム構成は以下のようになっています。

  • PdM:1名
  • フロントエンド:1名
  • サーバサイド:2名
  • デザイナー:1名

フロントはVue.js、サーバサイドはLaravel、インフラはAWSです。
(アジャイル開発によるCI/CDなどの開発体制については、今回は省きます)
デザインツールはCacoo、Sketch、Zeplinを使っています。

基本的に、PdMが要件を考えてワイヤーフレームに起こし、デザイナーと一緒に再度要件を深掘りし、デザインを作成します。

このとき、PdMとデザイナーで何度も繰り返し徹底的にUIを磨き込むようにしています。
techtecチームには上下の階層が全く存在しないため、PdMとデザイナーはお互いの意見を尊重し合ってブラッシュアップを重ねます。

PdMとデザイナーとで要件を固めたら、毎週のスプリントに要件を持ち込みます。
このスプリントにはチームメンバー全員が参加するため、フロントエンドだけでなくサーバサイドのエンジニアからも要件に対するフィードバックを求めています。

こうすることで、あらゆる観点からのUI/UXを取り込むことができると考えています。

Cacooで作成したワイヤーフレーム時点のUI
Sketchで作成したUI。カラーをPoLのブランドカラー(CSSコード:FF6A00)に統一したり、トンマナにメリハリを付けたり、細部にまでこだわっています。(※スクショのwidthが合わず…)

UI>UXはあり得ない

前置きが長くなりましたが、techtecチームでは、PoLを開発するにあたってとにかくUIを大事にしています。

UIとUXは、多くの場合同じコンテクストで語られることがありますが、UI<UXが大前提であり、UI>UXとなることは絶対にありません。(ここでは敢えて絶対という表現をしていますが、物事に絶対はないという意識は持っていたいです)

UXのコンポーネントには、UIをはじめ、クリックイベント時のエフェクトや画面の描画速度(レスポンスタイム、もっというとターンアラウンドタイムまで)などが含まれます。

これらのうち、どのコンポーネントが最も重要であるかは、プロダクトの性質によって異なると思いますが、御察しの通り、PoLではUIを最も重要視しています。

この理由こそ、CoinbaseのNina氏の考えと全く相違ないものになります。

ブロックチェーンになぜデザインが大切なのか

コンテクストをUIからデザインにまで広げます。

PoLはブロックチェーンのオンライン学習サービスです。
一般的に、ブロックチェーンと聞くと「何ができる技術だろう?」「そもそもどんな技術だろう?」といったようなイメージを抱く人が多いかと思います。

数ある先端テクノロジーの中で、例えば「VR」「AR」「IoT」と聞くと、ゲームやロボットなどを通してイメージすることができます。
しかし、「ブロックチェーン」や「機械学習」と聞くと、途端に取っ付きにくい印象を受けるのではないでしょうか。

それもそのはず、前者はわかりやすく人間の五感を拡張し、後者はコンピュータの世界でクローズドな場合が多くなっているのです。

現に、「プロトコル」といわれるとHTTPやFTPなどがすぐに浮かばない人でも、「アプリ」といわれるとInstagramやTikTokといった名前がすぐに浮かぶのではないでしょうか。
(プロトコルは先述の前者に該当し、アプリは後者に該当します)

そんな、要するにわかりにくいテクノロジーこそ、デザインが大切だと考えています。
なぜなら、そんなわかりにくいテクノロジーこそ、世の中を大きく変える可能性を秘めているからです。

しかしながら、現状はデザインが重要視されているとはとても言えないようなプロダクトが多数存在しています。

もしかすると、コンピュータの世界に閉じたテクノロジーは、そのほとんどはエンジニアのスコープに留まるんだから、ある程度のデザインは気にする必要ない、といった意見が出てくるかもしれません。

しかし、デザインというのはUIの話だけではありません。
繰り返しますが、Nina氏はブログの中で次のように述べています。

That complication is a call to action for designers; we can and should be using all of our tools to simplify the complex, and make this technology accessible to everyday users.
私たちデザイナーの使命は、先端テクノロジーのような複雑なものを単純明快にすることで、テクノロジーを日常生活に溶け込ませ、ユーザーがシームレスに利用できるようにすることである。

デザインとは、ユーザーを幸せにするUIを提供するだけでなく、複雑なものを単純明確にする役割も担っているのです。

ブロックチェーンのような先端テクノロジーの場合は、ただでさえイメージしづらいにも関わらず、さらにUIもお粗末な状態となってしまうと、エコノミクスの発展が阻害されてしまいます。
そして結果的に、複雑なものが複雑なまま特定の少数のみに留まってしまい、社会変革の遅延に影響してしまうのです。

従ってデザインには、先端テクノロジーにありがちな取っ付きにくさを払拭する使命が課せられています。

これもデザインだと思いますし
これもデザインだと思うのです。

プロダクトのこだわりはユーザーに届く

techtecチームでは、PoLを開発する上で本当に細部のデザインにまでこだわっています。

そのこだわりは、プロダクトを通してユーザーに間違いなく届いていると実感しています。

今回引用させていただいたツイート以外にもたくさんのフィードバックをユーザーから寄せていただいています。

これは本当に嬉しいことですし、こんなにも近い距離でユーザーからの意見をもらうことができるのは、非常に貴重な経験だと感じています。

※ツイートを勝手に拝借させていただきました。問題ありの方がいらっしゃいましたら、すぐに取り下げるのでご連絡くださいませm(__)m

One for all, All for one

techtecには、「One for all, All for one」というカルチャーがあります。
(最近のチームMTGで追加したばかりなので、HPにはまだ更新されていませんが…)
※その他のカルチャーはこちら

これには、「一人はみんなのために、みんなでユーザーのために。」という想いが込められています。

techtecチームとプロダクトのユーザーは決して上下関係ではありません。
我々は、ユーザーとフラットな関係を維持し、一緒にプロダクトを良くしていきたいと、本気で考えています。

実際、PoLのクローズドβ版をリリースして以降、継続して機能追加・改善を実施してきましたが、ほとんどがユーザーからのフィードバックを元にしたものとなっています。

例えば、カリキュラム学習後に実施する確認テストでは、解説文までしっかりと読んでほしい…という開発者側の要望の元、テスト結果画面にユーザーが選択した回答を表示していませんでした。

しかし、自分が何を選択したか把握した上で解説を読んだ方がより理解が進むのではないか、という意見がユーザーから多く集まったため、機能改修に踏み切りました。

カリキュラム学習後に実施するテスト結果画面に、ユーザーの選択した回答を表示するよう改修

日々、ユーザーから届くフィードバックを尊重し、そのフィードバックを受け止めることで我々は成長することができています。

その代わりにではないですが、学習サービスという形で、PoLを使ってくれるユーザーの成長に貢献していきたい、そんな風に考えて、日々プロダクト開発に勤しんでいます。

最後は少しデザインの話から逸れましたが、本ブログを通して、techtecチームで大事にしている、プロダクト開発におけるデザインの考え方について紹介してきました。

techtecでは、PoLをより良いサービスにしていくために、価値観の合う仲間を募集しています。

プロダクト開発を中心に、会社としてもこれから益々おもしろいフェーズに入っていきます。
少しでも良いなと感じてくれた方は、ぜひ気軽にオフィスに遊びに来てください!

techtecチームとぜひお話しましょう!

techtecのミッション

「個人の成長をサポートし、誰もが自由に生きていける世界を作る。」
我々は、誰もが自由に生きていける世界を作るべく、あらゆる選択肢を生み出し、提供し続けていきます。

techtecのビジョン

「好きな事を、好きな時に、好きな場所で、好きな人と、好きなやり方で。」
全てを自分の意思のままに、自由に決めることができる世界を作れたら、どれ程の笑顔を見ることができるだろうか、どんなに幸せだろうか。そんな理想の世界を作りたい、きっと作れる、我々はそう信じています。

techtecのカルチャー

「Challenge Growth」
どんなときも限界に挑み続けよう。貪欲に、大胆に、成長を第一に。
「Think Simple」
何事もシンプルに考えよう。重要なことはただ一つ、選択と集中。
「Be Yourself」
自分自身を、まわりを、そして世界を明るくしよう。笑顔と素直がキーワード。
「One for all, All for one」
一人はみんなのために、みんなでユーザーのために。

株式会社techtec's job postings
Anonymous
F66216b7 0db6 4aec bed5 9964d8268e6e?1529472734
8afb451e ae85 46ed b7ea c87d84f375ca?1552962684
F33a625c 83db 4763 a66b 4a1da62bfb82?1555339345
Be0a0850 a411 44ed adf7 e631edb03402?1560250547
Anonymous
10 Likes
Anonymous
F66216b7 0db6 4aec bed5 9964d8268e6e?1529472734
8afb451e ae85 46ed b7ea c87d84f375ca?1552962684
F33a625c 83db 4763 a66b 4a1da62bfb82?1555339345
Be0a0850 a411 44ed adf7 e631edb03402?1560250547
Anonymous
10 Likes

Weekly ranking

Show other rankings

Page top icon