Nuxt.jsで趣味のマスキングテープのサイトを作ってみました。

マステが好きです。

今やすっかり文房具の定番商品として大人気のマスキングテープ。

しかし、こういったマスキングテープや手帳などの文房具が好きな人には女性が多く、イベントや雑誌の特集なども女子を対象にしたものが多いです。

ただ今は女性らしい可愛らしいデザインだけでなく、男性も楽しめる遊び心をくすぐるようなものも増えてきてるんですよ！

そんなマスキングテープにはまり、あちこちで素敵なマスキングテープをお迎えしていると、気付けばストックは40巻を超えました。

そこで今回そんな趣味のサイトを作成してみることに！

今持っているマスキングテープを公開するサイトを作成しました！

サイトのデザインもマスキングテープに寄せて、ポップにしてみました。

30越えの男が作るにはちょっと可愛すぎるかと思いましたが、いかがでしょうか（笑）

一番こだわったのは、メインビジュアルの動くマスキングテープ。

単なる飾りではなく、世界観がぎゅっと詰まったマスキングテープの数々。

ぜひ楽しんでみてください！

Vue.jsのフレームワークNuxt.jsを使用しました。

ちなみに今回はVue.jsの勉強もかねてのサイト制作だったので、Vue.jsとNuxt.jsを使用しました。

Vue.jsは元々勉強していたんですが、Nuxt.jsは今回初めてだったので、このUdemyの講座で学習しました。

誰かが「Vue.jsでSPAを作るならNuxt.js使った方がいい。便利すぎてもう戻れない」ってツイートしてたんですが、使ってみて納得。

Udemyの講座で学習した範囲ですが、めちゃくちゃ楽でした。

Vue-CLIを使用して色々やっていたのが一気にショートカットされていて、スピーディに開発するなら確かに便利。

ただ、個人的な感想としては、使用するならVue.jsの基本的なお作法を覚えて、Vue-CLIを使用してからの方がいいかと。

あまりに便利なので、細かい仕組みも分からずに何となく扱えてしまいそうです。

ちなみに今回のサイトは、Nuxt.js×microCMS×Netlifyを使用した、憧れのJAMStackです（笑）

ただ本で学習していた時は全然意味わかりませんでしたが、とりあえず手を動かしながら詰まったところを解決していったらできていた感じです。

以下に参考記事をまとめたので、興味ある方はぜひ見てみてください。

参考記事まとめ