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

コメント

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

関連する投稿

自動で背景を切り抜いてくれる、無料のサービス「切り抜きAC」
AIが自動で画像の背景を切り抜いてくれるサービスが出ています。切り抜きAChttps://clipping-ac.comフリー素材を配布しているACワークスさんの提供サービスです。実際に、このツールを使って切り抜いた使用前、試用後の写真を下に貼っておきます。調整なしでもこんなにきれいに切り抜けました。あとから微調整もできるようです。使い方https://blog.acworks.co.jp/2021/05/24/kirinukihowto/簡単Photoshopでもかなり簡単にきれいな切り抜きができるようになりましたが、そもそもPhotoshopを持っていない方も多いと思います。今までPhotoshopを起動して切り抜いていた手間も省けます。デザイナーでなくても、これで簡単に画像の切り抜きができるようになりました。これからは専門スキルよりも、「やりたいことがある人」だけが仕事をするようになるのでしょうね（弁護士ですらAI化されるという話もあるくらいです）。こういった便利ツールを使って、どんどん効率化していきましょう。

デザイン

  • 0
  • 201
  • 0
U3
マテリアルデザインにおけるカード、チップス、タブの使い方
カードカードは、より複雑で詳細な情報への エントリーポイントとして用いられることが多い。カードは 異なるタイプのオブジェクトから構成されるコンテンツを表示するのに便利な手段である。また、似たようなオブジェクトでも、 サイズやアクションが多様なものを表示するのにも適している。サイズが同じでアクションもなく、一様なコンテンツは、単純なリストで表示すべき。コンテンツ内のテキストにリンクを貼るのはやめるべき。https://material.io/components/cardsこれで完璧！マテリアルデザインの「カード」の使い方リンクボタンをつけたいときはシンプルでフラットなものにします。色を変えるなどしてボタンであることが一目で分かるようにします。重要な情報を上に文字はサイズを変えて強調https://saruwakakun.com/html-css/material/cardsカード内でスクロールできるようにしてはいけないhttps://saruwakakun.com/html-css/material/failure#section2チップスhttps://material.io/components/chips#typesタブそれぞれのタブは相互に重複してはいけない。タブのラベルは意味のある分類を表し、論理的な構成にする。タブのラベルは省略してはいけない。(ex "今週のおすす...")各タブの幅は均等にする。タブのラベルは折り返してはいけない。タブのラベルは文字でもアイコンでもよいが、混在してはいけない。https://material.io/components/tabs

デザイン

  • 0
  • 631
  • 0
U3
PDFのテキストをコピーペーストすると、文字化けする【解決】
pdfを開いて「ファイル」→「書き出し形式」→「スプレッドシート」→「MicrosoftExelブック」で保存。

デザイン

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

デザイン

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

デザイン

  • 0
  • 13
  • 0
U3
Googleアナリティクスで外部リンクのクリック数を計測する方法！
https://analyze.siraberu.info/post-669/

デザイン

  • 0
  • 112
  • 0
U3
Adobe XDの無料素材
Adobe XDの無料のUIキット、アイコンセット、プラグイン、アプリ連携などを活用して、UI/UXデザインを始めてみましょう。https://www.adobe.com/jp/products/xd/resources.htmlタブが分かれています。

デザイン

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

デザイン

  • 0
  • 131
  • 0
U3
デザインの余白：上下に余白がある場合は下の余白を少し広く
「視覚的な安定感」を出すために、下側の余白（ボトムマージン）をわずかに広く取る手法が非常によく使われます。1. 理由：人間の視覚特性（錯視）人間は、幾何学的に真っ中心にあるものを、「少し下に沈んでいる」と感じる傾向があります。視覚的中心: 数学的な中心よりも、わずかに上が心地よい中心（視覚的中心）と感じられます。安定感: 下の余白を広くすることで、重心が下がり、デザインが「どっしり」と安定して見えます。逆に下が狭いと、要素が下に落ちそうな、窮屈で不安定な印象を与えてしまいます。2. 具体的な活用シーンシーン余白の調整方法効果ポストカード・ポスター下の余白を一番広くする（上＜左右＜下）額装された絵画のような高級感と安定感が出る。ボタン内の文字下を数ピクセルだけ広くする（または上を詰める）アルファベットの小文字などの重心を考慮し、中央に見えるようにする。Webサイトのセクション基本は上下均等だが、フッター付近は広く取るコンテンツの終わりを明確にし、安心感を与える。名刺のデザイン下側に名前や連絡先を置く際、底辺に余裕を持たせる手で持った時の隠れを考慮しつつ、視覚的なバランスを整える。3. 「均等」の方が良い場合もちろん、すべてにおいて下を大きくすれば良いわけではありません。以下のような場合は上下均等が好まれます。グリッドシステムを重視するWebデザイン: 規則正しいリズムで作る場合、上下のパディング（内側の余白）を揃えたほうがコーディングも美しく、モダンでフラットな印象になります。情報密度が高いアプリのUI: 画面をスクロールして次々に情報が出てくる場合、余白に差がありすぎるとリズムが崩れて見づらくなることがあります。まとめ：迷った時の「黄金比」もし「どれくらい広げればいいか？」と迷ったら、まずは以下の比率を試してみてください。上：下 ＝ 1：1.2 〜 1.5これだけで、プロっぽく落ち着いたレイアウトに見えるはずです。

デザイン

  • 0
  • 9
  • 0
U3
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
  • 339
  • 0
U3

アクセスランキング

1

【解決】モニターディスプレイが消える「入力信号が見つかりませんでした」

6

2

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

4

3

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

4

4

NEWマークを任意の日数だけ表示させる（JavaScript）

4

5

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

4

6

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

3

7

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

3

8

コーディングを依頼するときのXDへの指示の書き込み方サンプル

3

9

Rocket.chatのスターとピン止めの違い

3

10

TortoiseSVNのインストールと日本語化

3

11

Excel：都道府県をプルダウンで選択すると、その都道府県の市区町村だけが次のセルの選択肢として出てくる

3

12

Events Managerの予約フォームをカスタマイズしたい

3

13

Webデザイナー＋コーダー＝Readdy

2

14

rakuten handを初期化しても電話番号の情報が残っている

2

15

Macでカタカナ変換するショートカットキー

2

16

無料でフォームを作成できるツール

2

17

ロリポップの「スタンダードプラン」と「ハイスピードプラン」は何が違うの？

2

18

ワーカーへ外注する際の源泉徴収の概念（法人）

2

19

コンタクトフォーム７：テキストボックスの幅がsize:で変わらない

2

20

Windows10がサインアウトのまま終わらない

2

コメントランキング

1

AIO (AI最適化) 重点要件

1

2

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

1

3

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

1

いいねランキング

1

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

2

2

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

2

3

Looker Studio（Googleが無料で提供するBIツール）

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

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

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

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