クラス図をUIデザインの際にも書く #Design

この記事の概要

私はデザイナーなのですが、普段ある程度のコードを書きます。
多少なりともコードを書いていると「デザインにもエンジニアリングの概念を持ち込むと便利そう」と思う機会が多くあります。

というわけでUIデザインをする際にクラス図も一緒に書いていく流れを記事にしてみました。
なお、クラス図を書くにしてもFigmaやSketch上で整理すると検索性が悪いとか、データとしての扱いが大変かもしれないとか、そんな考えもありこの記事ではMermaid¹で記載しています。

ごく簡単なメモアプリを考えてみます。

あまりにも簡素ですが、上記の内容で考えます。

OOUI本や大元のソシオメディアさんの記事にもあるように、まずは名詞を拾い上げます。

簡単な例ですからここで出てくる要素が少ないのも当然です。
今回はこの2つがメインです。

というわけで、現時点ではこう。

カテゴリーにはカテゴリー名だけ。
メモにはタイトルと作成日と本文があるとしましょう。

それぞれの要素を並べただけです。特に難しいことはないでしょう。

要件で出していた内容がかなり近いです

1つ1つのオブジェクトは整理できましたから、後は関係性を考えます。

ここまでで考えた内容で、見た目としてはだいたい作れるようになっていると思います。
試しに作ってみました。

メモの本文の編集はモードレスにとか、ハンバーガーメニューの中にアクションをまとめようとか、漏れなく考えやすいと思います。

あくまで例なので、ハンバーガーメニューの使用の是非はおいておいてください。

例えば、先ほどの仕様では1つのメモは1つのカテゴリーに属すとあったので愚直にモックアップにおこしてみましたがすべてのカテゴリーのような形式で見れるビューが無いと不便そうだぞ？など

また、今回は文字列か日付かくらいしかありませんでしたが、真偽値や数字など色々なパターンをとるのであればそれもクラス図に書いていく方が良いでしょう。

例がかなり簡単なのでクラス図を作らずとも問題無い感じも否めませんが、ひとまず世の中にこういう作り方を共有してみます。

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

Mermaidとは、テキストとコードを使ってダイアグラムやビジュアライゼーションを作成できるツールです。最近Qiitaでも使えるようになったので、それを試す意味合いもあります。 ↩