はじめに
はじめまして。株式会社アドグローブ、プロダクトデザイン部フロントエンドチームです。
プロダクトデザイン部はアドグローブからプロダクトを創出することを目的の一つとして2020年度に新設された部となり、そのフロントエンドチームの取り組みの一環としてスタイルガイドの作成を行うことになりました。
今回の記事ではスタイルガイドの構成をどのように決定したのか、という内容を書いています。
スタイルガイドをつくることにした背景
フロントエンドエンジニアとして、HTML、CSS、JavaScriptのコーディングやReact、Vue.jsのようなフレームワークによる開発などの基本的なスキルを伸ばしていく事はもちろんですが、
- デザイナーと連携を取りながら開発者目線でのUI/UX提案を行える
- UI/UXを意識した設計や実装を行える
- CMSを用いてスピーディーにWEBサイト制作を行える
など、プラスのスキルを伸ばしていく事で、上流工程でのコミュニケーションが可能なエンジニアになるという事を目標にしています。 そこで、プロダクトデザイン部のデザインチームが作成したECサイトのトンマナ集（デザインガイド）を基にしてスタイルガイドを制作することにしました。
UIパーツを実際に実装しながらスタイルガイドを制作することで、デザインに対する意識付けや再利用性を高めたデザイン・開発を意識するきっかけにしたいと思います。
Vue.jsをベースにした理由
スタイルガイドを制作する際のフレームワークは、Vue.jsを採用する事にしました。 理由としては、
- アドグローブで開発しているWEBアプリではVue.jsが採用されているケースが多い事
- フロントエンドチーム内でもメンバーのフレームワークに対しての熟練度に差がある事
などを踏まえて、Vue.jsでの開発を高品質で行えるメンバーを増やしたいという観点から採用しています。
ざっくりした構成の検討
Vue.jsを使う上で気になるのは、今回のようなスタイルガイドを表示するようなwebアプリの場合、毎回動的にページを生成する必要がないという事です。 表示速度にも影響があるため、静的サイトジェネレータを導入してみることにしました。 Vue.jsの場合、実行時にビルドが必要となるので、そのタイミングで静的サイトの構築を行うよう設定すれば効率的だというのも後押しになりました。
また、静的サイトジェネレータについて調査しているときに「ヘッドレスCMS」という単語が目につき、調べてみると、スタイルガイドのようなコンテンツを作成するには向いていると判断したため、こちらも導入してみることにしました。 （商用リリース等考える必要がない案件なので、知らないものにドンドン触れてみようという思惑もあります）
最終的に決定した構成とその理由
Vue.js＋静的サイトジェネレータ＋ヘッドレスCMSという構成が決まったので、具体的に利用するサービスを決定します。
静的サイトジェネレータ
Gridsomeを利用する。
理由は以下の5点
- Vue.jsベースの静的サイトジェネレーター
- ヘッドレスCMSに対応
- 各種ソース（ヘッドレスCMS含む）にGraphQLでアクセスできる
- g-link、g-imageという独自タグで手軽に高速化が可能
- 静的サイトジェネレーターという機能に絞ることでシンプルで使いやすい
ヘッドレスCMS
microCMSを利用する。
理由は以下の4点
- 日本製のCMSなので日本語で対応可能
- ドキュメントが豊富にある
- 利用実績が多いため、第三者による解説記事やドキュメントも豊富
- UIがシンプルで直感的
おわりに
今回の案件では構成を自由に決定できるため、今まで触れたことのない技術も取り入れることができました。
現在、フロントエンドチームでは上記の構成でスタイルガイドの実装を進めていますが、自分たちで吟味した構成なので既存の案件でよくある「痒いところに手が届かない」といった状況を解消できていると思います。
引き続き、フロントエンドチームでは、スタイルガイドの実装をはじめチャレンジングな活動を行っていきたいと思っています。
