Design System — Component Parts
マルナゲ デザインパーツ集
LP + プロダクトUI のコンポーネント一覧
Landing Page パーツ
01LP — ナビゲーション
acmeinvoice
機能料金導入事例ヘルプ
ログイン
02LP — ヒーローセクション
インボイス制度対応
請求書を30秒で作成。
入金管理まで自動化。
テンプレートを選んで、金額を入力するだけ。送付・入金確認・督促まで、すべて自動。
03LP — ソーシャルプルーフ
1,240+
導入企業数
98%
継続率
4.8
App Store評価
04LP — 機能カード
Features
めんどくさい請求業務を、ゼロに。
⚡
30秒で作成
テンプレートと取引先マスタで、入力項目は最小限。毎月の定期請求も自動生成。
💰
入金自動照合
銀行口座と連携し、入金を自動マッチング。未回収アラートで漏れゼロ。
📄
インボイス制度対応
適格請求書の要件を自動チェック。登録番号の管理もワンクリック。
05LP — 料金プラン
シンプルな料金体系
Free
¥0 /月
✓月5通まで
✓基本テンプレート
✓メール送付
人気
Pro
¥2,980 /月
✓無制限
✓入金自動照合
✓カスタムテンプレート
✓API連携
Enterprise
要お問合せ
✓Pro全機能
✓SSO / SAML
✓専任サポート
✓カスタム開発
06LP — CTAバナー
請求業務にかける時間を、
もっと大切なことに使おう。
初期費用ゼロ。クレジットカード不要。今すぐ始められます。
07LP — フッター
acme
バックオフィスをシンプルに。スタートアップから中小企業まで。
プロダクト
請求書
会計
経費精算
料金
リソース
ヘルプセンター
API ドキュメント
ブログ
導入事例
会社情報
会社概要
採用情報
プライバシー
利用規約
© 2025 acme Inc. All rights reserved.
Product UI パーツ
01UI — アプリシェル（サイドバー + ダッシュボード）
a
📊
📄
👥
📈
⚙
YT
ダッシュボード
ホーム / ダッシュボード
🔍 検索...
今月の売上
¥3,240,000
↑ 12% 前月比
未回収
¥540,000
3件 期限超過
送付済
12件
↑ 4件 前月比
入金済
8件
残り4件
月別請求・入金
請求額 入金額
10月
11月
12月
1月
2月
3月
02UI — 請求書一覧テーブル
請求書
24件| 請求番号 | 取引先 | 金額 | ステータス | 発行日 | 期日 |
|---|---|---|---|---|---|
| INV-2025-0042 | 株式会社サンプル | ¥385,000 | 入金済 | 2025/03/01 | 2025/03/31 |
| INV-2025-0041 | テスト商事株式会社 | ¥128,700 | 送付済 | 2025/02/28 | 2025/03/31 |
| INV-2025-0040 | ABC Holdings Inc. | ¥1,540,000 | 期限超過 | 2025/01/15 | 2025/02/28 |
| INV-2025-0039 | グローバル・テック | ¥264,000 | 下書き | — | — |
| INV-2025-0038 | ネクスト・デザイン | ¥792,000 | 入金済 | 2025/02/01 | 2025/02/28 |
03UI — 請求書詳細
INV-2025-0042
送付済請求先
株式会社サンプル
東京都渋谷区〇〇 1-2-3
請求元
acme株式会社
T1234567890123
発行日
2025年3月1日
お支払い期限
2025年3月31日
| 品目 | 数量 | 単価 | 金額 |
|---|---|---|---|
| Webアプリ開発（2月分） | 1 | ¥300,000 | ¥300,000 |
| サーバー保守 | 1 | ¥50,000 | ¥50,000 |
| 小計 | ¥350,000 | ||
| 消費税（10%） | ¥35,000 | ||
合計¥385,000
04UI — ボタンバリエーション
05UI — フォーム要素
請求書の送付先
13桁の番号を入力してください
06UI — トースト通知
✓
請求書を送付しました
INV-2025-0042 を sample@company.co.jp に送信
!
支払い期限が近づいています
INV-2025-0041 の期限は3月31日です（残り5日）
×
メール送信に失敗しました
送信先アドレスを確認してください
07UI — 空の状態（Empty State）
📄
まだ請求書がありません
最初の請求書を作成して、請求業務を始めましょう。テンプレートから30秒で作れます。
09UI — ツールチップ
PDF出力します
請求書を複製
ショートカット: ⌘K
10UI — ステータスバッジ
入金済送付済下書き期限超過
モーダル
11UI — モーダル 4パターン
A. 確認モーダル
📤
請求書を送付しますか？
この操作は取り消せません
INV-2025-0042 を 株式会社サンプル (sample@company.co.jp) にメールで送付します。
B. フォームモーダル
＋
新しい取引先を追加
C. 危険操作モーダル
⚠
請求書を削除しますか？
この操作は元に戻せません
INV-2025-0039（下書き）を完全に削除します。削除されたデータは復元できません。
D. 成功モーダル
✓
送付が完了しました！
INV-2025-0042 を株式会社サンプルに
メールで送付しました。
カラーパレット
C1カラーパレット
Primary#0AA5D4
Deep Ocean#0369A1
Amber#F59E0B
Navy#1E293B
#0AA5D4
Brand#0993BD
Brand Hover#E6F6FB
Brand Light#0369A1
Deep Ocean#F59E0B
Amber#1E293B
Navy Slate#1D1C1D
Text Primary#E1E1E1
BorderSpinner
C2Spinner
Small
Medium
アイコン一覧
C3アイコン一覧
Home
Search
Plus
Settings
User
Users
Calendar
Mail
Bell
Upload
Download
FileText
Chart
Database
Filter
Sort
Shield
Sparkles
Alert
Clock
Clipboard
Grid
ChevDown
ChevRight
LogOut
Help
Plug
Robot
Sidebar
サービスアイコンカラー設計
01サービスアイコン — どう色を振るか？
A. サービスごとに全部変える現状
各サービスにユニークな色を割り当て。
メリット：サービス単体の識別性が高い
デメリット：サービス増えると色が破綻。カテゴリ構造が見えない。ブランドの統一感が薄れる。13サービスに13色は多すぎる。
B. カテゴリ単位で色を振る★ 推奨
同カテゴリのサービスは同じ色。カテゴリ間で色を変える。
メリット：色数が少なく統一感あり。カテゴリ構造が一目でわかる。サービス追加にも強い。
デメリット：同カテゴリ内の見分けはアイコン形状に依存。
サービスが13個もあるので、案B（カテゴリ単位）一択です。13色を見分けるのは人間の認知限界を超えます。カテゴリ5〜6色なら直感的に構造が伝わります。
02サービスアイコン — カテゴリ × カラー設計
HR（人事・労務）#0F766E · Teal 700
管理
管理
勤怠
勤怠
経理（請求・会計）#0369A1 · Deep Ocean（Secondary 1）
請求
請求
会計
会計 BETA
営業・集客#B45309 · Amber 700
営業
営業 BETA
案件
案件 BETA
契約#6D28D9 · Violet 700
Sign
Sign BETA
ドキュメント・ツール#475569 · Slate 600
Drive
Drive BETA
03サービスアイコン — 色相環上のバランス
Teal175° HR
Primary198° ブランド
Deep Ocean208° 経理
Violet263° 契約
Amber38° 営業
Slate215° ツール
色相環上で5色が均等に散らばっていることが重要です。
まとめ
5カテゴリ × 5色で全13サービスをカバー。カテゴリが増えたら色相環の空きから取る。サービスが増えたらカテゴリの色をそのまま使う。BETAは不透明度70%。シンプルで拡張性のあるルールです。