デザイン変更するときキャプチャ撮りまくると捗る
これまではどちらかと言うとDBやWeb APIみたいな開発作業が多かったけど、最近はHTML/CSSを触るようないわゆるWebデザイン的な作業をする機運が高まってきた。あんまりちゃんとやったことが無いために年始から色々と考えてて、まあその結実としてキャプチャ撮ると捗るという体験があったので書き残しておく。ちなみにキャプチャは無い。あとでデザイン変えたやつ公開したら過程を整理して紹介できると良いと思う。
過程を残すと意見をもらいやすい
『藤村龍至 プロトタイピング-模型とつぶやき』という本の中に、プロトタイプとして建築模型をつくっていく過程の話がある。与えられた条件を元にまず最もシンプルな状態から始め、課題を見つけながら少しずつ改善を加えていく様子が実例とともに紹介されている。この作業を反復しながら適用していくことで、模型の状態を都度更新していく。この方法には、設計者以外の人でも設計過程を見て意見を言えるという利点がある。
意見をもらいやすいと改善しやすい
最近読んだ『進化するアカデミア「ユーザー参加型研究」が連れてくる未来』という本では、色々な研究の形が模索されていた。その中でも、最終成果物としての論文だけでなく、実験結果やその他の資料を含んだ研究プロセスそのものをネットワークで共有しようという取り組みの紹介や、研究成果から生み出された音楽をニコニコ動画で発表し、肯定・否定を含んだユーザからのフィードバックを得て更に研究が発展したという事例が紹介されている。要は、プロセスの途中から共有することで、よりフィードバックが得やすくなり、それ自身が発展していく期待が高まるということが言いたい。
開発にも適用してみる
設計者以外の人でも意見が言えるように物事を進めるというのは、自分に身近なところではソフトウェア開発など、ほかの創造性を要するものづくりの分野にも適用できる可能性が高い。そこで、無理なく単純に試せる実験として、デザイン変更中にキャプチャを撮りまくるというのをやってみている。ヘッダの色を少し濃くしてみるとか、サイト幅を少し小さくしてみるとか、変更を加えつつだるくない程度の適当な粒度でキャプチャをバシバシ残していく。キャプチャごとに変更の理由などの簡単なメモを残しておく。このメモが後から振り返るときに意外と便利だったりする。Gitのcommitと同じ。
キャプチャ便利情報
回数が増えてくると結構だるいんで手を抜いて適当にやるのが大事。自分はMacが提供してるキャプチャ機能を使ってる。Command + Shift + 4 で矩形選択ができるようになって。ここでSpaceを押すとウィンドウを選択してキャプチャを撮れるようになるのでこれを使う。撮りたい画面のウィンドウをクリックするとデスクトップに画像が保存される。このとき画像に枠として影が勝手に付与されるけど、Optionキーを押しながらクリックすると影が残らないので好みによって切り替える。また、Command + Shift + 4 に加えて Control も押しておくと、ファイルとして保存するのではなくクリップボードに画像を保存してくれる。
キャプチャの良さ
今の開発チームは情報共有にQiita:Teamを使ってて、投稿フォームに画像をペーストするとそのままアップロードしてURLが出てくるんで、そのまま簡単にメモ書きを添えて記録しておく。デザインを変更した根拠や理由が視覚的に分かりやすい形で残るというのは、開発者の精神安定上よい。デザインすることにおいて、確かな方法論というものが自分の中で確立されているという人は少ないんじゃないかと思う。発見と失敗を繰り返し、探索的で感覚的なものになりがち。煮詰まってくると、俺はマジでゴミなんじゃないかという暗い気持ちになる。
そういう暗闇の中を手探りで進むような過程の中でも、「この画像の状態から、こういうことを考えてこの画像の状態に変更した」という記録が残ってると、ちょっと心強く感じる。確かに画像を見比べればなんとなく良くなっていることは明らかだということが多い。間違っていた場合でも、ここから間違ったのかとか、この変更はまずかったけどその先の幾つかの変更は別に良かったということも分かる。暗闇の中の光明としての良さがある。
あと大事なこととして、デザイン変更にも必ず意図というものがあって、そういうものはデザインした人の中だけに持っていてはダメで、チームに還元しないといけないと思う。人やめるし。例えばデザインした人がやめるタイミングで、引継ぎ作業として「過去に行った変更のアレとアレはああいう意図で、アレがアレで」とか全て説明するのは不可能なので、短期的に回す開発プロセス自体に属人化を廃するための仕組みが組み込まれていた方が良い。
学びがあると良い
他人のデザイン変更の過程を見られるというのも良い。そこにちょっといい話が付いてると、学びもある。そもそもデザインについて全く知見の無い人間から見ると、デザイナーとか最初からすごい才能を持っていて感覚でどんどんいいものを作っていくという風に思いがちなので、過程で苦悩したり思考したりしている様子が見られるというのは、良いことだと思う。『藤村龍至 プロトタイピング-模型とつぶやき』はそういう過程の思考が垣間見られるという点でも良かったし、最近読んだのだと『デザインの骨格』や『アップルのデザイン』『x‐DESIGN―未来をプロトタイピングするために』なんかはそういった過程にまつわるストーリーが豊富で読んでいて面白い。
模様替えとかにも使える
単純に視覚的に記録を残すと良いかもしれないですねという話なので、もっと素朴なことにも使えるかもしれない。ディスプレイ遍歴 - 9mのブログ はディスプレイ環境の遍歴が画像に添えられた小さなメモと共に振り返られていて面白かったし、自分も デスク遍歴 - ✘╹◡╹✘ でデスク環境を振り返ると今の環境があるべくしてあるということが捉えられて良かった。
おわり
デザイン変更するときキャプチャ撮りまくると捗る。