SHIUI
SHIUIは、フラットな2Dスタイルの再利用可能なUIコンポーネントキットです。3色のみ、1.5pxの線、影なしで、コンポーネントをページ上で直接試用でき、ソースコードもコピーできます。
SHIUIについて
SHIUIは、再利用可能なUIコンポーネントキットです。日本の国旗ポスターを思わせるフラットな2Dデザインを基調とし、3色（ペーパーホワイト #e5e3dc、墨色 #2a2926、朱色 #e14d2a）のみを使用し、線幅は1.5pxに統一、影は一切使いません。公式サイトによると、現在111のインタラクティブ要素と24のブロックを含み、これらの要素はショーケースページ上で実際に動作します。クリック、反転、閉じるなどの操作が可能で、各カードから対応するimport文や完全なソースコードを直接コピーできます。さらに、デザイントークン（カラーシステム）もワンクリックでコピーでき、プロジェクトにそのまま取り入れられます。
おすすめの利用者
最適な利用シーン
英語のインターフェース向けに、フラットで落ち着いたビジュアルシステムを構築し、コンポーネントのソースコードをコピーしてそのまま使用する
カラーや線の規律を統一したいとき、3色のデザイントークンをコピーしてプロジェクトの基盤として使う
コンポーネントを選定する前に、公式サイトのカード上でクリック・反転・閉じるなどの操作を実際に試す
機能
インタラクティブなコンポーネントカタログ
公式サイトによると、111のインタラクティブ要素と24のブロックが含まれ、各カードはページ上で実際にクリック、反転、閉じるなどの操作ができます。
import文・ソースコードをワンクリックコピー
各コンポーネントカードから、対応するimport文や完全なソースコードを直接コピーでき、プロジェクトへの組み込みが容易です。
3色のデザイントークン
Paper、Sumi、Shuの3色トークンを提供し、公式サイトからワンクリックでコピーできます。インターフェース全体の色、線、アクセントカラーの使用を統一します。
フラットなポスター調のビジュアルスタイル
フラットな2D、1.5pxに統一した線、影を使わないビジュアルシステムを採用し、公式サイトではコンポーネントとして展示されています。
長所
- コンポーネントが公式サイト上で実際に操作可能な形で展示されており、見たままの状態をそのまま確認できる
- import文や完全なソースコードを直接コピーでき、導入コストが低い
- コピー可能な3色のデザイントークンを提供し、スタイルが統一されている
短所
- コンポーネントキットは英語のインターフェース向けで、UI文言は主に英語のレイアウトを前提に設計されている