PMにデザインツールの使い方を共有したら、作業効率と精度が飛躍的に上がった話。

こんにちは、メルペイデザイナーの東野です。

デザイナーの皆さんは、普段の業務でディレクターやPM（プロダクトマネージャー）とのやりとりをどのように行っていますか？

私たちのチームでは、デザイン・ワイヤーフレーム作成ツールとして、Sketchを使っています。そのため、Sketchを介して、PMとデザイナーがコミュニケーションをとる場面が多くなります。

そんな中、PMのとある一言がきっかけとなって、Sketch共有会を開くことにしました。今回の記事ではそこからの学びを共有します。

きっかけの一言

きっかけはPMから、思いもしなかった一言を聞いたことでした。

まず、シンボルを解除することからはじめます

Sketchをご存じない方にとってはなんのことやら？ですが、シンボルというのは、デザインの骨格にあたるパーツのようなもの。それを解除してしまうと、デザインの基盤が崩れかねません。

ツールの使い方を我流で覚えている人も多いので、こういった認識の齟齬は、珍しいことではないのです。だからこそ、ツールに関する共通認識を持つことで、コミュニケーションや制作のコストが下がり、業務のなめらかさにもつながる！と考えました。

こんなきっかけで、共有会を開催することになりました。

共有会の内容

基本編では、Sketchの基本情報、できることなど、以下のような情報を共有しました。

基本編
・Sketchとは？
・なぜSketchが浸透したのか？
・Sketch以外のドローイングツール、プロトタイプツールの紹介
・Sketchの画面構成
・アートボードの役割
・書き出しの種類
・プロトタイプツール（InVision）との連携
・シンボル化について

実践編では、Sketchを触りながら、ツールの使い方を実際に見てもらいました。

実践編
・アートボードの配置
・オブジェクトの作成
・オブジェクトのシンボル化
・シンボルの変更から反映
・オブジェクトを複数方法で書き出し

デザイナー視点の共有

基本編と実践編の内容に加え、私たちデザイナーが何を考えてどのようなプロセスでデザインを行っているのか＝「デザイナーの視点」を、PMの皆さんに共有しました。それを理解してもらうことで、より円滑に仕事を進められるからです。

デザインをするときに必要な情報の種類や粒度、Sketchファイルを作成する上で意識しているポイント。そういったものをトピックスごとにお話しました。

一番達成してほしい目的は？
画面・機能単位の目的を明確に。情報の優先度についての認識合わせ。

必要な要素は？
画面を構成する要素には、タイトル、テキスト、ボタン、画像、アイコンなどがあること。デザイナーがよく言う「要素はなんですか？」というのはこれらのこと。Atomic Designの概念についても補足。Atomic（原子）にあたる部分が要素。

文脈にあった構造（画面遷移）になっているか？
アプリの画面遷移の種類は主に、プッシュ（階層型）、モーダル（分岐型）、タブ（並列型）の3つ。表示したい情報と文脈を理解することで、適切な画面遷移を設計できる。

機能仕様がUIにどう影響するのか？
情報の取得タイミングなど、実装上の仕様が、UIに影響する。例として「絞り込み」と「検索」の違いについて説明。

Sketchの使い方共有会は、およそ30分で終了。

この時間を割いたことで、後々の作業効率が飛躍的に上がり、プロダクトを形作る上での精度も増しました！

PMからの感想

この会に実際に参加したPMからの反響には、こんなものがありました。

「メルペイにおける、デザイナーとのコミュニケーションのためのSketchの使い方が知ることができた。」

「ここまで知ればPMの業務上は問題ない、というレベルがなんとなく分かった。」

「なるべく手戻りを少なくしたいフェーズで、（効率の良いアウトプット方法として）最低限必要な情報は何か？を知ることができた。」

「どこまでをデザイナーに任せて、どこまでをPMで決めるべきなのかが分かっていない部分があった。PMが決めるべきこと、留意しておくべきことが明確になって良かった。」

「単に依頼するだけではなく、デザイナーと密にコミュニケーションを取りながら設計していくのが良い、と思った。」

などなど。

ツールの使い方を共有できた以上に、同じツールを使う上で曖昧になりがちな作業範囲について、改めてコミュニケーションができて良かった！

便利なツールによってポジションごとの境界線が薄れていく中でも、業務をなめらかに進めていくためには、共通認識と責任範囲の明確さが必要だということを、再認識することができました。

最後までお読みいただき、ありがとうございました。

企画・執筆：東野 雅也

東野 雅也 プロフィール
2006年4月、株式会社キノトロープに新卒デザイナーとして入社。2008年6月、グリー株式会社でSNS、グローバルプラットフォームを担い、シニアマネージャーとしてマネジメントに従事。2014年7月、クービック株式会社にてクリエイティブディレクションを担当。2018年7月、株式会社メルペイに入社。