読者です 読者をやめる 読者になる 読者になる

Yamotty Blog

プロダクトマネージャーの雑記

プロダクトマネージャーがデザインをやりだすまで

f:id:yamo3:20160105093539p:plain

背景

  • webとアプリ作りかえたいけど仕様とUXをデザインする人がいない
  • デザイナー探すも、フィットする人を見つけるのはエンジニアより大変かも。
  • サービスを考える人(=PM)がユーザーの動きだけではなく見た目・使い心地も含めた「設計」をすることに

まず環境を揃えた

ツールを2つ揃え、使い込むことから始めました。 (今回デザインする対象はモバイルのウェブとアプリ)

ドローイング:sketch

ドローイングツールにはadobeを捨ててsketchを選択。

きっかけ

  • 社員の知人エンジニアが1日見ただけでアプリロゴ作ったと聞いてテンション高まる。
  • またwantedlyの速習会の記事を読んでなんとなく使いやすそうと思ったのもきっかけの一つ。こういう「使いはじめることのハードルを下げてくれる」記事って初心者にすごいいいなと思いました。

デザイナーとエンジニア間のコミュニケーションコストを下げる試み - Wantedly Engineer Blog

デザインツールを使ったことのないエンジニアが多かったので、アートボードの作り方から解説をしました。
基本的には導入を丁寧にやってある程度からはトライアンドエラーの繰り返しがツールをの使い道を身につけるにはいいと思っています。
なので、スライドでは基礎の操作方法の解説が終わったら難しめの課題を出して、試行錯誤をしてSketchを使ってもらう形になっています。
使い方の特徴としては実装するところに重点を置いて、Sketchファイルを作っていくところです。

またsketchは初心者が始めるにはいい教材(youtubeのチュートリアル)がある。 僕はこれを見て2hくらいで使い方は一通り覚えてあとは実践という流れで習熟していきました。

www.youtube.com

デザインコミュニケーション:zeplin

エンジニアとのコミュニケーションツールにはzeplinを。

当初は作成したsketchファイルをそのままエンジニアに渡していたのですが、

  • 装のためのコミュニケーションに一つのボトルネックがあることに気づく
  • →それ、zeplinで解決できます

という流れでzeplinを最近導入しました。freeeさんが使っているらしいというこの記事もzeplinでなにができるかを理解するには分かりやすかったです。

taninno.github.io

個人的にzeplin素晴らしいなと思う3点

  • sketchからのインポートが一瞬
  • エンジニアにマテリアルのサイズやら間のピクセルやら、押下領域やら、すべて数値で見せることできる(→そのため自分も意識して作るように変わる)
  • マテリアルごとにコメントつけてコミュニケーションできる。いつもはsketch開きながらslackでコミュニケーションしてたので超楽

zeplinはあくまでデザインを含むプロジェクト管理ツール

まだ使い始めたばかりだけど、考えた仕様をできるだけ早く、理想的なデザインに落とし込めるsketchと実装のボトルネックとなるコミュニケーションをはかどらせてくれるzeplinはプロダクトマネージャー(PM)の必修科目になりそう。

まとめ

というわけでPMがデザインをやり始めるまでを書いてみました。 ほとんどツールの説明な気もしないでもないが…

とっつきにくかったりわかりにくいものをわかりやすく説明するのもPMの仕事の大部分だと思うので記事的にはおkとする。

  • sketchはちょっと高いけどweb/アプリのインターフェース作成に特化しているので細かい機能が秀逸です。adobe CCと比べると買いきりだし個人でも手が出しやすそう
  • zeplinは1プロジェクトのみなら無料で使えるので、プロダクト少ないうちは十分。どんどん使うといいと思う。使うほど離れられなくなるコミュニケーションツールあるあるで課金ハードルも低そう