突然ですが、デザイナーとエンジニアの間で一番多く共有されるものって何でしょう？
（おそらく）そうデザインテンプレートです。
K.S.ロジャースの島袋です。
今回は、デザインガイドを作成するために Fractalを使用してみた所感や使い方を書いていきたいと思います。なお、あくまでエンジニア主導と目線による使用感になるので、デザイナーから見た場合は少し違った感想になるかとは思いますのであしからず。
デザインガイド作成のきっかけ
実は今回のデザインガイドはデザイナーとエンジニア向けではなく、HTMLほぼ初心者の方でもHTMLを構築できるようにするためでした。なので、導入部分のデザイナーとエンジニアの共有とは少し違いますが、分かりやすい指標を作る必要があったため、デザインガイドを作成しました。
簡潔に作成するためにいくつかのフレームワークを検討しましたが、一番導入が簡単そうな Fractalを使うことにしました。
インストールと起動
インストールはとても簡単で npmの環境があればコマンド一発で可能です。
が、依存関係をコントロールやしやすい yarnがおすすめです。
CLIツール
buildなどでコマンドを頻繁に叩くので、CLIツールのほうが便利です。
yarn global add fractal
参考：公式ドキュメント
起動
公式から引用すると
- ターミナルでプロジェクトを作るディレクトリに移動
fractal new <project-name>でプロジェクトを作成- 表示される質問に答える
- 質問に全部答えるとプロジェクトが作成されるので移動
fractal start --syncで開発用サーバーの起動- 表示されるURLで見れるよ
となります。簡単ですね。
ディレクトリ構造と要素
Fractalは2つの要素で構成されます。
- デザインテンプレートを構成する
COMPONENTS - ドキュメントを構成する
DOCUMENTATION
ディレクトリ構造も上記に即しており、非常に分かりやすかったです。
├── src
│ ├── components
│ └── docs
└── package.json
参考：公式ドキュメント
COMPONENTS
ざっくりと言うと、テンプレートエンジンに Handlebarsを使用して、READMEとか書けるといったものです。Handlebars自体エンジニアであれば見覚えある方も多く、使いやすくなってます。
詳しい使い方は公式ドキュメントを参照いただければと思います。
今回使ってみてテンプレート毎にREADMEを書けるのは、汎用性があって使いやすいと思いました。下記のように注意事項やtipsを書き込んでおけるので、共有する上では非常に助かりました。
その他に変数データを別途JSON形式のファイルで保持できたり、テンプレート毎にステータスを設定できたりと痒い所に手が届く機能も多いです。
DOCUMENTATION
こちらはテンプレートとかはなく、純粋にドキュメントを書いていく部分になります。
使い方はその時の次第になるかと思いますが、 docsディレクトリの最初のファイルがアクセス時のトップページになるので、目次やデザインガイド全体のルールを載せると良いかと思います。
もちろん単純な文字だけでなく、変数的な使い方をすることもできます。
詳しい使い方は公式ドキュメントを参照いただければと思います。
使ってみた所感
正直言うと、かなり良いものを見つけることができたと思います。導入も簡単で使い勝手も良いので、今後似たような案件の場合、Fractalを使用しても良いなと思いました。
もちろん、気になった点もいくつかあるので書いておきます。（いくつかはissue出してみようかな…）
良いと思った点
- npm利用ですぐにインストール・起動ができる
- 起動オプションにホットリロードがある
- buildで
destを作成できる - 機能もディレクトリ構造も簡潔で分かりやすい
気になった点
- npmを利用するので純粋なデザイナーさんだけでは導入できなさそう？
- ホットリロードはあるが、記述にエラーがある場合強制シャットダウンされる
お願いします→お願いし〼のように日本語が謎の変換される（おそらく文字コードあたりの設定のような気がする）
他のフレームワークも同じような機能はありますが、導入前に調べた限り 扱いが簡単という点ではFratalが一つ飛び抜けているかと思います。
今回はここで終わりになりますが、ご感想やご指摘ありましたらどうぞよろしくお願いします。
あとづけ
ちなみに弊社、Tech系以外にも会社ブログも掲載してますので、気になった方は是非どうぞ。
https://www.wantedly.com/companies/ks-rogers