Design system for MALU, Nagi & SK's Toolbox
SK Material
MALU・Nagi・SK's Toolbox の部品と配色のきまり。Google の Material Design 3 を土台に、SK の色と文字をのせています。
M3 & SK
M3 のままのところと、SK で決めたところ
どこまでが Google の Material Design 3 で、どこからが SK のものか。見本と一覧で分けておきます。
- 同じところ部品の形・大きさ・並べ方・色の役割
- ちがうところ元の色（M3 の初期値の紫 → SK's Blue など）と文字（Roboto → M PLUS 1）
Material Design 3M3 のまま
- 部品の形と大きさボタン（高さ 40px・丸い両端）、ダイアログ（角の丸み 28px）、スイッチ、チップ、文字を入れる欄など
- 色の役割primary・surface・on-surface などの名前と、どこにどの色を使うか
- トーンで配色を作る考え方1 つの色から明るさの段階（トーン）を作り、役割ごとに決まった段階を使う
- 押したときの重ね色と波紋マウスを乗せたとき 8%、押したとき 10%
- 動きのカーブすっと止まる emphasized decelerate など
- アイコンMaterial Symbols（Rounded）
SKSK で決めたところ
- 元にする色Toolbox は SK's Brand のテーマカラー 7 色、MALU は辞書ごとの色、Nagi は凪の青緑
- MALU の配色の計算辞書を切り替えるたびに、M3 のトーンをまねた SK の小さな計算で配色を作り直す
- 文字MALU・Nagi・Toolbox の Calc・Memo・Todo などは M PLUS 1
- 設定をそろえるライト・ダーク・テーマカラー・動きを減らすを、Toolbox のアプリ全部で同じにする。サイトの「表示」ともつながる
- 選んだときの弾み選んだものが軽く弾む動き（M3 にはないカーブ）
- ことばSK's Brand の「ことば」のきまり（です・ます、むずかしいことばを使わない）
このページの中身も、SK Material の部品（文字の段階・カード・タブ・チップ・ボタン・波紋）で作っています。下の「配色」で色を選ぶと、このページ全体の色も変わります。上のヘッダーと下のフッターは、サイト共通のものです。
いまは「SK Style」で、同じ中身をサイト（SK's Brand）のきまりで表示しています。アプリの画面や部品の見本は、SK Material のままです。
Color
プロダクトごとの配色
どのプロダクトも、1 つの元の色から M3 の色の役割を作ります。元の色と作り方は、プロダクトごとに少しずつちがいます。
SK's Brand のテーマカラーを元に、Google の material-color-utilities（SchemeFidelity）で計算した配色です。計算は前もってすませてあり、Toolbox の設定で選んだ色に切り替わります。
辞書の分類（辞書によっては辞書ごと）の色を元に、MALU の中の小さな計算で配色を作ります。M3 のトーンの段階をまねていますが、material-color-utilities は使っていません。ここでは MALU と同じ計算をしています。
凪の青緑（#0f766e）から作った配色です。休憩中は、空の青（tertiary）を primary の代わりに使います。
#2563eb
ライト
ダーク
色の名前（primary など）は M3 の色の役割です。色を押すと、コードをコピーできます。
文字と背景の読みやすさ
数字はコントラスト比（WCAG）。4.5 以上で AA、7 以上で AAA です。いま選んでいる色から計算しています。
Shape
角の丸みの大きさ
M3 の角の丸みの段階を、そのまま使っています。小さい部品ほど角は小さく、画面の上に浮かぶものほど丸くなります。
SK's Brand（サイト）の角は「なめらかな角」ですが、SK Material は M3 と同じふつうの角の丸みです。Nagi のタイマーのボタンは、動いているあいだ角の丸みが変わります（M3 の形の変化）。
Components
部品の見本
上で選んだ色で、アプリと同じ大きさ・同じ動きの部品を並べています。押してみてください。
ボタン
選ぶ
文字を入れる
押すと下の線と名前が、primary の色に変わります。
知らせる・確かめる
このメモを削除しますか？
削除すると、元に戻せません。
見本は、このページのために同じ大きさで書いたものです。実際の部品は、それぞれのアプリの中にあります。
押したときの重ね色
M3 では、乗せる・押すなどの状態を、文字と同じ色をうすく重ねて表します。重ねる色は部品ごとに変えず、濃さだけで伝えます。
Motion
動きのカーブ
3 つは M3 のカーブ、1 つは SK で足したカーブです。カードを押すと、見やすいように 3 倍ゆっくり動きます。
In use
使っているところ
MALU・Nagi・SK's Toolbox のアプリは、SK Material でできています。サイト（sk-hub.jp）の画面は、SK Material ではなく SK's Brand のきまりで作っています。
アプリ
SK's Toolbox のアプリ
Credit
出どころとライセンス
SK Material は、次のものを使わせてもらって作っています。
部品の形・大きさ・動き・色の役割のガイドライン。SK Material の土台です。
m3.material.io Material Symbols・Material IconsGoogle LLC・Apache License 2.0Nagi と Toolbox のアイコン（Rounded）。Google Fonts から読み込んでいます。MALU は同じ形のアイコンを SVG で入れています。
fonts.google.com/icons material-color-utilitiesGoogle LLC・Apache License 2.0Toolbox のテーマカラーから配色を作る計算（SchemeFidelity）。計算した結果の色だけを Toolbox に入れています。
GitHub M PLUS 1M+ FONTS PROJECT・SIL Open Font LicenseMALU・Nagi・Toolbox の Calc・Memo・Todo などの文字。
Google Fonts「Material Design」「Material Symbols」は Google の名前です。「SK Material」は、MALU・Nagi・SK's Toolbox の部品と配色をまとめて呼ぶための、SK の中での呼び名です。ほかの使わせてもらっているものは Link & Credit にまとめています。
土台は Material Design 3。
その上に、SK の色とことばをのせています。