[Document & Workflow] プロトタイピングにおける Sketch のシンボル機能を利用した Atomic Design の実践と所感
下記のポストを見て Atomic Design というデザイン手法に興味を持ちました。
プロジェクトにプロトタイピングツールとして取り入れた時のポイントと所感をまとめてみました。
[markdown]
> * [珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD](http://postd.cc/the-unicorn-workflow-design-to-code-with-atomic-design-principles-and-sketch/)
以下は、Sketch v43+ を Web アプリ・サイトのデザインに利用した際の個人的な意見になります。
みなさんの活用例も教えて頂けるとうれしく思います。
## Atomic Design とは
[Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) とは、2013 年に Brad Frost さんにより提唱されたデザイン手法とのこと。
> Atomic designとは、パーツを合体させて、繰り返し可能なエレメントやテンプレートが作成できるシステムを構築することをいいます。
>
> [珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD](http://postd.cc/the-unicorn-workflow-design-to-code-with-atomic-design-principles-and-sketch/)
その他、下記のポストが非常に参考になりました。
> * [Atomic DesignはWeb開発を救うのか – DMM.comラボ デザイナーズブログ](http://design.dmm.com/entry/2016/02/05/153408)
> * [Atomic Designの考え方と利点・欠点 – I’m kubosho_](http://blog.kubosho.com/entry/using-atomic-design)
### 追記
このポストを書いているときに、下記を見つけました。
最初にこちらを参考にすれば、より理解が進んでいたかも知れません。
> * [Atomic Designの概念を参考にSketchのシンボルを効率的に管理する方法 | UXデザイン会社Standardのブログ](http://www.standardinc.jp/reflection/article/sketch-atomicdesign/)
同じく実例が紹介されていて勉強になります。
> * [AtomicdesignとSymbol機能でUIデザイン制作効率化！Sketchファイル1つで完結するデザイン制作と伝達のツボ | Nagisaのすゝめ](https://blog.nagisa-inc.jp/archives/969)
### Book
> * [Atomic Design by Brad Frost](http://atomicdesign.bradfrost.com/)
### 要約
Atomic Design とは、 **パーツを合体させて繰り返し可能なエレメントやテンプレートが作成できるシステムを構築する** ことをいいます。
Atomic Design は 5 つのレイヤー構造にわかれます。
– Atoms（原子） … 絶対的な基本的エレメント（ex. カラーパレットやフォント、ボタンなど）
– Molecules（分子） … 2つ以上の原子から構成されるエレメント（ex. ラベルのあるフォームフィールドやタイトル行など）
– Organisms（有機体） … 具体化されたインターフェース（ex. ロゴを含むナビゲーションヘッダなど）
– Templates（テンプレート） … ワイヤーフレーム・プロトタイプ
– Pages（ページ） … 忠実度の高いテンプレート
各レイヤー定義によって、デザインコンポーネントが明確になり粒度も揃います。
これによって **デザインの構造・設計が見える化される** わけです。
## 実践 Sketch の Symbol を利用する
Sketch の Symbol 機能を利用すると、レイヤー構造の作成と管理がうまくいきます。
### Template
一から起こすのは難しそうでしたので、Atomic Design Template 利用してプロトタイピングを進めました。
> * [Atomic Design Template by Nolte Sketch freebie – Download free resource for Sketch – Sketch App Sources](https://www.sketchappsources.com/free-source/2160-atomic-design-template-sketch-freebie-resource.html)
### シンボルを作成する
エレメントを右クリックして、`Create Symbol` を選択します。
なお下記は過去バージョンの利用方法のようで、現在はチェック不要となっていました。
> プロからのヒント：Sketchの素晴らしい機能として、テキスト付きのエレメントをモジュール化したシンボルにすることができます。そのためには、右側のツールセットにあるExclude Text Value from Symbolボックスのチェックも付けてください。
>
> [珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD](http://postd.cc/the-unicorn-workflow-design-to-code-with-atomic-design-principles-and-sketch/)
現行バージョンは、こちらのフローが参考になります。
> * [[Sketch 3] シンボルのインスタンスごとにテキストや画像を設定できるオーバーライド機能の使い方 ｜ Developers.IO](https://dev.classmethod.jp/visual-design/sketch3/how-to-symbol-override/)
### シンボルの命名と分類をする
命名規則は無いそうですが、下記のようにすると扱いやすくなります。
> * [Atomic Design | モテモテテクノロジーブログ](http://motemote-tech.com/design/20170518)
– Lv1 … Atoms（原子）
– Lv2 … Molecules（分子）
– Lv3 … Organisms（有機体）
Sketch ではスラッシュをシンボル名に入れることで、階層をもたせることができます（後述の「シンボルを利用する」の図も参照のこと）。
またシンボルを規則的に命名することで、Sketch プラグインの [Symbol Organizer](https://github.com/sonburn/symbol-organizer) で階層ごとに並べ替えることができ、見通しが良くなります。
### シンボルを利用する
作成したシンボルをテンプレートなどに配置するには、メニューの `Insert > Symbols` から選択します。
（こちらの図は、分類としては良い例ではなさそうですが、イメージはつかんで頂けると思います。）
### CSS へ変換する
エレメントを右クリックして、`Copy CSS Attributes` を選択します。
> エレメントに対するコードを得るには、エレメントが適切にグループ化されているか、またはシンボルとして登録されているかを、まず確かめる必要があります。以降の操作は簡単で、エレメントを右クリックしてドロップダウンメニューからCopy CSS Attributesを選択します。
>
> [珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD](http://postd.cc/the-unicorn-workflow-design-to-code-with-atomic-design-principles-and-sketch/)
下記の CSS を得ることができました。
“`css
/* Rectangle 28: */
background: #B2BAC4;
border-radius: 2px;
/* SUBSCRIBE: */
font-family: Helvetica-Bold;
font-size: 16px;
color: #FFFFFF;
letter-spacing: 0;
line-height: 16px;
“`
## 所感
いままではプロジェクトの初期段階でペーパープロトタイピングを、設計段階では [Twitter Bootstrap](https://getbootstrap.com/) によるプロトタイプの作成を推してきました。
ペーパープロトタイピングは、紙とペンがあれば誰でも扱える手法であり、試行錯誤がしやすいため問題点や課題の洗い出し、整理がしやすい利点があります。
Bootstrap は、デザイナーやエンジニア、場合によってはクライアントとも説明不要で利用できるフレームワークであり、デバイスでの確認がしやすいでしょう。
そのまま CSS を追加して、デザインをフィニッシュすることもできます。
また中間ドキュメントが欲しいプロジェクトであれば、[OmniGraffle による作図](https://www.d-wood.com/blog/2015/07/15_7567.html)を推してきました。
stencil を利用することで、課題の解決に集中できます。
予算と時間の限られるプロジェクトにおいて、これらのツールの活用は非常にオススメです。
### プロトタイピングツールとしての役割・立ち位置
では Sketch は、プロトタイピングツールとしてどのようなポジションをなすでしょうか。
Sketch は OmniGraffle の役割と重なる部分もありそうですが、私はこのように捉えています。
紙をベースとする OmniGraffle と比較して、 **画面をベースとする Sketch は、より精度の高いプロトタイプを作成する事ができる** という特性があるように思えます。
具体的には、文字や画像などの要素がどの程度レイアウトできるのか、といった部分がよりリアルになりました。
逆に、デザインまで完結できるツールが故に、粒度が細かくなりすぎるきらいもあります。
プロトタイピングツールとしては、割り切って使うことも重要そうです。
OmniGraffle は [Stencil](https://stenciltown.omnigroup.com/) というひな型を利用して、よりラフに描けるでしょう。
プロジェクトのある局面においては、ラフに描いてまとめられることも重要です。
他にも Sketch には、[優秀な extension](https://www.sketchapp.com/extensions) や Sketch のアートボードを iOS でプレビューできる [Sketch Mirror](https://www.sketchapp.com/docs/mirror/mirror/) もありますよね。
このあたりは、いろいろと研究の余地がありそうです。
### シンボル機能の有用性
Sketch では、シンボル機能によりマークアップを自然に意識させる枠組みが提供されています。
HTML/CSS 文書の作成にあたっては、その構造を意識することは避けられません。
目的に沿ったユーザー体験を実現するには、そのデザインがマークアップ時に破綻しないかを考慮できることも重要になります。
「レイヤー32のコピーのコピー」といった謎の PSD ファイルに悩んでいるエンジニア目線からいえば、シンボルを利用する Atomic Design のボトムアップの考え方には素直に納得ができました。
この機能を利用することで「ルールから逸脱した要素が混入」することをあらかじめ防ぐことができるので、 **成果物にも一貫したデザインが反映される** はずです。
デザイナー・エンジニア双方ともにメリットが大きく、他のソフトウェアと Sketch との設計思想の違いを強く感じる部分です。
## その他の情報
### Style Guide Generator?
ここで紹介されている「[Pattern Lab | Build Atomic Design Systems](http://patternlab.io/)」は、PHP 製のスタイルガイドジェネレーターのようなものらしいですが要調査。
> Pattern LabのBrad FrostとDave Olsenが素晴らしい見本を作成していますので、参考にしてみてください。
>
> [珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD](http://postd.cc/the-unicorn-workflow-design-to-code-with-atomic-design-principles-and-sketch/)
### CSS Architecture
「[APB CSS – Atomic Parts Base CSS -](http://apbcss.com/)」という Atomic Design をベースに設計された「CSS アーキテクチャ」もあるそうです。
### Book
書籍「UIデザイナーのためのSketch入門＆実践ガイド」内で Atomic Design にも触れられているそうです。
> 特にシンボルのセクションでは、Atomic Designを解説しながら、吉竹さんなりに使いやすくアレンジしたフレームワークを紹介されています。Sketchは特にAtomic Designを取り入れて制作しやすいアプリですが、それなりに経験も必要でスムーズな導入はできないことも事実です。Atomic Designに挫折した方は、これで再チャレンジしてみてはどうでしょうか？
>
> [「UIデザイナーのためのSketch入門＆実践ガイド」を読んで | creative tweet.](https://creative-tweet.net/blog/2017/05/introductory-guide-to-sketch-for-ui-designers.html)
売り上げランキング: 35,860
> 当初、ページ数が予想を遥かに超えていたこともあり、Atomic Designについての節はまるごと削除してもいいんじゃないかと考えていたのですが、編集の村田さんのリクエストもあり残すことにしました。こんな考え方もあるんだ、と少しでも参考になればと思います。
>
> [執筆した「UIデザイナーのためのSketch入門＆実践ガイド」が発売されました | UXデザイン会社Standardのブログ](http://www.standardinc.jp/reflection/article/sketchbook/)
### Screencast
また Sketch の基本操作については、ドットインストールにレッスンが最近追加されたようです。
> * [エンジニアのためのSketch入門 (全30回) – プログラミングならドットインストール](https://dotinstall.com/lessons/basic_sketch)
## 補遺
> * [デザイナーによるAtomic Designの実践〜導入編・運用編〜 // Speaker Deck](https://speakerdeck.com/ukn530/tesainaniyoruatomic-designfalseshi-jian-dao-ru-bian-yun-yong-bian)
> * [チームの課題から考える、Adobe XDとSketchの導入メリット – PSYENCE:MEDIA](https://tech.recruit-mp.co.jp/design/post-13341/)
> * [Sketchでワンストップデザイン！ペーパープロトタイピングからUIデザイン、動作モックまで – tech/design/mura24](http://mura24.hatenablog.com/entry/2017/1218/sketch_advent_calendar)
[/markdown]