Почему KomuraSoft создаёт сайты на дизайн-системе Цифрового агентства Японии — цена и качество совместимы
· Обновлено: · Го Комура · Создание сайтов, Дизайн-система, Стандартизация дизайна, Доступность, Диапазон цен
История изменений (2 обновлений, последнее 30 Aug 2026)
Журнал изменений этой статьи. Там, где версия до правки была заархивирована, она остаётся доступной для чтения по постоянной ссылке с DOI.
- Переведены названия источников в списке литературы. Утверждения статьи не менялись.
- Русский текст переписан как полноценный технический перевод, а не калька с японского. Утверждения статьи не менялись.
- Первая публикация
Цитирование статьи(DOI (зарегистрированный архив): 10.5281/zenodo.21619990)
Приведённые ниже DOI относятся к ранее зарегистрированным архивным версиям, которые могут отличаться от текущего текста. Для ссылки на текущий текст используйте URL этой страницы.
Го Комура (2026). Почему KomuraSoft LLC создаёт сайты на дизайн-системе Цифрового агентства Японии — цена и качество совместимы. KomuraSoft LLC. https://comcomponent.com/ru/blog/digital-agency-design-system-website-development/
- DOI (зарегистрированный архив)
- 10.5281/zenodo.21619990
- DOI (последняя зарегистрированная версия)
- 10.5281/zenodo.21619991
Значительную долю сметы на создание сайта занимает работа над дизайном. KomuraSoft сильно сокращает этот этап, беря за основу дизайн-систему, опубликованную Цифровым агентством Японии. Так удаётся сдерживать стоимость и стабилизировать качество.
Когда говорят «недорогое создание сайта», многие думают, что качество где-то принесено в жертву. И действительно: если ради цены пропускают интервью или просто заливают текст в шаблон, часто получается сайт, по которому непонятно, чем занимается компания.
Стоимость разработки сайтов (создания сайта) в KomuraSoft удаётся удерживать не за счёт этого, а за счёт стандартизации этапа дизайна. Ниже по порядку: что такое дизайн-система Цифрового агентства, что именно и как мы из неё берём, почему это дешевле, почему качество не падает и для каких проектов подход не подходит.
Далее название нашей услуги — «разработка сайтов», а общий процесс в отрасли — «создание сайта».
1. Что такое дизайн-система Цифрового агентства
Дизайн-система Цифрового агентства — опубликованная Цифровым агентством Японии стандартная спецификация дизайна для сайтов и приложений государственных сервисов. Первичные сведения — на официальном сайте.
- Официальный сайт: Дизайн-система Цифрового агентства, β-версия
- Лицензия и условия использования: Замечания по использованию
В общих чертах в ней системно задано следующее.
| Элемент | Примеры |
|---|---|
| Дизайн-токены | Базовые значения цветов, размера шрифта, отступов, теней |
| Компоненты | Спецификации элементов интерфейса: кнопки, формы, карточки, хлебные крошки |
| Подход к проектированию | Требования к доступности, рекомендации по вёрстке и формулировкам |
Важно, что система распространяется на открытых лицензионных условиях и доступна в том числе частным сайтам. Государственными онлайн-сервисами должны пользоваться люди любого возраста, с любой средой и любым уровнем цифровых навыков. Поэтому контраст, размер шрифта и удобство операций в них проектируют после проверки. Этот накопленный опыт можно взять за основу и для сайта компании.
Конкретные условия лицензии
Если ограничиться словами «открытая лицензия», для практических решений этого мало. В официальных замечаниях по использованию лицензия указана отдельно для каждого вида материалов.
| Материал | Применяемая лицензия | Указание источника (атрибуция) |
|---|---|---|
| Сайт самой дизайн-системы (пояснения, руководства и т.п.) | Политика авторских прав сайта Цифрового агентства (Правила использования общественных данных, версия 1.0) | Нужно. Если материалы редактировали или перерабатывали, это тоже указывают |
| Дизайн-данные (Figma) | CC BY 4.0. На входящие в комплект иконки Material Symbols — Apache License 2.0 | При редактировании и переработке не требуется. Если публикуют без изменений — требуется |
| Фрагменты кода | MIT License | При редактировании и переработке не требуется. Если публикуют без изменений — требуется |
На практике важны два момента. Первый: если данные Figma или фрагменты кода редактируют и встраивают в свой сайт, указание источника не требуется. При создании сайта компании почти всегда получается именно так. Второй: прямо сказано, что отредактированные материалы нельзя публиковать и использовать так, будто их создало Цифровое агентство.
Использование не означает сертификацию или одобрение Цифрового агентства. Мы тоже не «официально одобрены Цифровым агентством»: мы применяем опубликованную стандартную спецификацию к частным проектам. Условия выше — на момент написания статьи; перед решением обязательно сверьтесь с актуальной формулировкой на официальной странице.
На схеме сплошная линия обозначает отношение, которое выполняется всегда, а пунктирная — условное отношение (условия указаны в пояснении к каждому отношению на странице сведений). Полный список отношений (всего 15, с доказательствами и степенью уверенности) и определения основных понятий собраны на странице сведений карты знаний (на японском). Данные: JSON-LD / Turtle
2. Что на практике значит «брать за основу»
Формулировка «брать дизайн-систему за основу» удобна, но степень внедрения бывает разной. Мы подключаем её на трёх уровнях. Сам этот сайт (comcomponent.com) устроен именно так.
| Уровень | Что делаем | Пример |
|---|---|---|
| 1. Дизайн-токены | Базовые значения цветов, типографики, отступов и теней задаём в одном месте для всего сайта как пользовательские свойства CSS | Примитивные цветовые переменные вроде --color-primitive-blue-900 и --color-neutral-solid-gray-536, тени вроде --elevation-1. Для основного текста ориентир — семейство Noto Sans JP |
| 2. Компоненты | Кнопки, карточки, хлебные крошки, таблицы, оглавление реализуем как CSS-классы по спецификации компонентов дизайн-системы и используем на всех страницах | Сводим к классам с префиксом вроде dads-button и dads-stack; страница только комбинирует готовое |
| 3. Шаблоны | Уровни 1 и 2 встраиваем в layout и include генератора статических сайтов, чтобы при добавлении статьи или страницы услуги писать только содержимое | Отдельные layout для статей, страниц услуг и примеров проектов; общие шапка, подвал и оглавление ведутся в одном месте |
Отдельно напишем, чего мы сознательно не делаем. Мы не тащим официальный код компонентов целиком и не держим его как внешнюю зависимость. Для сайта компании нужен ограниченный набор компонентов: полный комплект утяжеляет загрузку и добавляет стоимость сопровождения, чтобы следовать за обновлениями исходной системы. Решение такое: держать только нужные компоненты как собственную реализацию по спецификации.
Эффект этой схемы проявляется при добавлении страниц. Даже если добавить одну страницу услуги, форма кнопок, иерархия заголовков и отступы совпадут с уже существующими страницами — и не нужно каждый раз заново решать, «как это должно выглядеть».
3. Почему это дешевле: этап дизайна исчезает из сметы
В обычной смете на создание сайта позиции, связанные с дизайном, занимают заметную долю. В краткой таблице стоимости создания сайта для малого и среднего бизнеса конфигурации с собственным дизайном попадают в диапазон 300 000–1 000 000 иен. Внутри этого диапазона этап дизайна набирается примерно из таких работ.
| Работа | Что происходит | Если стандартизировать |
|---|---|---|
| Дизайн-макет главной | Готовят и показывают несколько вариантов с разной направленностью | Не нужно. Токены и компоненты заданы с самого начала |
| Циклы правок после выбора | Субъективные пожелания вроде «сделайте цвет спокойнее» снова превращают в макеты | Как правило не нужно. Не приходится гадать, сколько раундов заложено в смету |
| Дизайн внутренних страниц | Заводят шаблон на каждый тип: услуга, список, статья | Достаточно комбинации готовых layout |
| Подгонка под смартфон | Заново собирают вид для каждой ширины | Уже заложено в компоненты |
| Спецификация для вёрстки | Составляют перечень цветов, размеров шрифта, отступов | Спецификация уже есть как открытая документация |
Что входит в позицию сметы «дизайн комплектом», у каждой компании своё. При сравнении надёжнее попросить раскрыть смету до этого уровня (как читать такие сметы, подробно разобрано в статье о стоимости).
Если дизайн-система взята за основу, схема меняется.
- Цвета, размер шрифта, отступы, кнопки заданы с самого начала
- Раунд «показать несколько вариантов, выбрать и править» как правило не нужен
- Меньше решений зависит от чутья дизайнера, поэтому меньше переделок
То есть дешевле не из-за скидки: дешевле, потому что самих этапов меньше. Высвободившееся время идёт туда, что напрямую влияет на результат — структура, по которой понятно, чем занимается компания, тексты, путь к обращению. Причина «непонятного» сайта почти всегда в структуре, а не в дизайне; об этом же статья «Три места, которые стоит исправить в первую очередь, если заявок нет».
4. Почему качество не падает, а скорее стабилизируется
Интуиция «уберём дизайн — упадёт качество» исходит из дизайна, который каждый раз делают с нуля. Со стандартизированной дизайн-системой картина обратная.
Во-первых, доступность. Компоненты дизайн-системы Цифрового агентства спроектированы с учётом цветового контраста, размера шрифта, видимости фокуса и удобства сенсорного управления. Гарантировать тот же уровень в каждом индивидуальном дизайне само по себе стоит времени на проверку. Проверенные компоненты в итоге дают более стабильное качество.
Во-вторых, опыт реальной эксплуатации. Государственными сервисами в реальных ситуациях пользуются очень разные люди — от тех, кто не привык к смартфону, до специалистов. Правила дизайна там оттачивали не по критерию «насколько свежо выглядит», а по критерию «сможет ли любой человек пользоваться, не теряясь». Для потенциального клиента на сайте компании важно именно это.
В-третьих, единообразие. Сайт, где форма кнопок или правила заголовков пляшут от страницы к странице, уже из-за этого хуже читается. Если следовать дизайн-системе, структура и тон не разъезжаются даже при добавлении страниц позже.
Сам этот сайт построен на этой дизайн-системе. Обновление сайта Douzu Carry Service сделано по той же схеме. Ход обновления подробно описан в статье о проекте.
Какие именно компоненты работают, быстрее всего увидеть, сравнив реальные страницы. Где что используется на этом сайте:
| Компонент или правило | Где на этом сайте | Страница |
|---|---|---|
| Кнопки (основные и второстепенные действия) | Визуально отделяем путь к консультации от прочих ссылок | Нижняя часть страницы разработки сайтов |
| Карточки и списки | Услуги и примеры проектов в одинаковых рамках | Список примеров |
| Хлебные крошки | Всегда показывают текущий уровень в иерархии | Верх статей и страниц услуг |
| Система заголовков и отступов | Фиксируем размер шрифта и отступы до и после для каждого уровня заголовка | Все статьи, включая эту |
| Стиль таблиц | Линии, строка заголовка, межстрочный интервал одинаковы на всех страницах | Таблицы в этой статье |
| Элементы форм | Одинаковый вид полей, подписей и сообщений об ошибках | Контакты |
Те же компоненты на другом сайте — у Douzu Carry Service. Цвета, фотографии и тексты, разумеется, совсем другие. Но удобство нажатия кнопок и то, как выстроена иерархия заголовков, сделаны по тем же правилам — это видно, если положить сайты рядом.
5. Стандартизация не делает сайты «одинаковыми»
Частый страх: «стандартный дизайн сделает сайт похожим на чужой».
Стандартизируется основа: правила цветов, шкала размеров шрифта, правила устройства компонентов. Впечатление от сайта на деле определяют логотип, фотографии, слоган, структура страниц и тон текстов — это делают с нуля для каждого сайта. Общая основа и отсутствие индивидуальности — разные вещи.
С другой стороны, нужно сказать прямо. Проектам, которым нужен сложный собственный визуальный ряд или анимация как выражение бренда, такой подход не подходит. Например, брендовые или кампанийные сайты, где ценность сосредоточена в создании особой атмосферы. Там лучше вложить деньги в дизайн и заказать работу профильной студии. Если на консультации сразу видно, что запрос именно такой, мы говорим об этом в начале.
6. Кратко
- При создании сайта заметную долю стоимости занимает дизайн с нуля
- KomuraSoft сильно сокращает этот этап, беря за основу дизайн-систему, опубликованную Цифровым агентством (официальный сайт)
- Лицензия зависит от вида материалов: данные Figma — CC BY 4.0, фрагменты кода — MIT License. Если их редактируют и встраивают в свой сайт, указание источника не требуется
- «Брать за основу» — это три уровня: общие дизайн-токены, компоненты как CSS-классы, встраивание в шаблоны
- Дешевле не из-за скидки, а потому что этапов меньше. Высвободившееся время идёт в структуру, тексты и путь к обращению
- Компоненты спроектированы с учётом доступности и реально работают в государственных сервисах, поэтому качество скорее стабилизируется
- Логотип, фотографии и тексты создают для каждого сайта, поэтому сайты не выглядят одинаково. Но сложный собственный визуальный ряд этому подходу не подходит
Если нужно сдержать расходы и при этом сделать сайт с понятной структурой, процесс и цены — на странице разработки сайтов. Пришлите URL текущего сайта через форму обращения — разберём, с чего начать, чтобы эффект был заметнее.
Связанные статьи
Похожие статьи
Недавние статьи с теми же тегами помогут подробнее изучить близкие темы.
Тёмный режим и темы контрастности в приложениях Windows ── тёмная панель заголовка DWM, следование системной теме в WinForms/WPF, отрисовка при высокой контрастности
Как заставить приложения WinForms и WPF следовать тёмному режиму и темам контрастности Windows 11. Тёмная панель заголовка DWM, SetColorM...
Доступность приложений Windows: UI Automation и разумное приспособление
На фоне поправки к Закону Японии об устранении дискриминации в отношении инвалидов, вступившей в силу в апреле 2024 года, статья на практ...
Заказчику сайта тоже стоит знать: как пользоваться документом IPA «Как создать безопасный веб-сайт»
По какому критерию проверять безопасность корпоративного сайта? Разбираем 11 уязвимостей и меры из документа IPA «Как создать безопасный ...
Как попадать в выдачу по названию города — локальное SEO для малого и среднего бизнеса (страницы территорий и Профиль компании в Google)
Для малых и средних компаний, которых не находят по запросу «название города + отрасль», разбираем, в каком порядке действовать в локальн...
Стоимость сайта для малого и среднего бизнеса — таблица цен и как читать смету
Перед запросом сметы на сайт малому и среднему бизнесу полезно знать ориентиры по цели и масштабу, как читать разбивку сметы и чего ждать...
Связанные темы
Эти страницы показывают тему статьи в более широком контексте услуг и решений.
Технические темы Windows
Раздел о разработке Windows, расследовании сбоев и использовании существующих активов.
Услуги по этой теме
Статья напрямую связана со следующими услугами.
Разработка веб-сайтов
Статья разбирает, как стандартизация дизайна связана со стоимостью и качеством, поэтому напрямую относится к консультациям по бюджету и ходу разработки сайта.
Частые вопросы
Вопросы, которые часто возникают при консультациях по теме статьи.
- Можно ли использовать дизайн-систему Цифрового агентства на сайте частной компании?
- Да. Дизайн-система Цифрового агентства опубликована по открытой лицензии и доступна не только государственным органам. Однако использование не даёт сертификации или одобрения со стороны Цифрового агентства. Мы тоже исходим из того, что применяем опубликованную дизайн-систему к частным сайтам.
- Не будут ли сайты на стандартном дизайне выглядеть как у других компаний?
- Общими становятся только правила для цветов, отступов и компонентов. Логотип, фотографии, слоган и структура страниц создаются для каждого сайта отдельно. Именно они в основном определяют впечатление, поэтому стандартизация не превращает сайт в «уже где-то виденный». Наоборот, выравнивается то, что и должно совпадать: удобство нажатия кнопок и читаемость текста.
Об авторе
Страница с профилем автора статьи.
Го Комура
Представитель KomuraSoft LLC
Специализируется на разработке программного обеспечения для Windows, техническом консалтинге и расследовании сбоев, особенно в проектах с унаследованными системами и трудно воспроизводимыми ошибками.