開発者のための15の無料マテリアルデザインフレームワーク2021
公開: 2020-07-31Googleのマテリアルデザインは、多くのデザイナーが当初予測したものをはるかに超えており、現在、モバイルWebサイト、Androidアプリケーション、およびデスクトップソフトウェアの開発に一般的に使用されている設計標準となっています。 Googleは、ネイティブマテリアルデザインアプリケーションを独自のウェブサイトビルダーに実装することさえしました。 つい最近はかなり醜くて鈍く見えましたが、今では信じられないほど美しいウェブサイトを作成することができます。
誰かがそれが正しいことだと言っているので、盲目的にガイドラインに従うべきではありません。 デザイナーとしてのあなた自身の判断は、目立つリアルでユニークなプロジェクトを作るためのあなたの最高の資産です。 マテリアルデザインから、すでにイデオロギーを補完すると思われるものを取り出し、そこからビルドアップを作成します。 あなたはあなた自身の個人的な選択を使ってデザイン体験をさらに完璧にすることができます。 Googleは確かに、世界クラスのユーザーエクスペリエンスとユーザーインターフェースの要素について話し合い、調査するためのコツを持っていますが、それについて考えると、プロジェクトはユニークであり、視聴者の人口統計とタイプはユニークであり、場合によってはこれらの手順に従う必要があります。構築しているビジネスまたはプロジェクトの最高の価値を引き出すデザインを作成します。
これから学習するフレームワークは、マテリアルデザインを試すための完璧なソリューションです。 おそらく、週末にハックできるサイドプロジェクトを作成するのが最善の方法です。こうすることで、メインワークフローの邪魔にならず、そこに何らかのつながりがあると感じた場合は、その方法のロードマップの作成を開始します。将来的には、アプリやウェブサイトにマテリアルデザインを実装できます。 このラウンドアップの重要で有用なフレームワークを見逃した場合は、コメントで言及してください。それを処理します。
マテリアライズ
マテリアライズは、マテリアルデザイン仕様に基づく本格的なフロントエンドWeb開発フレームワークであり、ラピッドプロトタイピングの最新Webサイトにスピーディーで中央に配置され、ナビゲートしやすいコアを提供する、主要なマテリアルデザインフレームワークの1つです。 このフレームワークは、マテリアルデザインが提供するものを取り入れ、それを1つのフレームワークにきちんとまとめて、すべての要素にすばやく簡単にアクセスできるようにします。 フィードバックベースのコンポーネントは、ユーザーが個々の設計要素の意味をよりよく理解できるため、ユーザーエクスペリエンスを大幅に向上させます。
これはフレームワークであるため、グリッドなどのCSS機能が組み込まれていることが期待されます。この場合、マテリアライズは色、グリッド、ヘルパー、メディア管理、sassファイル、テーブル管理、タイポグラフィの最適化を提供します。要素シャドウの最適化により、構築したいもののスケルトンをすばやく作成し、最適化されたMDコンポーネントを使用してデザインに命を吹き込むことができます。
マテリアルスウィフト
あなたはアクティブなSwift開発者ですが、Swiftアプリにマテリアルデザインを実装する方法がわかりませんか? CosmicMindの資料は、これらすべてを簡単に処理します。 このSwiftMaterialフレームワーク/ライブラリを使用すると、MDコンポーネントを利用して完全な構成でアクセスでき、複雑なモバイルアプリケーションインターフェイスで通常必要となるグリッドレイアウトが提供され、独自のUIを作成するために使用できる標準のレイヤーとビューを取得できます。コンポーネント。 その他の機能には、ナビゲーション、マテリアルデザインアイコン、ボタン、カード、スイッチ、およびアニメーションナビゲーションメニューを作成するためのメニューシステムを制御する機能が含まれます。 Swift Materialは、従来のモバイルアプリフレームワークとは別に、実際にはアニメーションフレームワークと呼ばれ、開発者がスムーズなアニメーションに依存するレイアウトを構築してユーザーエクスペリエンスを向上させるという素晴らしい役割を果たします。
マテリアルフレームワーク
マテリアルフレームワークを使用すると、マテリアルデザインを既存のデザインに簡単に組み込むことができます。 これは、純粋なCSSに基づく完全にレスポンシブなフレームワークです。 本当に必要なのは、CSSスタイルシートファイルをメインのWebサイトスタイリングフォルダーに添付することだけです。これで準備が整います。 このフレームワークでは、特定のCSSクラスを介して適用できる暗い配色と明るい配色を選択できます。また、JavaScriptを使用して使用するテーマを設定することもできます。
既存のフォームに波紋を追加して、より意味のあるユーザーエクスペリエンスを作成するなど、さまざまなアニメーション効果を使用できます。 活版印刷のレイアウトは自分の好みに合わせてカスタマイズでき、他のデザイン要素に最適になるようにコンテンツの外観を調整できます。 ボタン、入力、ツールバー、アイコン、リスト、メニュー、カードデザイン、およびトグルなどのデザイン仕様を使用するように、既存のスタイルを変更できます。 起動して実行するのは難しくありません。ユーザーがマテリアルデザインを高く評価しているかどうかをテストするための良い方法になる可能性があります。
エッセンス
Essenceは、マテリアルデザインとReact.jsの2つを組み合わせています。最適な設計仕様で高速なWebパフォーマンスを求めている場合、Essenceがすべての開発者に提供しているものと一致させるのは困難です。 Essenceを選択した場合、マテリアルデザインが提供するすべてのUIコンポーネントはReact.jsを介して再構築されます。 最終的な結果は、ユニークなユーザーエクスペリエンスを生み出す素晴らしいユーザーインターフェイス要素の選択です。 EssenceはNPMですぐに利用できるため、簡単なインストールコマンドをインストールして実行できます。 コンポーネントは個別にインストールして使用する必要がありますが、すべてが同じフォルダーにあります。
Onsen UI
Onsen UIは、HTML5を使用してモバイルアプリを構築するための最高のハイブリッドフレームワークの1つであるという評判が何マイルもあります。 このオープンソースプラットフォームは完全に無料であり、常にそうでした。優れたデザインの最新の理解は、OnsenUI開発者が比類のないユーザーエクスペリエンスを構築することになるユーザーインターフェイス要素を作成するのに役立ちました。 不可知論的なフレームワークとして、Onsenを文字通り他のフレームワークと一緒に使用でき、コードの衝突や問題について心配する必要はありません。 これは、新しいOnsen UI V2でも起こっていることです。これらは、マテリアルデザイン、Angular 2、Reactの各コンポーネントが統合されており、エクスペリエンスをさらに充実させます。 現時点ではまだリリース候補ですが、すでに数千人が使用しています。 モバイル製品を発売したり、モバイルソフトウェア開発に取り掛かったりするつもりなら、Onsen UIの使い方を学ぶことで、履歴書にさらに力を加えることができます。
マテリアルCSS
マテリアルCSSは、クラスを使用する代わりに、スタイルを定義するために属性を使用する軽量の代替手段です。 これにより、開発ワークフローが簡単になり、確かにはるかに簡単になります。 最小限の性質のため、文字通り、コンポーネント自体で遊ぶことになります。これらには、色、タイポグラフィ、影、波紋、アイコン、入力、フォーム、ボタン、メディア、カード、パネル、ツールバー、リスト、ページ、とヘルパー。 Material CSSは、ドキュメント内の特定の各コンポーネントの使用方法について詳しく説明しています。
マテリアルデザインライト
Material Design Liteは、材料仕様を使用して設計を最適化するためのさらに別の軽量ソリューションです。 静的コンテンツに依存するWebサイトで簡単に機能しますが、動的サイトでも問題なく実装できます。 これは独立したCSSライブラリであり、機能するためにいかなる種類の外部リソースも必要としません。 マルチデバイス最適化が組み込まれているため、古いバージョンのブラウザがサイトにアクセスしようとすると、当然ダウングレードされます。 ブログテンプレートのようなテンプレートから選択してブログを開始するか、Android公式ウェブサイトが使用しているテーマのライトバージョンを使用できます。また、ウェブサイトの背後に実装するダッシュボードのテンプレート、最高の作品を表示する最新のポートフォリオもあります。コンテンツページ用のテキスト最適化テンプレート。 コンポーネントやスタイルのような他のすべてのものは、マテリアルデザインを使用するフレームワークにすでに期待しているものです。

水面
多くの開発者が自分でフレームワークを作成する能力を発揮しているようです。Surfaceはさらに別の軽量(この場合は非常に軽量)なフレームワークであり、縮小すると約6kbのサイズになります。 また、純粋なCSSに基づいているため、JavaScriptを使用する必要はまったくありません。 まず、Surfaceのドキュメントにアクセスし、Surfaceグリッドがどのように機能するかを学習します。これにより、ボード上のすべてのコンポーネントを簡単に入手できます。 アニメーション、アラート、タイル、折りたたみ可能な要素、フッター、モーダル、メディア、ユーティリティ、ツールチップなどのコンポーネント。 開発者はこれをすべてきちんと整理し、100から1に数えるよりもセットアップが簡単です。
マテリアル-UI
Material-UIは、MaterialDesign仕様からすでにカスタマイズされているReact.jsコンポーネントの選択肢を提供します。 Material-UIとそれを使用するというアイデアについて最も重要なことが1つあります。 まず、React.jsと、それがWebやモバイルとどのように相互作用するかについてもう少し学ぶ必要があります。 コンポーネントはReactに基づいているため、Web開発でReactがどのように見られ、Reactがその中で果たす役割の種類を理解するのが賢明です。 Material-UIチームは親切にも、暗い色と明るい色のテンプレートの選択肢を提供してくれました。どちらも、さまざまなコンポーネントや要素がグリッドにどのように収まるかの例を示しています。
これまでに見られなかったコンポーネントには、アプリケーションバー、フォームのオートコンプリート、アバター、バッジ、チップ、日付ピッカー、ダイアログボックス、仕切り、メニュードロワー、グリッドリスト、テキストフィールド、タイムピッカー、さまざまなツールバーなどがあります。 これらは、このフレームワークですぐに利用できるコンポーネントのほんの一部です。
MUI
MUIは、Googleのマテリアルデザインでデザインを盛り上げる、リッチで軽量なCSSフレームワークです。 ブログ、ランディングページ、スライダーメニュー、HTMLニュースレターのサブスクリプションボックスなど、さまざまな種類のデモレイアウトをユーザーに提供します。 これらのデモだけから、開発者はマテリアルデザインがいかに効率的であり、それを実装するのがいかに簡単であるかを学ぶことができます。 MUIはReact.jsおよびAngular.jsフレームワークとも連携するため、手間をかけずにアプリを素材にプラグインできます。 さまざまな個別のWebコンポーネントもあり、すべてすぐに使用できます。
角度のある素材
Angular Materialは、Angular2プロジェクトのMaterialUIの公式リリースです。 徹底的で簡潔なドキュメントページがあります。 マテリアルのユーザーインターフェイスを使用すると、アプリがどれほど美しく見えるかを示すことができます。 すべてのコンポーネントには、詳細な例と追加オプションが用意されています。 これにより、このフレームワークが提供するものを最大限に活用できます。 APIドキュメントは、資料を次のレベルに引き上げたい経験豊富な開発者向けに提供されています。
ブートストラップのマテリアルデザイン
Bootstrapは、間違いなく、世界中の多くのフロントエンド開発者に人気があります。 Bootstrapは、今日、何百万ものWebサイトに力を与えており、さらに何百万ものWebサイトがまだ登場していません。 Bootstrapのマテリアルデザインは、マテリアルデザインを使用して壮大なデザインエクスペリエンスを作成する効率的なBootstrapテーマです。 既存の最もお気に入りのBootstrap要素をすべて選択できます。 また、マテリアルデザインのUIで最適化することもできますが、それはどれほど素晴らしいことでしょうか。 これまでNPMを使用したことがない人のためにそれを実行するには、少し手を加える必要があるかもしれません。 ドキュメントは、起動プロセスをかなりよく説明しているようです。
LumX
LumXは、AngularJSとGoogleマテリアルデザインの仕様に基づく最初のレスポンシブフロントエンドフレームワークです。 これは、Sassと一連のAngularJSコンポーネントで構築された完全なCSSフレームワークを提供します。 LumXを使用するには、Bowerを使用してライブラリをインストールする方法を知っている必要があります。 Bowerに慣れていない場合は、他の方法として、すべての依存関係を個別にダウンロードすることもできます。 それらには、Angular、jQuery、Velocity、Moment、Bourbon、およびMaterialIconsが含まれます。 LumXは、Flexboxプロパティを使用して標準化された応答性の高いグリッドシステムを作成するために、Flexboxも採用しています。 LumXコンポーネントは、従来のWebサイトレイアウトデザインのあらゆる領域と一部をカバーします。
イオン性材料
Ionicは、HTML5モバイルアプリケーションを構築するための究極のハイブリッドフレームワークです。 そして今、マテリアルデザインを取り入れることで、その驚くべきパワーをアプリにもたらすことができます。 Ionicは、アクティビティフィードやカテゴリなど、アプリ用にすでに構築されたレイアウトを提供します。 また、機能リスト、ギャラリー、一般リスト、ログインページ、およびプロファイルページにも役立ちます。 一般的なアプリインターフェースのデモをすばやくブートストラップし、その上にソフトウェアを構築できます。 IonicMaterialはシームレスにテーマを設定できます。 Ionic Materialは主に動作ライブラリであり、Ionicの色の命名規則と要素クラスを使用します。 仕様のピクセルに至るまで詳細に説明されているIonicMaterialは、モーション、インク、奥行きに関するGoogleのガイドラインに従うことを目的としています。 新しいコンポーネントとレイアウトがライブラリに追加されると、マテリアルデザインの仕様に品質に注意を払うことができます。
フォノン
Phonon Frameworkは、ハイブリッドフレームワークテクノロジーを使用してHTML5モバイルアプリを構築するための簡潔なソリューションを提供します。 Phonoの長所は、アプリを目的の場所にすばやくスケーリングするための優れた直感です。 また、その場でインターフェイスを作成するためのクイックツールを提供するユーザーインターフェイスライブラリでもあります。 フォノンは、完全に縮小および最適化すると、サイズが約24kbになります。 これが、モバイル開発者がPhononを使用する主な理由の1つです。 これは、IonicやOnsenなどのフレームワークで見られるものをはるかに下回っています。