こんにちは！AI/BI部のTです。

皆さん、マテリアルデザインって知っていますか？

私は、お恥ずかしながらここ最近まで、「聞いたことがある」程度だったので、PythonでGUIアプリを作成するにあたり、少し調べてみました。

今回は、マテリアルデザインについての紹介と、PythonでマテリアルデザインのGUIアプリを作成することができるKivy/KivyMDというライブラリについても紹介したいと思います。

マテリアルデザインとは

マテリアルデザイン（Material Design）とは、Googleが2014年に提唱したデザインの概念を指す言葉です。

公式Introductionでは、「AndroidやiOS, Flutter, webなどでのハイクオリティなデジタル体験を作り出すことを助けるデザインシステム」であると提言されています。

私自身、マテリアルデザインという言葉は多少聞きかじったことがあるくらいでしたが、マテリアルデザイン自体は様々なサイトやアプリケーションで取り入れられています。

また、最近のAndroidは、「Material You」というデザインが取り入れられていたりしますが、名前からも分かるように、マテリアルデザインの系譜となっています。この「Material you」は、正式名称として「Material Design 3」となっているそうです。

参考：

• Material Design 3: https://m3.material.io/
• Material Design Introduction: https://material.io/design/introduction

マテリアルデザインの哲学

マテリアルデザインの哲学として、以下の三つが提唱されています。

• Material is the metaphor
• Bold, graphic, intentional
• Motion provides meaning

それでは、それぞれについて、ざっくりと見ていきましょう。

Material is the metaphor

一つ目は、「マテリアルはメタファー（比喩）である」です。

これは、マテリアル（デザインを構成する要素、素材）は、実際の物理的なものを表しているということです。

各マテリアルは、紙やインクのような関係性を持ち、デザインを構成していきます。マテリアルデザインのコンポーネント（デザインを構成する素材）のCardなどは分かりやすい一例だと思います。一枚のカードにインクで情報が記載されているような感覚です。

下の画像は、公式のCardsの説明（https://m3.material.io/components/cards/overview）のスクリーンショットですが、まさに一枚のカードがそこにあるかのようなデザインとなっています。

Bold, graphic, intentional

二つ目は、「大胆に、グラフィカルに、意図的に」です。

マテリアルデザインは、印刷デザインの手法（タイポグラフィやグリッド、スペースなど）を参考に、デザインを構築していきます。

これにより、そのデザインを見る人（ユーザー）を利用体験に没頭させることができます。

Motion provides meaning

最後は、「動きは意味を与える」です。

意味のある動き、首尾一貫した動きというものは、ユーザーの集中を持続させることができます。

画面に表示される各マテリアルは、相互作用して意味のある変化をしながら、画面を構築していきます。

マテリアルデザインの哲学まとめ

ざっくりと、公式Introductionの哲学部分を紹介しました。

なんとなく、マテリアルデザインの目指すところの雰囲気が見えてきたのではないでしょうか？

後述しますが、マテリアルデザインを導入する際には、しっかりとその哲学を踏まえておく必要があります。

実際に、UIを構築していくにあたって迷うことがあれば、まずはこの基本の哲学に立ち返ることが重要かもしれません。

マテリアルデザインのメリット/デメリット

マテリアルデザインのメリット

マテリアルデザインのメリットとして、まず大きいのが「ユーザー目線で操作が分かりやすい」というものがあります。

マテリアルデザインの哲学の部分で触れたように、現実世界の物質的な素材でデザインが構築されているため、直観的にしっくりくるようなデザインになります。

また、アイコンなどもマテリアルデザインに合わせたアイコンがあり、分かりやすいアイコンをボタンやタブに表示させておくことで、ユーザーは直観的に選択できます。

このような、直観的な操作が可能になる点は、ユーザーの細かな違和感をなくし、UI/UXの向上に欠かせない要素であると思います。

もう一つのメリットが、「マテリアルデザインとはこうあるべき」というものがしっかりと規定されていることです。

これは、後述するデメリットにもなりうる要素ですが、デザイン全般を深く学習していないエンジニアが、下手なセンスで画面を構成するよりも、規定に従うだけである程度のユーザーの利用体験の質を高めることができるのは、大きなメリットであるといえます。

例として、Dialogに関する決め事をいくつか挙げてみます。

参考画像として、公式ガイドライン（https://m3.material.io/components/dialogs/guidelines）のスクリーンショットを引用しております。

例1: ダイアログのタイトルには、ダイアログでユーザーに求めている操作・質問を記述し、「注意」などの文言は記述しない。

例2: キャンセルなどの実行を否定するようなボタンは、決定ボタンの右側に配置しない。

マテリアルデザインのデメリット

マテリアルデザインを導入するデメリットの一つは、「しっかりとマテリアルデザインの規定に従うとデザイン面での差別化が難しい」という点です。

これは、メリットでもお伝えした通り、マテリアルデザインには様々な規定が定まっており、それにしっかりと従っていくとどうしても似たようなデザインに仕上がっていきます。

当然、コンテンツ自体が異なればそこに独自性を見出すことは可能ですが、デザイン自体の遊びが減るという点は、目的によってはデメリットとなるかと思います。

もう一つのデメリットは、「マテリアルデザインには決まり事が多いこともあり、ある程度の学習コストがかかる」という点です。

メリットの部分で、ダイアログについての決まり事を紹介しましたが、多くの要素、動きにこうあるべきであるという決まり事があります。それらの決まり事を守らなければ、作成できないというものではありませんが、ユーザーの体験を考慮して作成された決まり事を無視することは、ユーザーの利用体験の質を低下させる要因となります。

マテリアルデザインのまとめ

マテリアルデザインは、まさに、実際の物質がそこにあるようなデザインで構成されており、ユーザーが直観的に操作することを可能とします。

また、各要素の決まり事があるので、ガイドラインに従って作成していけば、ユーザーの利用体験の質を向上させるデザインとなります。

Kivy/KivyMDとは

さて、ここまでマテリアルデザインという概念について見てきましたが、実はPythonでマテリアルデザインのGUIアプリケーションを作成することができます。

それを可能とするのが、Kivy/KivyMDです。

正確には、KivyというPythonのGUIライブラリがあり、そのKivyでマテリアルデザインに沿ったGUIを簡易的に作成できるようにしたものが、KivyMDとなります。

KivyMDはつい最近、ver 1.0.2をリリースしたばかりであり、活発に開発が進んでいるライブラリです。

参考：

• Kivy: https://kivy.org/index.html
• KivyMD: https://kivymd.readthedocs.io/en/latest/#

Kivy/KivyMDの特徴

まず、KivyとKivyMDのライセンスですが、どちらもMIT Lisenceとなっています。これは、詳細は省きますが、商用利用可能なライセンスとなっているため、個人での利用はもちろん、製品開発においても費用をかけずに利用できるライブラリとなっています。（ちなみに、Kivyは寄付を募っているので、最高なライブラリだと思ったら寄付をして支援することもできます。）

Kivyは、公式ページを引用するならば、「easy to use（使いやすい）」「cross-platform（クロスプラットフォーム）」「fast（高速）」のために開発されているライブラリです。

私は現状Windowsでのみのデプロイしか試せていませんが、一つのコードでWindows/Linux/macOS/iOS/Androidに対応するアプリケーションをデプロイすることができます。

KivyMDは、Kivyの使いやすさをそのままに、マテリアルデザイン仕様のGUIアプリケーションを作成できるようにするライブラリです。

KivyMDは、つい最近メジャーアップデートされて、バージョンが1.0.0を超えたばかりのライブラリですが、様々なコンポーネントが揃っており、今後がとても楽しみです。

そんな、Kivy/KivyMDですが、少々とっつきにくく感じる部分もあります。

その一つが、KV LanguageというKivy独特のレイアウト記述方法があることです。

KV Languageを利用しないで記述する方法もありますが、KV Languageを使ってGUIの見た目部分を作成し、機能部分はPythonで作成していくという使い分けをすることで、ソースコードも分かりやすくなって個人的にはとても便利だと思っています。

私も、まだ一発で思い通りのレイアウトを作成できなかったりしますが、実践を通して理解できたものもたくあんあります。

もし、KV Languageを食わず嫌いしている方も、ボタン一個だけ配置するなど簡単なところからぜひ挑戦してみてください。意外とハマるかもしれませんよ。

Kivy/KivyMDの導入

KivyMDは、最新版を利用するためにGitHubのmasterブランチを利用するという方法もありますが、ここでは、pipを利用して導入する方法を紹介します。

と言っても、とても簡単で、Python 3.7以上の環境で、

pip install kivy kivymd

とコマンドを入力して実行すれば、Kivy/KivyMDの導入完了です。

あとは、自分が思うがままにGUIアプリケーションを作ってKivy, KivyMDの魅力に触れてみてください。

Kivy/KivyMDのサンプルアプリ

今回、リストにタスクを追加するPythonアプリをお試しで作成してみました。

上のgif画像が作成したサンプルアプリを操作しているものとなります。

短いgif画像を見ているだけでも、どのボタンを押すとどうなるかがなんとなく分かるようなデザインになっていると思っていただけるのではないでしょうか?

この程度のサンプルアプリであれば、様々なネット上のサンプルコードを参考にしていけば、数時間で作成できるようになると思います。

このサンプルは、裏でデータベース等を作成していませんが、sqlite3などのライブラリを使うことで、簡易的にデータベース保存もできるようになります！

このように、試しに一個簡単なアプリを作って、これにもうちょっとこの機能をつけてみたいという欲望のままに色々進めていくことが、Kivy/KivyMDに慣れる、一番の近道なのかなと思います。

今回は、細かなプログラムの記述方法の紹介は省きますが、興味がある方は是非Kivy/KivyMDをお試しください！

おわりに

今回は、マテリアルデザインの紹介とKivy/KivyMDというPythonのGUIライブラリを紹介しました。

PythonのGUIアプリケーションをただただ要件を満たすように作るだけでは、良いアプリケーションにはなりません。

利用する人がいかに簡単に使うことができるか、いかに直観的に操作できるかを求めていくことも、UI/UXが求められている昨今では、とても重要なことだと思います。

今後も、利用者の体験の質への配慮を忘れずに業務に邁進したいと思います！