Help us understand the problem. What is going on with this article?

さくっとデザインガイドを作成するための Fractal

突然ですが、デザイナーとエンジニアの間で一番多く共有されるものって何でしょう?
(おそらく)そうデザインテンプレートです。

K.S.ロジャースの島袋です。

今回は、デザインガイドを作成するために Fractal を使用してみた所感や使い方を書いていきたいと思います。なお、あくまでエンジニア主導と目線による使用感になるので、デザイナーから見た場合は少し違った感想になるかとは思いますのであしからず。

デザインガイド作成のきっかけ

実は今回のデザインガイドはデザイナーとエンジニア向けではなく、HTMLほぼ初心者の方でもHTMLを構築できるようにするためでした。なので、導入部分のデザイナーとエンジニアの共有とは少し違いますが、分かりやすい指標を作る必要があったため、デザインガイドを作成しました。

簡潔に作成するためにいくつかのフレームワークを検討しましたが、一番導入が簡単そうな Fractal を使うことにしました。

インストールと起動

インストールはとても簡単で npm の環境があればコマンド一発で可能です。
が、依存関係をコントロールやしやすい yarn がおすすめです。

CLIツール

buildなどでコマンドを頻繁に叩くので、CLIツールのほうが便利です。

yarn global add fractal

参考:公式ドキュメント

起動

公式から引用すると

  1. ターミナルでプロジェクトを作るディレクトリに移動
  2. fractal new <project-name> でプロジェクトを作成
  3. 表示される質問に答える
  4. 質問に全部答えるとプロジェクトが作成されるので移動
  5. fractal start --sync で開発用サーバーの起動
  6. 表示されるURLで見れるよ

となります。簡単ですね。

ディレクトリ構造と要素

Fractalは2つの要素で構成されます。

  1. デザインテンプレートを構成する COMPONENTS
  2. ドキュメントを構成する DOCUMENTATION

ディレクトリ構造も上記に即しており、非常に分かりやすかったです。

├── src
│   ├── components
│   └── docs
└── package.json

参考:公式ドキュメント

COMPONENTS

ざっくりと言うと、テンプレートエンジンに Handlebars を使用して、READMEとか書けるといったものです。Handlebars自体エンジニアであれば見覚えある方も多く、使いやすくなってます。
詳しい使い方は公式ドキュメントを参照いただければと思います。

今回使ってみてテンプレート毎にREADMEを書けるのは、汎用性があって使いやすいと思いました。下記のように注意事項やtipsを書き込んでおけるので、共有する上では非常に助かりました。
map.jpg

その他に変数データを別途JSON形式のファイルで保持できたりテンプレート毎にステータスを設定できたりと痒い所に手が届く機能も多いです。

DOCUMENTATION

こちらはテンプレートとかはなく、純粋にドキュメントを書いていく部分になります。
使い方はその時の次第になるかと思いますが、 docs ディレクトリの最初のファイルがアクセス時のトップページになるので、目次やデザインガイド全体のルールを載せると良いかと思います。

もちろん単純な文字だけでなく、変数的な使い方をすることもできます。
詳しい使い方は公式ドキュメントを参照いただければと思います。

使ってみた所感

正直言うと、かなり良いものを見つけることができたと思います。導入も簡単で使い勝手も良いので、今後似たような案件の場合、Fractalを使用しても良いなと思いました。
もちろん、気になった点もいくつかあるので書いておきます。(いくつかはissue出してみようかな…)

良いと思った点

  • npm利用ですぐにインストール・起動ができる
  • 起動オプションにホットリロードがある
  • buildで dest を作成できる
  • 機能もディレクトリ構造も簡潔で分かりやすい

気になった点

  • npmを利用するので純粋なデザイナーさんだけでは導入できなさそう?
  • ホットリロードはあるが、記述にエラーがある場合強制シャットダウンされる
  • お願いします→お願いし〼 のように日本語が謎の変換される(おそらく文字コードあたりの設定のような気がする)

他のフレームワークも同じような機能はありますが、導入前に調べた限り 扱いが簡単 という点ではFratalが一つ飛び抜けているかと思います。

今回はここで終わりになりますが、ご感想やご指摘ありましたらどうぞよろしくお願いします。

あとづけ

ちなみに弊社、Tech系以外にも会社ブログも掲載してますので、気になった方は是非どうぞ。
https://www.wantedly.com/companies/ks-rogers

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away