デザインシステムの作り方を、デザインチームマネージャーが解説｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG
BLOG
ブログ
デザインシステムの作り方を、デザインチームマネージャーが解説
2022-06-17 制作・開発
こんにちは。GIGのメディア事業に携わっている鈴木（りなち）です。
近年、多くのデジタルプロダクトの運用・開発の現場で導入されている「デザインシステム」。
デザインシステムの導入により、効率的なプロジェクトの進行を期待できるようですが、具体的にどのような手順で作成されているのか疑問に思いました。
「センスのあるデザインを追い求めて作成していくものなのか……」「簡単にパパッと作成できてしまうものなのか……」実際のところどうなのでしょうか。
GIGのデザインチームのマネージャーとして、デザインシステム設計から運用まで行う小見太嶺さんに、デザインシステムの作り方をお伺いしました。
小見 太嶺（こみ たいれい）：アートディレクター / デザイナー。独学でWeb制作を習得。約3年間Web制作会社に勤務し、デザイン・マークアップ・CMS構築を一貫して担当したのち、2019年2月にGIGにジョイン。現在はデザイン事業部にて、クライアントワークとチームマネジメントを行う。
デザインシステムとは
デザインシステムとは、プロジェクトを進める中で共通の方向を見て議論するための一つの指針。デザインのぶれなくクオリティを維持し、効率的にアウトプットするための仕組みです。
デザインシステムについて詳しく知りたい方は、以下の記事をご参照ください。
デザインシステムの作り方
今回は、Webサイトにおけるデザインシステムの作り方を伺いました。5段階に分けてご紹介します。
1. コンセプト設計
▲出典：Shutterstockまずは「お客様の課題解決のために、どのようなデザインのサイトを作成するか」を文章に起こします。
ポイントは、お客様が抱える課題の解決策として本当に相応しいかどうかに注目することですね。コンセプト設計を行っても、課題解決ができなければ、あまり意味がありません。
お客様によっては、この工程に最も時間を費やす場合があります。
2. グランドデザインの作成
▲出典：Shutterstock
グランドデザインとは、Webサイトの全体構造のことを指します。
まずはコンセプトに基づいて、Webサイトのトップページを作成していきます。
次にトップページで作ったデザインの雰囲気を踏襲し、下層ページを作成します。そのため、「グランドデザイン＝トップページ」と認識しても良いでしょう。
ポイントは、コンセプトをしっかり体現できているかということ。
「どれだけセンスのあるデザインか」より、「そのデザインでお客様に利益が出せるか」に注力するということが大切です。
作ったデザインに対し、論理的な根拠を持たせてお客様に納得していただく必要があります。コンセプト設計と同様に、お客様によっては、この工程に最も時間を費やす場合がありますね。
3. デザインガイドラインの作成
▲出典：Shutterstock
グランドデザインを言語化することで、デザインガイドラインが出来上がります。
この工程は、お客様の合意が必要というより、プロジェクトを進行していく上で、エンジニアやデザイナーの作業をスムーズにするためのものです。エンジニアの実装指示書と言えるでしょう。
色・アイコン・ボタンの形状など、細かい部分をどのようにするか記述します。
こうして出来上がったデザインガイドラインを用いて、下層ページの作成を行うのです。
ポイントは、どれだけ詳細に記述できるかということ。極論、デザイナーがいなくても統一された世界観でプロジェクトが進められるほど、細かいものが理想です。
4. コンポーネントのライブラリ化
コンポーネントとは、プロジェクト内で使いまわせるパーツのこと。
デザインガイドラインを用いて下層ページを作成する中で生まれたコンポーネントをまとめ、整理します。これが、コンポーネントのライブラリ化です。
ポイントは、「エンジニアの作業を楽にするためにはどうしたらいいか」と考えながら作ることです。エンジニアの作業効率に直接的に関わります。
ただし、コンポーネントのライブラリ化にはそれなりの時間や労力が必要ですね。
ライブラリ化に膨大な時間がかかってしまうことが見込まれる場合は、デザインシステムを作らない判断をとることもあります。
5. 随時アップデートする
デザインシステムをプロジェクトメンバーに浸透させることが大切です。
事前に共有し、プロジェクトを進める前に読み込むのはもちろん、作業を進めていく中で常に立ち返るものとして置いておく必要があります。
プロジェクトに関わる全ての人が共通の認識を持てている状態が理想です。デザインシステムを作成したとしても、メンバーに見てもらえないとほとんど意味がありませんからね。
さいごに
デザインシステムの作り方から、効果的な使い方まで学ぶことができました。実際に現場で働く方のリアルな声は大変貴重でした。
デザインシステムを作成するには、「センスの良いデザインシステム」ではなく、「なぜそうしたのか論理的に説明できるデザインシステム」を追い求めることが重要であるとよくわかりました。
お客様の課題解決に本当に相応しいデザインシステムを作成するには、試行錯誤が必要なのですね。
プロジェクトにおいて、デザインシステムを有効活用することができれば、スムーズで、高いクオリティの進行・運用が期待できますね。
WebやDXの課題、お気軽にご相談ください。
鈴木 里菜（りなち）
GIGのメディア事業部でインターンとして働くライター/編集者。フリーランスの生活やWeb制作に役立つ記事を執筆中。なんでもかんでも苺味を好みます。
SHARE
