Vue.jsはGoogleやAppleも導入していると言われていて、今とても人気のあるフレームワークのひとつです。
特にデザイナーよりの職種の人はReactよりも馴染みやすいので手を出してみる人も多いかと思います。
そこで初学者のデザイナーさん向けにVue.jsとセットで覚えてもらいたいのがVuefityです。
完全にデザインだけしかしない人もマテリアルデザインが絡んでくるのでこういうのがあるよ、と知っておくだけでも損はしないと思います。
デザイナーさん向けに、「Vue.js」「Vuefity」「マテリアルデザイン」の関係についてなるべく簡単に紹介してみます。
Vue.jsはデザイナーさんと相性抜群！
まず最初になぜVueはデザイナーさんと相性がいいのか。
Vue.jsはhtmlのタグを使うことができるので、Webデザイナーさんにとっては結構馴染みのある単語がよくでてきます。
例えば〇〇.vueファイルの中身はこんな感じです。
<template>
<div id="app">
<p>このtemplateタグの中にhtmlの情報を記述していきます。</p>
</div>
</template>
<script>
//このscriptの中にスクリプトの処理を記述します。
export default {
name: 'App'
};
</script>
<style>
/* stylemの中にcssを記述します。 */
#app {
width: 100%;
height: 100%;
font-size: 16px;
line-height: 1.8;
}
</style>実際にはもう少しややこしくなってきますが、htmlとcssが使えるのでとても身近に感じるのではないでしょうか。
Vue.js
Vue.jsはフレームワークのひとつでjQueryみたいなものです。
冒頭で記載した企業の他に任天堂とかも導入しているので現在主流になりつつあると言えます。
他にReactというフレームワークがありますが、こちらはエンジニアさんに好まれる傾向がありますね。
SPA（シングルページアプリケーション）を実装できる
よく使われている機能はSPA（シングルページアプリケーション）でのサイト構築にあると思います。
SPAは最初のアクセスで全てのページ情報を読み込み、表示後はページ読み込みなしで画面遷移を行うことができるので、シームレスに関連コンテンツをユーザーに届けることができます。
デメリットは最初の読み込みに時間がかかるので、ここでユーザーのストレス軽減となる対策が必要になることです。
Vuefity
VuefityはVue.jsにインストールできるライブラリで、Vueを使った制作時にマテリアルデザインに対応することができます。
デザイン・レスポンシブが予め用意されている
レスポンシブにも対応しているので開発時にも大幅に時間を短縮することができます。
いい感じのデザインがライブラリとして用意されているので、企業のブランディングには向かないけどもWebアプリやレスポンシブの土台にするにはとても重宝します。
導入方法
Vue-CLI環境であれば下記のnpmコマンドで簡単にインストールができます。
npm install @vue/cli -gで、createでプロジェクト作成後に
vue add vuetifyこれで初期画面がvuetify仕様になるはずです。
詳しくは本家サイトがとても充実しています。
特にUIコンポーネントの項目を見てもらえれば機能の充実具合を確認できるかと思います。
マテリアルデザイン
マテリアルデザインはGoogleが推奨しているデザイン設計のことで、物の上に物があると影ができるよね？みたいな現実的なデザインのことです。
ちょっと前に流行ったフラットデザインとは少し逆のテイストですね。
しかも厳密なルールが設定されていて、ガイドラインをGoogleが公式に提示しています。
Vue.jsでの実装と同時にVuefityの導入を検討すべき理由
前述の通り、Vuefityを導入することでマテリアルデザインを簡単に取り入れることが可能です。
ただ、他にも部分的な機能として、スライドやカレンダーも簡単に機能として追加することができるんです。
しかもレスポンシブなので、実装時に余計な時間がかかりません。
実装する機能に合わせて検討すればOK
例えば初学者のWebデザイナーさんが、Vueでサイト制作を行っていて、いざスライドやレスポンシブの実装となったときに調べてみると、「Vuefityを使いましょう」みたいな記事がたくさん出てきます。
で、Vuefityをインストールしてみると今まで作ってたやつに上書きされてぐちゃぐちゃになって泣きそうになる、ということもありえます。
（上記はぼくの実体験ですね。考えるよりまず行動しちゃうんですね。あはは）
なので作業開始前に、実装予定の機能がVuefityで対応できるかどうかを確認しておくことはとても大切です。
ぜひ調査の上検討してみてください。
まとめ
- Vueはデザイナーに人気のフレームワーク
- Vuefityは簡単にマテリアルデザインを導入できる
- マテリアルデザインはGoogleが推してる現実的デザイン設計
実装機能に合わせてVuefity導入を検討しましょう！