なぜ小村ソフトはデジタル庁デザインシステムでHPを作るのか ── 安さと品質は両立できる

ホームページ制作の見積もりで大きな割合を占めるのが、デザイン制作の工数です。 小村ソフトはこの工程を、デジタル庁が公開しているデザインシステムを土台にすることで大幅に圧縮し、費用を抑えながら品質を安定させる進め方をとっています。

「安いホームページ制作」と聞くと、多くの人はどこかで品質を犠牲にしているのではないかと考えます。実際、価格を下げるためにヒアリングを省いたり、テンプレートに文章を流し込むだけの制作は、何をしている会社か伝わらないサイト を生みがちです。

小村ソフトの HP制作(ホームページ制作)が価格を抑えられているのは、そこではなく デザイン工程の標準化 によるものです。この記事では、その土台にしているデジタル庁デザインシステムとは何か、実際に何をどう使っているのか、なぜ安くなるのか、なぜ品質が落ちないのか、そしてどんな案件には向かないのかを順に説明します。

以降、当社のサービス名としては「HP制作」、一般的な工程の呼び名としては「ホームページ制作」と表記します。

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

デジタル庁デザインシステムは、デジタル庁が公開している、行政サービスのウェブサイト・アプリのためのデザインの標準仕様です。一次情報は公式サイトにあります。

• 公式サイト: デジタル庁デザインシステムβ版
• ライセンス・利用条件: 利用上の注意事項

おおまかに言うと、次のようなものが体系立てて定義されています。

重要なのは、これが 公開されたライセンス条件のもとで一般に配布されていて、民間サイトでも利用できる という点です。行政手続きのサイトは、年齢・環境・ITへの習熟度を問わず誰もが使えなければならないため、コントラストや文字サイズ、操作のしやすさが検証された上で設計されています。その蓄積を、民間の会社サイトでもそのまま土台にできます。

ライセンスの具体的な条件

「オープンなライセンス」と一言で片付けると、実務で必要な判断ができません。公式の 利用上の注意事項 では、配布物の種類ごとにライセンスが分けて示されています。

実務上のポイントは2つです。1つは、Figmaデータやコードスニペットを編集・加工して自社サイトに組み込む使い方であれば、出典表示は求められないこと。会社サイトの制作でこのデザインシステムを使う場合、ほとんどはこの形になります。もう1つは、編集・加工したものを「あたかもデジタル庁が作成したかのような態様」で公表・利用してはいけないと明記されていることです。

なお、利用にあたってデジタル庁の認定や承認が与えられるわけではありません。当社も「デジタル庁公認」ではなく、公開されている標準仕様を民間向けに応用している、という立場です。上のライセンス条件は記事執筆時点のものなので、採用判断の際は必ず公式ページで最新の条件を確認してください。

この記事の知識マップ

この記事は、小村ソフトのホームページ制作がデジタル庁デザインシステムを土台にしている理由を、デザイントークン・コンポーネント・テンプレートという3層の取り込み方から説明する。デジタル庁デザインシステムはFigmaデザインデータにCC BY 4.0(同梱アイコンはApache License 2.0)、コードスニペットにMIT Licenseを適用しており、編集・加工して自社サイトに組み込む使い方では出典表示が不要になる。標準化された部品を使うことで、デザイン案の複数提示や修正ラウンドといった費用のかかる工程が圧縮される一方、行政サービスで検証されたアクセシビリティの水準がそのまま品質の安定につながる。ただし、世界観の演出が価値の中心になるブランドサイトのような案件には、この進め方は向かないとされる。

flowchart LR
    accTitle: デジタル庁デザインシステムを土台にしたホームページ制作の知識マップ
    accDescr: 小村ソフトのホームページ制作がデジタル庁デザインシステムのデザイントークン・コンポーネント・テンプレートを土台にし、Figmaデータ・アイコン・コードスニペットそれぞれのライセンスと組み合わせながらデザイン工程の費用を抑えつつアクセシビリティを担保する一方、凝ったブランドビジュアルが必要な案件には向かないことを示す図
    digital_agency_design_system["デジタル庁デザインシステム"]
    website_development["ホームページ制作"]
    design_token["デザイントークン"]
    design_system_component["デザインシステムのコンポーネント"]
    web_accessibility["ウェブアクセシビリティ"]
    digital_agency_copyright_policy["デジタル庁ウェブサイトのコピーライトポリシー"]
    cc_by_4_license["CC BY 4.0"]
    apache_license_2["Apache License 2.0"]
    mit_license["MIT License"]
    site_template["サイトテンプレート"]
    design_process_cost["デザイン制作工程の費用"]
    brand_visual_design["ブランド表現に特化したビジュアルデザイン"]
    website_development -.->|"利用する"| digital_agency_design_system
    digital_agency_design_system -->|"利用する"| design_token
    digital_agency_design_system -->|"利用する"| design_system_component
    design_system_component -->|"利用する"| web_accessibility
    digital_agency_design_system -->|"利用する"| digital_agency_copyright_policy
    digital_agency_design_system -->|"利用する"| cc_by_4_license
    digital_agency_design_system -->|"利用する"| apache_license_2
    digital_agency_design_system -->|"利用する"| mit_license
    website_development -.->|"利用する"| design_token
    website_development -.->|"利用する"| design_system_component
    website_development -.->|"利用する"| site_template
    site_template -->|"前提とする"| design_token
    site_template -->|"前提とする"| design_system_component
    digital_agency_design_system -.->|"軽減する"| design_process_cost
    digital_agency_design_system -.->|"用いるのは非推奨"| brand_visual_design

図の実線は常に成り立つ関係、破線は条件付きの関係です(成立条件は詳細ページの各関係の説明に記載)。関係すべての一覧(全15件、根拠・確度つき)と主要概念の定義は知識マップ詳細ページにまとめています。データ: JSON-LD / Turtle

2. 「土台にする」とは具体的に何をしているのか

「デザインシステムを土台にする」という言い方は便利ですが、実装の粒度はいくつもあります。当社の場合、次の3層に分けて取り込んでいます。本サイト(comcomponent.com)自体がこの構成です。

ここで意識的にしていないことも書いておきます。公式が配布しているコンポーネントのコードを丸ごと持ち込んで、そのまま外部依存として抱える構成にはしていません。会社サイトで必要な部品は限られており、フルセットを取り込むとサイトの読み込みが重くなるうえ、上流の更新に追従する保守コストが発生するためです。必要な部品だけを、仕様に沿って自前の実装として持つという判断です。

この構成の効果は、ページを追加したときに現れます。新しいサービスページを1枚足しても、ボタンの形も見出しの階層も余白も既存ページと揃うため、「デザインをどうするか」を毎回考えずに済みます。

3. なぜ安くなるのか ── 見積もりからデザイン工程が消える

一般的なホームページ制作の見積もりには、デザイン関連の項目がかなりの割合で含まれます。中小企業のホームページ制作費用の相場 の早見表では、独自デザインを含む構成が30万円〜100万円の帯に入りますが、この帯の中でデザイン工程が積み上がる内訳は、おおむね次のような作業です。

見積書の「デザイン一式」がどれを含むのかは会社によって違うため、比較するときはこの粒度まで開いてもらうのが確実です(この読み方は 費用の記事 で詳しく扱っています)。

デザインシステムを土台にすると、この構図が変わります。

• 配色・文字サイズ・余白・ボタンなどの基準は、最初から決まっている
• 「デザイン案を複数出して選んで修正する」というラウンドが原則不要になる
• デザイナーの感覚に依存する判断が減るため、手戻りが起きにくい

つまり、値引きで安くしているのではなく、工程そのものが減るから安くできる ということです。浮いた工数は、本来効果に直結する部分 ── 何をしている会社かが伝わる構成づくり、文章、問い合わせ導線の設計 ── に回します。伝わらないサイトの原因はデザインではなく構成にあることがほとんどで、これは 問い合わせが来ないサイトで先に直すべき3つの場所 でも書いたとおりです。

4. なぜ品質が落ちないのか ── むしろ安定する

「デザインを省くと品質が下がる」という直感は、ゼロから作るデザインを前提にしたものです。標準化されたデザインシステムを使う場合、話は逆になります。

第一に、アクセシビリティです。デジタル庁デザインシステムの部品は、色のコントラスト、文字サイズ、フォーカスの見え方、タッチ操作のしやすさといった点に配慮して設計されています。個別案件のデザインでこの水準を毎回担保しようとすると、それ自体に検証工数がかかります。検証を経た部品を使うほうが、結果として品質が安定します。

第二に、実運用の実績です。行政サービスは、スマホに不慣れな人から専門家まで、極めて幅広い利用者が実際に使う場面で運用されています。そこで使われている設計ルールは、「見た目が新しいかどうか」ではなく「誰でも迷わず使えるか」で鍛えられたものです。会社のサイトに来る見込み客にとって重要なのも、まさにその性質です。

第三に、一貫性です。ページごとにボタンの形や見出しのルールが揺れているサイトは、それだけで読みにくくなります。デザインシステムに従うと、ページを後から追加しても構造とトーンが崩れません。

本サイト自体が、このデザインシステムを土台に構築されています。また、制作事例の ドーズキャリーサービス様のサイトリニューアル も同じ方針で構築しました。リニューアルの進め方そのものは 事例記事 に詳しくまとめています。

具体的にどの部品が効いているのかは、実際のページを見比べるのが早いです。本サイトでの使いどころを挙げると次のようになります。

同じ部品を別のサイトに適用したものが ドーズキャリーサービス です。配色・写真・文章は当然まったく違いますが、ボタンの押しやすさや見出しの階層の付き方が同じ設計ルールでできていることは、並べて見ると分かります。

5. 標準化しても「同じ見た目」にはならない

よくある心配は「標準デザインだと、他社と同じ見た目にならないか」というものです。

標準化されるのは、配色の基準、文字サイズの体系、部品の設計ルールといった 土台の部分 です。サイトの印象を実際に決めるのは、ロゴ、写真、キャッチコピー、ページ構成、文章のトーンで、ここはサイトごとにゼロから作ります。土台が揃っていることと、個性がないことは別の話です。

一方で、正直にお伝えするべきこともあります。ブランド表現として凝った独自ビジュアルやアニメーションが必要な案件には、この進め方は向きません。 たとえば、世界観の演出が価値の中心になるブランドサイトやキャンペーンサイトがそれにあたります。そうした案件では、デザインにきちんと投資をして専門のデザイン会社に依頼するほうが良い結果になります。当社への相談でそのようなご要望が中心だと分かった場合は、最初の時点で率直にそうお伝えします。

6. まとめ

• ホームページ制作の費用の中で、ゼロからのデザイン制作は大きな割合を占める
• 小村ソフトは、デジタル庁が公開しているデザインシステム(公式サイト)を土台にすることで、この工程を大幅に圧縮している
• ライセンスは配布物ごとに分かれており、Figmaデータは CC BY 4.0、コードスニペットは MIT License。編集・加工して自社サイトに組み込む使い方であれば出典表示は不要
• 「土台にする」の中身は、デザイントークンの共通化・部品のCSSクラス化・テンプレートへの組み込みの3層
• 安くなる理由は値引きではなく、工程が減ること。浮いた工数は構成・文章・導線の設計に回す
• アクセシビリティに配慮して設計され、行政サービスで実運用されている標準部品を使うため、品質はむしろ安定する
• ロゴ・写真・文章はサイトごとに作るため、同じ見た目にはならない。ただし凝った独自ビジュアルが必要な案件には不向き

費用を抑えつつ、伝わる構成のサイトを作りたい場合は、HP制作 のページで進め方と価格を確認できます。現状のサイトのURLを添えて お問い合わせ いただければ、何から直すと効果が出やすいかを整理してお返しします。

関連記事

• 中小企業のホームページ制作費用 ── 相場の早見表と見積もりの読み方
• サイトリニューアル事例:宮崎の運送会社ドーズキャリーサービス
• 問い合わせが来ないサイトで、先に直すべき3つの場所
• HP制作

関連する記事

同じタグを共有する最新の記事です。さらに近い話題で知識を深められます。

関連トピック

このテーマと近いトピックページです。記事を起点に、関連するサービスや他の記事へ進めます。

このテーマがつながるサービス

この記事は次のサービスページにつながります。近い入口からご覧ください。

よくある質問

この記事のテーマについて、相談時によくある質問をまとめています。

デジタル庁デザインシステムは民間の会社サイトに使ってもよいのですか？

はい。デジタル庁デザインシステムは、デジタル庁がオープンなライセンスで一般公開しており、行政機関以外のサイトでも利用できます。ただし、利用にあたってデジタル庁の認定や承認が付与されるわけではありません。当社も、公開されているデザインシステムを民間サイト向けに応用しているという立場です。

標準デザインだと、他社のサイトと同じ見た目になりませんか？

配色・余白・部品の設計ルールが共通になるだけで、ロゴ、写真、キャッチコピー、ページ構成はサイトごとに作ります。実際の印象を決めるのは主にこの部分なので、標準化していても「どこかで見た同じサイト」にはなりません。逆に、ボタンの押しやすさや文字の読みやすさといった、揃っているべき部分が揃うのが標準化の効果です。

著者プロフィール

記事の著者プロフィールページです。

小村 豪

合同会社小村ソフト 代表

Windows ソフト開発、技術相談、不具合調査を中心に、既存資産が残る案件や原因が見えにくい障害調査に強みがあります。