マガジンのカバー画像

マテリアルデザイン

10
運営しているクリエイター

2023年11月の記事一覧

【マテリアルデザイン】The color system - Dynamic Color

画面を作っている時に悩みやすいのが「色の選び方」「色の使いどころ」です。 マテリアルデザインを見ていると、かなり細かく色が設定されているなあ…ということは認識していたのですが、 「なぜここまで細かく色を作っているのか?」 「それぞれの色にどういった役割があるのか?」という原理原則をきちんと知っておきたいなと思い、ボリューミーでしたがガイドラインを読んでみました。 ※DeepLの機械翻訳では理解が難しい点が多く、、私の意訳も多分に含むまとめとなってしまいました。間違って翻訳&解

【マテリアルデザイン】Snack bars

画面を操作しているときに、「ボタンを押したけど反応ない、、ちゃんと操作が反映されたかな?」と、不安に感じることがあります。 特にスマホが普及されて以降インタラクションな画面が増えたからだと推測していますが、「反応がない」というのが不安に感じる要素かなと思っています。 このとき、Snackbarを適切に使うことが出来れば、この不安感も拭えるよなあと思い、調べてみました。 (後述しますがSnackbarには操作の取り消しアクションなども付与することができ、操作の可逆性が担保されて

【マテリアルデザイン】Empty State

ユーザーにデータを初めて追加させるとき、検索結果が空だったとき…。 「表示させるものがない」ということを示すためのUI画面が必要だな、とUI画面を作りながら思い、調べてまとめてみました。 ※M2の内容になります。(M3では見つけられず) Empty State エンプティステートを構成するものとして一般的なのは、下記の2つ。 静止画 中立的な画像、あるいは面白みのある画像 ブランドイメージと一貫性があるもの NG例:混乱や緊急性を伝えるような画像の使用は避ける。

【マテリアルデザイン】Swich

ポートフォリオ内にSwichボタンを使用したいな、と思い立ちました。 でも時々、Swichボタンのようなものを見かけた時に「結局今って(あるいは切り替えたら)どっちの状態になるんだっけ?」と迷子になることがあります。。 なので、マテリアルデザインのガイドラインを参照しつつ、他に考察を書いてくれている方の記事を見つけたので、ここに集約してみます。 Switchボタンスイッチは、オン/オフや、真/偽など、2つの値からなる設定をするのに使われる。対立する値に使用するのはNGなので