Misora Connect
Design System
「空気のような接続性」を体現する
株式会社ミソラコネクトのデザインシステム
コアコンセプト
Connectivity as Air
空気のような接続性
ミソラコネクトのデザインシステムは、「透明感」「シームレス」「安心感」を表現することで、 法人顧客に対して信頼性と先進性を伝えます。
このデザインシステムは、IoT/M2M向けおよびモバイルワーカー向けの通信サービスを提供する 企業として、プロフェッショナルでクリーンな印象を一貫して維持します。
ブランドアイデンティティ
信頼性
法人顧客に対して、安定したサービスと確かな技術力を視覚的に伝えます。 クリーンなデザインと一貫性のあるUI要素で信頼感を構築します。
先進性
最新の通信技術とIoTソリューションを提供する企業として、 モダンで洗練されたデザインで先進性を表現します。
クリーンさ
豊富なホワイトスペースとシンプルなレイアウトで、 情報を整理し、ユーザーが迷わず目的の情報にアクセスできます。
デザインシステムの特徴
🎨 カラーシステム
ブランドカラー「ミソラブルー (#43C6FA)」と「ミソラレッド (#DA3241)」を 中心とした一貫性のあるカラーパレット。ライトモード・ダークモード両対応。
カラーシステムを見る →🧩 コンポーネント
Button、Field、Modal、Tableなど、再利用可能なUIコンポーネントをコードサンプルと共に提供。 全てのコンポーネントはアクセシビリティとレスポンシブデザインに対応しています。
コンポーネントを見る →🤖 Vibe Coding ガイド NEW
AI駆動開発（Vibe Coding）でMisora Design Systemを効果的に活用する方法を解説。 プロンプトテンプレート、ベストプラクティス、実践例を提供します。
Vibe Codingガイドを見る →商標とロゴの使用
会社名の表記
- 正式名称：株式会社ミソラコネクト
- 略称：ミソラコネクト
- 商標：Misora Connect
商標の表記ルール
- 「Misora」と「Connect」の間に半角スペースを空ける
- すべてアルファベットにする
- MとCを大文字とし、その他は小文字とする
- 商標全体をイタリック体にするか、引用符で囲む
パフォーマンス目標
通信サービスを提供する企業として、ウェブサイト自体の「速さ」と「効率性」も品質の証として重要です。
- Lighthouseスコア：90点以上を目標
- 画像最適化：WebPフォーマット、Lazy Load適用
- アイコン：SVG形式で実装
- モバイル対応：モバイルファーストアプローチ
クイックスタート
1. CSS変数を読み込む
<link rel="stylesheet" href="../dist/misora-design-system.css">2. JavaScriptを読み込む
<script src="../dist/misora-design-system.js"></script>3. コンポーネントを使用する
<button class="btn btn-primary">お問い合わせ</button>ダウンロード
ファイルをダウンロード
Misora Design Systemのファイルを直接ダウンロードして使用できます。 minifyバージョンは本番環境での使用に最適化されています。
使用方法
<!-- Minifyバージョンを使用（推奨） -->
<link rel="stylesheet" href="../dist/misora-design-system.min.css">
<script src="../dist/misora-design-system.min.js"></script><!-- 通常バージョンを使用 -->
<link rel="stylesheet" href="../dist/misora-design-system.css">
<script src="../dist/misora-design-system.js"></script>