目次
Pattern Labとはなにか
Pattern Lab は Brad Frost が提唱している新しいUI設計手法 Atomic Design で作成したUIセットのスタイルガイドを作るツールです。
(2018/3/1追記:1998年からそのような考え方があった http://danieldelaney.net/atomic/ )
なにができるかは Pattern Lab Demo をみれば一発です。Atomic Designにしたがって設計したUIセットのスタイルガイドを確認できます。
Atomic Design のわかりやすい説明はGoogleの中の人が このサイト で解説しています。
Atomic Design をざっくり説明
ざっくり説明します。
設計の目的は、UIの再利用です。
UIを最小単位まできりつめた単位をAtomとします。これはボタンやテキストなどです。
そして、そのAtomを使って組み合わせたUIをMoleculeといいます。これはボタン付きのinputフォームなどです。
そしてMoleculeを組み合わせてつくったUIをOrganismといいます。これはヘッダーやフッターなどです。
そして上記を組み合わせて画面ワイヤーフレームを作ります。これがTemplateです。
Templateに実際のサイトのように画像やコンテンツを差し込んだもの、それがPageです。
Googleの人の解説 では Sketch とコラボレートした例がありますが、その説明は省きます(こんど時間があるときに記事かくかも)。
個人的にはデザインナーと科学者、畑は違うけども考えることは同じだよねという隠れた思考が見え隠れして非常に好きです。
この記事の対象者
- Macユーザー(Windowsでもできると思いますが、未検証です)
- git使える
- npmを理解している、グローバルとローカルインストールについての知識必須
- gulp使ったことある(公式サイトでは、他にphpとgruntバージョンがあります)
- フロントエンドエンジニア、特にデザイン部と密接に関わりがある、デザインこれから学びたい
- デザインもコーディングも両方できるよ
※UIの設計はデザインの領域です。デザイナーとコラボすること、デザインの知識があることが必須です。
インスタレーション
ここでは、公式サイトのサンプルリポジトリを使ってPattern Labを実践します。
まず公式サイトのサンプルリポジトリをクローンします。
your-local-github-directoryの箇所はローカルでgithubクローンしたい場所に置き換えてください。
cd your-local-github-directory
git clone https://github.com/pattern-lab/edition-node-gulp.git
cloneされたらディレクトリ移動して、おなじみ npm startします。
ここで一点注意点です。執筆時点でbeta版のgulp 4に依存しているので、
3.X系のgulpがグローバルにインストールされている場合は、4を再インストールする必要があります。
詳細は ここ にのっているので事前にインストールしてください。
※ここで筆者はつまづきました。3.X系だとこのあとTerminalでgulp実行してもこけます。
cd edition-node-gulp
npm start
これで、pattern labのコンパイル準備が整いました。
次に、早速ビルドしてみます。
gulp patternlab:serve
ここまでうまくいくと、ブラウザが立ち上がります。
もちろんまだ何もソースを準備していないので、
UIが空のページが立ち上がります。
この状態でソースを修正すると自動ビルドされブラウザ更新されます。
空のままだと面白くないので、
手っ取り早くDEMOの内容を落としてきます。
解説サイト にならって落とします。
npm install starterkit-mustache-demo
gulp patternlab:loadstarterkit --kit=starterkit-mustache-demo
starterkit starterkit-mustache-demo loaded successfully と表示されたら成功です。
ルートフォルダ直下の source ディレクトリにDemoのソースがコピーされます。
再度以下のコードでビルドします。
gulp patternlab:serve
ブラウザが立ち上がり、Pattern Lab Demo と同じ内容が表示された成功です。
ソースファイルの実態はルート直下の source フォルダです。
試しに source/patterns/00-atoms/00-global.md を編集して保存してください。
自動でビルドされ変種した内容がブラウザのGlobalというタイトルの下に反映されるはずです。
これで 導入Pattern Lab終了です。お疲れ様です。
あくまでこれはスタイルガイド作成ツールなので、
肝心なのはAtomic Designに基づきUIを設計し、source以下にコーディングすることです。
そのコードをコンパイルすることではじめてUIがパーシャル(再利用可能)になります。
sourceフォルダ以下にどのようなファイルを作成すればいいかは
英語ですが ここ に解説されています。
今後余力があれば、実践として記事アップします。
最後まで読んでいただきありがとうございます。