駆け出しWebデザイナーに教えたい!デジタル庁のデザインシステム

こんにちはディレクターの中西です。
ワイヤーフレームやデザインを作る時に、文字や余白はどれぐらいの大きさがいいのかな…など1つ1つに悩むことってありませんか? 私は、結構悩んじゃいます。
この前、そのことを社長に相談してみたら、「デジタル庁のデザインシステム見てみたら?」を教えてもらい、正直「えっ!もっと早く知りたかった!!!」と思いました。
そこで、他にも知りたい人は絶対いると思い、共有させていただきます。しかもタダで見れます!



この記事はこんな方のためになる記事です。

「これからデザインを勉強したい」
「ワイヤーフレームやデザイン作成時によく悩む」
「作ったデザインがまとまっていないと感じる」

<本記事の目次>

1. デジタル庁のデザインシステムとは
2. デザインシステムのメリット
3. デザインシステムの内容
4. デザインシステムの具体的な活用方法
5. まとめ

 

1. デジタル庁のデザインシステムとは

デジタル庁のデザインシステムは、一貫性のあるデザインを担保し、利用者にWebサイトやWebサービスを使いやすくするためのガイドラインです。

 リンク:デジタル庁のデザインシステム

このシステムでは、デザインの基本原則、色やフォント、ボタンなどのUIパーツ、レイアウトのテンプレートが紹介されています。これにより、デザイナーや開発者は利用者にとって見やすい一貫性のあるデザインを容易に作成できます。また、プロジェクトに応じて柔軟にカスタマイズすることも可能です。

2. デザインシステムのメリット

デザインシステムを活用することで、以下のようなメリットがあります。

  • 一貫性のあるデザイン:全てのページやコンポーネントが統一されたスタイルで設計されるため、見やすく理解しやすい
  • 効率的な開発:パーツ化されたデザイン要素を再利用することで、開発時間の削減
  • 品質の向上:デザインのガイドラインを取り入れることで、品質が担保される
  • コミュニケーションの効率化:デザイナーや開発者間で共通の言語および認識が持てることで、スムーズなコミュニケーションが取りやすい

3. デザインシステムの内容

デジタル庁のデザインシステムでは、以下のような内容が提供されています。

  • デザインの基本原則:ユーザーエクスペリエンスを考慮したデザインの基本ルール
  • UIパーツ:ボタン、フォーム、タブなどの基本的なUI要素、Figmaなどのデザインツールで利用可能なテンプレート
  • レイアウトのテンプレート:異なる画面サイズに対応したレスポンシブデザインのテンプレート
  • 色彩とタイポグラフィ:統一されたカラーパレットとフォントスタイル

4. デザインシステムの具体的な活用方法

デジタル庁のデザインシステムを具体的に活用する方法としては、以下のような手順があります。

  1. デザインガイドラインの理解:まずはデザインシステムの基本原則やガイドラインを理解します。
  2. UIパーツの選定:プロジェクトに必要なUIパーツをデザインシステムから選定します。
  3. レイアウトの構築:選定したUIパーツを使って、ページのレイアウトを構築します。
  4. カスタマイズ:プロジェクトの要件に合わせて、UIパーツやレイアウトをカスタマイズします。
  5. コンポーネントの再利用:一度作成したコンポーネントは、他のページやプロジェクトでも再利用することができます。

5. まとめ

デジタル庁のデザインシステムは、駆け出しのWebデザイナーや実践的なデザインを学びたい方にとって、非常に有益なリソースです。一貫性のあるデザインを実現し、開発効率を高めるために、ぜひ活用してみてください。



【参考サイト】(https://www.digital.go.jp/policies/servicedesign/designsystem)

中西 さつき|株式会社シンシエイト
この記事を書いた人
中西 さつき|株式会社シンシエイト
株式会社シンシエイト|恩を繋いで世の中へ笑顔を増やす|ディレクター|大学院修士課程 修了|バレーボール全国大会制覇|ワクワクすることが大好き
関連する記事
photo
2016年の振り返りと2017年の決意表明
コラム
なぜ「深い質問」が重要なのか?
コラム
NO IMAGE
行きたくなる美容室ってこんな美容室だよね
コラム
NO IMAGE
美味かったけど、二度と行かない居酒屋。
コラム
NO IMAGE
営業マンからもっと営業されたいって話
コラム
NO IMAGE
大好きなあの人と付き合う方法を考えよう
コラム
NO IMAGE
愛だよね。コンドームの広告が普通にいい動画。そして爆笑。
コラム
NO IMAGE
ビジネスマンが知っておきたい「ロジカルに簡潔に話すコツ」
コラム
NO IMAGE
決心を鈍らせる心に潜んだ4つの感情
コラム
NO IMAGE
吐き出したい事を全て書き出したら案外スッキリした話
コラム
マーケティングとWeb制作で
貴社の経営課題を解決します

市場調査や競合調査を始め、企業やサービスの優位性を理解した上で、UI/UX設計やコンテンツマーケティング、SEO・ネット広告を中心としたWebマーケティングを通じて、ビジネスを加速させるご提案をしています。