Figma Sitesのメリットデメリット

さて、前回の「わくわくがとまらない！Figmaの新機能『Figma Sites』とは」からの続きということで、「”コツ”を教えてくれるんじゃないのかい？」と思う諸兄諸姉もいらっしゃるのではないか。

メリット

• デザイナーがデザインでの課題解決に注力しやすい
• デザインからサイト管理まで同じ場所ででき、そのまま公開までできる
• ノーコードツールのようにコーディングスキルがないデザイナーやディレクターでもWebサイトの編集が可能
• Web上にそのまま公開できるので、クライアントの確認がスムーズで意思の疎通が行ないやすい
• 複数デバイスの画面が同時に編集されるので、オートレイアウトなどの理解がしやすく、レスポンシブ対応がしやすい

デメリット

• プロトタイピングができない（そもそも必要ないけど）
• 高度なアニメーションなども作成しにくい（コードレイヤーを使わない場合）
• あくまでWebサイトを制作・公開するツールなのでアプリやサービスのUI設計には向かない
• デザインシステムの設計にも向かない
• Figmaの無料プランでは公開できない＆公開前提で複数シートで利用するのであればその分の課金が必要

悩ましい、Figma Sitesの立ち位置

どうしてもその性質上、コーディングの工数が削減される！制作スピードが向上する！と思われがちだが…HTMLやCSSをかくコーディングは確かなくなる。

けれども、その分初期にしっかりとした設計をしなければ効果的なWebサイトの作成は厳しいかなと感じる。

ライク・ア・ローリングストーン、設計なしでは転がる石のように落ちていく、良くないほうに、である。

工数削減ではなく、制作チーム内、制作サイドとクライアントを効率的につなぐ道具なんだという判断で使用するのがいいのではないだろうか。

例えばフリーランスが小規模の案件を一人で回す、なんてときはそこまで考えないでも十分強力なツールとなりえるのだけど。

いま知っておきたいFigma Sitesのコツ part2

さて、前回の続きである。

以下の8つがコツですよ、というところまでお伝えしたと思う。

1. Figma Sitesで最初から作る
2. プライマリーブレークポイントがすべての起点
3. モバイルファーストでの制作がおすすめ
4. パーツのコンポーネント化が後の編集しやすさにつながる
5. オートレイアウトや制約を最大限活用
6. テキストスタイルを最初に設定
7. バリアントの活用
8. 設計がすべて

それぞれについて話していくとする。

Figma Sitesで最初から作る

そもそも少しでもFigma Sitesで公開する可能性があるのであれば、最初からFigma Sitesで制作としていくいことを僕はお勧めしている。

なんなら社内でもそのようにするようにしている。

Figma DesignのデザインファイルをFigma Sitesに簡単にコピーできるのと同じように、Figma SitesでデザインしたものもFigma Designにコピーして使うことができる。

あとから「Figma Sites使うのやーめたっ！」となっても無駄にならないというわけである。

プライマリーブレークポイントがすべての起点

Figma Sitesの考え方にプライマリーブレークポイントというものがある。

レスポンシブWebデザインで使われるブレークポイント、デスクトップやモバイルなどので座椅子ごとの画面幅に合わせる、アレです。

Figma Sitesでは各ページ毎に複数のブレークポイントを設定できる。

その中で起点となるのがプライマリーブレークポイント。

プライマリーブレークポイントに配置したパーツは他のブレークポイントにも自動で配置されるし、何か設定した場合はもちろん他のブレークポイントでも反映される。

プライマリー以外のブレークポイントでの操作は、他のブレークポイントでは反映されない。

この特性を理解していないと後々の制作に大きな影響が出るのでぜひ知って欲しい。

モバイルファーストでの制作がベスト

プライマリーブレークポイントが起点になるのであればスタートはシンプルなほうが構築しやすい。

ということでやはりモバイルファーストで作っていくのがよろしかろうと思うわけです。

パーツのコンポーネント化が後の編集しやすさにつながる

これは後で説明するバリアントの話にも通じるのだけれど、できるだけ初手でコンポーネントにして構築していくのがよき。

それぞれで作るとブレークポイント数、ページ数が増えるほど、編集するものが増えていく。 ならばコンポーネント化しておくことで効率よく作業できるようになってくる。

何ページも作ってから「これコンポーネントにしよう」とか思ってもそれもそれで手間なのである。

オートレイアウトや制約を最大限活用

レスポンシブ対応のための、その1、である。

Figmaでのデザインの基本ともいえるオートレイアウトと制約はしっかりと活用してほしい。

「オートレイアウトよくわかんないんだよな」など嘆く諸兄諸姉もFigma Sitesの場合、プライマリーで操作すれば他のブレークポイントにも自動で反映されるので、状態を確認しやすくきっとわかりやすいはずである。

テキストスタイルを最初に設定

レスポンシブ対応のための、その2！

Figma Sitesのテキストスタイルにはブレークポイントという設定項目がある。画面幅ごとにフォントサイズなどを設定しておけるので活用すべきである。

CSSのclamp関数のような機能はないので、各ブレークポイントで設定できるのはありがたい。

となると、タブレット用のデザインを作成する予定がなくとも、文字の可読性を考えると、タブレットでの設定も欲しくなるものだったりもする。

なんにしてもテキストスタイルはジャンプ率などの設計を先に行いサイト構築の前に作成しておくべきである。

バリアントの活用

レスポンシブ対応のための、その3、であり、どうしようもないときの救いの手でもある。

レスポンシブ対応のための、その1と2、だけでは対応しきれない場面も多くあるので、その時はバリアントを活用してほしい。

公式のドキュメントでもレスポンシブ対応でバリアントに紹介されているぐらいなのである。

ちなみに、プロパティの値をdesktop、tablet、mobileなどとしておくと、勝手に対象のブレークポイントに設定してくれる優れものな気づかいな機能もついている。

設計がすべて

ここまでのコツを知るにつれて、「あれ？いつもみたいにデザイン作るだけじゃダメかも？」と思ったあなたは、なかなか鋭い。

その考えはある意味あたっている。というのもこの辺りは人にもよるところでもあるからだ。デザインするときに設計やコードに気を使う人もいればそうでない人もいるからである。

Figma Sitesでは要素の配置やレイヤー構造、命名規則、セマンティックWebなどの基本的考え方がないと、最終的に修正、更新、運用などがしにくいWebサイトが出来上がる。サイト規模にもよるけど。

この辺りはデザインの知識だけではなく、コーディングの基礎知識などがあるほうが理解しやすい部分かもしれない。

アクセシビリティやSEOやページ高速化などは最低限のことしかできないため、より設計が大事になるのではないかということもある。

そして、現在は階層構造が2階層までしかできないことにも、注意！なのである。

まとめ

今回はFigma SitesでのWebサイト構築における”コツ”をお伝えした。

これらを気にして作業してもらえば、きっともっとずっと、うまく構築できるのではないだろうか。

再三、話に上がっているが新機能でありベータ版である。 故にまだベストプラクティスは暗中模索なわけで、今後も「こうしたほうがええやん」というものが見つかればお伝えしていきたい。 逆に、これはやっぱり駄目だったとかも伝えていきたい。

兎にも角にも、プライマリーブレークポイント、テキストスタイル、バリアント、あたりは心にしっかりと刻んでもらいたいのである。

前回も書いたが次回以降も

• サイト設計から公開まで – Figma Sitesにおける制作フロー
• やってみせます！実際のサイト制作
• どこまでできる？インタラクション
• デザイナーだけじゃない、チームでつかうFigma Sites
• これからくる！Figma SitesにCMSがある未来

などの記事を掲載できたらと思っている所存なので、楽しみに待っててほしい。

最後に

IMAKEではノンデザイナー、デザイナー問わず、Figmaに関する相談を受け付けています。

「FIgmaSitesの使い方教えて」

「社内にデザイン思考を根付かせたい（FIgmaつかって）」

「いいから一緒に制作しよう」

どんな質問でも受け付けている次第。

お気軽にご相談ください！！

書籍はこちら

デザインからサイト構築まで FigmaだけでWeb制作

↑こちらからご購入できますので是非！