エンジニアが Zeplin を使って自社デザインフレームワークを取り入れる過程について

みんなのウェディング、松久です。

みんなのウェディングでは、「Esthe(エステ)」という自社デザインフレームワークを導入しました。エステは、デザインガイドラインとCSSフレームワークを兼ねています。

エステの導入背景は、「チームで作るユーザーファーストなデザイン 」に書かれています。エステの開発自体は、「社内CSSフレームワークを作ったった」に書かれています。

今回は、自社デザインフレームワークを導入していく過程で、エンジニアは何をしたのか?ご紹介します。

今までのマークアップの課題

マークアップについては、マークアップエンジニアとデザイナーが中心に行っていました。デザイナーから、デザイン指示書と呼ばれる画像や書類に、色の指定、マージン、余白、線の幅について指示をデザイナーが行っていました。

作業の課題として、下記のようなことがありました

  • JPEG 画像ファイルを開き計測して実装
  • 画像を見ながらテキストを打ち込むことがある
  • JPEG 画像から HEX( #ffffff )を取得すると、デザインとは違う色を指定することがあった

また、サーバーサイドエンジニアがデザイン指示書を見た時に、想定していなかった実装が必要になったりすることもありました。

現在のマークアップ

システムを Ruby on Rails に移行するタイミングの頃に「Esthe(エステ)」が用意されました。この時期ぐらいから Zeplin が徐々に導入され下記のことが解決されました。

Zeplin の導入で改善したこと

デザイン指示書から Zeplin を中心としたデザインの共有がされるようになり、下記のことが解決されました。

  • margin、padding、border が表示されコピペできる
  • テキストが表示されてコピペできる
  • 実装の疑問があれば、その場所にコメントを書くことができる

Zeplin 導入で発生した課題

エステの導入と Zeplin 導入で色の指定が課題となりました。

エステは、SCSSにより色の変数名が定義されています。例えば #2fc3a7 はエステでは $green になりますが、HEX と 色の名前を暗記できません。そのため、色の指定が出てくるたびに、エステで定義された色なのか確認しながらマークアップを進めることになります。この工程は作業効率の低下を招きます。また、コードレビューの時に「#2fc3a7 はエステでは $green になります」といったレビューを見かけることになります。

このような機械的に変換できるところの改善を行いました。

Zeplin 導入で発生した課題を改善する

Zeplin には、StyleGuide と呼ばれる機能があります。そのうちの一つに Zeplin のプロジェクトで使われる色の名前と HEX を定義できる Color Palette という機能を利用します。

エステに指定されている色を使った Sketch ファイルを用意し、Zeplin に登録します。登録した Sketch ファイルを Zeplin で開くと、colors の横にオレンジ色のアイコンが出てくるので、ここでColor Palette の追加と削除ができます。

登録後の StyleGuide 画面は、下記のようになります。ここで、色の名称変更や、色の指定を変更できます。追加、削除はできません。

設定をすると、background-color のところに 定義した色の名称が入ります。例では、$gold_5Sとなります。

Esthe(エステ)を改善する

マークアップ作業の課題は、だいぶ減りました。しかし、エステは、完成されたデザインフレームワークではありません。日々の開発の中で気づいた不具合や、足りない機能などは github 上の issue で提案があり検討され実装されます。デザイナーから提案されることもありますが、エンジニアから提案されることもあります。

下記の例では、エンジニアから実装の提案がされ、プルリクエストが作られている例です。

まとめ

使われる自社デザインフレームワークにするのは、デザイナーだけではなくエンジニア側からも動いてみることが必要ではないかと思います。日々使っているなかで気づいた課題を、改善しながらよりよくしていくのは、デザイナーだけではなくエンジニアもやって良いことだと考えます。


みんなのウェディングでは、デザイナーと共にデザインについて議論したり、デザイナー視点を持とうとするエンジニアを募集中です。興味のある方は、Wantedlyからご連絡ください。または @kamonegi1977 に直接連絡いただいても大丈夫です。