OnsenUI 2.0βのマテリアルデザインについて

 

OnsenUI 2.0β の インストール

 

OnsenUI 2.0β のインストールは簡単です。ただし、NodeJSのnpm、gulpJSについては、事前にセットアップしておいて下さい。セットアップ済の方は、一度アップデートを行った方がよいでしょう。

 

任意のディレクトリに移動して、以下のコマンドを叩くだけで、サンプルコードがインストールされます。

 


$ git clone http://github.com/OnsenUI/onsenui2-quickstart
$ cd onsenui2-quickstart
$ npm install  & & gulp serve

 

マテリアルデザインについて

 

Googleからデザインガイドラインが、2014年6月に公開され、今ではAndroid端末において直感的なUI/UXで統一されたデザインを見ることができます。

 

「ユーザがストレスを感じないデザイン」というコンセプトで設計されたこのマテリアルデザインは、光を意識して立体的なデザインを行う事で、実際に空間の中で操作している感覚を得られます。また、アニメーションにおいては、質量(マテリアル)を感じることができる自然な動きとなるようデザインされています。

 

さらに詳しく確認したい方は、此方を参照してみるとよいでしょう。

 

Google マテリアルデザイン ガイドライン

 

OnsenUI 2.0βのマテリアルデザイン

 

さて、先ほどのOnsenUI2.0のQuick Startを実行してみると、早速マテリアルデザインの要素を見ることができます。

 

gulp serve でブラウザが立ち上がり、サイトを確認できたところで、MATEREAL DESIGN DEMO をクリックすると、クリック時のアニメーションが実行される事でしょう。

 

 

遷移先のTODO画面では、チェックボックスのクリックなどで、同様にアニメーションされるのがわかると思います。右下の「+」Material Fabなども用意されています。

 

 

OnsenUI2.0では、ドキュメントのサンプルコードもわかりやすく、OnsenUIを利用していた方なら、迷うことなく使うことができるでしょう。

 

その他の マテリアルデザイン

 

次に、他のマテリアルデザインも見ていきましょう。代表的なものをピックアップしてみました。

 

Material Tabs

 

 

Material Text Input

 

 

Material Button

 

 

Material Switch

 

 

Material Checkbox

 

 

Material Radio Button

 

 

他のデザインは、CSS Componentsから参照できますのでご覧ください。

 

最後に

 

マテリアルデザインについては、Googleでガイドラインが公開されていますが、必ずしも簡単に導入できるものではありません。

 

OnsenUI2.0を利用する事で、新たに導入されたマテリアルデザインをベースに、Theme Rollerからカラーを変更したり、設定済のCSSを変更することで、より簡易にマテリアルデザインを利用することが可能です。

 

ますますマテリアルデザインが広がりを見せようとしています。導入に辺り検討しているプロジェクトがあるならば、この機会に、利用してみてはいかがでしょうか。

author img for asial

asial

前の記事へ

次の記事へ

一覧へ戻る
PAGE TOP