#MaterialDesign 記事まとめ｜Nobuya Sato

Google I/O 2023 デザイン関連直前ガイド #googleio23 #io23jp

今年最初のnoteです。世の中の状況はすっかり収まり、世界は粛々と進んでいる…と、デジャブな書き出し…。さて、ぼーっとしていたらもう2023年も5月半ば、残り約半年、早っ！ 4年前だったらウェ～イ！とかサンフランシスコの強い日差しの中、太陽を満喫している時期ですが、今年のGoogle I/Oは…ってあれ？これもデジャブな序文ですねｗというわけでGoole I/O 2023、今夜26時スタートです！今年のnoteのきっかけとして、以前やっていたデザイン関連のセッショ

Web の Gmail から見る Material Design 3 の Color

最近 Web 版の Gmail にも Material Design 3 が適用されました。パッと画面を見ただけでは下のような感想を持つのはよくわかります。 Material Design 3 の Color Theming を理解していると、色を細かく管理はしていないだろうなぁと想像できます。この Gmail の色がどうなっているのかを Material Design 3 を含めて解説しようと思います。 Material Design の ColorMaterial

Material 3 - Colorを要約する

少し前にMaterial 3 (M3)のガイドラインが公開された。「え、今までが"2"だったの？」という疑問はさておき、Google I/Oで話題になったMaterial Youの仕組みがわかってきたのは楽しい。 Material 3でも特に2からの変更点が大きいColorについて、社内で一通り勉強会ができたので、備忘録としてその要約を残す。別に公式ガイドライン読めば同じことは書いてあるのだけど、結構一つのことがいろんなページに跨ってたり難しかったので、今後誰かに共

マテリアルデザインとの奮闘

近年流行しているマテリアルデザインはオブジェクトに一定のテクスチャを残しつつフラットに抑え込むデザインジャンルというかまぁそんなものだ。とくにWeb業界では急速に広まりつつある。一方でGoogleが提唱するアフォーダンスに基づき主要ボタンにのみ効果をつけるフラットデザイン2.0との対立の構図も見える。まぁ私はWebデザインをしないのでよく知りませんが。マテリアルデザイン試作品だが、雲と雨粒の絶妙な立体感を表している。これそのものが操作には影響しないためフラットデザイン

デザイン初心者でもわかる！Material Designのまとめ✨

ももやんです。今回はGoogleのMaterial Design（マテリアルデザイン）について簡単にまとめます🐶 Material Designの大きなテーママテリアルデザインは、光の反射の仕方や影の出来かたなど、現実世界の法則を取り入れたガイドラインです。紙とインクをベースに考えられており、UI上には階層が存在しています。 🌟SurfacesUIを構成しているコンポーネントは「Surfaces」と呼ばれています。Surfacesは紙をベースに考えられています。そのため、

マテリアルデザインって何？？？（Xdデータダウンロード方法）

よく耳にする「マテリアルデザイン」何となく聞いたことあるし、なんとなく知ってる。でも・どういう時に必要なの？・どうやって使うのか？が、いまいちわかってない…。以前調べたけど、なんか英語だらけでよくわからなかった記憶が… そんな状態だった私が、「マテリアルデザイン」を案件の中で実際に使いほんの少し知見ができたので備忘録としてまとめました。 ———————————————————————————————— まず、「マテリアルデザイン」とは… ——————

マテリアルデザインサウンドの章を読む 5/5 Sound resources

サウンドリソースオーディオファイルは、ご自身の製品でご利用いただけます。様々なシナリオのためのサウンドを含む、ご自身の製品で使用するためのオーディオファイルのセットをダウンロードしてください。・アラートと通知・ヒーローサウンド・プライマリーシステムサウンド・セカンダリーシステムサウンド ※引用元サイトから音源をDLできます。今までガイドラインに出てきていた区分で、各6~15種類程度の音源が入手できます。ページに埋め込まれていた音源も含まれています。 CC-B

マテリアルデザインサウンドの章を読む 1/5 About sound

これは個人的な夏休みの課題として。これはUIにおける音についての学習として。 Googleのマテリアルデザインの中のサウンドの章を読みます。ついでに日本語化していきます。引用元：Material Design - Sound https://material.io/design/sound/about-sound.html#types-of-sound 訳文が変だな？と思った際には上記の原文をご確認ください。私は機械翻訳やWeb上の英和辞典を頼りに生きています。動

マテリアルデザインサウンドの章を読む 4/5 Sound choreography

こちらのつづきです。またまた、個人的な学習としてガイドラインを日本語化していきます。引用元：Material Design - Sound https://material.io/design/sound/sound-choreography.html 訳文が変だな？と思った際には上記の原文をご確認ください。私は機械翻訳やWeb上の英和辞典を頼りに生きています。音楽用語については、自分の経験や偏ったDTM用語辞典、Sound Questなどを参照しています。音響用語

マテリアルデザインサウンドの章を読む 3/5 Sound attributes

こちらのつづきです。相変わらず、個人的な学習としてガイドラインを日本語化していきます。引用元：Material Design - Sound https://material.io/design/sound/sound-attributes.html 訳文が変だな？と思った際には上記の原文をご確認ください。私は機械翻訳やWeb上の英和辞典を頼りに生きています。動画や画像は、全てこちらからの引用です。なお、肝心の音が引用できていません。飽きずにもささやかな試みとして、

マテリアルデザインサウンドの章を読む 2/5 Applying sound to UI

こちらのつづきです。引き続き、音について個人的な学習としてガイドラインを日本語化していきます。引用元：Material Design - Sound https://material.io/design/sound/applying-sound-to-ui.html#principles 訳文が変だな？と思った際には上記の原文をご確認ください。私は機械翻訳やWeb上の英和辞典を頼りに生きています。動画や画像は、全てこちらからの引用です。なお、肝心の音が引用できていま

UIデザイン初学者の頃の自分に捧げたい、「勉強するならまずこれを読もう！」と思う読み物7選

はじめまして、ムツミ（@623px）と申します。「CAMPFIRE」という、クラウドファンディング事業の会社のデザイナーをしています。普段はグロース周りのデザイン施策を担当していて、少し前は仲間集めプラットフォーム「TOMOSHIBI」という新規事業のデザイン全般を担当していました。 --- 最近デザインを勉強している友人にむけて、勉強におすすめの記事や本をまとめる機会があったのですが、UIデザインをはじめたの頃の自分に読んで欲しい…と思うものばかりでした。当時のわたしは

【解説してみた】マテリアルデザインガイドラインのテキストについて-Text legibility .ver-

こんにちは！セブンデックスのsakuです。はじめてUIデザインに出会った時、UIデザインの第一歩としてHIG(Human Interface Guidelines)とmaterial design guidelinesを読むように勧められたのですが、実務経験なかった当初の私は読んでも内容が頭に入ってきませんでした🤯 特に翻訳された文章は読解しづらい部分が多く、どなたか解説してくれたらとても助かるのになぁと思っていました。（英語が読めたらそれが一番いいのですが、難易度が

「マテリアルデザイン」って何だろう

相変わらずデザインについて勉強中です。今回はグーグルが提唱しているデザインガイドライン「マテリアルデザイン」についてまとめてみました。マテリアルデザインとは？そもそも、「マテリアルデザイン」って何なんでしょうか？記事冒頭でも触れましたが、マテリアルデザインとは２０１４年６月にグーグルから発表されたデザインガイドラインとのこと。（デザインガイドライン＝デザインを進める際の指針）「マテリアル＝物質的な、具体的な」という言葉通り、UI上で「押せる・クリックできる部分

#MaterialDesign 記事まとめ

フォローしませんか？

記事一覧