幅広いコンポーネントカタログ
カタログには24のブロックに整理された111のライブ要素が収録されており、静的なビジュアルサンプルだけでなく、一般的なコントロールやUIの状態をカバーしています。
ポスターに着想を得たフラットなインクコンポーネント
SHIUIは、日の丸の日本のポスターが持つビジュアル性格を備えたインターフェースを構築するための、フラットなインクUIキットです。明示されているパレットは紙、墨、朱を中心とし、デザイン方針では影を一切使用しません。カタログには静的な一覧だけでなくライブな例が掲載されているため、文脈の中でインタラクションの状態を確認できます。
このキットは、アクション、ラベルと印章、フォーム、ナビゲーション、フィードバック、進捗といった実用的なインターフェースの構成要素を中心に整理されています。一貫した印刷物に着想を得た表現が必要な、エディトリアル、カタログ、アーカイブ、EC、業務フロー向けのインターフェースを設計するチームや個人に適しています。サイト上で確認できるコンテンツには、コピーインポートやソース操作が含まれていますが、フレームワーク、インストール方法、パッケージ形式、統合、価格、ライセンス条件については記載されていません。
主な機能
アクションの階層
ボタンには、プライマリ、セカンダリ、アウトライン、ゴースト、インク、破壊的操作、ローディング、矢印、分割、小、大、アイコンのバリエーションがあり、さまざまなアクションの優先度に応じた使用ガイダンスが記載されています。
状態に対応するフォームコントロール
テキスト入力、テキストエリア、セレクト、チェックボックス、ラジオコントロール、トグル、スイッチ、スライダー、検索、パスワード、ファイル、日付、OTP、数量コントロールに加え、ラベル、ヒント、エラーを備えています。
ナビゲーションパターン
タブ、パンくず、ページネーション、ステップ、サイドバー、メニューリスト、リンク、ページドット、トップへ戻るコントロール、セクションレールにより、カタログ、プロセス、複数ステップのナビゲーションパターンをサポートします。
フィードバックと進捗の状態
アラート、トースト、バナー、プログレスバー、プログレスリング、ensoスピナーにより、通知、完了、進行中の作業、運用状態を表現できます。いくつかのサンプルは閉じたり操作したりできます。
日の丸に着想を得たビジュアル言語
フラットな紙、墨、朱の表現を中心に、影ではなくインクを重視したボーダーと状態でビジュアルシステムを構成しています。サンプルには、ホバーワイプ、筆の下線、印章、数字、エディトリアルラベルが含まれます。
想定される利用例
エディトリアルカタログとアーカイブ
アクションのバリエーション、タグ、印章、ラベル、ナビゲーションレールを使い、ギャラリー、アーカイブ、展覧会カタログに一貫した印刷物中心のインターフェース言語を与えます。
印刷物とエディションのEC
プロダクト向けのタグ、価格スタンプ、数量コントロール、チェックアウト風の大きなボタン、配送フィールド、進捗ステップを組み合わせ、小規模なエディションや印刷物のECフローに活用できます。
提出・受付フォーム
フィールドコントロール、バリデーションメッセージ、OTP入力、ファイルアップロード、日付フィールドを、コミッション、応募、登録、作品受付のワークフローの出発点として利用できます。
構造化コンテンツのナビゲーション
情報量の多いサイトで、コレクション、プロセスページ、リファレンスセクション間を明確に移動する必要がある場合に、タブ、パンくず、ページネーション、サイドバー、メニューリスト、セクションレールを適用できます。
制作・ステータスダッシュボード
アラート、トースト、バナー、ローディング状態、乾燥／進捗インジケーター、ステータスピルを使い、スタジオ、出版、制作を中心としたインターフェースで運用上の更新を伝えられます。
Pros and Cons
Pros
- 24のブロックに整理された111のライブ要素による大規模なカタログ。
- ローディング、エラー、選択済み、閉じることができる状態、進捗状態など、ビジュアルの基本要素と実用的なインタラクション状態の両方をカバーしています。
- 複数のアクション優先度とフォームコントロールのバリエーションを提供しており、一貫したインターフェース階層の構築に役立ちます。
- カタログにはインタラクティブなサンプルと、評価や引き継ぎに使えるコピーインポート／ソース操作が含まれています。
Cons
- フレームワーク、パッケージ、インストール、統合に関する詳細は、利用可能なコンテンツに記載されていません。
- 価格とライセンス条件は確認できません。料金ページは見つからないページを返します。
- ビジュアル方針が明確に定められているため、フラットでポスターに着想を得た美学に合わないプロダクトでは調整が必要になる場合があります。
FAQ
SHIUIとは何ですか？
SHIUIは日の丸の日本のポスターに着想を得た、フラットなインクUIキットです。主なビジュアル言語として紙、墨、朱を用い、ドロップシャドウを避けています。
このキットには何が含まれていますか？
カタログには、24のブロックにまたがる111のライブ要素が掲載されています。ボタン、バッジと印章、フォームコントロール、ナビゲーション、アラート、トースト、進捗インジケーターなど、さまざまなUIの状態が含まれます。
コンポーネントはどのように評価できますか？
サンプルはインタラクティブです。ボタンではホバー動作を確認でき、コントロールでは選択状態や押下状態を確認できます。また、スライダー、トグル、パスワードフィールド、閉じることのできる通知などのコンポーネントを、カタログ上で直接試すことができます。
どのような実装やフレームワークのサポートが記載されていますか？
サイトにはコンポーネントのサンプルとコピーインポート／ソース操作が示されていますが、収集された資料では、フレームワーク、パッケージ形式、インストール手順、統合について明記されていません。
価格やライセンスの詳細はどこで確認できますか？
利用可能なプロダクトコンテンツには、価格やライセンス条件は記載されていません。サイトの料金ページは現在、見つからないページを返すため、購入条件や利用条件は別途確認する必要があります。
Quick Facts
- カテゴリー
- デザインツール／UIキット
- カタログ
- 24ブロックに111のライブ要素
- ビジュアルシステム
- 紙、墨、朱；影なし
- 主なパターン
- アクション、フォーム、ナビゲーション、フィードバック、進捗
- 評価ワークフロー
- ライブサンプルを試し、コピーインポートまたはソース操作を使用
- 価格とライセンス
- 利用可能なサイトコンテンツには記載なし
SHIUIの代替品
Refero MCP
Refero MCPは、MCP対応AIエージェントをReferoの厳選されたWebおよびiOSのUI/UX参考事例とユーザーフローに接続し、UI生成前の実践的なデザインリサーチを支援します。Refero Proで利用可能です。
Wowable
Wowableは、Google MapsやSNSプロフィール、スクリーンショットなどの公開情報から、編集・プレビュー・公開できるAIサイトビルダーです。無料プレビューあり。
Pixso
Pixsoは、ユーザーがワンクリックでデザイン草案とコードを生成できる次世代のAIネイティブUIデザインツールで、Figmaの国内代替品として機能します。
Fronty
Frontyは、スクリーンショットや画像ファイルをHTMLとCSSに変換するAI搭載Webアプリです。ノーコードエディタとホスティングで、作成後の調整から公開まで対応します。
Appllama
Appllamaは、収益上位のiOSアプリを集めたWebベースのUI/UXインスピレーションライブラリです。画面、フロー、課金画面、アプリのパフォーマンスデータを閲覧でき、Proプランで全機能と共同作業に対応します。
Quarkdown
Quarkdownは、論文、プレゼンテーション、ナレッジベース、静的サイトを作成できるオープンソースのMarkdownベース組版システム。CLIでライブプレビュー、HTML出力、PDF書き出しに対応。