読者です 読者をやめる 読者になる 読者になる

2億か8億

めしの話をしたり生活の話をしたりする

Stop Talking About Atomic Design

アトミックデザイン

最近聞くようになったアトミックデザインというのがTwitterで話題にのぼったので考えてみる

postd.cc

design.dena.com

とりあえずググって最初に出てくる2記事を読んでみました。

最小単位を考え、組み合わせる

この最小単位を組み合わせることでデザインしていくそうです。
最小単位というのが前者の記事では色とかそういうレベルなのに対して、後者の記事ではボタンという単位になってます。
この時点でなんなの感があるのですが、まあそういうものだと思いましょう

Sketchに有用らしい

Sketch.appというMac用のグラフィカルデザインツールがあります。
Sketch - Professional Digital Design for Mac

私も仕事で使っているのですが、プロトタイピングやモバイルアプリケーションの制作でものすごい力を発揮します。
グリッド・SVG書き出しやアートボードなど、Psでやりたかった、Fwでできてたことが精度高く出来るような感じだと思ってください。

で、Sketchには「Symbol」という機能があります。
これがアトミックデザインの「原子」に適合します。

いくつかのプロパティを持ったグラフィック表現をグルーピングし、それをインスタンス化して利用することができます。
テキストをインスタンスごとに変えられたり、幅をStretchにしたり、スタイルやプロパティを可変に出来るのが大きな強みです。
また、このSymbolは入れ子にすることができます。これが「分子」として振る舞うということでしょう。

ていうかそれSketchの使い方じゃん?

デザイン論じゃなくてツールの使い方を模式化したものであってこれをワークフローと呼ぶのかしら!!!!!??!?!??!?!?!

Webデザインって?

さっきの記事を読んで感化されちゃった人らに向けて、ただのツールの使い方をデザイン手法みたいに語るのをやめろ!!!という文脈で話をすすめます。
Webデザインはツールの使い方だけじゃねえぞ、ではなんなのでしょう。

WebサイトやWebアプリケーションを使って情報伝達や目的達成を行うプロセスのうち、視覚ベースの表現を組み立て、制作するのがWebデザインだと思っています。
(私はそう思っていますという意味です)(逃げ)(主語は小さく)

Webの特性は何かといえば、デジタルデバイスの画面を用いて表示されるものを作るということですね。
ドットで構成された光学ディスプレイで表示されるので、RGBを使った制作が主になるでしょう。
最近では高解像度のディスプレイも増えてきていますが、紙と比べると低解像度のものも多いです。
また、デバイスの多様化に伴って多くのサイズやピクセル密度、使われる場所が日に日に増えているのが現状です。

デザインのセオリーとプロセス

「ノンデザイナーズ・デザインブック」や下記の記事の方が参考になると思うのですが、視覚表現にはいくつかのセオリーがあります。

webdesignrecipes.com

  • 同じ性質・役割のものは同じ見た目に
  • 性質や役割が似ているものは近くに
  • 属性ごとにグルーピングする

…などなど。

これらを組み合わせることで、ユーザーに目的を達成してもらう手助けをするわけですね。
もちろん、これ以外にも山ほどセオリーがあるでしょう。色や配置、インタラクションなどなど。

それらを全部覚えることだけがデザインではもちろんありません。
だって、結局それはツールの話と一緒ですから。
引き出しを増やすことは大事ですが、その表現がどのような効果を生むかの仮説を立て、それを検証していくのが制作のプロセスだと私は考えています。

「自分が美しいと思ったものが何故美しいと感じたか」
「この表現を使うことでユーザーはどのように感じ、どのように利用の手助けになるか」
そういった考察や検証を元に、グラフィック表現を制作していくことこそがデザインのプロセスの一端で、ツールやセオリーはそれを裏打ちしたり基礎となるものではないでしょうか。

情報設計(IA: Information Architect)

視覚表現だけでWebサイトが制作できるわけではありません。
ユーザー層や訴求したいことなどを調査・分析し、適切な情報の解像度や導線、優先度を設定していくことが根幹に存在します。
マーケ寄りの単語ではありますが、決してデザイン・エンジニアリングに関係のない単語ではありません。

www.entacl.info

ワイヤーフレームやペーパープロトタイプ、ユーザーテストなどなど、ユーザーに訴求する・ユーザーの使い勝手を向上する・自分たちのビジョンや目的を達成するためにグラフィック表現以外でも様々な分析調査が行われ、それも合わせてWebサイトやWebアプリケーションのデザインプロセスが進んでいきます。

アトミックデザインと情報設計

細部から作ってって、ワイヤーありきの話じゃねえの?

これ。
パーツの寄せ集めでデザインできねえじゃろ。
情報設計とかページの構成があってこそできるでしょ。
このワークフロー、その大前提でしょっていう。

それがなに、「アトミックデザイン」って言葉に惑わされている人がさあ、これがいいってさあ、なんなの???????????
結局これ、「同じ役割は同じ見た目で」っていうのを達成することでトンマナが整えられてユーザーが学習せず使えるという部分がSymbolで達成されて、グルーピングやメンテナンス性のための交換可能性を高めるモジュラーシステムを実現するためのとことか、そんなんGUIの分野でいくらでも言われてたじゃん??????????

言いたいこと

ツールの使い方をデザイン論みたいに語るのを今すぐやめろ!!!