■冒頭5分の内容をテキストで■
どうもプロダクトハックです。こんにちは、デザイナーのスタミです。月曜日と金曜日は私角南がいろいろなプロダクトについて時にはライトに、時にはマニアックに発信したり、全然関係ない雑談をしたりしています。前回はデザインコラボツールのfigmaの唯一嫌いなところについてお話したんですけども、今回はトレイアウトをいつ組むかについてお話したいと思います。
figmaを使おう大きなメリットの一つとして、このAutoLayoutという機能があるんですが、ちょっとねデザイナー以外の方だと何それ美味しいのって感じかもしれないです。どういう機能かというと従来のデザインツールって要素の大きさを数字でかっちり指定していたと思います。
それに対して、このAutoLayoutはここを均等に並べるとか、要素の大きさは可変にしておくんだけども、要素の周りの余白の大きさはこのサイズで固定するとか、実装上でやっているような、いわゆる制約で指定できる機能なんですよね。
なので枠の大きさを日を変えたりとかしても、その大きさについてくるような感じで作れたりします。デザインの段階、デザインファイル上で、レスポンシブ対応しているかのような感じで捉えてもらえるとわかりやすいのかなと思いました。
で、これをいつ組むかっていう話ですが私は、ワイヤーフレームとかラフの段階で組んでおくのが賢いと思ってます。ちょっとやっぱり手間のかかる作業なので、どうしても後でちゃんとデザインするときに雲って思ってしまいがちなんですけど、私もねよく先送りにしたりしてしまっているんですけど。
もう本当に常々これを後回しにして、デザイン組みながらこの作業を、手で何度もやってて面倒だなとかって感じたところからAutoLayoutをだんだん組んでいくっていう感じにしてしまっていて、その時点で面倒くさい思いってしてしまっているんですよねそれが。
結構もったいないなと思っていて。もうねひどいときはトレーアウトを組んだことによる恩恵を受けるのが、自分はほとんどなくて、別の機会にその件は一旦終わって別の機会に同じ箇所に手を加える人が恩恵を受けるみたいな。
感じになっちゃってることあるなと思っています。しかもね別の機会に同じ箇所に手を加える人は全然別のデザインに置き換えるなんてこともざらにあるので、結構ね生まれてきた意味がほとんどなかったAutoLayoutたちがね。
私のところだけじゃなくって、世の中割とあるんじゃないかって思ってます。Twitterで軽くアンケートを取ってみましたら、回答者の母数がね何しろ10人だったのですごい少なくて申し訳ないんですけど、住人の方ありがとうございました。
住人なので何とも言えませんが、ワイヤーとかラフの段階で組むと答えた人が5人、デザインを決めていく過程でだんだんとと答えた人が4人。で、仕上げの段階と答えた人はね、いませんでした。で、残りの1人は回答を見たいだけっていう選択肢を選んでいたので、いいですね。
仕上げの段階って答えた人がいなかった本当に素晴らしい世界だなと思いました。ありがとうございます。まだね全然固まっていないときこそ、自分が一番要素の大きさを変えたりとか、位置を入れ替えてみたりとか全体を俯瞰しながら調整するみたいな作業が多いので、この段階から作業の一つ一つを楽にできた方が絶対いいし、誰かともっとこうした方がいいかなみたいな相談をするときも、その場でポイッて変更できる方がよくないですか。
初手でちょっとの手間を惜しんでしまうと、結果的にその後の作業の全体が足取りが重くなってしまって、結局手間暇かけちゃってるような気がするんですよね。総合的に見ると、後で振り返ると、結果論ですけども。時間かけたいのって本質的にはどういう設計にするかみたいなところを検討することであって、都度こういう本当に作業的なことにいちいち時間をかけたりとか、面倒くさいなとかってちょっと思うことに。
頭のリソースを割いていることすら、もったいないじゃないですか。なのでどうせやるなら後じゃなくて、初手で組むっていうのがやっぱりいいんじゃないかなと思いました。やっている事業とか、現場によって、この辺のワイヤーフレームみたいなものを誰が作るかっていうのも違うと思うんですけど。
初めに組んであると、自分も含めて、後工程の人全員が時短できると思うので、そういう意味でも初めにやってしまうのが、いいですよね。あとは、このAutoLayoutを組む作業にどのくらいその人が慣れているかとかによってハードルがだいぶ違うと思うんですけど。
（この文章は https://www.notta.ai/ にて文字起こし後、重要な箇所のみ修正を入れたものです。）

■参考リンク■
FigmaのAutoLayout解説動画： https://youtu.be/bPDcUlv7C7A
今回Twitterで取ったアンケート： https://twitter.com/open_starmix/status/1645244531976331264

■ご感想・お便り・リクエスト（ぜひお気軽に！！）■
スタミのTwitterアカウント： https://twitter.com/open_starmix