Vuetifyはいいぞ！マテリアルデザインを実現するためのライブラリ
Vue.jsで開発をしていますが、デザインセンスに全く自信がなかったので、Vuetifyを利用したらとても簡単にマテリアルデザインが実現できたという話。 また、Vuetifyを始めるにあたって、コンポーネントから入るより、レイアウトサンプルの利用から入るのがおすすめ、という話。
実は私は最初コンポーネントの利用から始めてみたのですが、それはそれで機能確認はできたものの、マテリアルデザインを無視したデザインになっていってしまい、あとでサンプルレイアウトを元に作り直した、という経験をしました・・・。
マテリアルデザインとは？
Googleは2014年6月にGoogle I/O conferenceにおいて、新しいUX（ユーザーエクスペリエンスデザイン）体系として、「マテリアルデザイン」を発表した。マテリアルデザインは、ユーザーが接する画面にマテリアル（物質）、メタファーの概念を用いて一貫性のある世界をつくりつつ、ユーザーの操作を補助するもの[3]。
スマートフォンやタブレットなど様々なデバイスにおいて、マテリアルデザインによる統一感のあるデザインを取り入れることにより、操作するデバイスが変わっても操作感に統一性を期待できることで、ユーザーはストレスを感じずに様々なデバイスを操作することができる。
Googleのアプリケーションを触ったことがある人だとイメージしやすいですが、Googleのアプリっぽいデザインで、触る感じなどが直感的なデザインのことです。
しかしそうはいっても、自分が触りやすいと思って触ることと、実際にその触りやすさを実現することでは全く違います。 そこにデザインセンスがない状況となると 「わかっちゃいるが、やれないなー。Googleとかデザイナーすげー」 となってしまいます。
Vuetifyとは？
VuetifyはVue.jsで使えるマテリアル・コンポーネント・フレームワークです。 Vuetifyはデザインセンスがなくても、フレームワークとして提供してくれているため、内包されたコンポーネントの中から自分が利用したいコンポーネントを探して利用することで、マテリアルデザイン＆実際のコンポーネントの動作、機能を実装することができます。
テンプレートライブラリから始めてみる
実際に始めるにあたっては公式ドキュメントにあるQuick startを読みながら進めれば大丈夫です。
むしろ個人的に躓いたのは、 使えるようにしたけど、実際どう始めたらいいの？ という点でした。 他のライブラリ系ではチュートリアルがあったりするのですが、Vuetifyではそれが見当たらず（私が見逃しているだけ？）、またQiitaなどの記事を読んでみるとコンポーネント探して入れればいいよ、とあるのですが、デザイン音痴な私からするとそもそも全体像的な部分でまずは作って、そこに必要なコンポーネントを追加したいのだけど・・・、というのが実際のところではないかと思います。
そこで公式ドキュメントなどを読んで自分なりに行き着いたのが、
Layoutsサンプルから入ってみよう
です。
Layoutsのサンプルですが、以下にあります。
ここでは9つのレイアウトサンプルが提示されており、サンプル画面で動作確認ができたり、実際のコードが確認できます。 各レイアウトはマテリアルデザインの祖であるGoogleのサービスをイメージしたデザインとなっており、使い慣れた人だと操作も悩まずにでき、イメージが付きやすいです。
この中から自分がなんとなくイメージしているものに近いものを選択したら、コードをコピペすれば即時同じレイアウトが実現します。
あとは不要と思う項目＝結構アコーディオンメニュー内は要素が多いように思いました、を削除したり書き換えたりすると、なんということでしょう、あっという間にマテリアルデザインが手元に実現します。 ※初心者などで不安な方はコメントアウトして描画してみる、というのをやってみると良いかもしれません。最終的には不要なコードは削除しないと見通しが悪くなるので、その点は注意です。
Vuetifyを初めて利用する場合、タグが分かりづらいかもしれませんが、HTMLタグと大きく変わりませんので、デザインが一旦できたら、内容を確認していくのがおすすめです。 ある程度画面要素が含まれているので、実はVuetifyの各コンポーネントが実装されています。 全体感としてデザインができたついでにコンポーネントの動作確認も可能です。 コンポーネント単独で実現イメージがつきづらいものもこうやってサンプルで動作確認ができると、「このコンポーネントはこうやって使えるのか」ということに気づきやすいと思います。
また、以下も一読しておくことをおすすめします。
Vuetifyのドキュメント内のFramework Options全般。 特に以下は概要を掴み、触る上で絶対読んでおいた方がよいです。
