夜中に書いて朝読んで恥ずかしくなるブログ

がんばっておかねをかせぐぞ

ユーザーとチームメンバーとプロジェクトの間で取るべきバランス

今日、こんな話を聞いた。

「この前、最寄り駅でホームへの登りエスカレーターに乗っていたんです。エスカレーターを降りようと思った時に、降り口の前を杖をついたおじさんが横切ろうとしていたんです。それで、私気を遣って一瞬降り口すぐで止まったんですよ。そしたらエスカレーターですぐ後ろに続いていた別のおじさんが舌打ちしながら私を突き飛ばしたんです。もちろんよろけたんですが、杖をついたおじさんにぶつからないようによろけました。でも、誰からも感謝とかそういうのはないんですよね。私だけモヤモヤしちゃった。」

 

これを聞いて、直近の私の状況と被るものを感じた。

「ユーザーに会うと、その人たちが好きなものをよく知ることができる。こんなグラフィックっぽさを入れたデザインにすると、もっと喜んでくれると思うな!作りたい!作ってチームの人に見てもらおう。」

「リリースが近づくと、どうしても割くことができるリソースが限られるな〜。色々提案したいけど、簡単にできるものでまずは検証したいよな〜。」

「1%でも納得できないものは世の中に出したくないな。でも時間もリソースもないんだよね。。。簡単に変えられるものってなんだろう。どうやったらそれが伝えられるかな?」

「あれ、なんかデザインについて伝えたいことすら伝わってない...?」

今まさに、私は「ユーザー」「チームメンバー」「プロジェクト」の間に立っている状況でバランスがうまく取れていない。それで頭の中でしっかり話がまとまらず、伝わらないことも多いのだろう。まさに「私だけモヤモヤしちゃった」状態である。

 

一番はじめに書いた駅のホームの話では、客観的に考えると「杖をついたおじさん」も「エスカレーターの後ろにいたおじさん」も別に悪くない。

悪いのは、杖をついたおじさんをエスカレーターの降り口ど真ん前を横切らせるホームの設計にある。杖をついているおじさんは世の中に1人だけではないのだから。

 

さて、現状、私は「ユーザー」「チームメンバー」「プロジェクト」の間に立っている状況である。普通に考えれば「ユーザー」に喜んでもらえるものづくりが1番であることが明白である。そこから逆算していけば「チームメンバー」「プロジェクト」への頼み方も変えられそうだ。

いつも客観的視点で、どこに重心が傾いているのかを修正する必要があるのだろう。

 

 

とにかく精進あるのみである。

 

理系大学卒のデッサン描けない奴がグラフィックデザイナーとして半年働いた時の学びメモ

今回の記事の意図

メモです。ちゃんと読んでもらう気はない。

 

デッサンとは

- 観察眼を持つこと

- 観察したものを形にすること

- 「光の量」を線で表現すること

- 「質量」を線で表現すること

- 密度を線で表現すること

 

レイアウトとは

- きれいなレイアウトには決まりがある

- きれいなレイアウトは言葉で言い表せる

- きれいなレイアウトは図式できる

- 人によってはきれいなレイアウトの法則をもっている。優れた人にそれは多い

 

1つのグラフィックを作る時

- そのグラフィックの分野の歴史を読む

- 歴史に沿って、自分の好きなレイアウトパターンを使用し画面を割る

- 奥行きを考える

- 光を考える

- 矛盾を加える。この矛盾が理解できない人は信用してはならない。(少ない経験だが、本当にそうだと思った。)

- シメる

 

Photoshopの機能に甘えない

盛ればそれっぽくなる。けど、素人だとばれやすくもある。

レイヤー効果に甘えてはならない。

ペアデザインがうまくいったからやり方まとめた

導入

巷で話題のペアデザインですが、色々な参考記事がアップされております。

What does Pair Design look like? | Cooper

Pair design - O'Reilly Media

だども最初は絶対うまくいかない。頭の中にふわふわと浮かぶ...以下の論文...(話は聞いていたけど怖くて作業の最中はちゃんと読まなかった。)

The Collaboration Paradox: Why Working Together Often Yields Weaker Results - 99U

でもなんとか相手の協力あってうまくいったので、ちょっとやり方をまとめてみました。

 

なぜペアデザインをやろうと思ったのか

- もともとあったデザインを理解するのに「会議」「mtg」をしたりデザインの手法を時間をかけて教わったりするより、エンジニアがやってるペアプログラミング的な作業を通したコミュニケーションができないかと考えた

- デザインレビュー、全体(企画)レビューの2回通すより、デザイナーで合意をとりながら作業し1回のレビューを減らせないかと考えた

 

やり方

今回やってみたデザインの領域

ワイヤーフレームができている状況で、アプリのビジュアル画面に落とし込む作業。

 

必要なもの

- 作業用PC ( もちろんSketchなどの作業環境が整っているもの。 )

- 2人の間にモニター1台

- 実機で確認できる環境

- 紙とペン or ホワイトボードとマーカー

 

役割

- ジェネレーター : ビジュアルデザイナー。作業者。手を動かす。アイデアも出す。

- シンセサイザー : アートディレクター(いい例えがない)。PCは使わない。ジェネレーターのデザインに横で口出しする。アイデアや代替案を出す。

 

流れ

1. ベンチマークを集める

2. ベンチマークスクリーンショットを作業画面いっぱいに配置

3. 「今回はこのベンチマークを真似して作ります」と合意をとる

4. ジェネレーターは作業をする。シンセサイザーはジェネレーターが終了するまで口出ししない。ジェネレーターは作業中に口出しされたらちゃんと「作業中です」と言わないと喧嘩になるし、シンセサイザーにジェネレーターが作業内容を報告しないと喧嘩になる。

5. ネクストアクションを決め、また作業に取り掛かる。シンセサイザーは機能要件面についても確認しつつ進める。実機で確認しつつ作業する。

6. ある程度まで作ったらどちらかがデータの清書をする。

7. 完成

 

ポイント

- 今行なっている作業に関するゴールの提示

- つよいこころ

- 学びの姿勢

- 眠気が生じたら休憩する

- 相手に伝える内容は簡潔に、わかりやすく、共通言語を作っていくイメージで。

マッピングを区別したいメモ

日本語の記事だとたまに「カスタマージャーニーマップは別名エクスペリエンスマップという」とか書いてあるが、本当は違うらしい。などなど、マッピングの区別が色々ややこしいのでまとめたメモ。 これ参考図書 これも参考図書

ユーザーとの関わりをマッピングする

サービスブループリント

サービスの流れを図示したもの

ストーリー インタラクション 個人 組織
時系列 接点 行動、思考、感情、ペインポイントなど 体験の創出に関わる部課とその役割

f:id:chiyukiokabe:20180425001710p:plain

カスタマージャーニーマップ

個人が組織の顧客として体験する事柄を図示したダイアグラムのこと。特定のサービスの顧客としての個人との関係を示す。

ストーリー インタラクション 個人 組織
時系列 接点 行動、思考、感情、ペインポイント システムの物理的・社会的アーティファクト、チャンス

f:id:chiyukiokabe:20180425001726j:plain

エクスペリエンスマップ

所定の分野や領域における人の体験を図示したもの。顧客体験をソリューションから切り離す効果がある。 いい図がない!!!!!!

ストーリー インタラクション 個人 組織
時系列 インタラクションの境界 行動、物的エビデンス 舞台裏の当事者とプロセス

f:id:chiyukiokabe:20180425001741j:plain

メンタルモデルダイアグラム

人の言動、感情、動機を広範に検討するためのダイアグラム

ストーリー インタラクション 個人 組織
階層 中央線 タスク、感情、考え方 支援---利用可能な製品とサービス

f:id:chiyukiokabe:20180425001754j:plain

空間マップ

人の経験を空間的に表したダイアグラム。いい図がどこにもない!!!!!!

ストーリー インタラクション 個人 組織
空間 矢印つきの中間点 行動、ニーズ、情報フロー データシステム、部課

戦略をマッピングする

戦略マップ

組織戦略の全体像をひとつの図で示す

業務プロセスの視点

組織全体の能力と能率を反映した目標を設定する。

顧客の視点

価値提案のための視点。顧客が利得として感じるものを明確化できる。

財務の視点

組織の財務的成功という視点で見出した価値を軸とする上層部の目標。

f:id:chiyukiokabe:20180425001808g:plain

戦略キャンバス

既存の戦略を診断して代替案を案出するための視覚系のツール。

f:id:chiyukiokabe:20180425001843p:plain

UX戦略ブループリント

戦略的根拠を可視化するツール。 以下の図を見てもらうとわかりやすいかも...

f:id:chiyukiokabe:20180425001856p:plain

ビジネスモデルキャンバス

みんな知ってるやつ。

f:id:chiyukiokabe:20180425001903p:plain

バリュープロポジションキャンバス

ビジネスモデルキャンバスを元に作られた、誰のために価値を創出したいのか、顧客を引きつけると思われる価値提案は何かを掘り下げるもの。 デザイナー向けのビジネス戦略マッピング、として本で見る機会が多い印象。

f:id:chiyukiokabe:20180425001931p:plain

たまに出てくる「タッチポイント」についての注意点

ZMoT

Zero Moment of Truth の略。 口コミによって、他の消費者の使用体験を参考にできるようになったよね、という内容。 成功する企業は対象市場との対話を欠かさない。自社のメッセージを送って「買ってください」と訴えるのではなく「信頼できるアドバイザーであること」を自分たちの任務であると考えている。

JTBD

Jobs To Be Done の略。 やるべきこと、顧客の切実なニーズ。「人はJTBDを満たすために、お金を払って製品やサービスを雇う」という考え方を一般に広めた。

機能的側面

JTBDを満たすためになすべき目の前の実際の作業

感情的側面

JTBDを満たすための行為をしている最中に持ちたい(と本人が望む)感触や印象

社会的側面

JTBDを満たすための解決策を実践している最中に、周囲の人々の目に映る(と本人が考える)自己イメージ

いいこと書いてあった

成功が見込まれる製品を市場に出せるのは、「顧客そのもの」ではなく「顧客を巡る文脈」に焦点を当てて製品開発をする企業だ。言い換えると、分析の最重要単位は「顧客」ではなく「顧客を巡る文脈」なのである。

デザインのトンマナ会議って意外と大事

デザイナーがスタートアップで途中ジョインするorジョインしてきた時でも、大人数プロダクトに新メンバーがジョインする時でも、デザイナーによるトンマナ会議ってスキップされがちですが意外と大事だと思います。

 

私が最低限必要と思うトンマナ会議のゴールは以下です

  • デザインのコンセプト、あるいはトンマナを言語で一言で言えるようにする(プロダクト全体のコンセプトと決して同じである必要はないと思います。)
  • Pinterestやら共有フォルダやらなんでもいいので、参考になりそうなビジュアルをまとめる(イラスト、写真、UI、LP、フォントなど、なんでも混ざっているのが理想。ビジュアルボードにすると内容が洗練されていくのでおすすめです。)
  • OKゾーン、NGゾーンを作り、それぞれ色、形、フォント、使用するモデルなどを差別化する。

あとはそれらを元に、作ったデザインを言葉で説明できるようにし、コンセプトと交えて他のデザイナーとデザインレビューなり批評をしていけば良いと思います。

 

大元のプロダクトでのデザインの参考にすること以外にも、派生プロダクト作成時の最低限守るべき内容、広告作成時に守るべき内容、外部プロダクトとのコラボ時に先方との打ち合わせでの説明時に使用する言語材料など、デザインを言語化、ビジュアルボード化しておくだけで他のmtgに役に立つことが多いかと思います。

 

「なんとなく伝わるでしょう」って実は一番恐ろしいことで、どんなに同じ環境で育った人だとしても多少は視点がズレていると思っています。そのズレは最初こそ目立ちませんが時間が経つたびに大きな負債となっていく。。。その前に、早い段階での会議/決定がストレスフリーかつ楽しくデザイン作業ができると思ってます。

 

よく言われていますが、自分が作ったもの、作るものの言語化ってホント大事、と身にしみる日々です。

たまに自分のデザインすら説明できないときありますからね...夜中ですが反省しました。

マテリアルデザインとバウハウスの教育概念

マテリアルデザインガイドラインをちゃんと読むと、バウハウスでの教育内容に近しいものを感じる。

 

バウハウスでのグラフィックの構成についての教育内容の1つに「色、形、大きさで平面の中にも距離感、動きが生じる」というものがあるそうだ。ブルーノ・ムナーリに師事を仰いでいた方の情報なので、明記した文献をちゃんと探して読んだ訳ではないが、パウル・クレーの絵画や研究内容からも垣間見れるものがある。

f:id:chiyukiokabe:20180119092101j:plain

 

モンドリアンの代表作のコンポジション上記内容に反し、「絵画は平面でなければならない」という思想の元描かれている。

f:id:chiyukiokabe:20180119092240j:plain

 

さて、マテリアルデザインについてだが、ガイドラインの最初に以下の文章が記されている。

 

時代を超えて共通する優れたデザインの原則と、科学技術の革新性と可能性とを融合させた視覚言語を作り出します。

 

上記内容からもわかるように、著者はおそらくバウハウスをはじめとする過去のグラフィックの歴史を参考にされていたのだろう。

さらに次項以降、全体的に目を通しざっくりまとめると

  • マテリアルデザインでグラフィックの構成要素とされるのは幾何学的な形である。
  • 構成要素がもたらす動きや3D的な配置にユーザーの行動を絡ませる
  • Android端末にて表示されるアプリ」というカテゴリに括られた際のアプリ全体のトンマナとして、要素のテクスチャ的メタファーや細かな決まりを明示
  • 細かな部分にも構成要素や3D的配置のルールを指定

以上4点が見受けられた。

 

バウハウスでは、色に関しては「赤が手前、青が奥」形に関しては「小さいものが手前、大きいものが奥」動きに関しては「流れが右から左にあるのはこの構成」など、色や形や構成がもたらす動きについての研究がされていたこともあり、本当にきちんと概念を理解するためには「構成学」を学ぶ必要があると考えられる。

現代の美術に関する初等教育内容とされるデッサンには「観察眼」を養うという目的があるそうだが(もちろん他にもあるだろうし、私がほぼデッサン未経験のため恐縮だが又聞きである。)ゲシュタルトで言われる「図と地」の関係を肌で感じ理論を理解するなど、非常に優れた教育内容であるとされている。

上記美術史を踏まえ、ちゃんとした美術教育を受けた方が再度ガイドラインを読むと理解が深まるのではないだろうか。(私はその分文献を多量に読む必要がありそうだ)

 

まとめ

  • 細かなルール(数字で明記されているものなど)に関しては逐一ガイドラインを確認の上デザイン作成を進める必要がありそう
  • NextActionとして、この本から概念の理解を進めていこうと思う。