マテリアルデザイン

本

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

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

Tooltipsツールチップの目的は、ボタンやその他のUI要素にコンテキストを追加すること。ツールチップには、プレーンタイプとリッチタイプの2種類が存在する。プレーン：アイコンボタンの要素や動作を説明する場合に使用。アイコンのみのボタンやフィールドのように、テキストを持たないUI要素のラベル付けに最適です。リッチ　：機能の価値を説明するなど、より詳細な情報を提供する場合に使用。リッチツールチップには、オプションでタイトル、リンク、ボタンを含めるこ

【マテリアルデザイン】Responsive layout grid

M2 M3 3つの構成要素（Columns, gutters, margins)Column カラムの横幅は固定値ではなく、%で指定される。%で定義することで、様々なコンテンツ幅に対応することが出来る。グリッドに表示されるカラムの数は、ブレイクポイントの範囲で予め定められている。スマホ：ブレイクポイント360dp。カラムは4つ。タブレット：ブレイクポイント600dp。カラムは8つ。 Gutters ガターはカラム同士内にあるスペースのことで、コンテンツを

【マテリアルデザイン】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なので

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

FAB(Floating Action Button)画面上で最も重要なアクションにはFABを使う。 FABは画面上の他のすべてのコンテンツの前に表示され、丸みを帯びた形と中央のアイコンによって認識できる。ただし、画面が主要なアクションを表す場合など、すべての画面にFABが必要なわけではない。 FABは、スクリーンの主要なアクションの提示にのみ使用する。 FABは左寄せ、中央寄せ、右寄せのいずれでもよい。ナビゲーションバーの上に配置することも、バーの中に入れ子にす

【マテリアルデザイン】アクションをどこに配置するか〜App bar/Tab/Navigation〜

アプリ内でボタンを置くならどの場所？「ユーザーにアクションさせよう！」「オブジェクトを表示しよう！」と思った場合、それらはどこに配置すれば良いのか？の基本から確認してみます。「Components overview」を見る限り、このあたりが該当しそうです。今回はオブジェクト指向UIデザインのフローに沿って「ルートナビゲーション」の検討をしたいと考えているため、これらのうち下記の項目におけるマテリアルデザインを確認してみます。（これらはマテリアルデザイン上、「Navi

【マテリアルデザイン】visibility icon、パスワード見たいときはどっちのアイコンを使うか問題

visibility iconは2種類存在するvisibility visibility off アイコンの使いどころがサービスごとに異なる件私の個人的な感覚としては、こうです。・visibility：パスワードが見える状態の時に使用する・visibility off：パスワードが見えない状態の時に使用する目の形のアイコンは、「状態」を示すものだから、という考えだからです。しかし、トレースなどしていると、サービスごとに上記と逆のパターンでアイコンが使用されてい

【マテリアルデザイン】テキストフィールド

2種類のテキストフィールドが存在するFilled text fields Outlined text fields Outlined text fields 塗りつぶされたテキストフィールドよりも視覚的な負荷が少ない。シンプルなので、フォームがたくさん並ぶページで有効。注意点同じページ内で異なるフォームを混在させない。フォームの種類は統一させる。フォームを構成するものContainers コンテナは、テキストフィールドと周囲のコンテンツとの間にコントラスト