Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
デザイン・UI
タグ :
onsenui
マテリアルデザイン

onsenui2.0



OnsenUI 2.0β の インストール



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



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



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

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



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



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



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



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



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



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



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



onsenui2.0 demo



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



onsenui2.0 demo



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



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



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



Material Tabs



Material Switch



Material Text Input



Material Switch



Material Button



Material Switch



Material Switch



Material Switch



Material Checkbox



Material Switch



Material Radio Button



Material Switch



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



最後に



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



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



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