以前、こちらの記事で、エンジニアにとってのデザインシステムのメリットを解説しました。
実際にデザインシステムを開発に導入した場合、エンジニアはどのような作業をすることになるのか、Fixelが提供しているUXHubというデザインシステム・プラットフォームを使った場合を例に解説していきます。
具体的な手順を、コードを交えて順に解説していきますので、デザインシステムを導入することでエンジニアの作業のどこが便利に、楽になるのかわかると思います。
目次
デザインシステムを開発で使う
デザインシステムを実際にプロジェクトに導入しますとなったときに、エンジニアの開発フローがどのように変わるのか、いまひとつイメージできないかもしれません。
ここでは、UXHubに登録されたデザインシステムを実装で使う手順を順を追って説明していきます。
最後まで読んでいただくとわかると思いますが、UXHubに用意されたデザインシステムを利用するのに難しいことは一切ありません。
UXHubは登録されたデザインシステムが、開発でどのように使われるのかまでを考慮して設計されており、エンジニアの開発フローに無理なく導入できるようになっているのです。
UXHubとは
UXHubは、Fixelが開発、提供している、デザインシステムを作成し、共有、運用するためのプラットフォームです。
デザインシステムはデザインのガイドラインと実装されたUIコンポーネント、各種リソースをまとめたものです。デザインシステムを使うことによって、ユーザーに一貫した経験を提供できることはもちろん、ブランド構築にも貢献し、かつデザイナーとエンジニアの作業効率を上げることができるなどのメリットがあります。欧米ではIBMやsalesforceなどの大企業はもちろんアメリカやイギリスの政府など、官公庁でも採用、公開されております。
しかし、デザインシステムをゼロから作り、管理・運用していくには、多くの工数と知識が必要となります。そこで、デザインシステムの構築、運用を手軽に行えるようにしたのが、UXHubです。UXHubは多様な機能を持っていますが、まずはUXHubにあるデザインシステムを皆さんのプロジェクトに導入する方法を説明することで、デザインシステムの実際の活用の姿をイメージできればと思います。
デザインシステムのCSS、JavaScriptをプロジェクトに適用する
デザインシステムにはウェブの画面を構成するボタンやテーブル、ヘッダー、メニューなどの多様な画面要素がUIコンポーネントという名前で、コードと共に登録されています。
そのデザインされたUIコンポーネントを開発中のプロジェクトで使うにはどうしたら良いでしょうか？
UXHubでは各デザインシステムに登録された、CSSおよびJavaScript、画像をまとめて「アセット」と呼んでいます。UXHubのデザインシステムの一覧のダウンロードボタンから、必要なアセットを選んでダウンロードできます。以下、操作順を説明します。
1. 「アセットダウンロード」から利用したいアセットの種類とバージョンを選んで、ダウンロードをクリックすると「assets.zip」というZIPファイルがダウンロードされます。
2. このZIPファイルを解凍すると、中にはデザインシステムに登録されているCSS、JavaScript、画像ファイルが入っていることがわかります。
3. これらのファイルを解凍したフォルダごと開発中のプロジェクトのソースコードのディレクトリに配置しましょう。
4. HTMLファイルを作成したら、配置したCSSとJavaScriptを読み込みましょう。
CSSファイルはlinkタグを使って、head内で読み込みます。
<link rel="stylesheet" href="/assets/css/style.css">JavaScriptはscriptタグでbodyの一番下で読み込むのが良いでしょう。
<script type="text/javascript" src="/assets/js/script.js"></script>これでデザインシステムのデザインが適用されたUIコンポーネントを開発中のプロジェクトで利用することができるようになります。
HTMLファイルの全体のコードは以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sample Project</title>
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<script type="text/javascript" src="/assets/js/script.js"></script>
</body>
</html>気づかれたと思いますが、この手順はBootstrapなどのUIライブラリを利用するのと同じ手順です。
初期導入はとても簡単ですね。
デザインシステムのUIコンポーネントを使う
CSSとJavaScriptが適用できたら、UIコンポーネントを組み込んでみましょう。
UXHubのデザインシステム一覧から、利用したいデザインシステムを選択して、デザインシステムのページを開きます。
1.左のメニューから使いたいUIコンポーネントを探して、UIコンポーネントのページを開きます。
2. 例えば、ボタンを配置したい場合、ButtonというUIコンポーネントのページを開くとこのような画面になります。
3. コードのHTMLタブを見ると、サンプルコードが表示されていますので、そこから使いたいUIコンポーネントのコードを選択してコピーします。ここではプライマリーボタンのコードを選択してコピーしました。
4. 次に先ほど作成したHTMLファイルに、コピーしたコードをペーストします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sample Project</title>
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<button type="button" class="dh-button dh-button-primary">プライマリー</button>
<script type="text/javascript" src="/assets/js/script.js"></script>
</body>
</html>5. このHTMLファイルをブラウザで表示してみると、デザインされたUIコンポーネントが配置されていることがわかります。
このようにデザインシステムに登録されたコードをコピー＆ペーストするだけで、デザインが適用されたUIコンポーネントを簡単にすぐ使うことができます。
デザインシステムにはボタンのようにシンプルなUIコンポーネントから、UIコンポーネントを複数組み合わせて作った複雑なUIコンポーネント、また、レイアウトやページサンプルも登録されています。
この登録されているコードをコピー＆ペーストで組み合わせて、画面レイアウトを作成していきます。
デザイン変更を開発中のプロジェクトに適用する
完全に仕様もデザインもFixさせてから開発を開始するという、完全なウォーターフォール型の開発でない限り、開発中にデザインの変更や調整が入ることはよくあると思います。
開発中にデザインの変更が入ると、エンジニアはデザインの変更箇所をチェックして、影響するCSSを探して編集するという作業が発生します。
デザインシステムを導入した場合、このデザイン変更の作業はどうなるでしょうか？
答えはとても簡単です。
最初に説明した、デザインシステムのアセットダウンロード機能からZIPファイルをダウンロードして、解凍してできた「assets」フォルダを上書きするだけです。
なぜなら、デザイン変更はデザインシステムの方に反映されるからです。
デザインに関するコードや資産がデザインシステム側で管理されているというのが、デザインシステムを導入する大きなメリットです。
このメリットにより、エンジニアはデザインの詳細を意識することなく、機能の開発に注力することができるようになるのです。
「1ピクセルずれている！」とデザイナーに言われることもほぼなくなります（笑）
まとめ
UXHubに登録されたデザインシステムを実際のプロジェクトで利用する方法について解説してきました。
あなたが開発しているプロジェクトに導入するイメージは湧きましたか？
デザインシステムをゼロから構築して導入するのはかなりハードルが高いですが、UXHubにはテンプレートとして利用できるデザインシステムも用意されています。
そのテンプレートを利用すればBootstrapのようなUIコンポーネントライブラリの導入と同じくらいの高さまでハードルが下がります。
まずは、UIライブラリを使ってみる感覚でデザインシステムを試してみてはいかがでしょうか？
ベータ版ユーザーのお申込みは以下のページからお気軽にどうぞ。
