初めまして。メンバーズでデザイナーをやっています高橋です。
三井住友銀行のデザインシステムの記事などを読んで、デザイナーとしては、デザインシステムにチャレンジをしたいと思い、デザインシステムの構築を検討。弊社内のスキル向上の目的もかねて、自社サイトのリニューアルの推進を行いました。
今回、チームメンバーと話し合いをして、『必要最低限のパーツと設定でメンテナンス性・セキュリティ性の高いサイトを作る』ということを目的として、作り方を色々検討をして、microCMSの導入とFigmaでデザインシステム作成にチャレンジをしてみました。
デザイナー観点で、プロジェクトを進めるにあたって、どのような検討をしたのか？どのような手順で作ったのか？良かったことは何なのか？実際に作ってみてつまずいた注意点などについてご紹介いたします。
実際にどのような検討をしたのか？
今回、リニューアルを行う際に、やること、やらないことをメンバーで決めました。
やること
- 今回作成するパーツの洗い出し・リスト化
- 不要な記事やページの削除
- Figmaでパーツのデザイン
- microCMSの構築
ツールとしては、XDとFigmaのどちらにするかという意見なども出たのですが、AdobeがFigmaを買収したというニュースが飛び込んできたので、今後を考えて、Figmaでチャレンジしようと合意をして、進めていきました。
やらないこと
- いきなり完璧なデザインシステムを作ろうとする
せっかくのリニューアルなので、不要なものや見直した方が良い点は見直します。
が、いきなり完璧なものを作ろうとすると挫折しそうなので、パーツ一覧も「いつか使うかもしれないパーツ」は含まず必要最低限のものを作ります。
実際にどのような手順で作成をしたのか？
1.今回作成するパーツの洗い出し・リスト化
現状のページを移行するため、最低限必要なパーツのみ洗い出してリスト化します。
また、追加で実現したい機能とmicroCMSで実現可能な機能を確認し、可能であれば追加機能のパーツもリストに追加します。
パーツは種類ごとに採番し、分かりやすくしておきます。
2.不要な記事やページの削除
需要のないページや情報が古いページや閲覧数の少ない不要なページはリニューアル対象から除外します。工数を抑えるためと、サイト全体の情報最適化のため、要不要を判断してファイルリストに記載していきます。
3.Figmaでパーツのデザイン
1で洗い出したパーツをFigmaで作成していきます。
テキストスタイルや色スタイルをローカルコンポーネントで定義しつつ、各パーツを作っていきます。ローカルコンポーネントを作っておく事で、フォントやカラーを変えたい！となった時に一括で修正できるので便利です。
ローカルコンポーネントを定義しつつ、各パーツを作成しコンポーネント化していきます。
デザインしたパーツで実際にページを組みながら進める事で、想定したパーツの挙動と実際にページに入れた時の挙動を確認・修正しながら進められます。これにより、より整合性の高いコンポーネント一覧を作る事ができます。
Figmaを使ってみて良かったこと
Figmaについては様々な記事で既に紹介されていますが、実際デザインシステムを作る際にFigmaを使ってみて感じたメリットをいくつかご紹介します。
1.アプリケーション自体の動作が軽い
これまでデザイナーとしてIllustrator、Fireworks、Photoshop、XDなど様々なツールを使って制作してきましたが、ダントツで動作が軽いです。今回はFigmaのデスクトップアプリを使いましたが、起動もファイルを開くのもストレスなく行えました。
2.コンポーネントとオートレイアウト機能を使えば、個別の余白調整が不要
一度使ったらもうXDには戻れないポイントがここ。
オートレイアウト機能を使えば、paddingやmarginをFigma上で設定できます。
設定を変えたい時もメインコンポーネント（親コンポーネント）を調整すれば余白等全てのインスタンス（子コンポーネント）に反映されます。
例えば1つのパーツの余白を1px増やしたから、その下にあるコンテンツを全て1pxずつ手動で調整する…みたいな事はもうしなくてOK。神ツールです。
3.デザインした時点でコード化してくれるので、コーディングの手間を削減行
ディベロッパーモードで見ると、そのデザインをコーディングで再現するために必要なCSSの記述がFigma上で見れます。また、TeleportHQというツールを使う事で、FigmaファイルをそのままHTML・CSS化する事ができ、コーディングもかなり簡略化が可能です！すごい！
4.複数人でリアルタイムに編集が可能
これはXDでもできる事ではありますが、クラウド上にあるファイルであれば複数人で同時に編集する事ができます。スポットライト機能を使えば、他の人が見ている箇所を一緒に見る事もできますし、自分にスポットライトを当てて他の人に見てもらう事もできます。画面を見ながら説明する時などに便利！
あまり大人数で作業した事はないので十数人とかになった時は分かりませんが、数人で触っていても動作が重くなる感じはありませんでした。
Figmaを使ってみて注意をしたほうが良いこと
注意点はあまり多くはないのですが、複数人で作業する際にちょっとだけ危険と感じた点がありました。
1.デスクトップアプリとブラウザ版の併用は危険
Figmaはデスクトップアプリだとローカルフォントも使えるのですが、ブラウザ版はWebフォントのみ使用可能です。
このため、デスクトップアプリでローカルフォントを使って作成したデザインファイルをブラウザ版で編集しようとすると、フォントが置き換わってしまい、ローカルコンポーネントからも外れてしまいます。フォント置き換えは警告が出るのでその時点で編集をやめれば大丈夫ですが、気付かずに置き換えてしまう可能性もありますので、注意が必要です。
2.コンポーネント名の重複
コンポーネント名は自由に付ける事ができます。名前が重複したメインコンポーネントを複数作れてしまうので、インスタンスとメインコンポーネントの紐づけが分からなくなってしまいます。
特に複数人で作業する際には、メインコンポーネントを編集する人とインスタンスのみ扱う人など、役割を分けた方が良さそうです。
3.編集権限と料金プラン
Figmaはプロジェクト参加者とその役割によって、アカウントの料金が変化します。
Freeプランであれば編集者は何人招待しても無料ですが、有料プランになると編集者の数によってアカウント料金が掛かってきます。更に、「閲覧者」は自分で自分の役割を「編集者」に変える事が出来てしまいます。「編集者」になるとアカウント料金が掛かってしまうため、触る必要のない人・アカウント料金が掛ける必要のない人は「限定閲覧者」に設定する必要があります。
メールアドレス等でユーザーを招待した場合、デフォルトの役割は「閲覧者」になっており、「限定閲覧者」にするには個別に設定が必要なので、注意が必要です。
まとめ
メンバーズルーツでは先日、microCMSを利用したWebサイト・アプリ制作ができる、microCMS公認のパートナー企業になり、microCMSの導入支援のサービスも立ち上げました。地方銀行での導入実績などもありますので、ご興味のある企業担当者さまは下記よりお問い合わせください。
次回、ここから、microCMSの構築にどのようにつなげたか、エンジニア目線で説明をします。
関連記事：
