マガジンのカバー画像

#MaterialDesign 記事まとめ

42
本
GoogleのMaterialデザインシステム（https://material.io ）から #MaterialDesign とか #MaterialDesignCompon …
運営しているクリエイター
Nobuya Sato

#デザイン

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

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

Nabe

Material 3 - Colorを要約する

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

Haruka

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

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

B(lack)-CAT

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

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

B(lack)-CAT

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

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

623

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

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

saku

マテリアルデザイン

こんにちは。 Webデザインする時の配色について書いていきたいと思います。 配色する際にはそれぞれの役割を考えて配色する必要があります。それぞれの色の要素はPrimary color、Secondary color、Surface color, Background color, Error colorに分けられます。 ・Primary color アプリやサイトの中で頻繁に使用する色になります。この色がWebサイトやアプリのがメイン色となります。 ・Secondar

ゆうたろう@クリエイタ…

独学でUIデザインはじめた方へ。デザインガイドラインについて語ろう！

こんにちわ！はじめまして、ゆいです。 都内でデザイナーとして働きつつ、兼業で画家になりたいです。設計したりWEBデザインしたり、社内ではグラレコ風のなにかを描いたりしています。休日は絵を描いています。 日々の思考・メモなどはツイッターにあるので良かったら見てください 休日描いた絵はこちらに載せています↓こちらもよかったら。 ガイドラインについて、話したい。今回はナレッジの整理と共有です。2018年頃に社内展開用に作成したスライドをもとに文章化してみたいと思います。ここ

ゆい

Material Theming 概要

YouTubeに挙がっている「B07【Design】Material Theming - Material Design の先へ」を見てのメモです。2018年当時の話なので、今はちょっと変わってるかもしれません。 Material Designとは 2014年のGoogle I/Oで、クロスプラットフォームに使えるUIのデザインガイドラインとして発表したもの。元々社内向けに作っていたものを一般に公開した。当時、Google以外でMaterial Designを使っているアプ

akatsuki174

ダークモードまとめてみた

ダークモード簡単そうだけど、めっちゃむずっ！ 最近は、ダークモードも当たり前な感じになってきましたね。まだ自分でデザインしたことがなかったので、いくつかのアプリを調べてみました。あと、今回はダークモードというか、「黒ベースのUIデザインってどうやるの？」みたいな視点でやったので、Netflix なども含んでます。 スクショはすべて Figma にアップしてまります。ご自由に閲覧・コメントください〜。 はじめにダークモードは iOS、Android ともにガイドラインがあ

あき - 良いもの作っ…

【翻訳してみた】Google Design - モーションデザインは難しくない

前置き 去年の暮れ頃、最初に翻訳をしようと思ったキッカケがこの記事でした。海外ではモーションデザインに関する記事がMediumに存在し、日本語記事が存在しないことにストレスを感じていました。著者のJonasさんに連絡を取り、翻訳の許可をいただいたことからこのnoteの翻訳を始めました。 引用元 : Medium - Google Design - Motion Design Doesn't Have to be Hard 著者 : Jonas Naimark Googleの

Iori Iwaki｜…

ダークモードの観察

iOSではiOS13から、AndoridではAndroid 10からダークモード（ダークテーマ）が導入されました。Go Andoさんのアンケートによると、ダークモード使用率は約７割…もはや無視できない状況です。 メジャーなアプリのダークモード対応が出揃ってきたところで、各アプリでの対応を確認してみました。複数のアプリの対応を比較することで、色々と気づくところがありました。 調査環境：iOS13　調査日：2019.11.9 - 11.12 1. ブランドカラーを使用してい

鈴木慎吾 / TSUM…

Material Design を学ぶ

Material Designは辞書のように重厚でとっつきにくいです。 自分の場合、導入してみようと試みたものの、まず何から手をつければ良いのか分かりにくかったです。 今回はそんなMaterial Designを学ぶために行ったことや、実践において個人的に特に難しかったElevationの設定方法についてご紹介します。そんな重い内容ではないので、ササッと読んでもらえると嬉しいです。 （Material Designの解説記事ではありませんのでご了承ください。） 1. き

Ryo

【翻訳してみた】マテリアルデザイン -  AfterEffects モーションステッカーシート

前置き モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をすることにしました。こちらはGoogleが発表したマテリアルデザインガイドラインからモーションステッカーシートの翻訳になります。 引用元 Google - Material Design - Motion Sticker Sheet  Motion Sticker Sheet - Material Design ※動画像データもこちらから引用させていただいております。 しっかりとした情報が欲し

Iori Iwaki｜…