レベルの違うデザイナーチームでの制作
メンバー同士のレベルが違うチームで、どうすれば一定の水準を保てるかを考えていたので書いてみます。
目次
1. 前提
2. 作るコンポーネントの粒度とデザイナーのレベルを対応させる
3. このやり方のメリット
4. 具体的な例①
5. 具体的な例②
6. 副次的な効果
7. まとめ
8. おまけ
前提
メンバー同士のレベルが違うと書きましたが、イメージとしては
・新人デザイナー
・プロダクトにある程度責任を持っているデザイナー（以降、シニアデザイナーと呼ぶ）
が数人ずついるチームで、全員制作をしているという環境です。
完全に指示を出すだけのマネージャーはあまり想定していません。
作るコンポーネントの粒度とデザイナーのレベルを対応させる
UIのデザインにおいてコンポーネント指向は十分に重要視されているものとして細かい説明は省きます。
ざっくりと、Atomic Designのorganisms以前の工程をシニアデザイナーの領域、organisms以降の工程を新人デザイナーの領域とするイメージです。
シニアデザイナーがatomsやmolecules, organismsまでを作り、新人デザイナーはそれらを組み合わせて画面（=templates, pages）を作る。というやり方です。
図ではorganismsが両者とも被っているのは、場合によっては既存のmoleculesを組み合わせて新たなorganismsを作ることなら有りかな？と考えたためです。
このやり方のメリット
大きく分けて
・質の担保
・レビューが容易
・スピード向上
の3つがあります。
質の担保は、シニアデザイナーが作った整ったコンポーネントを組み合わせてページを作るので新人デザイナーでもよっぽどの事故は起こさないことです。そして、新人さんとしても全てを1からこねくり回すよりも「コンポーネント自体を改変しない」とルールがある方が迷いが減ります。
レビューについても、1から全てを任せた場合に「これ、一体どこから突っ込むべきか……」と迷うものが上がってくる可能性があります。ですがコンポーネントが既定されていれば
・選んだコンポーネントの種類が適切か
・コンポーネントのレイアウトが適切か
の2つを見れば大体は賄えます。
スピード向上はあまり言わなくても伝わりそうですが、車輪を再発明し続けるよりも有るものを組み合わせて作る方が確実に早いです。
具体的な例①
少しだけですが具体的な例を示しながら進めます。以下のようなコンポーネントが既に存在するプロダクトがあったとします。
ここで「新着記事が最新3つ出ていて、『続きを見る』ボタンを押すと記事一覧のに飛ぶようなページを作る」というタスクが生まれました。このタスクを新人デザイナーさんに任せてみたところ、このようなカンプが上がってきました。
セクションタイトルと、1カラム用のカードと、ソリッドなボタンのコンポーネントを使ってレイアウトしてくれています。
選択したコンポーネント良いとは思いますが、タイトルとカードのマージンに対して、カード同士のマージンが空きすぎていることと、逆にカードとボタンのマージンは詰まりすぎていることをレビューしました。
2回目に上がって来たのがこちらです。良くなりましたね。わかりやすいように左に1回目のものを並べています。
具体的な例②
もう一つ例を出してみます。「検索結果画面で結果一覧を5件ずつ出して、その下に『次のページへ』と『検索画面に戻る』の動線を設置する」タスクが発生したとします。（5件ずつでページ送りするってことも無いとおもいますが、今は例での画面の見せやすさを重視しています）
このようなカンプが上がってきました。
一覧性を高めるためにメディア型のコンポーネントを選んでいるのは良い判断だと思いますが、2つあるボタンが両方ソリッドです。
あくまで次のページへ進むことがプライマリーな行動なので、検索画面に戻る方のボタンはゴーストボタンのコンポーネントに変えよう、とレビューをしました。また「戻る」アクションなので矢印が左向きの方が良い旨も伝えました。
これはもう、入れ替えるだけなのですぐに終わります。
この場合はレビューがすぐに終わることよりも、「何故こっちのコンポーネントを使った方が良いか？」の説明がしやすく時間を割けることの方が重要です。
これを1から作ってもらっていると、構造や設計としてのレビューと見た目のレビューを同時にしなければならなくなり、自分にも相手にも負担が大きくなりがちです。
副次的な効果
どのレベルのタスクを誰に任せるかというのは意外と難しい問題だと思います。先輩が過保護にやりすぎても新人が育たないけど、難しすぎるものを与えてもただただ辛くなってしまうし……とバランスを考える必要があります。
そんなときにこのやり方をしていると、
・新しいmoleculesを作らないといけないレベル→シニアのタスク
・既存のatoms, moleculesから新たなorganismsを作らないといけないレベル→ちょっと慣れてきた新人レベル
・完全に既存のコンポーネントを組み合わせるだけで出来るレベル→とても日が浅い新人レベル
と切り分けがしやすくなるかと思います。
まとめ
作るコンポーネントの粒度とデザイナーのレベルを対応させると、
・質の担保
・レビューが容易
・スピード向上
というメリットが生まれます。
また、誰がどのタスクをやると良いか？というのも考えやすくなります。
色々書きましたが、このような体制を完全に運用できているわけでもありませんし、私自身新卒2年目のデザイナーで世間的にはジュニアそのものです。もっといいやり方や、改良したやり方があれば是非教えてください。
ツイッターはこちらです。
目次
1. 前提
2. 作るコンポーネントの粒度とデザイナーのレベルを対応させる
3. このやり方のメリット
4. 具体的な例①
5. 具体的な例②
6. 副次的な効果
7. まとめ
8. おまけ
おまけ
ノートをご購入頂いた方に限り、今回例に使ったxdファイルをダウンロードできるようにします。
記事の内容自体はここまでで完結しています、ご購入頂いてもデータへのリンクしかありませんのでご注意ください。
ここから先は
¥ 100
最後まで読んでいただいてありがとうございます！