Startify-UIをはじめる

Why？ Startify-UI

ウェブサイトやアプリケーションの開発においては、プログラマーによるコードの差異や、肥大化するコンポーネントの管理コスト、デザインルールの不統一といった問題があります。Startify-UIはそのような課題を解決するために、デザインルールの統一やコードの標準化、独自のコンポーネント設計によって、現代のウェブ開発における主要な課題を解決し、効率的で一貫性のある洗練されたデザインを実現します。

Startify-UIは、作者自身がこれまでBootstrapやTailwindCSSなどの既存のフレームワークを扱ってきた経験をもとに、それらの思想や設計からインスピレーションを受けて開発されました。当フレームワークは、デザインシステムを基盤に設計され、デザインに忠実なコンポーネントのデザインデータと、スタイルが適用されたコードスニペットが一式揃えられています。そのため、クオリティを保ちながら、迅速にUIデザインの開発を行うことができ、UIデザインからコーディングまでの作業フローをよりシームレスかつ効率的に進めることが可能です。

Startify-UIを導入する

1. ダウンロード・セルフホスティング

下記より最新版のソースコードをダウンロードします。

Startify-UI 最新版ダウンロード現在のバージョン ver.0.1.8

HTML上でスタイルシートならびにスクリプトを読み込みます。

...
<head>
  ...
  <link rel="stylesheet" href="[DIRECTORY_PATH]/startify-ui.min.css">
  ...
</head>
<body>
  ...
  <script src="[DIRECTORY_PATH]/startify-ui.min.js"></script>
</body>
...

2. NPMインストール

NPMで最新版のソースコードをインストールします。

npm install @designsupply/startify-ui

スタイルシートならびにスクリプトのソースコードをインポートします。

// スタイルシートのインポート
import '@designsupply/startify-ui/dist/startify-ui.min.css';

// スクリプトファイルのインポート
import '@designsupply/startify-ui';

3. CDNを利用

CDNからもソースコードを参照することができます。

※@[VERSION]の部分を省略することで最新版を使用できますが、バージョンによるスタイルの差異が発生しないよう、バージョンを指定しての利用を推奨します。

...
<head>
  ...
  <link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/@designsupply/startify-ui@[VERSION]/dist/startify-ui.min.css"
  >
  ...
</head>
<body>
  <script 
    src="https://cdn.jsdelivr.net/npm/@designsupply/startify-ui@[VERSION]/dist/startify-ui.min.js"
  ></script>
</body>
...

使用方法

Startify-UIは、次の3つの使い方が可能なフレームワークです。

1. CSSフレームワークとして使う

手軽にUIを構築するためのスタイルやレイアウトが揃ったCSSフレームワークとして、柔軟でカスタマイズ可能なコンポーネントを提供します。

ユーティリティクラス

デザインシステムに対応したスタイルが適用できる、汎用性の高いクラスが数多く提供されており、ユーティリティクラスベースでのコーディングが可能です。

ユーティリティクラスについて

コンポーネント

デザインシステムに対応したスタイルが適用された、各種UIコンポーネントが提供されています。コンポーネントはコードスニペットが用意されており、手軽にUIデザインを構築することができます。

コンポーネントについて

2. デザインシステムとして使う

統一されたデザインルールを基に、スケーラブルで一貫性のあるUIを構築するためのデザイントークンが定義されており、デザインシステムの核として活用できます。

デザイントークンについて

3. デザインテンプレートとして使う

デザインシステムに対応したスタイルやレイアウトが適用されたデザインデータのテンプレートを利用でき、デザインカンプやプロトタイプを高品質なUIデザインでスピーディーに作成することができます。

デザインテンプレートについて

もっと詳しく

Startify-UIは、柔軟なCSSフレームワーク、統一されたデザインシステム、そして効率的なデザインデータテンプレートとして、多様なUIデザインニーズに応えるために設計されています。直感的なユーティリティクラスや洗練されたUIコンポーネントを活用することで、スピーディかつ高品質な開発が可能です。また、シンプルでありながら強力な設計により、プロジェクトの規模を問わず、誰でも簡単に美しいUIを実現できます。

もっと詳しく知りたい方は、ドキュメントページで豊富な例やガイドラインをご覧ください。プロジェクトを一段上のレベルへ引き上げるヒントが満載です。

ドキュメントを見る