<p>デザインシステムとは、デザインに関するあらゆる情報を構造化したものです。要するに、ソフトウェアのUIやその周辺におけるガイドラインとコンポーネント集ということになるそうです。この構造化を推進するためには組織での最適化が必要となるわけですが、制作の現場が拡大（成長）していく時の施策は、みんな元気あるから個人に任せます！で済みますが、拡大しきったガイドラインをまとめるための利害調整って、プラスを分け合うのではなくてネガティブの押し付け合いになってしまいます。そのため、権威ある人がやらないと収集がつかなくなる…そう考えています。よって合理的なルールを定め、規則の中でやることで秩序立った競争に繋り、それぞれの戦略で戦うことを可能にします。長くなるので概念的なことはこのくらいにしてデザインシステムの参考となる文献を以下にピックアップしてみました。</p><hr><h3 style="text-align: start" id="hc852c01636"><strong>デジタル庁のデザインシステム</strong></h3><p style="text-align: start">デジタル庁のデザインシステムは、政府のウェブサービスを効果的かつ統一された方法で設計・構築するためのガイドライン集です。使いやすさや一貫性を重視し、異なるサービス間での一貫性を確保することで、ユーザーエクスペリエンスの向上を図っています。</p><p style="text-align: start"><a href="https://www.digital.go.jp/policies/servicedesign/designsystem" target="_blank" rel="noopener noreferrer nofollow">https://www.digital.go.jp/policies/servicedesign/designsystem</a></p><hr><h3 style="text-align: start" id="hcf4b00c159"><strong>デザインシステムの活用事例</strong></h3><p style="text-align: start">Component Galleryは、様々なデザインシステムを活用してウェブサイトやアプリをデザインするためのリソースです。これにより、デザイナーや開発者は既存のデザイン要素を再利用し、効率的にデザインプロセスを進めることができます。デザインシステムの活用により、一貫性のあるデザインを実現し、開発時間を短縮してプロジェクトの品質を向上させることが可能です。</p><p style="text-align: start"><a href="https://component.gallery/design-systems/" target="_blank" rel="noopener noreferrer nofollow">https://component.gallery/design-systems/</a></p><hr><h3 style="text-align: start" id="h719e588056"><strong>デザインシステムのポータルサイト</strong></h3><p style="text-align: start">Design Systems Surfは、世界中のデザインシステムを収集したポータルサイトです。様々な業界やプラットフォームにわたるデザインシステムを網羅しデザイナーや開発者が必要な情報を簡単にアクセスできるように提供しています。豊富なリソースを活用して、一貫性のあるデザインを実現し、プロジェクトの効率性と品質を向上させることができます。</p><p style="text-align: start"><a href="https://designsystems.surf/" target="_blank" rel="noopener noreferrer nofollow">https://designsystems.surf/</a></p>

01. デザインシステムについて

<p>弊社では、デザインシステムを機能させるために、構造の解釈を拡げて仕組み化し、課題を洗い出すところから進めました。同時にデザイン部の主要メンバーに役割を定め、継続的に改善できるような流れに繋げています。</p><h3 style="text-align: start" id="h6c6fe70479"><strong>取り組みのサマリー</strong></h3><p style="text-align: start">・<strong>役割の明確化</strong><br>・<strong>体制面の強化</strong><br>　└① 情報伝達の整備<br>　└② 朝会・月次報告会のルール化<br>　└③ デザインテンプレの刷新<br>・<strong>プロジェクトの推奨<br>　</strong>└① アニメーションプロジェクト<br>　└② タイポグラフィプロジェクト<br>　└③ アフターエフェクトプロジェクト<br>　└④ AI画像生成プロジェクト<br>　└⑤ アクセシビリティプロジェクト</p>

02. デザイン部の取り組み

<p>目の前の業務や問題解決を優先してしまって、未来への打ち手がないと組織の成長は鈍化してしまいます。まずは...僕自身に余白をつくることから始め（引継ぎは完全にできていない…汗）皆で成長できるための土台づくりを全うすることにフォーカスしました。ここで大事にしたのは、なぜやるのか、どこを目指しているのかを共有することです。そこで、デザイン部全体でMTGを行い「つくることを楽しむ姿勢を忘れてはいけない」というメッセージを添えて、部としてのコンセプトを定めました。コンセプトは…「エムハンドの先端は、私だ」です👋 続いて、社歴の長い主要メンバーとコミュニケーションを活発化するべく「デザイン相談（裏）チャット」を作成して、以下の役割を定めました。</p><hr><p><strong>＜岩松＞</strong><br>・チェックサポート、新人研修・育成、面談・評価・相談、仕組み化の推進<br><strong>＜H 氏＞</strong><br>・スケジュールの調整、情報の共有、面談・相談、基本ルールの整備と伝達<br><strong>＜I 氏＞</strong><br>・進行案件のチェックサポート、コミュニケーション活性化、先端デザイン<br><strong>＜Y 氏＞</strong><br>・公開案件のチェックサポート、データ管理・ルールの改善、先端デザイン<br><strong>＜U 氏＞</strong><br>・制作ルールのチェックサポート、ルールの策定・浸透、技術情報の可視化</p><hr><p></p>

03. 役割の明確化

<p>弊社では、問題や気づきに速やかに対処するために「情報収集」→「改善」→「周知徹底」の流れを業務改善フローとして仕組み化しています。このフローを毎月繰り返すことで、「品質向上」や「生産性向上」を実現するとともに、制作物の品質低下や社員のモチベーションダウンを起こさないためのリスクヘッジにも役立てています。秩序を維持することが生命の特質であるとするならば、システムの耐久性と構造を強化することではなく、むしろその仕組み自体を流れの中に置くことが大切であると考えます。取り組みが膨大なので…こちらは３つの事例をピックアップして紹介します。</p><h3 style="text-align: start" id="h775fb7c06b"><strong>① 情報伝達の整備</strong></h3><p style="text-align: start">情報伝達におけるチャット機能を整理し、役割を明確化しました。同時に、統一的な青色のアイコンを導入することで、チャット機能が直感的に認識されるようになりました。また、チャットの頭文字で統一し、デザイン部を含む命名規則を設けることで、特定のチャットを認識しやすくしました。</p><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/f4c734bafda74eaf8106868e4103f09b/1710686831942-Sibdly4IOh.webp" alt="" width="800" height="832"></figure><h3 style="text-align: start" id="hf870c28269"><strong>② 朝会・月次報告会のルール化</strong></h3><p style="text-align: start">デザイン部では毎日11時より朝礼をおこなっています。以前はテーマが曖昧であったため…参加率が業務優先で低くなるケースが多くみられました。廃止にするか否かを前提に、テーマを設けて続けることに至るのですが、メンバーからの質問や話題がない日は、以下のような曜日ごとのテーマでコミュニケーションの活性化に取り組んでいます。</p><p><strong>＜朝礼のテーマ＞</strong><br>（月）スケジュールや工数について<br>（火）Figma について<br>（水）最近のできごと・買ってよかった物<br>（木）このデザインいいね<br>（金）ルールのブラッシュアップ・疑問点</p><p>この流れが功を奏してか、デザイン部のメンバーが自発的に行動し、Figmaプラグインのナレッジシート運用やリモートランチ会の開催、さらには…勉強会の開催を自主的に行うことに繋がりました。デザイナーさんからの「勉強会を開催したいので…資料作成のスケジュール（作業工数）を抑えていただけませんか？」という自発的な要望に「はい！喜んで」とスケジュール調整する岩松とH 氏なのでありました。</p><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/6b3fbc1777954857a775656aa97cc873/1710688347796-hPVbrhATkv.webp" alt="" width="800" height="750"><figcaption>Figma情報共有シートの一部キャプチャ</figcaption></figure><p>　</p><p>ちなみに僕は、このナレッジシートを活用してプラグインでグラフィックと題して、プラグインの機能でグラフィックを生成・発信することにも繋げました。最終的にプラグインのごちゃ混ぜで、ただのグラフィックに成り果ててしまったのでこの発信は打ち切りました…。</p><p> </p><blockquote class="twitter-tweet" data-dnt="true" align="center"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A7%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF?src=hash&amp;ref_src=twsrc%5Etfw">#プラグインでグラフィック</a><br><br>シームレスなタイルノイズ、テクスチャ、パターンなどをダイナミックに生成。設定を変更すると、ライブでレイヤーが更新される。<br><br>ノイズ好き..。10分間でグラフィック☺️<br><br>＜Noise &amp; Texture＞<a href="https://t.co/X7WvB55h0w">https://t.co/X7WvB55h0w</a> <a href="https://t.co/S1lWEQqErR">pic.twitter.com/S1lWEQqErR</a></p>— 岩松翔太｜M-HAND, Inc. (@IwamatsuShota) <a href="https://twitter.com/IwamatsuShota/status/1692172498731962663?ref_src=twsrc%5Etfw">August 17, 2023</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<p></p><h3 style="text-align: start" id="h2cdb9ad9bc"><strong>③ デザインテンプレの刷新</strong></h3><p style="text-align: start">Figmaの導入時（2023年6月）に、PSDから継承されてきたXDのテンプレをFigamaに移行しておりました。そこから、改善点を明確化して運用しやすいルールを備えて刷新（2023年12月）を行いました。運用については、会議などで制作サイドから意見を集約し、継続的な改善に繋げています。結果的に皆のデザインシステムとして機能しているのではないか…と思っています。</p><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/91a2b0bd8a764baeb7f91fa718a6eaf0/1710690980596-yrtL4w8f07.webp" alt="" width="800" height="455"></figure>

04. 体制面の強化

<p>弊社は、決算月の翌月に制作リソースが埋まりきらないという課題を例年抱えておりました。これは案件の納品が決算月に集中することに起因しています。スケジュールが埋まらないというネガティブな課題を、ポジティブな課題に変換したものが「プロジェクトの推進」になります。推進するにあたって毎日アイデアを出し続け…誰が何を推進するかを定め、プロジェクトとしてスケジュールを抑えることでリソースの制限に繋げました。また、結果を可視化し、継続的な取り組みに繋げていくことで個人の成長を促し、組織の利益を最大化することを大義としています。10のプロジェクトを推進しておりますが、5つの事例をピックアップして紹介します。</p><h3 style="text-align: start" id="h5effa84ec6"><strong>① アニメーションプロジェクト</strong></h3><p style="text-align: start">デザインテンプレでアニメーション指示書の刷新をおこないました。また、Webサイトの動きを操作・出現・装飾で集めた「MOTION LIST」を制作し、指示書を蓄積することを進めています。社内サイトにはなりますが、共通認識を育てることに繋がっているのではないかと思います。</p><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/d9320642711a4d9da38c9cad0107afaa/picture_pc_d359d846417524dd658b8ddfef7be359.webp" alt="" width="800" height="430"><figcaption>MOTION LISTの指示書ページ</figcaption></figure><p>　</p><blockquote class="twitter-tweet" data-dnt="true" align="center"><p lang="ja" dir="ltr">今日から運用☺️<br><br>Webサイトの動きを、操作・出現・装飾で集めた共通認識を育てるサイトを公開🌈アニメーションにおける課題を解決するための社内サイトです👋誰かの悩みは皆の悩み👀課題を資源と捉え...今に至る。箱が生成できたので、情報を蓄積して、いつか広く活用されていくものに育てていきたい🔥 <a href="https://t.co/RWf5FhMeWL">https://t.co/RWf5FhMeWL</a> <a href="https://t.co/EEUCuTXvKz">pic.twitter.com/EEUCuTXvKz</a></p>— 岩松翔太｜M-HAND, Inc. (@IwamatsuShota) <a href="https://twitter.com/IwamatsuShota/status/1738146033136468086?ref_src=twsrc%5Etfw">December 22, 2023</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<h3 style="text-align: start" id="h09e74a6344"><strong>② タイポグラフィプロジェクト</strong></h3><p style="text-align: start">手描き文字のサイトをリスト化することから始まり、技術習得のエビデンスを可視化し、手描き文字の結果を見える化するプロジェクトです。今期は手描き文字に焦点を当て、実際の案件に手描き文字が採用されるまでに至りました。以下はエビデンスと結果を見える化した内容です。</p><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/1281150f201249e2b054e1b93e9796f4/picture_pc_562724161b54c0eaa7667ba8c690d81a.gif" alt="" width="900" height="752"></figure><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/5ec0a1ec4b644699add20175140da9b3/1710698075171-tieCCi1dOj.webp" alt="" width="800" height="434"><figcaption>採用された小西マーク株式会社様の記念品サイト</figcaption></figure><p> </p><h3 style="text-align: start" id="hd5cb2552a3"><strong>③ アフターエフェクトプロジェクト</strong></h3><p style="text-align: start">アフターエフェクトにおいては、技術の依存度が高くなり、依頼が一部の人に集中するという課題感がありました。そのため、スキルを広げ、出来る人を増やすことを目指して技術習得をプロジェクト化するに至りました。以前から、研修の一環に「チャレンジ案件」というプログラムがありました。これは会社が技術に投資し、自ら課題を設定し、実現可能なスケジュールで取り組むことができるものです。このプログラムをプロジェクト化し、主体的な勉強会の開催を促進し、実務で活かせるレベルの技術習得に繋げました。また、勉強会の動画は弊社の「エムメディア」にアップされており、社員であれば誰でも視聴可能です…。</p><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/7a710cc642fa47eeb8f92fca76c6c2b3/image.png" alt="" width="800" height="434"><figcaption>エムメディアの一部キャプチャ</figcaption></figure><p>ちなみに「新卒デザイナーとAfter Effectsの7日間」の記事を執筆してくれた<a href="https://twitter.com/nrikautsa" target="_blank" rel="noopener noreferrer nofollow"><u>Sato</u></a>さんは、先輩のサポートを受け、実案件でゴリゴリにアフターエフェクトしています。記事と併せて直近対応した実績も紹介させていただきます。</p><p><strong>新卒デザイナーとAfter Effectsの7日間</strong></p><p><a href="https://note.com/mhand_note/n/n542f77c617f4">https://note.com/mhand_note/n/n542f77c617f4</a></p><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://fivot.co.jp/" data-iframely-url="//cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2Ffivot.co.jp%2F&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script><p> </p><h3 style="text-align: start" id="h85ad0549e9"><strong>④ AI画像生成プロジェクト</strong></h3><p style="text-align: start">AI画像生成に関する研究の時間がないけれど、このようなことをしたいという要望をデザイナーから募集し、実務での活用可能性を判断するプロジェクトです。要望から結果までをスプレッドシートで管理し、その結果を「AI画像生成検証レポート」と「AI画像生成レシピ」という形でFigmaにデータとして可視化・蓄積に繋げています。</p><p style="text-align: start"></p><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/e9808599be704f76b05a96f71ec375f1/image.png" alt="" width="800" height="554"><figcaption>プロジェクトのナレッジシート</figcaption></figure><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/c8ff53b84e75446090ca036b56dfe38e/image.png" alt="" width="800" height="470"><figcaption>Figmaでの結果管理</figcaption></figure><p> </p><h3 style="text-align: start" id="h630df7ffb9"><strong>⑤ アクセシビリティプロジェクト</strong></h3><p style="text-align: start">最後にご紹介するのはアクセシビリティプロジェクトです。アクセシビリティとは、ウェブサイトがあらゆるユーザーにとってアクセスしやすい状態を指します。高齢者や、視覚障害や聴覚障害などの障がい者でも、不自由なくウェブサイトを利用できることが理想です。2024年4月1日から施行される改正障害者差別解消法で義務化となるのは、あくまで「合理的配慮」とされています。弊社では、アクセシビリティ改善計画の策定と実施、ガイドラインの理解、適合レベルに沿ったサイトリニューアルを実施するにあたり、①達成方法チェックリストによるフローの確立と、②構築するためのガイドライン、③WFのコンポーネント化を進めています。進行案件と既存の案件でもアクセシビリティ対応が続いているので構造化と同時進行といったところです。これこそ皆で創るデザインシステムなのかもしれません…。</p><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/5e708b45257142e5b641b975380a0fc0/picture_pc_b14c0dc7172bb9138f1af972666d4cf8.webp" alt="" width="800" height="554"><figcaption>達成方法チェックリスト</figcaption></figure><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/f33ae63cab444d3880e798fecd1045e8/1710707062212-FD1KYZUbWd.webp" alt="" width="800" height="959"><figcaption>上｜ガイドライン　下｜コンポーネント</figcaption></figure>

05. プロジェクトの推進

<p>最後に忘れてはならないことに必要なマインドがあります。それは、デザインシステムの最終目的は何かということです。上記にまとめたものは、一種の「思考法と発想法」であり、この問いは「そもそも何のために構造化するのか？」と言い換えてもいいのかもしれません。<br>ものごとが平均化されていくなかで決して答えは1つではないと思いますが、僕自身は「人を動かすため」だと考えています。それは、どんなに優れた発想であってもそれを実現するのは一人だけでは難しいからです。ビジョンを掲げ、共有し、具体化するにしても、それに共感する社員がいなければ機能しません。それゆえ、この構造化は自分たちが伝えたいことを表現する場所という意識を常にもち、それを「重ね続ける」ことで、場所に「価値」が芽生え、育つわけで、最終的なアウトプットにおいては、「他人に影響を与えること」を最終目標にするべきだと考えています。</p>

06. 必要なマインド

<p>IT関連の技術革新は驚くほどのスピードで進み、ハイレベルな要求に臨機応変に応じることがWeb制作の現場に求められています。厳しい環境の中で会社の成長を目指すには「改善するべきこと」と「変えてはいけないこと」を見極めビジネスモデルを柔軟に変革、再編成していくことが不可欠です。現在取り組んでいるセミナー開催においても、属人性の解放を掲げ仕組みに落とし込んでいます。デザインシステムの構築、スプレッド管理、広報のスケジュールなど…。様々な歯車が絡まり、エムハンドは今日も回っています。</p><figure><img src="https://images.microcms-assets.io/assets/480cb31d57dc4d37929efda8f646bfb5/11841f9f77074e02b5212e672fd84298/1710709269724-crMn4QfUBb.webp" alt="" width="800" height="290"></figure><p> </p><p>writer</p><p>-</p><p>岩松翔太　<a href="https://twitter.com/IwamatsuShota" target="_blank" rel="noopener noreferrer nofollow">@IwamatsuShota</a></p>

皆で創るデザインシステム

01. デザインシステムについて

02. デザイン部の取り組み

03. 役割の明確化

04. 体制面の強化

05. プロジェクトの推進

06. 必要なマインド

07. おわりに

Related Blogs

MARPとWARP

XDでホバーアニメーションを作成する方法

CMSってなに？初心者でも分かる基礎とデザインについて

【Photoshop】思わずよだれが！料理写真をより美味しそうに見せる3つのポイント

皆で創るデザインシステム

01. デザインシステムについて

02. デザイン部の取り組み

03. 役割の明確化

04. 体制面の強化

05. プロジェクトの推進

06. 必要なマインド

07. おわりに

Related Blogs

MARPとWARP

XDでホバーアニメーションを作成する方法

CMSってなに？初心者でも分かる基礎とデザインについて

【Photoshop】思わずよだれが！ 料理写真をより美味しそうに見せる3つのポイント

【Photoshop】思わずよだれが！料理写真をより美味しそうに見せる3つのポイント