Googleのマテリアルデザインは
今までのフラットデザインはX軸とY軸だけだったものに対して、GoogleのマテリアルデザインはZ軸が追加されました。
発表当時多くのデザイナーが最初に予測したこと(そんなに期待していなかった)を超えており、
現在モバイルウェブサイト、Androidアプリケーション、デスクトップソフトウェアの開発に一般的に使用されている普遍的に使われているデザイン基準です。
今は信じられないほど美しいウェブサイトを作り出すことができます。
Googleは確かに、世界レベルのユーザーエクスペリエンスとユーザーインターフェースの要素について議論し、研究してきました、あなたのプロジェクトがユニークで、視聴者の人口統計や種類がユニークであると考えると、マテリアルデザインを用いることで構築しているビジネスまたはプロジェクトの最高の価値を引き出すデザインを作成できます。
今回はその中でもよく使われてるマテリアルデザインのCSSフレームワークをご紹介します。
Materialize
マテリアルデザインに基づく最新の応答性のあるフロントエンドフレームワーク
マテリアライズは、マテリアルデザイン仕様に基づく本格的なフロントエンドWeb開発フレームワークであり、
最新のウェブサイトの迅速なプロトタイプ作成のための迅速で中心的なナビゲートコアを提供する主要なマテリアルデザインフレームワークの1つです。
このフレームワークは、材料設計が提供しなければならないものを取り入れ、すべての要素を素早く簡単にアクセスできるように単一のフレームワークにまとめています。
フィードバックベースのコンポーネントは、ユーザーが個別の設計要素の意味をよりよく理解できるようにすることで、ユーザーエクスペリエンスを大幅に向上させます。
公式ページ
Material Swift
このSwiftマテリアルフレームワーク/ライブラリを使用すると、MDコンポーネントを利用して完全な構成アクセスを行うことができます。
複雑なモバイルアプリケーションインターフェイスで通常必要となるグリッドレイアウトが用意されています。
コンポーネント。その他の機能には、ナビゲーション、素材デザインアイコン、ボタン、カード、スイッチ、アニメーションナビゲーションメニューを構築するためのメニューシステムを制御する機能が含まれます。
マテリアルフレームワーク
Material Framework
Material Frameworkを使用すると、マテリアルデザインを既存のデザインに簡単に組み込むことができます。
これは、純粋なCSSに基づいて完全に応答するフレームワークです。本当にする必要があるのは、CSSスタイルシートファイルをメインのウェブサイトのスタイリングフォルダに貼り付けるだけで済みます。
このフレームワークでは、特定のCSSクラスを適用することができ、またはJavaScriptを使用して使用したいテーマを設定することができる、濃い色と明るい色の選択肢を提供しています。
既存のフォームにリップルを追加してより意味のあるユーザーエクスペリエンスを作成するような、さまざまなアニメーション効果を使用できます。
Essence
Essenceは、Material Design&React.jsという2つの要素を組み合わせています。
最適な設計仕様で高速なWebパフォーマンスを求めているなら、Essenceがすべての開発者に提供しているものと一致することは難しいでしょう。
あなたがEssenceを選ぶことにしたならば、材料設計が提供しなければならないすべてのUIコンポーネントがReact.jsを通じて再構築されます!
最終的な結果は、ユニークなユーザーエクスペリエンスを作り出す素晴らしいユーザーインターフェイス要素の選択です。エッセンスはNPMですぐに入手できますので、簡単なインストールコマンドをインストールして入手できます。コンポーネントは別々にインストールして利用する必要がありますが、すべてが同じフォルダの下にあります。
Onsen UI
温泉のUIは、HTML5を使用してモバイルアプリを構築するための最高のハイブリッドフレームワークの1つであることから、数多くの評判を得ています。
このオープンソースのプラットフォームは完全に無料で、提供されております。
新しいOnsen UI V2開発中とのこと、統合されたMaterial Design、Angular 2、Reactコンポーネントで、さらに良い経験をOnsen UI提供します。現時点ではまだリリース候補ですが、既に数千人が使用しています。
いかがでしたでしょうか。
是非皆様も試してみてください。
スポンサーリンク