デジタル 庁 デザイン システム 対応 ホームページ

デザイン システム 対応 ホームページ で
専門家や事例の知見が反映された画面デザイン

---

高い アクセシビリティ、ユーザビリティ
効率的なデザインの実装へ

デジタル 庁 の デザイン システム に 対応 した ホームページ にしてみませんか？これから、ホームページのリニューアルをご検討の場合、デジタル 庁 デザイン システムを活用して、webページを作るのは、おすすめの方法です。

ホームページのリニューアル実施後に、コスト面以外で、よく聞く課題、お悩みがいくつかあります。主なところで、以下の内容です。

• リニューアルしたけど、わかりにくいページだった
• 導線がわかりにくく、回遊率が落ちた
• 直帰率が上がってしまった

上記のように、ホームページのリニューアルしてみたら、課題が出てくる、見えてくるケースというのがあります。機能が不足していた、とか、思っているものと違うものができた！とか、制作についての課題は置いておきますが。

上記のようなホームページのリニューアル後のお悩みについては、結局のところ、デザインシステムの思想がないことが原因だったりすることもあります。

そこで、その解決策として、クロトでご提案している方法が、デジタル 庁 デザイン システム 対応 の ホームページ にすることです。

そもそも、デジタル 庁 デザイン システム とは、2022年11月にデジタル庁が公開を始めたデザインシステムです。官公庁、自治体のホームページ、スマートフォンアプリ向けに制作されたデザインのガイドライン、テンプレート、パーツ集になります。このデジタル 庁 デザイン システムは、https://www.digital.go.jp/policies/servicedesign/designsystem/ にて、一般公開されているサービスです。フォントや余白、各種パーツなどを、デザインツール Figma を通して、提供しています。

この デジタル 庁 デザイン システム の 目的は、

• ユーザー視点のデザインにしたい
• 利用しやすいwebサイトを作りたい
• 一貫性を持ちたい！
• 開発速度をあげたい

という点です。そのため、アクセシビリティ、ユーザビリティの高いデザインシステムになっています。システム開発時の取り込みもしやすいデザインシステムです。入力フォームなどのデザインガイドなどもあるため、効率的に、webサービスを開発できる仕組みになっています。

デジタル 庁のお役所仕事なんではないか？と勘繰る方もいらっしゃるかもしれませんが、この、デジタル 庁 デザイン システムは、評判がいいのです。

twitterで、デジタル 庁 デザイン システム 口コミを見てみると、以下のようなレビューがあります。評価高いんです。twitterで、「デジタル庁 デザイン システム」で検索をしてみてください。

デジタル庁のFigmaのデザインガイド日本一のクオリティ

・デザインシステムとして見やすく、トークンやサイズの記載が丁寧
・ガイドとしてUIの基本原則やアクセシビリティについても網羅
・命名やサイズ分けなど実装を含めた運用Tipsまで

参考になりまくりなので、全IT人材に読んでほしい
URL↓ pic.twitter.com/RURSdTveow

— rikika | プロダクトを作りまくるデザインエンジニア (@rikikamano) June 20, 2023

デジタル庁のHP

● 12カラムグリッドデザインを採用
● JIS規格のアクセシビリティで効果検証も実施
● Next.jsなど採用し動作が阿部寛さんHPより速い
● Figmaでデザインシステムなど無料公開中

と、政府と思えない柔軟かつスピーディーな開発手法でアセットも公開してくれて本当に凄い。

— うめゆな｜新規事業開発 (@yuna_ume) June 12, 2023

クロトでは、この実用的なレベルにまで昇華した、デジタル 庁 デザイン システム を活用して、ホームページのリニューアル、制作を行うことが可能です。

これによって、ユーザー側の負担を減らして、わかりやすいホームページの制作が、進められるようになっています。デザインに関して、言語化されているので、お客様においても、イメージがわきやすくなると思っています。

デジタル 庁 デザイン システム に 対応した ホームページは、wordpress でも、構築が可能になります。パーツなどを、wordpressに組み込んでいくことで、洗練されたデザインのホームページにすることが可能です。wordpressであれば、管理画面もついているので、更新も簡単です。wordpressは、SEO対策とも相性のいいCMSなので、洗練された、デジタル 庁 デザイン システムを活用することで、よりCVの出やすいwebサイトを作れるようになると思います。wordpressは、オープンソースなので、デジタル 庁 デザイン システム の オープンな思想ともマッチしますからね。

デジタル 庁 デザイン システム に 対応した ホームページ を作る際、クロトなら、Googleアナリティクス4の設定、タグマネージャーの設定、SEO対策に大きな影響を与えるサーチコンソールの設定、ヒートマップ分析ツールの導入も行います。SEO対策の観点から、レンタルサーバならば、そのサーバ、ドメイン管理次第で、SSL設定、常時SSL化の設定も行います。SSLを導入すると、通信が暗号化され、セキュリティもあがり、これによって、Googleからの評価もアップします。Googleアナリティクス4や、ヒートマップ分析ツールが設定されていれば、ホームページ の アクセス状況や、ページ内のどのコンテンツブロックが読まれているか？を知ることも可能です。Googleアナリティクス4は、初期では、２か月しかデータを保存してくれないので、ちゃんと、設定しておきましょうね。最大で14か月までは、データの保持期間を延ばすことができます。

デジタルマーケティングのプロを自負するクロトなら、デジタル 庁 デザイン システムを活用してのコーディング実装も可能です。web コーディング には 実績が多くあります。そして、無料で使えるのですから、これを活用しない手はないですね。クロトは、15年以上続いている企業ですので、安定して、こういった最新サービスの活用を可能にしていっています。数多くのwebサイトの開発、webデザインをしてきた実績があります。ECサイト 会員制サイト 業務系システム なども、数多く実装してきました。

デジタル 庁 デザイン システムを活用した、web作り。ぜひ1度ご検討ください。アップデートしていくデザインシステムに対して、クロトも、どんどんアップデートできるようにノウハウを高めていっています。自治体さま、官公庁さまも、ぜひ、クロトでの、導入をご検討ください。お問い合わせフォームより、実施したい内容、課題、予算、依頼したい事項などの具体的なお話をご記載いただければ幸いです。担当者より、改めて、ご連絡いたします。必要であれば、オンラインでのお打ち合わせなども行っておりますので、お声がけくださいませ。よろしくお願いします。

 

---

デジタル 庁 デザイン システム メリット

デジタル 庁 デザイン システムは、利用者の課題の理解やサービスの改善に直結していくデザインシステムです。
7つのメリットをご紹介します！！

1. 高いユーザビリティ
2. 誰もが利用できる、理解しやすい
3. 直感的
4. シンプル
5. 信頼度が高い
6. 多くの知見が取り込まれている
7. ライセンス費用がかからない！無料！！

といった点で、すばらしいデザインシステムです。

とはいえ、御社の商品、サービスの差別化につなげていく、訴求内容などをまとめていくデザインもしていく必要はあります。

---

デザイン システム とは

デザインシステムとは、デザインを構造化、言語化した仕組みです。

そのため、デザインの目的、デザインの基本原則やガイドライン、パーツ、テンプレート、パターン、ライブラリなどが、デザインシステムの対象になります。

デザインシステムによって、フォントや、余白などがコントロールされるので、多くの人が見慣れているwebサイトに近づき、一般的に、ホームページの利用者にとっては、使いやすいホームページになっていきます

なお、デザインシステムは、デジタル庁の専売特許ではありません。Googleのマテリアルデザイン３ や MUIなども、デザインシステムの代表例とされています。

---

UI 一貫性 で システム開発 が はかどる

デザインシステムを導入すると、UI の一貫性 が保たれるようになります。

高いユーザビリティ、アクセシビリティも、デザインシステムの魅力ですが、地味に、システムの組み込み開発時に、効率的に、更新できるところもメリットです。

パーツのスタイルをちょっと変えて目立たせるのもいいと思うのですが、汎用性を意識して突き詰めていくと、デジタル 庁 デザイン システム のような形式の方が、システム化の効率は上昇します。

デジタル 庁 デザイン システム を 導入して、UIの一貫性を保てれば、ブランディング的にもいいですよね。

モダンなデザインですが、シンプルなので、汎用的に使えるデザインになっていると思います。

---

デジタル 庁 デザイン システム 対応 ホームページ よくある質問

デジタル 庁 デザイン システム 対応 ホームページ の よくある質問 をまとめました。

---

デジタル 庁 デザイン システム 想定 コンテンツ

デジタル 庁 デザイン システム を活用して、リニューアルしたホームページで 作れる コンテンツ の 例 を記載します。ただ、システムといっても、機能ではないため、コンテンツとして、どんなコンテンツでも開発可能です。

• ブランド紹介
• 商品一覧
• 商品詳細
• 会社概要
• CSR
• IR
• 代表挨拶
• 事業紹介
• ブログ
• お問い合わせフォーム
• EC
• 会員機能

など

wordpress へ組み込むことで、CMSとしての活躍も期待できます。採用のエントリーフォームとしても展開できますね。wordpressのカスタマイズ開発なども、クロトでは対応しておりますので、あわせて、ご相談ください。

---

よくある 管理画面 UIデザイン 課題

管理画面 UIデザイン で 課題になりやすいポイントをご紹介します。こういう課題があるからこそ、デジタル 庁 デザイン システム が、すばらしい！というイメージがわいてきます。

1. 情報構造が複雑
2. 視線 意識 が されていない レイアウト
3. 色数が多い
4. アイコンに頼りすぎ
5. フォントが特殊
6. ボタンがわかりにくい
7. 現在地がわからない

こういった部分が、よくある 管理画面 UIデザイン 課題 です。これらがあると、ユーザビリティの悪い管理画面になりがちです。

情報構造が複雑で、多層構造になると、細かく整理していても、わかりにくくなります。直感的でないからです。２階層くらいで、階層は抑えましょう。階層を増やすなら、タブと、サイドバーでわける、などをしていく方が、わかりやすくなります。

パンクズがなくて、現在地がわからないケースも、管理画面あるあるです。フロント画面にはあるのに、管理画面のUIだと、パンクズがなかったりします。

また、視線 誘導 の 意識 が されていない ために、あっちこっちに、視線を配らないといけないレイアウトになるのも、よくないです。操作パネルは、基本左。読む情報は、Ｚ型で目に入るようにする。

こういった配慮などが、デジタル 庁 デザイン システムには、ちゃんと適用されていますので、このノウハウを活かしていくといいかんじになるんですよね！

---

おすすめ 業務 システム 画面 デザイン

デジタル 庁 デザイン システム の コンポネートなどを活用すると、業務 システム 画面 デザイン が、圧倒的に見やすいUIになります。

• わかりやすい余白
• 各パーツの装飾
• 画面内での動き

デジタル 庁 デザイン システム は 業務 システム 画面 デザイン との相性が良いです。そのため、今後、業務システムや、基幹システムの管理画面のアップデート、UI改善をご検討されている場合、デジタル 庁 デザイン システムを活用されることをおすすめします。

使い心地の良い 業務系システム をご検討される場合、ぜひ、UI/UXデザインのベースとしても、デジタル 庁 デザイン システム は よいフォーマットになっていると思われます。さまざまな知見から、的確に、見やすい、デザインになるでしょう。