簡易スタイルガイド(パターンライブラリ)を作ろう


こんにちは、みみです。

今日は先日の WordBench 三鷹の LT でお話した簡易スタイルガイド(パターンライブラリ)の作り方というか、テンプレをご紹介します。

スタイルガイドって今、色々ツールがでてるんですけれど、よっぽど大規模な案件で無い限り(あとそういう大規模な案件をあんまり WordPress だけで作らない方が良いし)そんなの導入しなくても WordPress で固定ページか投稿ページを非公開で作って開発しながらメモっていくのがローコストでハイリターンなやり方だと思います(※ 個人の感想です)。

CSSに大体慣れてきた人向けのアドバイスとしてご紹介したのですが、スライドだけだと現物が無いのでアレだなーと思って(LTでは実例をお見せしました)。

でも、パッとお見せ出来るものも無いんですよ、基本納品物だし非公開だから。なのでこのサイトで適当に作りました。色も嘘っぱちですしボタンとか無いしSVGも使ってないし、カスタムしているところがほぼないので、例としていまいちなのですけれど。

こんな感じのものです。

という凄い単純なものですが、すぐ導入できて、開発時の簡易テストにもなるし、クライアントさんに納品する時に簡易ドキュメントになるし、HTML分かる人だったら自分で活用して貰えるし、何より数カ月後とか数年後(!)とかに再開発になった時に楽ちんです。

これは別に玄人さん向けだけの話じゃなくて、個人ブログでコツコツとカスタムスタイルを積み上げて行っている方とか、テーマをちょこっとだけ弄ってる人にも便利だと思うのです。

何故なら、

人はコードを忘れるから。

… イイコトっぽく書いてみたけど、情けない事実であります。

でも良いの。外部記憶装置に任せるのが一番だよ!

という訳で、まあ要らないと思うんだけど、変なクラス名付いてるので良ければ、一応ソース置いておきます。80行以下は完全に私用のテンプレなのでスルッと書き換えてどうぞ。

あ、そのままでは構文エラーになります(書き換える箇所があります)のでよく読んで用法用量を守ってお使いください。

実際、同業の方に、WordPress の納品時のガイダンスとかドキュメントをどうしているのかをちょっと聞いてみたい。私は孫請けが多いから直接ご説明差し上げられないことも多くて、最低限のサービスとしても自分の身を守るためにもこういうの要るなあと思って始めたんだけれども。みんなどうやってるのかなあ…。


この記事を書いた人