新しくなったMaterial Designのココに注目！最近のUI要素・コンポーネントのデザインや使い方がしっかり学べる
先日開催されたGoogle I/O 2018で、Material Designは大きくアップデートされました。 ロードマップによると、今回のアップデートを皮切りに、これからも毎月リリースされ、Material Designはその表現力を高める機能を充実していくとのことです。 Material Design Material DesignはGoogleが提供するオープンソースのデザインシステムで、Webサイトやスマホアプリのデザインから実装まで幅広く利用できます。 Google I/O 2018でアナウンスされた大きなポイントは、3点。 Material Themingはテーマを使用して、開発者がプロダクト全体でユニークなスタイルを一貫して体系的に表現できるようになりました。 ワークフローを効率化する3つのツールがリリースされました。 Material Theme Editor, Mater
Material Design LiteとGithub Pagesで爆速でかっこいいWebページをつくろう！【ステップ付！】 - Qiita
Material Design LiteとGithub Pagesで爆速でかっこいいWebページをつくろう！【ステップ付！】HTMLCSSGitHubMaterialDesign 背景 Webページを新しく作成しなくてはいけなかったのですが、正直面倒だな〜と思ってました。ひとまず承認降りるためにサイトのモックというかプロトタイプを作りたかったのですがどうせ結構時間かかるし、、、と思っていました。 具体的には以下の様なことを今回は実現したかったです。 あんまり1からうんうん唸ってデザインはしたくないが、それっぽい見た目にしたい Bootstrapはもう見飽きた・・・ もちろんスマホも対応したい ひとまず確認してほしいだけなのでURLは適当でいいし、裏側は書かなくていいからさくっと確認してもらいたい Bootstrapは見慣れているけど嫌だけど、自前でCSSは(本格始動した時にしか)書きたくな
2015年に選んだAndroidアプリのUIデザインツール - ゆるりブログ
1年ぶりくらいに、Androidアプリを作ることになりました。久しぶりにデザインをすることになったので、使ったことのなかったツールをあれこれ調べながら試しています。これからAndroidアプリのデザインを始める方の参考になれば幸いです。 Sketch app Sketch - Professional Digital Design for Mac 2014年の秋ごろのAndroidアプリデザイン時にはIllustratorを使用していたのですが、今回は数日間でサクッと作るのが目的だったのでSketchを使ってみました。SketchにはデフォルトでMaterial designのテンプレートが入っていたりと、ザクザクとアプリのデザインを組んでいくのになかなか快適ですね。まだまだ不慣れでどういう機能があるか把握できてないのにもかかわらず、これといって不自由していません。 File > New
Material Designを実装するのに役に立ったリンクを紹介します - Androidはワンツーパンチ 三歩進んで二歩下がる
インコ発信確認をアップデートしました。 インコ発信確認 - Google Play の Android アプリ リリースしてから放置してしまっていたのですが、ユーザー様からLolipopスタイルにしてほしいとご意見をいただき💖マテリアルデザイン風にしてみました。 作成にあたって参考にしたサイトをご紹介します。 まずは公式サイト Introduction - Material design - Google design guidelines サイトの左上のメニューボタンを押すと色々出てきます。アニメーションなんかは実例の動画が掲載されているのでどのようなものかわかりやすいです。 かなりの分量なので全部読んではいないです。 一番よく見ていたのはここのページです。マージンサイズやリストの高さなどが書いてあります。 Metrics & keylines - Layout - Google de
Bootstrapよりキレイ！Googleのマテリアルデザインキット - ku-sukeのブログ
Bootstrapの見慣れた感というか、モック感から脱却しようとFoundationとかに手を出しかけてたのですが、Googleがだしてきたマテリアルデザインキットがすごく良かったので紹介します。 たとえば管理画面風のデザインはこれ ほかにもBootstrap風の上部メニューのデザイン（Android）もあったり コンポーネントと呼ばれる部品も充実しています。これ見るだけで色々できそうな気がしますね！ Blog風など幾つか提供されています。いまとあるサイドプロジェクトで簡易的な管理画面をつくろうとしてたのですが、早速活用していい感じに仕上げることが出来ました。 ダウンロードすると全テンプレートが含まれているので、コピペで組み合わせるだけでも結構いい感じに出来ます。Bootstrapに飽きてきたら、ぜひ使ってみてください。 www.getmdl.io
Google、Material DesignのWEBページテンプレート「Material Design Lite」をリリース | juggly.cn
2023年12月 (1) 2023年11月 (116) 2023年10月 (79) 2023年9月 (28) 2023年8月 (7) 2023年7月 (6) 2023年6月 (101) 2023年5月 (229) 2023年4月 (201) 2023年3月 (206) 2023年2月 (147) 2023年1月 (193) 2022年12月 (146) 2022年11月 (54) 2022年10月 (1) 2022年9月 (1) 2022年8月 (1) 2022年7月 (3) 2022年6月 (1) 2021年9月 (1) 2021年8月 (8) 2021年6月 (3) 2021年4月 (4) 2021年3月 (6) 2021年2月 (1) 2021年1月 (3) 2020年12月 (2) 2020年11月 (2) 2020年10月 (5) 2020年9月 (12) 2020年8月 (40
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
Material Design を全力で取り込んだはてなブックマークリーダーを作ってみた - Qiita
はじめに はてなブックマークのカテゴリをスワイプでシュッシュッと切り替えられるアプリがあったら使いやすいかなぁ、ということで作ってみました。 Material Design のエッセンスをできる限り取り入れましたので、注意した点などを紹介します。現行のアプリに導入できる内容もあると思いますので、参考になれば幸いです。 （追記）「階層」の概念、実装コストの高いものについては、実装の対象外としております。 （再追記）タブバー、トップバーの下にスクロールに合わせてシャドーを表示する変更をしました。 アプリはこんな感じです。ご指摘やご要望などありましたらコメントいただけると嬉しいです。 https://play.google.com/store/apps/details?id=com.appspot.parisienneapps.hatebureader レイアウト、コンポーネント アップバー レ
Googleの提唱する「マテリアルデザイン」の事例を集めまくって無料で素材のダウンロードまで可能な「MaterialUp」
Googleが開発者向けイベントGoogle I/O 2014で発表した新しいUX体系が「マテリアルデザイン」です。アニメーションやカードデザインなどを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義されていますが、このマテリアルデザインの優れたウェブサイトやモックアップを毎日最大12個展示する「MaterialUp」は、「優れたマテリアルデザインとは何か」が一目で分かる上に素材のダウンロードまでできる便利なウェブサイトになっています。 The Best Of Material Design, daily – MaterialUp http://www.materialup.com/ マテリアルデザインとは何か？ということは、以下の記事から読むことが可能です。 アニメーションを使ったGoogleの新UXデザイン「Material Design」とは？ - GIGAZINE
AppCompat v21 — Material Design for Pre-Lollipop Devices! の日本語訳 - Qiita
AppCompat v21 — Material Design for Pre-Lollipop Devices! の日本語訳Androidandroid開発MaterialDesignLollipopappcompat 2014/10/22 に公開された AppCompat v21 — Material Design for Pre-Lollipop Devices! | Android Developers Blog を翻訳(多少の意訳を含む)してみました。 ちなみに原文の草稿は 10/17 に https://chris.banes.me/2014/10/17/appcompat-v21/ にて公開されており、そのコメント欄でも著者との活発な議論(Q&A)が繰り広げられていたので貴重な情報源です。 あと、この記事で話題にしている appcompat-v7/21 を組み込んだTwitt
Material Design Everywhere: Using AppCompat 21
We were all hoping that the new support APIs included Material Design, the new theme adopted since Android 5.0 Lollipop. And it luckily happened: this new theme is included in AppCompat 21. So be aware that if you are using it for previous projects, the transition won’t be straightforward. If you want to know more about this topic, I have another article from a talk and a more complex example in a
Material Design on Android Checklist (Japanese version) マテリアルデザイン対応のためのチェックリスト - 安藤日記
■マテリアルデザイン対応のためのチェックリスト 原文 (Material Design on Android Checklist) By Roman Nurik, Design Advocate ( http://android-developers.blogspot.jp/2014/10/material-design-on-android-checklist.html ) Android 5.0 は、プラットフォームやシステムアプリ用の新しいデザイン・システムであるマテリアルデザインを導入しています。ユーザーの皆様はもうすぐ Android 5.0 の入手が可能になりますが、もう既に彼らは Google Play Newsstand や Inbox by Gmail、Tumblr などのアプリでマテリアルデザインを垣間見ています。開発者の方々は下位互換性を保つための AppCompat
Material Designの目指すところとAndroid側の変更点 - クックパッド開発者ブログ
モバイルファースト室の @rejasupotaro です。 今年のGoogle I/OではAndroid One、Android L、Material Design、Android Ware、Android Auto、Android TV、Google Cloud Platform、Google Fitなどの発表がありました。弊社からは私と @sys1yagi と @__gfx__ が参加したので、何回かに分けてGoogle I/Oの発表の内容を紹介します。 今回のテーマはMaterial Designです。内容は公式ドキュメントやセッション動画の要約や参考リンクからの引用を含みますが、筆者の考察や主観も含まれます。 Material Designとは Material Designとは、Googleが発表したビジュアル、モーション、インタラクションのプラットフォームやデバイス間の包括的な
Android L Developer Previewで追加されたripple effectを使った独自ボタンを作る - Qiita
追記(2014/10/23) Android 5.0 SDKがリリースされたので、別観点からRippleエフェクトを解説しました。以下の記事も併せてどうぞ。 Android 5.0のRippleDrawable概論：既存アプリのRipple対応まで - Qiita tl; dr Githubにコードを公開しました！うまくいかない方はリポジトリをクローンして、そのまま実行してちょっとずつ試してみて下さい。 keima/Qiita-Material-Ripple-Example はじめに Android L Developer Preview(以下、Android L)では、「Material Design」というUX体系が発表されました。 Google Design Buttons - Components - Google design guidelines 非常に多岐にわたり記載されてあ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ログイン - はてな
マテリアルデザイン参考
Using Android L Material Design on KitKat
🎨 Material Design Colors, Color Palette | Material UI
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Material Design