Web担メモ
ログイン メモする
Web担メモ
  • HOME

Web担当者が、日々の業務の中で役立ったことをメモしています。


マテリアルデザインのボタン

U3
2020/4/20
2024/11/7

編集にはカテゴリー認証が必要です ▼受付終了にする

マテリアルデザインはGoogleにより明確なガイドラインが発表されています。「ボタンの位置や形」や「影のつけ方」までルールが決まっています。


https://saruwakakun.com/html-css/material/vs-flat


参考URL https://material.io/design

コメント

コメントはまだありません。

関連する投稿

Font Awsomeで別窓で開くアイコンを使う
リンク先を別窓で開く場合に、自動で別窓アイコンがつくようにする参照元https://applired.net/external-link-icon//* 外部リンクのアイコン表示 */ #main a[target="_blank"]:after{ font-family: "Font Awesome 5 Free"; content: "\f360"; margin: 0 4px; font-weight: 600; font-size: 1.1em; }

デザイン

  • 0
  • 334
  • 0
U3
AdobeXD無料のスタータープラン

デザイン

  • 0
  • 165
  • 0
U3
Google マテリアルのアイコンと画面を Adobe XD に読み込む方法
Adobe XD用の1000の無料素材アイコンhttps://www.xdguru.com/adobe-xd-icons-material/Icons - Material Designhttps://material.io/resources/icons/?style=baselineGoogleのマテリアルアイコンは軽量・デザイン・アクセシビリティOKの優れモノサイズを変えたりdirections_run、色を付けたりdirections_runも自由文字読み上げソフトを使うと、アイコンの部分は上記例のかっこで囲んだ文字が読み上げられるhttps://webtan.impress.co.jp/e/2016/06/28/23209Google マテリアルのアイコンと画面を Adobe XD に読み込む方法Adobe Fonts の Roboto ページを参照します。右上隅にある「すべてのフォントをアクティベート」スライダーを使用し、フォントファミリーを有効にします。プリセットを選択してドキュメントを作成したら、ファイル/UI キットを取得/Google マテリアルメニュー項目を選択します。

デザイン

  • 0
  • 1875
  • 0
U3
Adobe XDで作成したデータをPSD(Photoshop)データとして書き出せる「Photopea」
Photopeahttps://www.photopea.com/サイトにアクセスし変換したいXDファイルを開いて、「ファイル」から「PSDとして保存」注意・リピートグリッドを解除しておく必要がある・ロゴは文字化けした・フォントは変わる

デザイン

  • 0
  • 1058
  • 0
U3
Font Awesome 5のアイコンをIllustratorやXDで使う方法!
https://notes-de-design.com/design/font-awesome-5-illustrator/

デザイン

  • 0
  • 650
  • 1
U3
Webデザインのトレンド ダークモードの実装
ダークモード普及の理由夜間目に優しい有機ELディスプレイでは省エネになる実装@media (prefers-color-scheme: dark){ /* ここにダークモード時のコードを記述*/ /* 例 */ .dark{ background-color: #1c1a1a; color: #faf8f7;; } } これでOS側でダークモードに設定した際、記述したスタイルが適用されてダークモードに設定できます!ダークモードのときに表示したいスタイルを @media (prefers-color-scheme: dark) { と } の間に書いていきましょう。ピュアブラックとピュアホワイトは使わないことhttps://pecopla.net/web-column/darkmode-designChromeをダークモードで使うhttps://www.atmarkit.co.jp/ait/articles/1912/19/news028.html

デザイン

  • 0
  • 131
  • 0
U3
Adobe Stock :Adobeが提供するサブスクリプションの素材ストックサービス
イラストレーターやアフターエフェクツでモーショングラフィックスを作る時に便利なベクター素材もあります。アニメーション動画、PR動画などを作りたい時にもぴったりでは。

デザイン

  • 0
  • 122
  • 0
U3
ニューモーフィズム~Webデザインのトレンド
Webデザインのトレンドは、スキューモーフィズムからマテリアルデザイン、そしてニューモーフィズムへと移り変わっています。スキューモーフィズムWebサイトのUIデザインの概念。実物っぽい装飾を施したデザインのこと。リッチデザインとも呼ばれる。フラットデザインの対局にある。マテリアルデザインGoogleの提唱するマテリアルデザインは、フラットデザインのシンプルさを残しながらも、影や立体感で実物っぽさを出すことに挑戦している。ニューモーフィズム(Neumorphism)2020年のUIで新しく出てきたニューモーフィズムは、マテリアルデザインに写実性を持たせたもの。背景と部品が同じ色で作られている斬新な設計である。XDのUIキットhttps://xdfile.com/free-neomorphic-ui-kit-xd/ジェネレーターhttps://neumorphism.io/デモhttps://demo.themesberg.com/neumorphism-ui/https://demo.themewagon.com/preview/free-bootstrap-4-html5-ui-kit-website-template-neumorphism-ui

デザイン

  • 0
  • 1123
  • 0
U3
「デザイン・ルールズ」から学ぶ、情報が伝わりやすいデザインの4原則
デザインというと、センスや才能が必要だと思われがちですが、実はいくつかのルールを知るだけで、見やすいデザインを作ることができます。デザインの基本を学べる名著「デザイン・ルールズ」で紹介されている4つの原則をご紹介します。1. 近接(Proximity)関連する項目は近くに配置し、関連しない項目は離して配置することで、情報のまとまりを視覚的に表現する原則です。2. 整列(Alignment)すべての要素を何らかの線で整列させることで、デザイン全体に統一感と秩序をもたらします。これにより、視覚的なつながりが生まれ、プロフェッショナルな印象を与えます。テキストや画像など、すべての要素がどこかの基準線に揃っているか確認してみましょう。3. 反復(Repetition)デザインの視覚的要素を繰り返すことで、統一感と一貫性を生み出す原則です。例えば、同じフォント、色、アイコンのスタイルを繰り返し使うことで、ブランドイメージを強化し、ユーザーに安定感を与えます。4. コントラスト(Contrast)要素間に意図的な違いを持たせることで、視覚的な面白さを生み出し、重要な情報を際立たせる原則です。色、サイズ、フォント、太さなどを対比させることで、重要な部分にユーザーの注意を引きつけることができます。---これらの4つの原則を意識することで、誰でも見やすく、伝わりやすいデザインを作成することができます。ぜひ、今日からあなたのデザインに取り入れてみてください。

デザイン

  • 0
  • 7
  • 0
U3
SVGのpath要素
SVGを使えば表現できる図形やアニメーションの幅が広がります。今ではほとんどのブラウザがSVGをサポートしています。<マーク等、画像を使うほどでもない時に使います。SVGのpathタグを使っている例https://coubic.com/のフッターメニューの折り畳み上向き>下向き>ナビメニューナビメニュー100連発!CSSで表現できるコピペ可能なHTMLスニペットまとめhttp://photoshopvip.net/97481参考https://ferret-plus.com/7522https://liginc.co.jp/web/html-css/html/154217

デザイン

  • 0
  • 94
  • 0
U3

アクセスランキング

1

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

15

2

Excelで一つの値を一番下のセルまでコピーしたい時

13

3

自分のチャンネルのYouTube動画に広告が表示されないようにしたい

8

4

ホームページのアクセスカウンターは最近なぜ見なくなったの?

8

5

ロケットチャットの新規通知をデスクトップ表示させるには

8

6

Outlookの迷惑メールに追加と受信拒否するの違いは

7

7

Notionのユーザーとゲストの関係や無料版制限について

7

8

WBMP形式の画像ファイルとは

7

9

Criteoという広告が勝手に表示される

7

10

内向きDNSと外向きDNSとは?

7

11

Google Playストアでアプリを一時的に非公開にする方法

6

12

動画生成を自動化できるマルモキャスト

6

13

拡張子が.dat のファイルがメールに添付されて送られてきた場合の原因と対処法

6

14

Adobe:PhotoshopでAdobeCCのログイン画面でIDが入力できない

6

15

VSCodeで複数ファイルを横断して検索&置換する方法 Option+Shift+F

6

16

モニター(ディスプレイ)が突然消えたりついたりを繰り返す

6

17

Windowsエミュレーター(EdgeでF12)

6

18

アクセス解析結果に「fbclid」というパラメーターが付く原因は?

6

19

さくらサーバー:独自ドメインのSSL設定でエラーが出る場合の対処法

6

20

Webデザイナー+コーダー=Readdy

5

コメントランキング

1

AIO (AI最適化) 重点要件

1

2

AIコピペハラスメントとは?〜AIが生成した文章をそのまま送るのはやめよう

1

3

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

1

いいねランキング

1

Androidのアプリが「繰り返し停止しています」と表示される場合の対処法

2

2

Looker Studio(Googleが無料で提供するBIツール)

1

3

AIコピペハラスメントとは?〜AIが生成した文章をそのまま送るのはやめよう

1
この投稿者に問い合わせ
この投稿者に問い合わせ

当サイトでは、Cookieを使用しております。

すべての Cookie の使用に同意いただける場合は、下記の「同意します」をクリックしてください。

  • シェア
  • ログイン
  • 利用登録する
  • ログアウト
  • マイアカウント
  • メモする
  • このサイトについて
  • 問合せ
Copyright © Web担メモ
シェア
いいね! X このエントリーをはてなブックマークに追加 LINEで送る