これは何かGoogleの Material Design Guideline - Data Visualization がとても良くまとまっていたので、自分なりに和訳・編集してまとめたものです。 ※ 注意事項 こちらはあくまで、もとのドキュメントを参考に筆者が和訳・編集したものになります。原文の完全な和訳ではなく、抜粋の範囲や、英=>和の際の意訳を筆者が恣意的に行っています。 筆者の意訳・編集による曲解や元のドキュメントでのオリジナルの文意が気になる方は原文を読むことを強くおすすめします。 和訳の公開の可否についてはGoogle社に直接問い合わせています。1 / 原理原則（Principles） データの可視化は、複雑で内容の多い情報をグラフィカルな形式で表現するコミュニケーション手段である。 可視化の結果、データを比較しストーリーを伝えることが容易になり、データの利用者の意思決定の助け
［速報］Google、新デザインフレームワーク「Material You」発表。デバイスからアプリケーションまでGoogleの製品すべてに適用へ。Google I/O 2021
Googleは、5月19日未明に開催したオンラインイベント「Google I/O 2021」で、新しいデザインフレームワーク「Material You」を発表しました。 Material Youでは、これまでデザインフレームワークによってあらかじめ指定されていたカラーパレットから色を選ぶのではなく、「あなた自身のパーソナルカラーを基に、デザイナーの視点とカラーサイエンスの組み合わせによって作られたカラーパレットを生成することで、あなたがアプリケーションのルック＆フィールのクリエイターになる」（Matias Duarte氏）と説明。 そして自動的にそのカラーパレットにUIが適合していくとのこと。
最近ではReactやVueを使ったリッチでインターラクティブなUIがどんどん主流になってきていますし、2020年以降もこの流れは加速し続けるでしょう。 SPA（Single Page Application）やPWA（Progressive Web Application）の普及によって今までモバイルでしかできなかったことがwebでもどんどんできるようになってきています。 また、Firebaseを使うことでクラアントサイドだけの高速なサービス開発が可能になってきていて、今後ますますWebフロントエンドのニーズは増えるのは確実です。 （サーバーサイドが必要ないという主張がしたいのではありませんが） Webフロントエンドをどのように勉強するのか 初心者に立ちはだかる壁 しかし、何か作ってみようと思ってもなかなかほどよいアプリがありません。TODOぐらい簡単なものだと雰囲気を掴むのにはちょうどい
Webサイトでもスマホアプリでも、アイコンのデザインは非常に重要です。優れたアイコンをデザインするために必要な7つの原則を紹介します。 アイコンだけでなく、UI全体のデザインにも通じるプロのデザインテクニックが詳しく解説されています。 7 Principles of Icon Design by Helena Zhang 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Clarity -アイコンは分かりやすく Readability -アイコンは見やすく Alignment -アイコンにおける揃え Brevity -アイコンは簡潔にデザインする Consistency -アイコンの一貫性 Personality -アイコンの個性 Ease of Use -アイコンの使いやすさ アイコンのリソース Clarity -アイコンは分か
こんにちわ！はじめまして、ゆいです。 都内でデザイナーとして働きつつ、兼業で画家になりたいです。設計したりWEBデザインしたり、社内ではグラレコ風のなにかを描いたりしています。休日は絵を描いています。 日々の思考・メモなどはツイッターにあるので良かったら見てください ガイドラインについて、話したい。今回はナレッジの整理と共有です。2018年頃に社内展開用に作成したスライドをもとに文章化してみたいと思います。ここで話したいと思っているガイドラインとは、Appleが展開しているHuman Interface GuidelinesとGoogleが2014年に発表したデザインのフレームワークMaterial Designを指しています。当時在籍していたUIチームの知識を揃えたいと思い、自分なりに掘り下げて整理していました。 おそらくアプリに関わるUIデザイナーの方で上記２つのガイドラインを読んでい
CSSフレームワークのブレイクポイントを比べてみた(Bulma, Vuetify, Element, Bootstrap, etc..) - Qiita
だいたい5段階になってるっぽい。上限や下限がそれぞれ違うのがおもしろい(´ω｀) ちなみに単位はpx。収まらなかったので省略... 調べたのはこの7つ Bulma ... Responsiveness | Bulma Bootstrap ... Overview · Bootstrap Material Design ... Responsive layout grid - Material Design Vuetify ... Breakpoints — Vuetify.js Material-UI ... Breakpoints - Material-UI Element ... Component | Element Tailwind CSS ... Breakpoints - Tailwind CSS Material DesingはCSSフレームワークではないけど参考として。
UIデザイナーは要チェック！ 新しくなったMaterial Design 3は可変フォントやアイコン、アクセシブルで使いやすいカラーに
5/11,12に開催されたGoogle I/O 2022に伴い、Material Design 3のガイドラインが大幅アップデートされたので紹介します。 注目すべきキーワードは、アクセシビリティとパーソナライズ。 アクセシブルなコントラストを備えたダイナミックカラー、可変フォントRoboto FlexとRoboto Serif、可変アイコンフォントを使用したマテリアルシンボル、スイッチをはじめUI要素のデザインも変更されています。 Material Design 3 Material Design 3の大きな特徴は、表現力豊かなパーソナライズ機能とアクセシビリティ機能です。ダイナミックカラーのサポートに加えて、いくつかのマテリアルコンポーネントもアップデートされました。新機能は、オンラインやFigmaやGoogle Fontsなどで提供されており、すぐに利用できます。 Dynamic co
Googleは自社プラットフォームのAndroidだけでなく、AppleのiOS向けにもアプリを提供しています。このようなAppleプラットフォーム向けにGoogleが提供しているソフトウェアのデザインを担当しているJeff Verkoeyen氏が、Google製のiOSアプリではGoogleのデザインガイドラインである「マテリアルデザイン」に固執しない方針にシフトすることを明らかにしました。 Google’s apps to embrace iOS on iOS – Six Colors https://sixcolors.com/link/2021/10/googles-apps-to-embrace-ios-on-ios/ Google Is Moving Its iOS Apps Toward Platform UI Conventions and Away From Materi
The next stage for Material Design
AndroidアプリをMaterial Designのガイドラインに準拠させるための取り組み - ZOZO TECH BLOG
はじめに ZOZOTOWN開発本部ZOZOTOWNアプリ部Android2ブロックの鈴木（@s1u2z1u3ki）です。 本投稿ではZOZOTOWN Androidアプリを、Material Designに準拠したUI/UX1とするために取り組んでいる内容を紹介します。 目次 はじめに 目次 Material Designとは？ Material Design勉強会について 勉強会の流れ 存在した課題 課題解決へのアプローチ 提案会の実施 提案会の流れ 1. 提案会の準備 2. セクションの復習 3. 提案内容の議論 実装会の実施 「結局やらない」をなくすため モブプロ形式でリリースまでのスピードを上げるため 実装会の流れ 1. タスクの共有 2. タスクを進める 3. 進捗記入 4. 進捗共有 取り組みの結果 リリースした提案 1. ログイン画面のテキストフィールドのフォーカスを強調する
AngularでTrelloのようなリストをドラッグ＆ドロップできるような画面を作る方法をご紹介します！ Angular Material CDKのDragDropModuleを使用します。 検証環境 Angular CLI: 8.3.21 Node: 12.13.0 OS: darwin x64 Angular: 8.2.14 @angular/cdk: 8.2.3 事前準備 @angular/cdkが入っていない場合は追加しましょう。 $ ng add @angular/cdk Angularのプロジェクト作成方法はこの記事では割愛します。 実装してみる app.module.tsにインポート文を追加 app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule }
Designed by David Allin ReeseThis article was co-written with Michael Gilbert, Senior User Experience Researcher on the Material Design team. Dave Chiu , Staff Interaction Designer, and Sameer Bansal, User Experience Designer, collaborated with Michael on redesigning the text fields. You might not always notice, but Material Design is constantly evolving and iterating based on research. We recentl
5年更新していなかったアプリが 海外バイヤーから数万ドルで 買収されそうになったので、 久しぶりにアプリを更新しようと思ったら 色々仕様が変わっていたので、 細々したよくやるやつをツラツラと話す話/RecentlyAndroidFunctions
You can check gif slide in Google Photo. https://is.gd/nx5hJi I talked this in the meetup of thanksgiving android presented by m3. https://m3-engineer.connpass.com/event/152923/
Framework-ception! This collection of frameworks helps you kickstart your Vue projects. There's a variety of libraries within the Vue-niverse that support you with routine tasks and boilerplate code. If you think we're missing an essential entry on this list, just tell us via Twitter @MadeWithVueJS! General Frameworks Nuxt.js 52265 Nuxt is an opinionated framework that helps you create performant
WPF でおしゃれっぽい画面を作るときに多くの人がお世話になる MahApps.Metro と Material Design In XAML Toolkit の導入方法をメモっておきます。 プロジェクト作成 普通に WPF アプリのプロジェクトを作ります。私は、.NET 5 で作ってますが .NET Core 3.1 でもほぼ同じ手順だと思います。 白いウィンドウだけだと何が変わったのかわかりづらいと思うので、MainWindow.xaml をちょっと書き換えてコントロールを置いておきます。 <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/200
翻訳記事：デザインシステム の現状 // The State of #DesignSystems 2020 by @materialdesign｜Nobuya Sato
すっかりnote放置してしまってましたが、今年は子どもの受験対応もあって気がついたらあっという間に時が経っていました。2020年もあと数日で終わり（汗） それはさて置き、Material DesignブログでThe State of Design Systems: 2020という記事が先週（2020/12/16）公開されてましたのでざっと日本語にしてみました。（許諾済み） ※ 概要だけ訳すつもりが気付いたら全訳になってしまいました😁 訳が変なところは気がついたら直します（たぶん） 調査はMaterial DesignとClarityの共同調査。去年の詳細記事はこちら。 はじめに私たちが使用するデザインシステムは常に進化しています。 今年のデザインシステムの現状調査では、デザインシステムがどのように成熟するか、デザインシステムに何が含まれるか、そしてデザインシステムが人、ツール、プロセスに
Material 3 Design Kit | Figma
Introducing Material Design 3 Meet Material Design 3, Material Design’s most personal design system yet. The Material 3 Design Kit provides a comprehensive introduction to the design system, with styles and components to help you get started. Visualize dynamic color in your UI The Material 3 Des...
【Material Design】SnackbarとToastの使い分けと注意点｜kanna UI/UX Designer
こんばんは！デザイナーの@kannaです。 最近改めてマテリアルデザインのSnackbarについて触れる機会があったので記事にしておこうと思います。 はじめにMaterial Design ガイドラインには Confirming actions と Acknowledging actions の2つのアクションタイプがあります。 Confirming actionsは確認のためのアクションで、 Acknowledging actionsはユーザーが選択したアクションが完了したかを知らせるアクションです。 Snackbarはユーザーの行動後のアクションを知らせるものなので、Acknowledging actionsに含まれます。 Acknowledging actions＝Dialog / Snackbar / Alert Dialog はユーザの行動を妨害し、アクションも 2 つまでは持つ
Introducing Material Design Guidance for Large Screens - Material Design
Designing and building for more devices
Material3(Material You) の変更点 / Changes in Material3(Material You)
2021/10/15 Mobile Act ONLINE #6 https://mobileact.connpass.com/event/225305/
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
この記事の元の本編は削除しました。｜樫田光 | Hikaru Kashida｜note
2020年にWebフロントエンドを勉強する人が作るべきたったひとつのアプリ - Qiita
Google、「Material Design」のアイコンを「Figma」で公開／2,000以上ものアイコンが、5つのバリエーションで。商用も可
アイコンデザイン 7つの原則、優れたアイコンをデザインするために
独学でUIデザインはじめた方へ。デザインガイドラインについて語ろう！｜ゆい
Google製iOSアプリがマテリアルデザインに固執しない方針にシフト
Unveiling Material You - Material Design
AngularのDragDropModuleを使ってToDoリストを作る | DevelopersIO
The Evolution of Material Design’s Text Fields
The best Vue.js Frameworks 2024 - Made with Vue.js
WPF でマテリアルデザインをするための土台作りの手順 - Qiita