アツラエ独自開発のデザインシステムをリリース。9月以降無償でプロジェクトに標準導入し、デザインと開発プロセス全体を効率化

株式会社アツラエ

2025年9月12日 11時00分

最先端のデジタルテクノロジーを活用したクリエイティブコンサルティング等をおこなう日本能率協会グループの株式会社アツラエ（本社：東京都港区、代表取締役社長：坂倉猛以下、「アツラエ」）は、主力事業である「クリエイティブコンサルティング」において、この度、オリジナルのデザインシステムをリリースすると共に、すべてのプロジェクトへのデザインシステムの無償導入を開始しました*1。これにより、高品質なUX/UIデザインを、より短期間で提供することが可能となりました。

アツラエは、これからもユーザー視点を重視しつつ、デザインとテクノロジーの融合を通じて、お客様のビジネス環境の急速な変化に対応するサービスを提供してまいります。

*1 :

・一般的なWebアプリケーションが対象です（ネイティブアプリ等は要相談となります）
・大幅なカスタマイズは別途費用が発生します
・デザインシステム自体の納品には別途費用が発生します

◾️リリースの背景

近年、デジタルサービスの価値は「使いやすさ（UX）」によって大きく左右される時代になっています。コンシューマー向けサービスだけでなく、社内業務システムにおいてもその重要性は高まり続けています。しかし、UX/UIに精通した人材は慢性的に不足しており、多くの企業では十分な体制を整えられていないのが現状です。

その結果、サービス開発の現場では以下のような課題が顕在化しています。

・UX/UIデザインに精通したデザイナーが見つけられない
・デザイナーによりデザインの質や仕上がりにばらつきが発生

・類似するUIをゼロから作り直すことによる時間・コストの増大

・デザインと実装の乖離による手戻りの発生

こうした状況はサービス品質の低下や開発スピードの遅延につながり、ビジネス環境の変化に柔軟に対応できない要因となっています。

当社は15年以上にわたり、スマートフォンアプリや社内システムのデザイン・開発を通じて「クリエイティブコンサルティング」を提供し、利用者視点での課題解決に取り組んでまいりました。この経験と知見を結集し、特定のデザイナーのスキルに依存せず、誰もが高品質で一貫したUX/UIを実現できる独自の「デザインシステム」を構築しました。

◾️デザインシステムとは

「デザインシステム」とは、システムのデザインに必要なパーツやスタイルなどを統合した仕組みです。一般的には「Figma」を代表とするデザインツール上に構築します。

独自のスタイルガイド、UIコンポーネントライブラリをデザインシステムとして構築することにより、デザインの規則やルールなどを一部のデザイナーに属人化させることなく、プロダクトに関わる様々なご担当者様でご活用いただくことが可能となります。

デザインシステムをベースにデザインを制作することで、「デザインガイドライン」のようなドキュメントではなく、UIデザインそのものがデザインルールになります。

デザインシステムを構築することで、デザイナー、開発者、ステークホルダーなどのプロジェクトメンバー間のコミュニケーションが円滑になり、ビジネスの変化に迅速に対応できる開発体制を構築できます。

◾️アツラエのノウハウを凝縮したデザインシステム

当社は15年以上にわたって500社以上のお客様にクリエイティブコンサルティングを提供してきました。そこで培ったUX/UIデザインの経験と技術を、あらゆる企業で活用できる形に具現化しました。

一般的なWebシステムのデザインに必要なすべてのルールを定義

カラー、フォント、レイアウトなどのデザインの基本ルールが定義されており、カスタマイズしやすく設計されています。活用いただくことで、最短で求めるデザインを実現することもできます。さらにダークモードやフォントサイズコントロールにも標準対応し、多彩なデザインに柔軟に対応できます。

ブランドカラーやデザインのテイストにあわせて、各種コンポーネントの一括変更や、ダークモードへの切り替えにも対応しています

豊富なコンポーネントにより様々なパターンのUIデザインに対応可能

WebアプリのUIデザインに必要な50種類以上のコンポーネントと200種類以上のバリアブルが用意されています。異なるコンポーネントを組み合わせて利用した際にも統一感が保たれるように設計されているため、誰が手掛けても一貫性のある美しいデザインを実現できます。

プロトタイプ機能も備えた、すぐに「動かせる」デザインシステム

ボタンのホバーやクリックなど、よく使う動きがあらかじめ各コンポーネントに設定されています。そのため、UIデザインから簡単に動きのあるリアルなプロトタイプをスピーディーに構築することが可能です。
ユーザーが実際に操作する感覚に近い体験をデザイン段階から確認することができ、またプロトタイプを用いたユーザーテストなどにもすぐにご活用いただけます。

コンポーネントの各種状態を漏れなく定義

表面的なデザインだけではなく、マウスオーバー、選択時、クリック時、読み取り専用、非活性状態など、コンポーネントに応じて必要な全ての状態が定義されています。
各コンポーネントの全ての状態を定義するには、多くの時間と技術が必要なため、これまではデザイナーやプログラマーの裁量に任されがちでした。これをデザインシステムとして定義することにより、コストや時間をかけずに高品質なUI開発を行うことが可能となります。

◾️デザインシステム活用により、期待できること

アツラエのデザインシステムを活用することで、開発・デザインの現場には次のような効果が期待できます。

デザイン期間を約50％削減（当社比）
パーツやスタイルを共通化することで、従来比で大幅な短縮を実現します。
高品質なデザインの提供
プロフェッショナルが監修した、デザインルールに基づいたUIを適用することで、属人化を防ぎ、常に統一された高品質なデザインを提供します。
開発期間の短縮
デザインシステムを基盤に生成AIを活用し、ソースコードの自動生成を可能にすることで、スピーディかつ精度の高い開発を実現します。
お客様専用のデザインシステム構築を支援

お客様の事業特性やサービス内容に合わせたカスタマイズにより、独自の専用デザインシステム構築をサポートします。