Segmented buttonを使いたいのだが、いまいち使っているサイトが見つけられない（Google系サービスがほとんど？）。 詳細に解説していそうなサイトを見つけたので貼っておく&後で読む https://medium.com/tap-to-dismiss/a-better-segmented-control-9e662de2ef57

「出来る」は日本語的に正しくない場合が多いらしいので、UI作ってるときにふと使ってしまわないように「抑制単語登録」なるものをしました💡これでいちいち「あれ…出来るだっけ？できる？」と迷うストレスが減る https://howtocircle.com/ime6/

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

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

【よくあるUIパーツ収集】モーダル（ポップアップ）

今回はモーダルです。 「新規作成する」という1つのタスクでも、複数の「XXXで新規作成する」「YYYで新規作成する」といった形で、完全に異なるプロセスでタスクを完了させる…といった流れのときに、モーダルの利用を検討したいのですが、 一方で「そのときのモーダルってどんな形か？」がしっかりインプットしきれていないため、他のサービスでどんな形になっているかリサーチしてみました💡 ※調べた結果モーダルではないものも含みますが、「モーダルっぽいポップアップが表示されるもの」という観点で

【よくあるUIパーツ収集】メニュー

今回はメニューです。 アクションが複数存在し、そのままボタンを並べるのは使いにくいなあ…と感じる場面がある際に、三点リーダー＋メニューでアクションを表示させることが多いです。 メニューも自分のイメージでつい勝手に作ってしまうことが多いので、改めて他のサービスでどんな形になっているかリサーチしてみました💡 Google地の色：白 装飾： シャドウ（4辺） 角丸 リストごとにアイコンあり note地の色：白 装飾： シャドウ（4辺） 角丸 吹き出し メニュー

【よくあるUIパーツ収集】パンくずリスト

初回はパンくずリストです。 当初、自分で画面を考えているときに、「パンくずリストの一部って大体リンクになってるし、メインカラーとかで色を置いておけばアクション出来るって分かりやすいかな？」と考えていました。 そのため、リサーチする際は「地の色がメインかorそれ以外か」という観点でまとめてみました。 （最後にもまとめていますが、メインカラーを使ったパンくずリストはほぼなかったです…。） 地がテキストカラーと推測されるものSony カラー：グレー系 アクション：ホバー時にラ

【BONO】【学習記録】UIビジュアルの学びまとめ

BONOというコミュニティでUIデザインについて勉強しています💡 今回は、BONOの各シリーズでインプットした細々とした内容や、自分で調べた内容、カイくんさんにフィードバック頂いた中のUIビジュアルに関する内容をまとめていきたいと思います。 ボーダーボーダーの考え方 前提として、UI画面は様々な情報を載せて形成されている。ボーダーもそういった情報の1つである。 境界線としてボーダーを使用する目的は、他のコンテンツを引立てる、というもの。あくまで大事なのはメインのコンテン

【BONO】【学習記録】モーダルナビゲーションの基本

BONOというコミュニティでUIデザインについて勉強しています💡 今回は、グローバルナビゲーションに関するインプットからアウトプットまでのまとめ第三弾です！ 学習したコンテンツはこちら👇コンビニなどのスイーツを記録し、記録したものをメルマガとして作成・配信するという架空のアプリにおいて、グロナビを中心に画面のリデザインに取り組む内容になっています！！ モーダルナビゲーションの基本1．”完結するアクション”に使用する 複雑なアクションはモーダルを使用して、タスクを完了させ

【BONO】【学習記録】階層ナビゲーションの基本

BONOというコミュニティでUIデザインについて勉強しています💡 今回は、グローバルナビゲーションに関するインプットからアウトプットまでのまとめ第二弾です！ 学習したコンテンツはこちら👇コンビニなどのスイーツを記録し、記録したものをメルマガとして作成・配信するという架空のアプリにおいて、グロナビを中心に画面のリデザインに取り組む内容になっています！！ 階層ナビゲーションの基本1．選択肢を狭め、フォーカスする移動 移動とは「集中」を示す。（タスクに集中するために、画面を移

【BONO】【学習記録】グローバルナビゲーションの基本

BONOというコミュニティでUIデザインについて勉強しています💡 今回は、グローバルナビゲーションに関するインプットからアウトプットまでまとめていきたいと思います。 学習したコンテンツはこちら👇コンビニなどのスイーツを記録し、記録したものをメルマガとして作成・配信するという架空のアプリにおいて、グロナビを中心に画面のリデザインに取り組む内容になっています！！ グローバルナビゲーションの基本1．最上位のゴールに対する役割を配分する アプリでやりたいことの一番トップがグロナ

【BONO】【学習記録】階層表現 - UIビジュアル基礎

直近、BONOというコミュニティでUIデザインを学んでいます🔥 その中でも、UIのビジュアル基礎シリーズというものの中で「UIには階層表現が存在する」ということを初めて知りました。 もうちょっと詳しく知りたい！と思い、BONOの動画の内容や、マテリアルデザインのガイドラインをまとめてみました👇 参考にしたもの 平面における階層構造階層とは？ そもそもUIは、階層を持っている 階層表現を用いることで得られるメリットは3つ。 情報構造を分かりやすく伝える ボタンの押せ

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

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