会津大の学務システムの修正案とUIスタイル

2022.10.15に会津大学のZliによるLT会で発表したスライドです。

これ以降は、スライドを作る過程で考えたことなどをメモ程度に書いていきます。

ボツネタ

最終版のスライドを作るまでに、テーマが二転三転していました。
ボツになったネタとしては次のようなものがありました。

• UIの高さ

  • Material DesginのElevation

  • ダークモードの場合は、影だけでなく表面の色も変える

• UIの違い

  • トグルボタンとチェックボックスの違い

• UIの左から右の流れ

  • これについては記事を書きました

スキュモーフィズム、フラット、マテリアルデザイン

ここからは「会津大学無システムのデザイン修正案」にテーマを絞った後の話になります。

スライドの中で、UIのスタイルが混在しているという話をしました。そこで思ったのが、スキュモーフィズム、フラット、マテリアルデザインの区別の方法です。

まず、フラットデザインは単色で影がないので見分けるのは簡単です。問題は、同じ影があるマテリアルとスキュモーフィズムの違いです。それぞれ特徴に次のようなものを持ちます。

• マテリアル

  • 現実の物理法則を表現する

  • 紙とインクで表現する　→ 平面なのでグラデーションにならない

• スキュモーフィズム

  • 現実世界の要素を真似る

  • あえて曲面を作り出し凹凸などの立体感を表現する→表面がグラデーション

したがって、大雑把には次のように区別できる（はず）

• 影がないく単色　→　フラット

• 影がある

  • 単色　→　マテリアル

  • グラデーション→ スキュモーフィズム

フラットデザインとマテリアルデザイン

学務システムが救いようがなかったので、フラットデザインに統一して作り直すことにしました。しかし、所々で「これって、もはやマテリアルデザインでは？」と思うことがありました。

例えばストロークを濃い色で作った場合、遠目から見ると影にも見え、見栄え的にはマテリアルデザインになります。

また、ヘッダーなどの上の階層の要素に色を塗れば、他の部分との対比や進出色、後退色の特性から高く見えることもあります。
これはMaterial DesginのElevationではあまり利用されない表現（基本は陰で表現され、ダイアログなどでのみ背景とのコントラストも用いられる）ですが、Material Desginの「現実世界の物理現象を表現する」という本質の考えと近いです。

純粋なフラットデザインは難しい

ヘッダー、フッター、カテゴリのように塗りを使う場合、どうしても高さを意識して色の濃さや色を決める必要があります。それはマテリアルデザインの考えを使っていることになりますが、その考えを利用しないと本当にカオスになってしまいます。

したがって、マテリアルデザインの考えを完全に排除して、フラットデザインだけでUIを作るのは無理 or 使いづらいUIが出来上がるではないでしょうか。

成り立つ場合の例を考えるとWindows8のメニュー画面？が思い浮かびました。なぜあれがフラットデザインで成り立っているかというと、要素の関係がほぼ並列で上下をつける必要がないからだと感じました。