ジャポトク

Nuxt.js
Prismic
JAMStack
Vuetify
netlify
個人制作
紹介プロダクトメインイメージ
紹介プロダクトメインイメージ
担当範囲
企画 進行管理 UXデザイン UIデザイン コンテンツ作成 CSS設計 フロントエンド 運用保守
注目点
  • HeadlessCMSをPrismicにしてNuxt.jsでBuildしたJAMStack構築のサイト
  • わかりにくい日本の支援制度をまとめ、自分が対象と見つけやすくする情報設計

このサイトの概要

このサイトは日本の補助制度をカテゴリ毎に分割し、自分が置かれてる状況をベースに制度を探しやすくしたサイトです。

サイト構築はNuxt.js/Prismic/NetlifyのJAMStackで運用しています。

なぜJAMSTackなのか

人によってはこういったサイトであればWordPressでいいじゃんと言われがちですが、私は安易にWordPressを選択することを反対しています。

なぜなら何らかの理由で、WordPressから離れそうとすると再利用が難しく作り直しになってしまうからです。

JAMSTackではよく言われるものは下記に当たります。

  • より良いパフォーマンス
  • より高いセキュリティ
  • より安価で簡単なスケーリング
  • より良質な開発者エクスペリエンス

JAMStackについて

自分がJAMStackを選択する理由はこの中でも「良質な開発者エクスペリエンス」です。

今回のものでいえばAPIとフロントエンドを別にしているためリニューアルの話になったときでもフロントエンドを変更またはAPI側を変更する事と分離して考えられるからです。

JAMStackに限らないのですが、こういった影響範囲・依存範囲を限定して制作することで技術の依存度を下げてずっと保守していけるサイトが出来上がります。

JAMStackで作る場合これまでのようにHTML/CSS/JavaScriptの知識が求められ、制作スキルとしてはよりハードなものを求められますが、一度作れるレベルにまで達すると開発のしやすさを知り辞めることのできなくなります。

今後もこういった技術Stackでの開発はどんどん求められるようになると思いますが、まだまだデキる人の数が少ないためその分野でも活躍できるような技術を得るために今回作りました。

Prismicを選んだ理由

Prismicは日本ではマイナーですが海外ではそこそこ使われているHeadlessです。

GraphQLで配信されるため、扱いもしやすく気に入っています。

もともとHeadlessCMSを選定したとき下記の候補がありました。

どれも日本ではメジャーでしたが、価格やほしかった機能要件を吟味した結果Prismicに決定しました。

特に重視したところは、今後HeadlessCMSとしてコーポレートサイトなどを作るときに使いやすいものはどれかと比較したかった背景もあり、Prismicを選んでいます。
特に気にってる部分は料金で基本無料で使えるので、思いつきで作るサイトで使いやすい・コーポレートサイトのような更新頻度が低い場合でも相性が良いという点で気に入っています。

ドキュメントはすべて英語ですが、欲しい機能はドキュメントにまとまっているため比較的読みやすいのも作っていくなかで評価が高かったです。

作った感想

普通にHTML/CSS/JavaScriptで作るよりハマりどころは多かったですが、対処法は理解できたのでJAMStackの基本的なノウハウは習得できたと考えています。

助成制度をまとめるのが大変でしたが、長く誰にでも探しやすいサイトにできたと思っています。

他の制作物

制作物一覧へ