ソフトウェアエンジニアの王子です。
本日はエンジニア↔︎デザイナー間の連携を少しでも快適にしようと
ReactとMaterialUIとZeplinを組み合わせて利用している話をさせて頂こうと思います。
とにかく作業時間を減らしたい
唐突ではありますが、例えば下図のような進行フローにて
とにかくデザインの実装期間(Aの部分)を短くしたい
と常に考えております。これは
- デザイナーが示した明確なゴール(デザイン原案)が存在する
- どのように試行錯誤の時間を使ってもゴールが同じ
という性質に由来するもので
どれだけ時間をかけても最終的な価値が変わらないためです。
つまり「どうやってデザインを実現するか」の検討にかかる時間を削りたいのです。
更に開発の進行に伴ってデザインの作り直しが頻繁に発生しますので
なおさら削りたくて仕方ありません。
理想はエンジニアの時間0で完成することなので、究極的には
デザイナーにコードを書いてもらえれば解決するのでは…?
という悪魔的発想に辿り着きそうになることもあるのですが
まずは地道に削る方法を検討し
React+MaterialUI+Zeplinの組み合わせを試しています。
React + MaterialUI
デザインをするという行為とデザインを実現するという行為を
同じ概念にすべく、この組み合わせにしています。
個別に解説していきます。
React
本記事ではReactの中身については詳しく触れません。
今回重要なのは
という点です。
これをエンジニアの実装環境にしています。
MaterialUI
Reactで利用するマテリアルデザイン のコンポーネント群ライブラリです。 同様に中身については詳しく触れませんが、こちらも重要なのは
- Webページを構成するコンポーネント群のライブラリ
という点です。
エンジニア・デザイナー間で共有する
このReact+MaterialUI環境をエンジニア・デザイナー間で共有します。
配置されるコンポーネントは両者で共有がなされているため
作業の性質が
- 原案はデザイナーが白地からデザインしたもの
という状態から
- 原案はデザイナーがコンポーネントをXD上で配置したもの
という状態へ変わります。
具体的には以下のようにフローが変わります。
React + MaterialUI | 従来 | |
---|---|---|
1 | デザイナーがコンポーネントを XDに配置 |
デザイナーが白地からデザイン |
2 | ↓ | エンジニアが実現方法を検討 |
3 | エンジニアがコンポーネントを Reactで配置 |
エンジニアが検討した方法で実装 |
4 | デザインを実現 | デザインを実現 |
5 | ↓ | ↓ |
デザイナーはコンポーネントを配置してデザインを実現したのですから
エンジニアも同じようにコンポーネントを配置すれば
デザインは実現するはずです。
もちろん、エンジニアはReactでコンポーネントを配置しつつ
エンジニア特有の問題とも向き合いながら作業する必要があります。
それでもデザイナー・エンジニアの行う作業が同一の概念になることで
デザイン実現のための検討時間は大きく削減できている実感です。
Zeplin
ここまでで
という形で概念の共通化ができたのであとはその共有方法です。
XDで直接共有でも問題はないのですが、少し情報が多いです。
ここで必要になるのは
- どのコンポーネントを
- どの位置・どのサイズで
- どういった設定で
程度ですので、情報はいくらかスリム化できるはずです。
ここ登場するのがZeplin。
SkecthやXDからデザインを共有することに特化したツールで
下図のように必要な情報のみを抽出して表示してくれます。
異なる職種間での共有では編集機能などは不要になるため
このように情報をスリム化して共有するツールは非常に役に立っている印象です。
実際の効果
こういった形で
- デザイン作業をデザイナー・エンジニア間で同一の概念に統一
- デザイン共有の情報をスリム化
を行い、実際にデザインを実現しながら開発を進めています。
同条件での比較ができないので正確な効果はわかりませんが
これまでに何度か発生したデザインの修正を手早く行えているので
それなりに効果は出ているのではと思います。
実際に使える作業時間は基本的に有限ですので
効果の高いところに集中して投入していきたいですね。
以上です。
読んで頂き、ありがとうございました!
\\『真のユーザーファーストでマーケットを創造する』仲間を募集中です!! // 919.jp