MaterialDesign をテンプレートにして作成

開始行:
*Material Design Googleが提唱する デザインシステム ~ **はじめに Material Design とは、ユーザーの操作性向上を目的としてGoo... >Google では、時代を超えて共通する優れたデザインの原則と... -公式サイト：https://material.io/ --https://material.io/design/introduction/# --https://material.io/design/foundation-overview/ --https://material.io/design/guidelines-overview/ Materialとは「物質的な」「具体的な」という意味で、現実世... -1) 現実世界の物理法則を取り込む 日常生活において馴染みのある「物体同士の重なり」や「影の... -2) 印刷物におけるデザインの発想を取り込む 文字や画像、余白の使い方などは印刷物におけるデザインの考... -3) 連続性のあるアニメーション 連続性のある動きを採用することで、ユーザーの注意を引きつ... ~ ***メリットとデメリット -メリット --ユーザーにとって直感的に分かりやすい UI/UX が実現できる --ルールの統一により、操作の学習が効率的にできる -デメリット --明確なガイドラインがあるがゆえにサイトごとの個性が無く... （これは CSS フレームワークに共通して言えることですが・・） ~ ***マテリアルデザイン vs フラットデザイン マテリアルデザインという言葉が登場した背景には、フラット... -フラットデザイン 文字通り平面的なデザインのことで、影やグラデーションによ... -マテリアルデザイン 「現実世界の物理法則」を基調としたデザインで、「紙」を触... ~ ***コンポーネント 以下に、Webサイト用コンポーネントのカタログがあります。 https://material-components.github.io/material-components... ~ ***参考サイト -サルワカ｜https://saruwakakun.com/html-css/material -SONIC Moov Lab.｜https://lab.sonicmoov.com/design/materi... ~ ~ **実装方法 ***テンプレート / FrameWork Material Design を取り入れたテンプレート、フレームワーク... -Material Design Lite：https://getmdl.io/ -Materialize：https://materializecss.com/ -MDB：https://fezvrasta.github.io/bootstrap-material-desi... -MUI：https://www.muicss.com/ -Material-UI：https://material-ui.com/ ~ ***事例：[[MDB｜Material Design for Bootstrap>https://fez... Bootstrap が提供するフレームワークを利用した事例を紹介し... -''DEMO''：https://koichi-inoue.github.io/MaterialDesign/ -''CODE''：https://github.com/koichi-inoue/MaterialDesign [[公式サイトの情報にならって>https://fezvrasta.github.io/... ~ ~ ~

終了行:
*Material Design Googleが提唱する デザインシステム ~ **はじめに Material Design とは、ユーザーの操作性向上を目的としてGoo... >Google では、時代を超えて共通する優れたデザインの原則と... -公式サイト：https://material.io/ --https://material.io/design/introduction/# --https://material.io/design/foundation-overview/ --https://material.io/design/guidelines-overview/ Materialとは「物質的な」「具体的な」という意味で、現実世... -1) 現実世界の物理法則を取り込む 日常生活において馴染みのある「物体同士の重なり」や「影の... -2) 印刷物におけるデザインの発想を取り込む 文字や画像、余白の使い方などは印刷物におけるデザインの考... -3) 連続性のあるアニメーション 連続性のある動きを採用することで、ユーザーの注意を引きつ... ~ ***メリットとデメリット -メリット --ユーザーにとって直感的に分かりやすい UI/UX が実現できる --ルールの統一により、操作の学習が効率的にできる -デメリット --明確なガイドラインがあるがゆえにサイトごとの個性が無く... （これは CSS フレームワークに共通して言えることですが・・） ~ ***マテリアルデザイン vs フラットデザイン マテリアルデザインという言葉が登場した背景には、フラット... -フラットデザイン 文字通り平面的なデザインのことで、影やグラデーションによ... -マテリアルデザイン 「現実世界の物理法則」を基調としたデザインで、「紙」を触... ~ ***コンポーネント 以下に、Webサイト用コンポーネントのカタログがあります。 https://material-components.github.io/material-components... ~ ***参考サイト -サルワカ｜https://saruwakakun.com/html-css/material -SONIC Moov Lab.｜https://lab.sonicmoov.com/design/materi... ~ ~ **実装方法 ***テンプレート / FrameWork Material Design を取り入れたテンプレート、フレームワーク... -Material Design Lite：https://getmdl.io/ -Materialize：https://materializecss.com/ -MDB：https://fezvrasta.github.io/bootstrap-material-desi... -MUI：https://www.muicss.com/ -Material-UI：https://material-ui.com/ ~ ***事例：[[MDB｜Material Design for Bootstrap>https://fez... Bootstrap が提供するフレームワークを利用した事例を紹介し... -''DEMO''：https://koichi-inoue.github.io/MaterialDesign/ -''CODE''：https://github.com/koichi-inoue/MaterialDesign [[公式サイトの情報にならって>https://fezvrasta.github.io/... ~ ~ ~

ページ名: