# 20230420_NUTMEGにデザインシステムを導入したい話
(例：20210901_LT会を開催しました)
###### tags: `ブログ記事`

- [x] 公開（ブログ公開担当者がいじるやつ）

太字斜体で書いてある内容を埋めて行ってください．
文章，画像は太字斜体の下の行に入れてください．
最初に書く時はREADMEを読んだら読むといいと思います．

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
r.kobayashi
}

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
あとで考えます。
}

<br>

## 表示される部分
***サムネイル画像***
{
あとで。
}

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動
- [ ] 活動の様子
- [x] メンバーの趣味

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [ ] HTML
- [ ] CSS
- [ ] Python
- [ ] Go
- [ ] Ruby
- [ ] JavaScript
- [ ] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift

フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [ ] React.js
- [ ] Next.js
- [ ] Gin
- [ ] Flluter

ツール
- [ ] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [ ] Docker
- [ ] Raspberry Pi
- [ ] Figma

分野
- [ ] フロントエンド
- [ ] バックエンド
- [ ] インフラ
- [x] Web-design
- [ ] API関係

---

***以下に本文を記載してください***
# **はじめに**

こんにちは。NUTMEGデザインチームの小林諒大です。
この春から大学院に進み、修士1年となりました。

現在私はNUTMEGにデザインシステムを導入できないか検討しています。そこで現在私が考えている、NUTMEGにデザインシステムを導入する上で考慮すべき、かつメンバーに共有しておくべき事項をまとめ、ブログ記事として公開してみます。

ここでは一先ず自分が面倒を見ることができるであろう向こう3年くらいを考慮します。

現状、草案段階でありメンバー以外の方に参考にしていただけるほどの記事かは分かりませんが、時間があるときにでもお目通しいただければ幸いです。サークル規模でのデザインシステム導入についてまとめたサイトはあまりないと思います。

# **デザインシステムとは**

まずデザインシステムとは何かですが、簡単にいうとプロダクトのデザインを良いものにするための複数のリソースのまとまりを指す言葉のようです。言葉自体は厳密に定義されているものではありません。

簡単に調べて出てきた範囲のデザインシステムの構成要素の例を以下に示します。名称については作成した団体によって異なるため、やんわりとらえてください。

多くの団体がデザインシステムの名でFigmaのコンポーネントファイルを公開していますが、ガイドラインをはじめとする文書まで公開している団体は多くありません。今回は数少ないデザインシステム全体を公開しているAmeba様のspindleと
Salesforce UX様のLightningDesignSystemをメインに考えていきます。

マテリアルデザインガイドラインなども有名ですが、今回は団体として使用・運営するデザインシステムに主眼を置きたいと思うので、ここでは考慮しません。

## **デザイン原則**
> 引用：https://spindle.ameba.design/principles/design/

そのプロダクトらしさ作るために、どのように設計、デザインするかの指標。大体3つくらいの簡単な言葉。バリューとかビジョンのような存在に近い。どのように考え、行動すべきかの指針になる。

## **デザイントークン**
> 引用：https://spindle.ameba.design/styles/color/brand/

デザインを実装する際に参照しないといけない値をまとめたもの。
フォントサイズや使用する色のカラーコードなど。

## **ガイドライン**
> https://spindle.ameba.design/components/button/

プロダクトに使用するUIのパーツについてのガイドライン。
各パーツごとに使い方、バリエーションがある場合は使い分けの説明が含まれる。

## **品質を明文化したページ**

デザインで満たすべきクオリティについてまとめたページらしい。
実例は見たことない。

## **コンポーネント**
> デジタル庁デザインシステム

Figmaなどで作る、パーツごとのアセットのようなもの。
作成するとLINEのスタンプのようにデザインカンプを作ることができる。
基本的にガイドラインで示されたパーツは全て作成される。

## **アニメーションに関するページ**

アニメーションなどページ遷移やホバーした際にアニメーションが生じる場合、それらの設定をまとめる。デザイントークンのアニメーション版。

デザイントークンに統合されている場合もある。

## **アクセシビリティに関するページ**
> 引用：https://spindle.ameba.design/principles/accessibility/

アクセシビリティについての注意点をまとめたページ。
背景と文字のコントラスト他、プロダクトを作る上で配慮するアクセシビリティの基準を示す。

雑な書き方になってしまいましたが、これら7つが主なデザインシステムの構成要素となります。

デザインシステムはデザイナーのみならず複数のチームに渡って関与する、デザインを向上するためのリソースとわかってもらえるかと思います。

# 実際導入するにあたってどうなの？

## **導入するメリット**

- 一定水準、一貫性のUIデザインを作ることできる。
- チームや会社全体での連携が高くなる。
- 開発やデザインの効率化・高速化

## **導入するデメリット**

一般的にデザインシステム自体に特有の大きなデメリットはないとされていますが、これは企業の場合です。NUTMEGとして導入する場合のことを考えると以下のようなデメリットが考えられます。

- 楽しさの減少
基本的な枠組みを作ってしまったら、自由度が減ってしまい表現の幅が少なくなってしまう。
- 導入時の負担が大きい
既存のプロダクトの場合フロントの修正がほぼ必須となるため、人手不足のプロダクトでは新機能実装との並行作業が難しい場合があります。
デザイナーが主導で進める場合、人数不足も課題になる。

## **懸念点**

- 既存のNUTMEGプロダクトにデザインシステムが必要か？
開発周期、新しいプロダクトを作るためのリセットがありうるのに今する必要があるのか
- 情報局全てのプロダクトに適応できる？維持できる？後輩の負担では？
基本的にリードするのはデザイナーの場合が多い。今後も慢性的な人数不足が続くであろうデザイナーチームで維持できるのか

## 結論

ここまで色々語りましたが、これらを踏まえた上で私はデザインシステム導入を試してもいいのではないかと思います。先述した、デメリットおよび懸念点についての自分の考えは下の通りです。

### **楽しさの減少**

現状でもっともデザインシステムの導入を検討する上で最も危険視している問題です。これはデザインシステムの決め方に遊びを持たせたり、システムを作る際に関わるデザイナー全員でシステムの作成・更新を行なったりすることによって、楽しさを確保することができるのではないかと思いますが、メンバーを相談をして詳細を決める必要があります。

### **導入時の負担が大きい**

当然です。負担が大きくなる工程は、デザインシステムの作成工程、実装工程の二つに分けられるかと思います。

デザインシステムの作成にあたっては基準になるシステムが一つある状態であればそれをベースに進めるため、最初の1つのプロダクトを除いて大きな問題にはなり得ないでしょう。

実装工程も一概には言えませんが、デザインシステムの導入によって規則的なデザインにするのであれば実装もシンプルな物になると思われるのでタイミングを考えればそこまで負担にならないという予想です。

### **既存のNUTMEGプロダクトにデザインシステムが必要か。**

すでにプロダクト名変更レベルの改修・作り直しを検討している段階であれば不要です。HPなどの年毎に内容が変わるプロダクトの場合はむしろやらない方がいいでしょう。

ですがそれ以外のプロダクトにおいては必要かと思います。NUTMEGで作成するアプリのユーザーは年に数度しかアプリを開かないでしょうから、想定するべきユーザーはほとんど新規ユーザーとなります。そんな人たちにこちらの都合でできた使いづらく統一されていないUIを提供するのはできる限り避けるべきでしょう。

↓↓↓これは自分が好きな動画↓↓↓
<iframe width="560" height="315" src="https://www.youtube.com/embed/otyLLbYDF1g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

### 情報局全てのプロダクトに導入できる？維持できる？後輩の負担では？

先述しましたが、一つのプロダクトができたらそれを元に他プロダクトへ流用する形で導入は可能であると考えています。将来的に全プロダクトで更新、作成を同時並行して進めなければならなくなると思いますが、こうした場合は積極的なデザイナーチームの人員の増加や、デザインシステムを作成を担当する人の変更などによって都度対応が可能でしょう。ですが、運用については今後の新入生勧誘の方針にもかかるのでNUTMEG全体で改めて検討する必要があると思います。

後輩の負担については導入後も現状より酷い負担はかからないとの予想です。
現時点では中途半端なルール、個人の感覚に任せたデザインが常態化してしまっています。これは偏に自分の責任です。規則だったシステムを作ることができれば格段に引き継ぎ、新規プロダクトへ参加することへの敷居が低くなるものと見込まれます。

~~今後、デザイナーをやりたい人が0になる可能性も当然ありますが、その時はもう自分も卒業しているでしょう。後輩に任せます。凍結、全消去大いに結構。~~

そもそも今回参考にしたシステムもそうですが、デザインシステム自体は企業で行うことが前提のものであり、サークルで行うにあたって支障が出るのは当たり前です。

デメリットの対策、懸念点への対応、NUTMEG流のカスタマイズをたっぷり加えて導入したい気持ちです。これまでデザインの準備期間の長期化により開発を遅らせていた状況を終わらせたいです。

## どのように始めるか

まずは最初に一つのプロダクトで始めて、それを参考に他のプロダクトへ反映できる土壌を作る形が良いと考えています。最初のプロダクトとしてはFinanSuが適切でしょう。これは自分が開発の当初から関わらせてもらったプロダクトである為もありますし、当初からデザインシステムの導入を念頭においてデザインカンプの作成をしてきたことも大きな理由となっています。

最初は自分が主体となり、FinanSuでの導入方法の叩き台を作り、それをプロダクトのメンバー（プロジェクトマネージャー、フロントエンドエンジニア、バックエンドエンジニア、デザイナー）で叩き、修正を加えていければとおもいます。

## 今後の展望

冒頭で述べた通り、私はNUTMEGの全プロダクトでデザインシステムを導入することが理想であると考えます。一つのプロダクトでの導入が出来次第、他のプロダクトへの導入も進めていきたいです。そこで今後の展望を話します。

情報局内の複数プロダクトで運用することになった場合、団体として共通していた方がわかりやすいデザインシステムの項目（アクセシビリティに関するページ、品質を明文化したページ）もあるでしょう。そういった共有したい分野とプロダクトごとで独立した部分をまとめてみることができるサイトのような形にしたいと考えています。先述したAmebaのspindleのような形を目指したいです。編集の簡便さとFigmaとの親和性からNUTMEGで運営するのであればNotionで作るのが現実的でしょう。

そこでー

作ってみたものがこちらになります。

[TerraStyle ~テラスタイル~ [Demo]](https://www.notion.so/TerraStyle-Demo-795d6c03a0cc4afe95ffefde2fb4ab3f)


---

現状では未完成で、他デザインシステムからのコピペのみのページ、白紙のページがありますがイメージは掴んでもらえるかと思います。

開発の順序はこのような流れになるでしょうか。

1. [FinanSu]デザインガイドライン、[FinanSu]デザイントークン、[FinanSu]コンポーネント
3. [FinanSu]ブランド、[FinanSu]デザイン原則の整理
4. [全体向け]デザインシステム導入の流れ、[全体向け]アクセシビリティの基準
5. [全体向け]Figma完成度チェック、[全体向け]ヒアリングで気をつけたいことetc

ここまで色々考えてきましたが、メンバー間で色々意見をもらって不要だという意見が強いようであれば自分は破棄でも構いません。この記事をきっかけにメンバーがデザインシステムについて考えたり調べたりするようになってくれたら嬉しいです。