こんにちは、ひよこベアです。
最近、Figmaの機能追加が色々あってなかなか追いつけていません……
そんなわけで、いい機会ですのでその中の1つ「Figma Sites」をちょっとお試ししてみることにしました。
Figma Sitesについて
Figma Sitesについて、私自身も詳しくはないため、ChatGPTに聞いてみました。
これまでのFigmaが持つ共同編集やプロトタイピングの強みに加えて、ノーコードでそのままWebサイトを公開できるようになりました。テンプレートやコンポーネントを活用して効率的にページを構築でき、シンプルなランディングページやブランドサイトなら短時間で公開可能です。
Figma Sitesの主な機能
- デザインから公開まで一気通貫
コーディングなしでデザインをそのままWebサイトとして公開可能- レスポンシブ対応
画面サイズに合わせて自動調整、複数ブレークポイントの編集もサポート- テンプレート＆ブロック
ナビゲーションやフッターなどの共通要素をあらかじめ利用可能- デザイン資産の再利用
既存のFigmaコンポーネントやフレームをそのまま流用できる- アニメーション・インタラクション
ホバーやスクロールエフェクトなどを簡単に追加可能- 公開・管理機能
「Publish」で即座にURL発行、組織向けの公開管理機能も搭載こんな場面で活躍
新製品のランディングページ、採用ページ、イベント特設サイトなど、短期間で公開したい小規模サイトに最適です。また、ユーザーテスト用のプロトタイプや、社内向け資料サイトとしても活用できます。
実際に開いてテンプレートを見てみると、コンポーネントやスタイルがまとめられていたり、表示デバイスごとのデザインが並べられているのでデザインの全体像がわかりやすく、勉強になりそうだなというのが第一印象です。
また、Figmaのコンポーネントやバリアントは慣れるまで理解するのが難しい方もいるかと思いますが、すでに出来上がっているので、初心者でもコンポーネントやバリアントの仕組みを理解しやすくなりそうだなと思いました。
ぱっと見の印象も良かったのですが、実際に触ってみるとさらに使いやすいポイントを発見したので、いくつか紹介します。
使いやすいポイント
スタイルが詳細に設定できる
テンプレート内で使われているフォントや色のスタイルがすでに設定されているので、その設定をいじるだけで簡単に全体の雰囲気を変えることができます。また、ページ全体の設定があるので、実際どのくらいの文字サイズ設定や色の設定が必要なのか、というのが分かりやすくなっています。
スタイル自体は、Figmaデザインの方にもある機能なのですが、Sitesの方ではデスクトップ・タブレット・スマートフォンのブレイクポイントに応じてそれぞれ設定を変えることができるんです。
デザインの方では、スタイルに加えてバリアブルで数字の設定をすることでそれぞれのフォントサイズを設定していたのですが、スタイルで設定も変更もできるのでかなり楽になっています。
これが画期的すぎて、Figmaデザインの方にも取り入れていただきたい……
同じパーツをまとめて編集できる
テンプレートでは、デスクトップ・タブレット・スマートフォン用のアートボードに、それぞれ対応したデザインが入っています。
テンプレートの状態からテキストを変えようとして、デスクトップアートボード内の該当部分を選択して変更すると、他ブレイクポイントの同じ部分も同時に変更してくれます。
これはデスクトップが「プライマリーブレイクポイント」という設定になっていて、すべてのデザインの軸になってくれているからです。
Figmaデザインの方にも「マッチングレイヤー」という機能はあるのですが、マッチングレイヤーを探すステップが必要だったり、デザイン階層が全く同一でないと機能しなくなってしまいます。
その点、Sitesはテンプレートとして完成されているため、すべてのパーツがすでにマッチングされている状態になっていて、本文などのテキスト修正でもすべてのデザインが変更できて修正ミスがなくなります。
テキスト変更だけでなく、アニメーションやインタラクション（Figmaデザインでのプロトタイプ）、後述するアクセシビリティもマッチングされていて、作業の大幅な時短になりそうです。
ただし、コンポーネントとバリアントの関係と同じように、プライマリーブレイクポイント以外のアートボードで修正してしまうと、そのパーツだけ独立してしまい共通ではなくなってしまうため注意が必要です。
HTMLタグを指定できる
これは作ったページを実際に公開できる有償版向けになるのですが、アクセシビリティという機能が追加されており、これを設定しておくことで実装されたページのHTMLマークアップがより正確なものになります。
現在はテキストに対して指定できるp, h1, h2, h3, h4, h5, h6 と、フレームなどに指定できるdiv, section, article, aside, nav, header, footer, main, button, figure, ol, ulがありますが、すべてのタグがあるわけではないので、AIと共にこれからさらに進化してほしいですね。
Figmaをもっと楽しむために
いかがでしたでしょうか？
Figmaは機能の理解が追いついてないのが勿体無いくらい、便利さがどんどん上がっていて驚きです。今回触ってみたSites以外にも、いろんな機能が続々と増えているので、Figmaに置いていかれないようにどんどん使っていこうと思います。
ひよこベアでした。
