この記事を読むとできるようになること
Figma Sitesに興味が持てる
Figma Sitesに興味がある人はもっと興味が持てる
Figma Sitesに興味がある人はもっともっと興味が持てる！！
ズバリ！この散文を最後まで読んで、さらにはシリーズ化する予定でもあるから、それもすべて読む。
すると！あなたはFigma Sitesのことに詳しくなり、実務でも使いこなし、Webサイト制作の界隈で一目置かれる存在になれる！可能性がある。
そして、既にこのメディアでも紹介ずみである拙著『デザインからサイト構築まで FigmaだけでWeb制作』だけでは伝えられなかったこと、語られなかったことも大いに伝えていきたい。
とはいえ一度に多くをお伝えすることは無理がある。
今回は「Figma Sitesを俺もいじってみようかなぁ」という気持ちにあなたをさせる、というところを目的として書いていく。
はじめに
と、その前に。
まずは「ありがとう」と言いたい。
だれに？
それはもちろん、いまこの散文を呼んでくれているあなたにであるし、僕たちの拙著である『デザインからサイト構築まで FigmaだけでWeb制作』を手に取ってくれた方、いまから買うぞ！と心に決めている方、そして制作にあたり支えてくれた人たちすべてに、である。
『デザインからサイト構築まで FigmaだけでWeb制作』に対する思いはこちらから！
なんならFigmaを愛するすべての人、いや、これからFigmaを触ってみたいな、というあなたにだって感謝したい。
Figma Sitesについて思うこと
僕、小泉は拙著の中で『Chapter 4 Figma Sitesで制作から公開設定まで』という部分を担当した。これからに伝えようとするFigmaの機能の1つ、まさにその部分である。
書籍はこちら
↑こちらからご購入できますので是非！
そもそもFigma Sitesとはなんなのか？
ノーコードでWeb制作ができるツールですよ、と、くくるのは簡単である。
しかし、本当にそれでいいのだろうか。
たぶんそんな簡単なものではないのではないかと感じている。 Figmaというツールのエコシステムのなかで今後Web制作の部分を担うためにできたツールという位置づけなのではないだろうか。
先日開催されたでSchema 2025での発表をみているとそう思えるふしがある。 Figma DesignはよりUI/UXよりの利用用途に最適化していくのではないか。 そうなった時のWebデザインのためのツールがFigma Sitesなのでないかと。
Figma Sitesと同種のツールとしては先行しているFramerをもFigmaという大きな仕組みを使い凌駕しようとしている。 なんならあのWordPressさえも見据えているかもしれない、そんな気にさせるツールじゃないのか？
その辺りの僕の個人的思いと邪推が混ざった想像は機会があれば話すとして、Figma Sitesについてである。
デザイナー、特にWebやUI/UXに関わるデザイナーであれば知らない人はいないのではないかというのがFigma、特に、Figma Designである。
その感触、使い心地をそのままに、デザインカンプ制作する感覚でWebサイトを公開してしまおう、というツールになる。
Figma Sitesはノーコードツール？
「コード書かないでもいいの！？」「デザインはできるけどコーディングは苦手で…」という声が聞こえてきそうな話であり、その声の救世主になりうるのがFigma Sitesである。
もちろん、これまでにノーコード・ローコードといわれる方法でWebサイトを構築するツールはいくつも世に出ている。
前述のFramerは日本での知名度はいまいちだが、世界をみれば使用例も多い。 StudioやWixなどもある。 WordPressにしても、いまのブロックテーマの進化の方向はそっちを向いている。
ではその中でFigmaSitesが他と圧倒的に違うのは何か、というと話が戻る感じがしてしまい恐縮なのだが、Figmaというエコシステムそのものにある。
普段みんなデザインするのに使っているよね？というくらいに、Webデザインではすっかり1強であるFigma Design。
デザイナー以外の人間でも必要となるシーンが多いスライド制作のためのツール、Figma Slide。
チームでのコラボレーションに欠かせないホワイトボードツールのFigJam。（あのGoogle WorkSpaceのホワイトボードツールもFigJamになるらしい）
AIでアプリ開発などが行えるFigma MakeやSNS画像やバナー制作に特化しているFigma Buzz。
こういったツール群がFigmaというシステムである。
もともとはデザインツールだったのに、すごいな、としか思えないわけだけど。
こうしてみるとFigmaというツールはデザイン視点を中心にビジネス全域を対象としたものになっているといえる。
そしてその中にあるというのがFigma Sitesの一番の特徴だといえる。
あ、結局また個人的な思いのたけを結構な濃さで書いてしまった…。
Figma Sitesについて解説、その前に
さて、前述の拙著『デザインからサイト構築まで FigmaだけでWeb制作』のFigma Sitesの使い方ではFigma Designで作成したデザインファイルを、Figma Sitesに落とし込み、Web上に公開するという手法をメインに取り上げている。
これはこれで1つの使い方である。
これまでFigmaで積み上げてきた資産を使い、Figma SitesでWeb公開を目指すということにおいては1番わかりやすく学びやすい。
Figma Sites自体がこの散文を書いている時点でもベータ版であり、こっそりとUIなどが修正されていることもある状態の新しい機能であるため、世の中にノウハウというものがたまっていない。
前著を執筆したのは本の発売からみると少し期間が空いている。
その間にも常にFigma Sitesを使用していくことで自分自身で得た気付きもある。
いま知っておきたいFigma Sitesのコツ
ということでここでは、いま、このときに感じている、自分なりのコツや使い方というのを伝えたい。
- Figma Sitesで最初から作る
- プライマリーブレークポイントがすべての起点
- モバイルファーストでの制作がおすすめ
- パーツのコンポーネント化が後の編集しやすさにつながる
- オートレイアウトや制約を最大限活用
- テキストスタイルを最初に設定
- バリアントの活用
- 設計がすべて
の８つをまずは上げたい。
盛り上がってきたところなんだけど、文章が長くなるので、それぞれの解説は次回「楽しくつくろう！Figma Sitesでサイト構築 8つのコツ」にまわすこととしたい。
また次回以降も
- サイト設計から公開まで – Figma Sitesにおける制作フロー
- やってみせます！実際のサイト制作
- どこまでできる？インタラクション
- デザイナーだけじゃない、チームでつかうFigma Sites
- これからくる！Figma SitesにCMSがある未来
などの記事を掲載予定なのである。
まとめ「 けっきょくFigmaSitesっていいの？」
いいよー。
個人的には将来的な展望も含め、興味が尽きない。
個人での利用ももちろん便利なんだけど、むしろチーム、会社などの組織単位でうまく活用することでWeb制作という部分を効率化できると考えています。
ということで、やはり、いいよー、なのである。
※それなりに癖はあるけどね、という注釈はつけたいが。
Figmaを使い慣れた人であれば、難しいことを考えなければすぐに試すことができるので、先ずは触れてみて欲しい。
それ以外の人でも、無料の範囲でも制作まではできるので、いじってみて、なんなら他のFigmaのツールにも触れてみるのもいいと思われる。
業務でも最近はノンデザイナーの方からFigmaについて相談されることなども増えてきているので、触れてみて損はないはず。
最後に
IMAKEではノンデザイナー、デザイナー問わず、Figmaに関する相談を受け付けています。
「FIgmaSitesの使い方教えて」
「社内にデザイン思考を根付かせたい（FIgmaつかって）」
「いいから一緒に制作しよう」
どんな質問でも受け付けている次第。
お気軽にご相談ください！！
この記事を書いた人
sns
