[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法

Vue.js関連の記事

Material Design を手軽に取り入れる事ができる「Vuetify」

今回は、Vue.js を使ってWebアプリやWebサイト制作をしている時、 Material Design をスマートに取り入れることができる、
優れたUIフレームワーク「Vuetify」についての記事です。
Vuetify – A Material Design Framework for Vue.js

Material Design は、Webデザインの現場でも定着して久しい、Google謹製のデザインシステムです。
Material Design
WebアプリやWebサイトのUIデザインにうまく取り入れる事で、
画面に秩序と、調和した機能美を与えてくれます。

この「Vuetify」は、その Material Design の魅力を Vue.js 上でふんだんに発揮することのできる、
UIフレームワークの一種です。
(開発元は Vuetify 公式の Meet the team ページを参照)。

Material is the metaphor (出典: Material Design 公式)

Material Design は、
リップル(Ripple)エフェクト、
スナックバー(Snackbars)、
カード型のUI(Cards)

等々、数々の特徴的なUIコンポーネントと、
独特の比喩表現 を用いた概念
※↑上記リンクの Material is the metaphor 参照

によって構成されていますが、これらを自前で独自実装するとなると、
デザインスキルだけではなく、それなりにコーディングスキルが必要とされるのも事実です。

もし、Vue.js を使ってWebアプリやサイト制作をしているなら、一度この「Vuetify」を導入して
Material Design の魅力を手軽に体験してみる事をおすすめします。

UIデザインを始めて間もない方が、
実装を通じてスキルアップするのにもぜひおすすめです。

導入方法

Vue.js および VueCLI の導入は済んでいる前提とします。
(もしこれらが未インストールの場合は Vue.js公式のこのページ を参考にしてみてください。)

Vue.js本体および、VueCLIの導入が済んだら、
ターミナルを開いて、該当のプロジェクトディレクトリに移動($ cd [ディレクトリのpath])して、以下を実行。Vueプロジェクトを作成します。

$ vue create [プロジェクト名]

もちろん、[プロジェクト名]の部分は適宜、ご自身のプロジェクト名に置き換えてください。

その後、次を実行すると Vuetify のインストールが始まり、Vuetify を使用する準備が整います。

$ vue add vuetify

あとは、以下のように、Vuetifyの魅力的なコンポーネントの数々を、実際に体感するのみです!

リップルエフェクト付きボタン

下記のように、どのコンポーネントもとてもシンプルな記述で、
Material Design のガイドラインに沿ったデザインのUIパーツが実装できます。
例えばリップルエフェクト付きボタンを表示するなら以下。たったこれだけの記述で、エフェクト付のボタンが表示可能です。

<v-btn elevation="3" text>SAMPLE</v-btn>

デモは公式サイトの以下より。オプションも豊富です。
Button Components – Vuetify
また上記リンクページ内、中段の例の様に、
Material Design Icons
を横に並べて使用したボタンも手軽に作れます。(※このMaterial Design Iconsは、使えるアイコン総数5,500以上もあります。)

Snackbars(スナックバー)

ユーザーが何かアクションをしたあと、その結果として表示されるアレです。小さな通知枠です。
シンプルながら小気味いい動き付きで、使い勝手が良いです。
Snackbar Components – Vuetify

カード型デザイン

今や定番のUIパーツ、カード型のデザインもバリエーション豊富で、
完成度もかなり高いです。
Card Components – Vuetify

その他、必要なUIパーツがほぼ揃っています

上記公式ページの左側メニューに、その他のコンポーネント一覧がありますが、
必要なUIパーツが本当にほぼ揃っています。

Material Design のガイドラインに沿ったUIデザインを採用したい場合、ぜひおすすめなUIフレームワークです。

まとめ

冒頭にも書きましたが
Vuetify の様な優れたUIフレームワークに実際に触れてみる事で、
「UIパーツ」というものがどういう構造、挙動で構成されているか
を実装を通じて知る事ができるため、
デザイナーの方のUIデザインに対する理解度アップ、単純なデザイン能力のスキルアップにも繋がると思います。

Vue.js や Vuetify を体験することを通じて、
実装面も考慮したUIデザインができるデザイナーの方が増えれば、
UIデザイン分野全体の底上げにも繋がり、良い事だと感じています。

Vue.js と Vuetify、とてもおすすめの組み合わせです。