NuxtMeetup参加レポート

NuxtMeetup#3に参加してきました。

経緯

ギョームでNuxtを使う事になったので、情報収集が目的で参加しました。

f:id:wan0228:20180609231939j:plain

開会の挨拶

f:id:wan0228:20180610122855j:plain

会場提供&主催のSCOUTER社*1のCTO@さんの開会の挨拶によりはじまりました。 ちなみにNuxtMeetupの次回開催は未定で、会場を提供してくれる人を募集しているとのこと。

発表

1人目は@さんのDjangoRestFramework/Nuxtでの認証周りの話。

最初に「Djangoを利用している人いますか?」という質問があり、周りを見渡すと2〜3人ぐらい手を上げていました。 もちろん私も手をあげました。

認証はnuxtjs/authを利用していると、hasScopeでスコープ分けできるのが便利だなと思いました。

2人目は@さんの nuxt/Storybook/dockerでの環境構築の話。

今回が初LTということで、初々しさが印象に残っています。

3人目は@さんの Nuxt/SSR で失敗しない為の話。

heymesh*2というサービスをVue(SPA)で一度リリースして、「SSRしたい!」という事でNuxtを採用したとのこと。 こういうパターン今後もっと増えそうですね。

4人目は @ さんのNuxtでオウンドメディア開発をする話

通常オウンドメディア立ち上げにはWordPress使うが、フロントエンドをJSだけで完結させたいのでNuxtを採用。

懇親会の様子

こういう会に参加するのは久しぶりだったんだけど、無料のmeetupでケータリングやアルコールが出るのは今じゃ当たり前なの?

おまけ。

感想

  • nuxtmeetpについて

    • 統括としてはLTや懇親会で色々な情報を集められ、ケータリング&NuxtTシャツのプレゼントも有り、非常に満足感が高かったです。
    • 懇親会でVueにbulmaをのっけた buefy*3 を教えてもらったので、早速プライベートの開発で使ってみてます。(bulma最高だからみんなbuefy使おうぜ!!)
  • Nuxtについて

    • この間までひらすら $.ajax().success.error を唱えていて、JSなんてまともに書いた事なかった人間が普通にフロントエンド開発できているのはNuxtのおかげだと思います。Nuxtもっと広まってほしい!

「融けるデザイン」の備忘録

融けるデザイン ハード×ソフト×ネット時代の新たな設計論

融けるデザイン ハード×ソフト×ネット時代の新たな設計論

最近私はサービスの新規開発をしているのですが、そこではよく「UX」という言葉を使います。私の「UX」の認識は「モダンな感じでストレスなくユーザーの痛みを解消する体験!」みたいにふわっとしたものでした。

例えば、ライブラリや自分で小さなサービスを作っている時に最初にビジネスモデル的な手順でペインとゲインをフィットさせるという事を行うとします。

ペインとゲインをフィットさせれば、必ずそこに手段が出現します。

その手段をどのような「UX」でユーザーに提供するのか、私は自分の知っている範囲内でしか考えられませんでした。(Googleでググった内容を取り入れてみたり、似た手段を模倣したりするなど)

なので作った物を説明する時に、私自身に強い思想があって設計した「UX」ではないので何かが喉元に引っかかるような感覚にいつも襲われていました。

さすがにその認識では今後の開発に支障をきたしそうなので、まじめに「UX」や「デザイン」を勉強しようと思いThe Guild代表の深津さんの読書バトンに書いてある本を全部読もうと思ったのがこの本に出会ったきっかけです。

note.mu

この本には、これからの時代にUXやデザインを設計する際の観点が書かれていて勉強になりました。

個人的にお薦めの話は4章に書いてある暗黙性とインターフェースの話です。 暗黙的な人間の活動にインターフェースを提供する事で、行動として顕在化させたり、アルゴリズムに置き換えたりできるという事をGoogleの検索アルゴリズムページランクを例として説明しています(リンクを貼るという行為に着目して意味を見出した)。

ここでは人間の行動の意味を知る為のインターフェース設計をしようという話が続くのですが、これは「リーンスタートアップ」や「リーン顧客開発」に出てくるインタビューのそれと同じです。 前者はインターフェースから、後者はインタビューを通してユーザーの行動を明らかにしています。

結局、良いUXを作るには「抱えている問題に対して、現状どのように向き合っているのかを明示化する」という作業が一番最初に必要なんだろうなと思いました。

他にも「良いUX」を設計する為に必要な観点などが書かれており、デザインやUXと言われるとちょっと弱い...という私みたいな人が読むと少しは「UX」が理解できると思います。

以下は私の備忘録用の用語集です。

  • 道具の透明性

    • 道具を利用している最中にそれ自体を意識しないで済む状態、または意識しなくなる現象、良い道具は透明性が高い
    • 例: ハンマーは手に持つとそれを意識せずに釘を打つ事に集中できる f:id:wan0228:20180507160449j:plain
  • アフォーダンス

    • 人の無意識に注目したデザイン
  • ものづくりのインターフェース

    • モノと人との境界面(ここで言っているモノとは現代では情報も含まれる)
    • 現代のインターフェースは複雑である
      • 石器時代: 人間 -> 道具 -> 対象
      • 現在: 人間 -> 情報処理 -> 機械 -> 対象
  • 自己帰属感

    • ユーザーの動作の結果がほぼリアルタイムに近い形でユーザー自身にフィードバックされ、現実世界と画面の向こう側の世界との境界がなくなり、その結果として画面の映像が身体の一部のように感じられるあの感覚

medium.com

  • 知覚行為循環

    • 情報が人の動きをコントロールし、人の動きが情報をコントロールするという生態心理学的な概念、知覚と行為を入力と出力の様に分けて考えるのではなく絶えず循環しているものとする考え方
  • 経験価値(カスタマー・エクスペリエンス)

  • 設計

    • 「思想や視点の集積」であり考え方
  • iPhoneは非常に滑らかに動くがあそこまでする必要性は?

    • 「 指とグラフィックとの高い動きの連動性が道具的存在となり、 自己帰属感をもたらす。 そしてその結果、道具としての透明性を得るためだ」
  • UX

    • 環境の価値を行為が引き出す → 人や動物が「可能」を知覚 → 次の行為へ → 行為を拡張する道具が存在 → 別次元の「可能」を知覚 →... という循環
  • 良いUX

    • 良いUXは「可能」を知覚させる。良いUXを設計するにはとにかく自己帰属させる
  • ハイデガーの理論(道具的状態と事物的存在という考え方) 

    • 道具的状態: 透明の状態 
    • 事物的存在: 透明ではない状態(対象として認識がある) 
      • 例: キーボードを入力中は道具的状態だが、なんらかの問題で入力した文字がすぐに表示されないとキーボードが「引っかかる」という属性をもって現れる(事物的存在)

バリュープロポジションデザイン読書会の備忘録

前回、「ビジネスモデル・ジェネレーション ビジネスモデル設計書」の社内読書会*1を行いましたが、 今回はこの続編である「バリュープロポジションデザイン」の社内読書会を行いました。

バリュー・プロポジション・デザイン 顧客が欲しがる製品やサービスを創る

バリュー・プロポジション・デザイン 顧客が欲しがる製品やサービスを創る

  • ビジネスモデルジェネレーション(以下BMG)
  • バリュープロポジションデザイン(以下VPD)

内容

内容は以下の4つの章で構成されています。

  • canvas

    BMGで紹介されていたビジネスモデルキャンバスの「顧客セグメント」のブロックと、「価値提案」のブロックにさらにフォーカスした「バリュープロポジションキャンバス」というフレームワークが登場します。

    それぞれ「事業の価値創造を助ける」のがビジネスモデルキャンバス、「顧客の価値創造を助ける」のがバリュープロポジションキャンバスという位置づけです。

  • design

    canvas」で登場した「バリュープロポジションキャンバス」を使って顧客を理解して価値提案を形作り、適切なビジネスモデルに落とし込むプロセスの説明がされています。

  • test

    価値提案の検証を正しく行う方法が記載されており、それによってアイデアから現実のビジネスまでの進捗を段階ごとに測るといった事が説明されています。

  • evolve

    実際の組織(コミュニティ)においては「バリュープロポジションキャンバス」と「ビジネスモデルキャンバス」を共通言語として使い、成功にあぐらをかかず、新しい価値提案とビジネスモデルを生み出していきましょうという事が書いてあります。

感想

社内では「Read for Action」*2の手法で読書会を行っています。

まず初めに本の全体像を掴む為、ざっと目を通します。そして内容を3つのポイントにまとめ各自発表します。

男性陣の発表は章をポイントとして全体像の説明を行ったのに対し、女性陣は章関係なく本全体の内容を3つのポイントにまとめて発表していました。 男女でこんなにも物の見方が違うとは思わず、感動しました。

本の感想としては、記載している言葉を使わず絵や図で表現している部分があり若干理解しにくかった部分もありますが、BMGの続編との事で、全体的に読みやすいと思います。

今回「canvas」の章で登場した「バリュープロポジションキャンバス」は一言でいうと、「顧客」のニーズと、自分達が提供する「価値」が合致しているか検証を行うフレームワークだと私は思いました。

実際のビジネスではBMGの「ビジネスモデルキャンバス」でビジネスモデルの要素を描き出し、ビジネスプランとして成立しているか検証を行う一方、VPDの「バリュープロポジションキャンバス」を使い、自分達が提供しようとしている価値は本当に顧客に受け入れられるのかという検証も行うという進め方が良さそうです。

「design」、「test」の章では価値提案のライフサイクルに応じた検証手法や管理手法が記載されており、実際に価値提案を行った際、この手法をそのまま行うだけで正しい検証を行えるのではないかと思う程事細かに記載されています。

また今回VPDを読んだ事で、正しい検証や管理を行う事はやはり大変重要だと認識を深めました。

意外とこの部分に関してはリソースや制約、過去の慣例に縛られて正しく行う事ができないのが現状なのかなぁと思っています。(最近だとサービスローンチ後一日も持たずしてサービスを一時停止した「CASH」*3というサービスがいい例だと思います:p)

実際にバリュープロポジションキャンバスを使ってみる

以下の図がバリュープロポジションキャンバスです。

左の図が「バリューマップ」、右の図が「顧客プロフィール」という名称です。

f:id:wan0228:20170710234233p:plain

バリューマップの要素
  • 製品とサービス: 価値提案を元に作られる製品、サービス
  • ペインリリーバー: 製品とサービスを通してリスクと障害を排除し、顧客の悩みを和らげる方法
  • ゲインクリエーター: 製品とサービスを通して顧客が必要とし、恩恵を得る方法
顧客プロフィールの要素
  • ペイン: 顧客が避けたい悪い結果、リスク、障害
  • ゲイン: 顧客が必要とし、期待、夢見る結果や恩恵
  • 顧客の仕事: 顧客がその仕事で必要とし、求め、成し遂げたいと望むもの

以上がバリュープロポジションキャンバスのざっくりとした説明です、今回はこれと前回作ったメルカリのビジネスモデルキャンバスを統合する形にしたいと思います。 以下の図は「バリューマップ」と「顧客プロフィール」をそれぞれメルカリのビジネスモデルキャンバスに紐付けた図です。

f:id:wan0228:20170710234726j:plain

ここからは実際にネットで色々メルカリの事を調べてバリュープロポジションキャンバスに落とし込むという作業を行いました。

今回は既に成功(顧客に受け入れられている)しているサービスかつ、後付でバリュープロポジションキャンバスに落とし込んだ為、「バリューマップ」と「顧客プロフィール」の要素はほとんど合致している状態になっている事が以下の図でわかります。

f:id:wan0228:20170711003922j:plain

また、本来ならばメルカリのビジネスモデルキャンバスの「顧客セグメント」には「商品を欲しいと思っている人」という顧客も存在しているので、こちらもバリュープロポジションキャンバスに落とし込み「価値提案」と「顧客プロフィール」が合致しているか検証が必要ですが今回は省略しました。

実際にバリュープロポジションキャンバスを使ってみると、落とし込む要素がペインなのかゲインなのかと迷う事が多々有りました。 これは出来る限り具体的にペインとゲインを定義する事で解決可能だと思います。

例えば「オークションサイトはトラブルが多いので怖い」というペインは「トラブルが少ないオークションサイトでうれしい」というようなゲインになりそうですが、そもそも「オークションサイトはトラブルが多い」という前提はあるべき姿ではないのでペインに置くべき要素です。

逆に「消費税がかからないのでうれしい」というゲインは「消費税がかかって自分が売る商品の値段が高く見えて嫌だ」というペインになりそうですが、「消費税がかからない」というシステムは個人間売買であるという枠組みで成り立っている事を考えるとゲインにあるべき要素というような感じです。

まとめ

今回VPDをを読んだ事で、BMCの「顧客セグメント」と「価値提案」の部分について、より一層深い理解が得られました。

製品開発やサービス企画の段階では「このアイデアは本当に顧客に受け入れられるのだろうか?」という悩みがあると思いますが、バリュープロポジションキャンバスを描く事で、提供しようとしているサービスと顧客のニーズが本当に合致しているか検証を行え、より洗練されたバリュープロポジションを生み出す事が可能です。

また、VPDやBMGのフレームワークの仕組みに乗っかかる事で、価値を検証して顧客に届けるというイテレーション高速 で行える為、ニーズがすごい速さで変化していく今の時代にこそ必要な方法論だと思いました。

*1:http://wanshotbar.hatenablog.com/entry/2017/07/10/214152

*2:「Read for Action」 とは知識の発見と内容の共有に重きを置いている読書会の手法ですhttps://www.read4action.com/

*3:http://toyokeizai.net/articles/-/178845

ビジネスモデル・ジェネレーション読書会の備忘録

先日、「ビジネスモデル・ジェネレーション ビジネスモデル設計書」の社内読書会を行いました。

ビジネスモデル・ジェネレーション ビジネスモデル設計書

ビジネスモデル・ジェネレーション ビジネスモデル設計書

内容

この本は、ビジネスモデルの要素を解説し、どのようにイノベーションを生み出す事ができるのか書かれています。 以下の5つの章で構成されています。

  • キャンバス(Canvas)
  • パターン(Patterns)
  • デザイン(Design)
  • 戦略(Strategy)
  • プロセス(Process)

本の感想

全体的に図や絵での説明が多く読みやすい本でした。

特に素晴らしい部分は、第1章の「キャンバス」で、「ビジネスモデルキャンバス」というビジネスモデルを記述、分析、デザインするためのフレームワークについて説明しているところです。

具体的にはビジネスモデルを9つのブロックに分ける事で、ビジネスモデルという抽象的な概念を具体的に表現し、その理解を深める事が可能になったためです。

また、第3章の「デザイン」では「デザイナーのビジネスは新しいものを生み出す厳しいもの」と前置きし、思考の限界を拡張して「まだ存在しない何か」を想像する力をビジネスモデル開発に活かそうという内容です。

その中で「最初のアイデアと恋に落るな、より洗練された恋(アイデア)を探求せよ」(意訳)というような一説が記載されており、いかにも短絡的な私が陥りそうな罠の回避策が記載してあり、深く胸を打ちました。

実際にビジネスモデルキャンバスを使ってみる

勉強の為に「フリマアプリ」最大手のメルカリのビジネスモデルをビジネスモデルキャンバスに落とし込んでみました。

  • 黄色がリリース時で、赤色は現在です。

f:id:wan0228:20170710213755j:plain

相互に依存した「商品を売りたい人」と「商品を買いたい人」という顧客グループを引き合わせ、仲介者として価値を生み出すところからビジネスモデルパターンはマルチサイドプラットフォームだという事がわかります。

マルチサイドプラットフォームの価値は、別サイドの顧客グループの数に実質的に依存している為、一つの顧客グループを支援しなければならないのですが、メルカリが取った戦略も「3分で出品できる」という、「自分のいらなくなったものを売りたい人」という一つの顧客グループの支援から始まっていました。

また、ここまでメルカリが爆発的に普及した理由として以下2点が上げられます

  • 2013年7月にメルカリが登場するまで、それまでのECサービスとしてよく見られていた「マーケットプレイス」というBtoBやBtoCメインのサービス提供方法を「フリマアプリ」として手軽にCtoCが行えるような価値提案を行った。

  • オークション市場のプラットフォームを担っていたYahooオークション等の面倒な部分を排除した事で、そのプラットフォームが抱える顧客グループを取り込めた事でネットワーク効果を最大限に受益した。

このようにビジネスモデルキャンバスに落としこむとメルカリの場合、ビジネスモデルイノベーション震源地はキャンバスの「価値提案」の部分から発生する「価値提案主導」と「顧客セグメント」の部分から発生する「顧客主導」だと分析できたり、「とりあえず仲介手数料で稼いでいるんでしょ」というイメージから視覚的にメルカリのビジネスモデルの理解を行う事ができました。

まとめ

ビジネスモデルキャンバスに落としこむ事で、アイデアに足りていないブロックを埋めたり、よりアイデアを洗練させたり、ビジネスモデルを具体的に説明する事が可能になるため 「ビジネスのアイデアはあるけどそれをどのように形にしていいのかわからない」というような人にとっては大変参考になる本だと思いました。

今後このビジネスモデルジェネレーションの手法を使って私もアイデアを形にしてみようと思います。