AsagaoUI

美しく使いやすいデジタルサービスのためのUI

美しく使いやすいデジタルサービスのためのUIフレームワーク。デジタル庁デザインシステムを基に、Sassと最小限のJavaScriptで構築され、標準に基づいた設計により、拡張性と統合性を両立します。

デジタル庁デザインシステム準拠 Sassトークン 最小限のJS
GitHubを見る はじめる
AsagaoUI

選ばれる理由

ウェブ標準に基づく設計と、開発時間の短縮

標準的なHTMLとCSSを基盤に、最小限のJavaScriptで構築されています。

デジタル庁デザインシステムに基づいたUI

デジタル庁デザインシステムで定義されたUI設計を取り入れて見やすさとわかりやすさを提供。ただ取り入れただけでなく、実際の開発に使いやすいように実装を工夫しています。

Sassファースト

基本的なデザインスタイル設計はstylesフォルダ内のテンプレートファイルによって定義されています。拡張性と汎用性を確保した設計であらゆるカスタマイズが低コストで行えます。

依存ゼロ設計

特定のJavaScriptライブラリに依存しない設計。React、Vue、Svelteはもちろん、PHPやGoさらにRazorなどのテンプレートエンジンでも同じ構成で動作します。環境に縛られず、既存のスタックへそのまま統合できます。

公的・業務向けサービスに強い

行政サービス、企業ポータル、信頼性が求められるプロダクトに。

  • デジタル庁デザインシステムに基づいたUI
  • 依存ゼロ設計
  • AsagaoUI Iconsで必要なアイコンを簡単に利用可能
  • ネイティブHTMLマークアップによるアクセシビリティ対応

クイックスタート

数分で始められる

CDN,npmまたはGitHubなど好みの方法で入手してすぐにUIを構築。もちろん、UIはシンプルに構築できます。

<div class="codesnippet-preview">
    <div class="banner banner-info">
        <i class="banner-icon aif-information"></i>
        <span class="banner-title">コンポーネントを再発明する必要はありません！</span>
        <div class="banner-body">
            <span class="banner-description">必要なのは標準のHTMLとCSSクラスだけです。</span>
        </div>
    </div>
</div>

CDN

jsDelivrのCDNリンクを貼るだけ。インストール不要で即使用可能。

<link href="https://cdn.jsdelivr.net/npm/asagaoui/dist/css/asagaoui.min.css" rel="stylesheet">

npm

パッケージをインストールし、必要なものだけを選んで使用。

npm i asagaoui

GitHub

ソースコードをクローンして、自由にカスタマイズ。

git clone https://github.com/ctpena/asagaoui.git

アイコンも忘れないで！

AsagaoUI Icons

デジタルサービスやウェブサイトの表現力を高める、高品質なアイコン素材

アイコン一覧を確認する

AsagaoUI