はじめに
みなさんこんにちは！アイスリーデザイン・エンジニアリング部の昌山です。
システムの開発途中で、
「あれ、ここデザインと違っている…」
と、ふと気がついたことはありませんか？
よくよく見てみると、様々な箇所でデザインと実際のアプリケーションに差異が生まれていたり、デザインの修正がコードに反映されていなかったり、もうどこがどう違うのかわからない！
なんていう状態に陥ってしまうこともありますよね。
今回は、そういったデザインと実装の乖離を出来る限り少なくし、アプリケーションの品質を保つための方法について考えていきます。
デザインとエンジニアリングのシームレスな連携に向けて
デザインはある意味アプリケーションの理想系であり完成系ですから、どれほどアプリケーションの品質を担保できるかは、どれほどデザインに忠実な開発を行えるかにかかっています。
今回は以下の2点に着目し、デザインとエンジニアチームで円滑に連携がとれるプロセスについて実践していきます。
- UIコンポーネントの整合
- UIレビューの導入
前提
今回の実践では、以下のツールを使用してアプリケーションシステムを開発していると想定します。
- デザインツール : Figma (有料プラン）
- 開発ツール：Visual Studio Code (以下、VS Code)
また、今回の方法ではFigmaが公式で提供するVS Code拡張機能を使用するため、Figmaの有料プランに加入していることを前提とします。
Figma for VS CodeでUIコンポーネントを整合しよう
エンジニアはデザインの隅々まで確認し、デザイン通りのコンポーネントを実装していく必要があります。
Figmaとコードエディタを行ったり来たりしながら、色、位置、スペース、配置、テキストサイズ、などを細かく合わせていくのは若干億劫で面倒臭い作業だと思います。
そこでの見落としや実装の漏れが、UIコンポーネントのデザインと実装での差異を生んでしまっているのです。
そんな時に、Figmaが公式で提供している「Figma for VS Code」が役に立ちます。
(https://www.figma.com/ja/dev-mode/)
こちらの拡張機能を使うと、Figmaのdevモードを連携し、開発に必要なFigmaのすべての情報を、VS Codeを離れることなくコーディングを進めることを可能にします。
一つの画面内で細かい色やサイズをチェックし、すぐにコードに落とし込むことができるため、スタイリングに集中し、コンポーネントの実装漏れを格段に減らすことができるのです。
また、Figmaとコードエディターの往復という無駄な時間も削ってくれます。👍
驚きです👀
さらにFigma for VS Codeには、コードの補完という、とても便利な機能もついています。
Figma for VS Code上でオブジェクトを選択し、スタイルをコーディングすると、Figmaがコードスニペットをもとに補完を行ってくれます。
エンジニアは予測の一覧から補完された内容を選ぶだけなので、乖離が生まれることなく、デザインと直結した開発を行うことができるのです。
これもUIコンポーネントのデザインと実装の差異を減らすのに有効となります。
このように、Figma for VS Codeを使用することによって、UIコンポーネントを整合し、デザインと実装が一貫したアプリケーションを作成することができるのです。
それでもまだ…
しかし、これだけデザイン通りのコンポーネントを実装しようとしたところで、人の手で開発を行っていく以上間違いは生まれてしまうものです。
実装が終わった後、アプリケーションのUI がデザイン通りであるか、しっかりチェックを行っているでしょうか？
ここでの確認を怠ると、いつの間にかデザインと実装の不一致を発見することが難しくなります。
そのため、実装したUIをコンポーネント単位で管理し、作成・変更のたびにレビューを行うプロセスが有効であると考えています。
Storybookでコンポーネントを管理しよう
コンポーネントの管理にはStorybookを使用するのが良いと考えています。
Storybookは言うなればUIのカタログであり、実装したコンポーネントをブラウザでチェックすることができるツールです。(https://storybook.js.org/)
無料で使えるのもいいところですね！
StorybookではUIをロジックから切り離し、ビジュアルのみに焦点を当ててチェックすることができます。
(以下の画像では、ボタンコンポーネントが表示されています。ボタン押下後のインタラクションは発生せず、色、形、アニメーション等見た目の部分のみに限定して確認することができます。）
画像参照: https://storybook.js.org/docs/get-started/whats-a-story
修正を加えたコンポーネントをStorybook上でデザイナーに共有しレビューをしてもらうことで、コンポーネント単位での確認を行い、コンポーネントの一貫性を担保することができるのです。
ChromaticでUIレビューを行おう
とはいえ、環境構築をして、Storybookを立ち上げてわざわざ見るというのはエンジニア以外の人にとっては面倒ですよね。
また、今のままではどこが変更されたのかを知るのも手間がかかります。
そこで、Chromaticの出番です。(https://www.chromatic.com/)
ChromaticはStorybookをベースとしたUIテストツールで、UIレビューのプロセスを開発に組み込んでくれます。
GitのプロジェクトとChromaticを連携することで、オンラインでStorybookを閲覧することができるようになります。
また、様々なブラウザでの見え方の違いなどもChromatic上で見れるので、ブラウザごとのUIの差異チェックも可能にしてくれます（別途課金が必要です💰）
Chromatic上で、エンジニアが作成したコンポーネントをチェックし、レビューを行います。ここがデザインと違う、というところがあれば、コメントを残すことも可能です。
デザイン通りのコンポーネントが実装されており、レビュワーがコンポーネントを承認すると、以下のようにステータス項目にAcceptedが表示されるようになります。（現在は全てのコンポーネントが承認されていますね🙌)
ちなみにChromaticでは、Figmaとの連携も行えるので、Storybookとデザインを見比べながらレビューを行うこともできますよ。
また、Github ActionsでUIレビューをプルリクエスト承認のワークフローに組み込んだり、コードでデザインの変更があった時にその差異を通知してくれたり、UIテストに便利な様々な機能を提供してくれています（別途、課金が発生します💰)
もっと詳しい使い方や機能を知りたい方は公式サイトをご覧になってくださいね。(https://www.chromatic.com/)
まとめ
今回は、デザインと開発のUIコンポーネントを一致させ、一貫したUI開発を行うための方法について考えてみました。
デザインと実装の物理的距離を縮め、修正漏れを防ぎ、UIレビュー・テストのプロセスを組み込むことで、より質の高いアプリケーションを開発することができるようになります。
また、長い目で見ればコンポーネントの修正が減るため、工数の削減にもつながります。
デザインとエンジニアリングのシームレスな連携を行うためにはまだまだ課題はありますので、また新たな発見がありしだい、共有していきますね。
同じく「デザインとエンジニアリングのシームレスな連携」をテーマにしたこちらの記事もぜひあわせてご覧ください！
デザインと開発の連携にお困りですか？お気軽にご相談ください。