昨日、とある勉強会に参加しました。
以前、僕が受講していた「フリーランスWebクリエイター育成スクール SLash」では、現在第３期の受講期間中です。
毎週オンラインで「全体講義」が行われるのですが、昨日は卒業生も参加OKということで迷わず参加。

昨日のテーマは「Figma」でした。
Figmaとは、数年前からよく使われているデザインソフトですね。
基礎編と応用編の二つに分かれていましたが、僕は基礎編の方へ参加しました。

コンポーネントとインスタンス

いろいろと学んだことはあるのですが、全部書くと膨大な量になってしまうので…笑

その中で一つ、「コンポーネント」と「インスタンス」をうまく使うとめっちゃ便利、という話を書いていきたいと思います。

ふだんは聞かないワードなので、Figmaを触らない人にとってはちょっとイメージが湧きづらいとは思いますが…

まず、それらを使う目的としては、
「めんどくさい作業を効率化すること」
というのがあります。

例えばWebサイトにおいて、同じボタンが数箇所に存在しているパターンがあるかと思います。
「お問い合わせ」とか「登録する」とか、そんなやつですね。

それら共通のパーツについて、後でデザインを変更することになった場合、いちいち全部変更するのはめんどくさい！
だから、一つを変更したら他のやつも同時に変更できたら便利だよね！
という発想ですね。

この際、コンポーネントとインスタンスという機能を使います。
コンポーネントというのは、大元のパーツ。
インスタンスというのは、その大元のパーツを複製したもの。
昨日の勉強会では、「親子」に例えて説明されていました。

メインコンポーネントが「お母さん」、インスタンスが「子ども」。
お母さんのデザインを変えると、子どもはお利口さんなのでお母さんと一緒のデザインに変更される、という感じです。
子どもが不良だったら？というツッコミはなしで。笑

汎用性の高いデザインを作成するために

このように、
「後でデザインを変更する際に、なるべく効率的に作業できるようにするにはどうしたらいいか？」
ということを考えながら汎用性の高いデザインを作ることが重要になってきます。

作業が楽になるだけではなく、変更し忘れることや一部だけレイアウトがずれてしまうなどのミスを無くせる、というメリットもあります。

なので、デザインを進めながら常に
「どうやったら汎用性の高いデザインを作れるかな？」
と考えることが大事ですね。

経験と勘が必要

とはいえ、最初から完璧に汎用性の高いデザインを作れるわけではありません。
実際に手を動かして経験を積む中で、少しづつ先を読めるようになってくるのだと思います。

昨日の勉強会では、こんなことが話されていました。
「コーディングについては、既存サイトの改修作業をやることで成長できます。
どんなところが変更されるパターンが多いのか、というのがわかってくるようになります。
そうすると、デザインを作る際にも汎用性の高いデザインを作れるようになってくると思います。」

デザインだけではなくコーディングの経験も積むことで、結果的にデザインにも活きてくるんですね。

今回の話は、デザインに限らずふだんの仕事にも通じるところがあると思いました。
常に先を読んで、
「きっとこうなるから、今この行動をした方が良さそうだな」
と、先回りして動けるようになりたいですね。

最後までお読みいただき、ありがとうございました。