※チュートリアルを目的とした記事ではありません。
Fractalとは
- スタイルガイドジェネレーターだよ。
- Node.jsでインストールして、簡単にスタイルガイドページを作れるよ。
- 記述はMarkdown、ファイルもコンポーネントごとだから管理しやすいよ。
公式サイトはこちら。
スタイルガイドを作ろうと思った経緯
社内にデザイン部隊がなく、UIに気を使う人が少ない為に配慮の無さが日ごろから目についていた。
デザインについてはExcelベースの「画面イメージ」を頼りに各々が走り出し、
HTML/CSSに対するコーディング規約もない為に、後々になって解釈の差から生まれる微妙な違いを修正するコストも膨大。
さらに当時、新しく
- 基本はCSSフレームワークでデザイン構築。
- そこから、上書き用のCSSを適用して、色や配置の変更を行う。
という方針の案件が発生していた。
私の懸念点は**好き勝手に各々がCSS用意して適用してったら、修正で地獄を見るぞ……**ということだった。
そもそも、必ずCSSを別ファイルで作ってstyle適用してくれる保証もどこにもなかった。
どんなスタイルガイドにするか
初めは、デザインのルールを作ってredmineのWikiなんかで周知することを計画していた。
しかし、このアプローチには社内環境を鑑みて以下の課題があった。
ドキュメントを読む作業は人によってはかなり高コストなので、無視される可能性無限大。
結果、使われないドキュメントは風化するどころか、半端に使われて混乱を招く恐れがある。
そうなれば、デザイン関連の事前決定不要の流れになってしまう。将来を考えてもそれは避けたい。
そこでどんなものなら受け入れられるかを考え、CSSフレームワークのサイトのようなものをイメージした。
BootStrapとか、Materializeとかのドキュメントのような形式を取れれば、
一目でどんなコンポーネントか確認できるし、簡単にコピペして使えるなら読ませるより抵抗感はないだろうと予想できる。
めんどくささがなければ、便利だと感じた人たちが社内での利用を定着させてくれる流れに期待も出来る。
加えて、ツールには以下を求めたい。
- すごいツールは買ってもらえないので、無料で使えるもの。
- 機能が膨大な学習コストの高いツールは間違いなく嫌煙されるので、シンプルなもの。
- 管理を引き継ぐ・ツールを広めることを考えて、デザインツールっぽくないコーディングで作成管理が出来るもの。
目指す方向性が定まった。
Fractalと出会うまで
恥ずかしながら当初は「スタイルガイド」という単語にすらたどり着いておらず、
「なんかデザインを事前にルール決めしてみんなで見るようなツール」というふわっとしたイメージを頼りに調査していた。
スタイルガイドをテンプレートベースで作成するツールを見ては、こんなにちゃんとした規模でやる案件はほぼ来ない……と絶望し、
figmaを試してセンスの無さに絶望した挙句、デザインをやろうとしていたわけではないと冷静になり、
Frontifyを試して機能の多さに絶望し……似たようなツールを渡り歩き……。
そんな紆余曲折を経て出会ったのが、GitHubなどで公開されているスタイルガイドジェネレーター、中でも「Fractal」だった。
Fractalに決めた理由
似たようなジェネレーターの有名どころとしてはKSSやStyleDoccoが上がると思われるが、
今回Fractalを選んだ決め手は、
- Markdownでの記述が出来る
- CSSを直接書き換える必要がない
の2つだった。
選ぶうえで、KSSやStyleDoccoもシンプルで魅力的だった。
が、SASS(SCSS)を扱える人が社内にほとんどいないこと、CSSが結構な頻度で変更になりそうなことを考えると、
CSS内にコメントアウトで書く方法は利用を推進していくことを考えると現実的ではなかった。
その点Fractalは、CSSファイルを書き換える必要がなく、社内でも多くの人が慣れているMarkdownでの記述。
これなら、環境さえ構築しておけば、誰かが手直ししていけるのではという希望が持てた。
Fractalでやったこと
まずFractalをインストールして環境を設定を行った。
作成したのは、いくつかのサンプルコンポーネントと、デザイン方針や簡単なルール等のドキュメント類だ。
今回はCSSフレームワークのカスタムでUIを作っていく方針だったので、
CSSはカスタム用の自作ファイルと、CSSフレームワークのCSSファイルを読み込む必要があったが、
自作ファイルについてはFractalのフォルダ内に置き、
CSSフレームワークについては、未編集であることを強調したかったので、CDNを読込ませて対応することにした。
そんな形で出来上がったのが、このようなページである。
すごい。
結末
ここまで読ませておいて言うことではないのだが、残念ながらFractalを作成した案件はサヨナラしてしまい、活躍を見ることが叶わなかった。
ただ、一度は納品資料として……という空気もあったので、爪痕は十分残したと感じる。
「これ、IEで見れる？」と聞かれて戦慄したのも良い思い出である。
(ちなみにIEだと表示崩れが起きるが、IEで管理画面が表示くずれしたときの確認ポイントで回避できる。)
また、作ったコンポーネントをまとめて、すぐ見れる自分用の資料にしておくだけでも価値があるはずなので、これからもあきらめずに取り組んでいこうと思った。
この記事が、同じような苦しみを味わっている誰かの、何かしらのきっかけになれば幸いである。
※ただ、残念ながら2019/9/24現在、npmでのfractalインストール時に相当数の脆弱性警告が発生する為、お手軽にとはいかないかもしれない。