すべての画面を同じ部品で
CoUIは、Cocodeが自社で作って使っているUIコンポーネントシステムです。ボタンから表まで160個以上、アプリとウェブで同じように動作します。
CoUIを使うと変わる点
Without CoUI
毎回ゼロから描く場合
- 画面ごとに描き直すため期間が延びる
- 同じボタンでも画面ごとにバラバラ
- アプリとウェブでデザインが不一致
- 次のチームが画面ごとに違うコードを読む必要がある
With CoUI
CoUIで作る場合
- 用意済みのコンポーネントで組み立てるので最初の画面が早い
- コンポーネントを1つ直せば全体に反映
- アプリとウェブで同じコンポーネントを使用
- 次のチームも1つのルールで全画面を把握
CoUIに含まれているもの
Tokens
スタイル値
色、フォント、余白、角丸を一か所で管理
Components
コンポーネント160個以上
ボタン、入力欄、リスト、表、ダイアログ
Theme
ライト · ダークモード
2つのモードを同じコンポーネントで
Brand
ブランドカラーの適用
トークンを差し替えるだけでお客様の色に
Responsive
画面サイズ対応
スマートフォンから大きなモニターまで
Base
Flutterベース
ウェブ、iOS、Android、macOS、Windowsで同じコンポーネントを使用
実際に見る
Button
Input
Chip
Toggle
Badge
Table
Select
Dialog
削除しますか?
よくある質問
CoUIの所有権は誰にありますか?
CoUIはCocodeが自社で作って使っているUIコンポーネントシステムのため、所有権はCocodeにあります。その代わり、プロジェクトで使用したバージョンのソースコードの複製をあわせてお渡しし、期間・数量・地域の制限のない使用権と改変する権利を契約書に明記します。
CoUIのコードを自社の開発者が修正できますか?
はい。ソースコードの複製とあわせて改変する権利をお渡しします。保守をほかの開発会社に任せる場合も、そのチームが同じ権利で修正できます。すべての画面が1つのルールで作られているので、次のチームも構造を把握しやすくなっています。
CoUIを使わずに作ることもできますか?
可能です。ただし画面ごとに新しく描くことになるため、期間が延びます。ご相談の際に画面一覧を拝見し、CoUIで対応できる部分と新しく作る部分を分けて、期間を比較してご提示します。
CoUIが更新されると、自社のサービスも変わりますか?
自動的には変わりません。お渡しするCoUIは使用したバージョンのソースコードの複製なので、お客様の側で管理します。コンポーネントを1つ修正すると、そのコンポーネントを使っているすべての画面に反映されます。
CoUIで作ると、ほかのサービスと似た見た目になりませんか?
色、フォント、余白、角丸をスタイル値として一か所で管理し、お客様のブランドに合わせて差し替えます。上のギャラリーでブランドカラーとモードを切り替えてお試しいただけます。
CoUIで作れる画面から選んでご提案します
画面一覧をお送りいただければ、CoUIで作れる部分と新しく作る部分を分けて見ていきます。