---
type: Template
title: "設計"
description: "設計ドキュメント（アーキテクチャ・データモデル・ドメインモデル・UI）のテンプレート。"
tags: [template]
status: stable
generated: { by: human:kakimomokuri, at: 2026-03-16T05:10:11Z }
---

```plantuml
@startmindmap
* 認証
-- ユースケース
--- 管理者を認証する
--- ユーザーを認証する
-- ドメインモデル
--- 認証ユーザー
-- データモデル
--- ユーザー
** ユーザーインターフェース
*** ビュー
**** ログイン
**** ホーム
*** モデル
**** ログイン
**** ホーム
**** ナビゲーション
*** インタラクション
**** ログイン
**** ホーム
@endmindmap
```

## ユーザーストーリー

- 管理者としてログインできる
- ユーザーとしてログインできる

## TODOリスト

- [x] 認証APIを作成する
- [x] ログイン画面を作成する
- [x] ホーム画面を作成する

## ユースケース

```plantuml
@startuml

left to right direction
actor "ユーザー" as member
actor "管理者" as admin
rectangle ユーザー認証 {
  usecase "管理者を認証する" as UC1
  usecase "ユーザーを認証する" as UC2
}
admin --> UC1
member --> UC2

@enduml
```

## ドメインモデル

```plantuml
@startuml
class 認証ユーザー
class ユーザー一覧
class ユーザー
class ユーザーID
class パスワード
class 役割
class 名前

認証ユーザー *- ユーザー
ユーザー一覧 *-- ユーザー
ユーザー *-- ユーザーID
ユーザー *-- パスワード
ユーザー *-- 役割
ユーザー *-- 名前

@enduml
```

## データモデル

```plantuml
@startuml
' hide the spot
hide circle
' avoid problems with angled crows feet
skinparam linetype ortho
entity "ユーザー" as usr {
    *ユーザーID : text
    --
    姓 : text
    名 : text
    パスワード : text
    役割 : text
}
@enduml
```

## ユーザーインターフェース

### ビュー

```plantuml
@startsalt
{+
  ログイン画面
  {+
    {
      [  ログイン   ]
      ---------------------
      ユーザーID    | "MyName   "
      パスワード | "****     "
    }
  }
----------------
  ホーム画面
  {+
  {
  ホーム
  ログアウト
  } |
  {
    {
      <b>お知らせ
    }
    ---------------------
    {
        2020/01/01 お知らせ内容
        2020/01/02 お知らせ内容
        2020/01/03 お知らせ内容
    }
  }
  }
}
@endsalt
```

### モデル

```plantuml
@startuml
  class ログイン {
    ユーザーID
    パスワード
    ログイン()
  }

  class ホーム {
    お知らせ
  }

  class ナビゲーション {
    ホーム()
    ログアウト()
  }

  ナビゲーション -* ホーム
@endum
```

### インタラクション

```plantuml
@startuml

title 画面遷移図

[*] --> ログイン

state ログイン : ユーザーID・パスワードを入力
ログイン --> ホーム : ログイン成功
ログイン --> ログイン : ログイン失敗

state ホーム : お知らせを表示
ホーム --> [*] : ログアウト

@enduml
```