Figma Sitesを探る
Figma Sitesは、オープンベータとしてConfig 2025でリリースされました。現在、すべての有料プランで利用可能であり、スタータープランの限定的な体験版も近日提供されます。ベータ版に含まれる内容の詳細はこちらをご覧ください。
Figma Sitesとは?
Figma Sitesを使えば、高品質なWebサイトのデザイン、プロトタイプの作成、公開をすべて1か所で行うことができます。
- あらゆる画面サイズに対応する美しくレスポンシブなレイアウトを作成
- Figma Designで使い慣れたフレーム、オートレイアウト、シェイプ、レスポンシブコンポーネントなどのデザインツールを使用
- Figma DesignとFigma Sitesの間でシームレスにコピーと貼り付けを行う
- マーキースクロール、カスタムカーソル、ホバーエフェクトなどの使いやすいインタラクションとアニメーションで生き生きとしたサイトを作成
- コラボレーターとライブウェブサイトを共有して、アイデアを探求し、使いやすさをテストし、作業を前進させる
ヒント: https://figma.com/site/newをブックマークすると、インスピレーションが湧いたときに、いつでも新しいFigma Sitesファイルを使用できます。
操作方法を探す
左ナビゲーションバーとサイドバー
左ナビゲーションバーは、Figma Sitesのタスクを迅速に切り替えるのに役立ちます。
- ファイル: このビューで構築を行います。ファイルのウェブページとレイヤーの完全なリストを表示し、準備が整ったらサイトを公開できます。
- 挿入: ナビゲーションバー、フッター、ウェブページテンプレート、埋め込みなどの事前構築された要素を追加し、デザインライブラリにアクセスします。
- 検索: デザインの要素をすばやく発見します。
- 作成: コードレイヤーを使用してアイデアとデザインに命を吹き込みます。(近日公開）
- CMS: サイトのコンテンツを作成し、管理します。（近日公開！）
- 設定:ウェブサイトの設定を更新して、検索エンジンがコンテンツを理解しやすくし、アクセシビリティを向上させ、ユーザーが探しているものを見つけやすくします。
ツールバー
サイトの作成に必要なすべてのツールはツールバーに揃っています。
- ウェブページ、フレーム、画像、テキスト、シェイプなどのオブジェクトを追加する
- Figma AIツールにアクセスするには、アクションメニューを使用します。
ヒント: Figma Designでデザインをした経験があるなら、Figma Sitesでの作業は非常に馴染み深く感じるでしょう。Figma Sitesで利用可能なデザインツールのリストをご覧ください。
右サイドバー
右サイドバーでは、キャンバスやウェブページのデザイン要素の外観と雰囲気をコントロールします。
キャンバスでオブジェクトを選択すると、そのプロパティは [デザイン] タブに表示されます。
編集のでも閲覧のみでも、ファイルの権限によって右サイドバーに表示される内容や操作できる内容が決定します。
アニメーション、トランジション、ビジュアルエフェクトを追加して、サイトを生き生きとさせます。
ボタンの微細なホバーアニメーション、パララックスを用いた奥行きと動きの追加、ユーザーアクションによってトリガーされる興味深いエフェクトなど、インタラクションはウェブページの応答性と活気を向上させるのに役立ちます。
ウェブサイトを構築する
既存のデザインから始める
ゼロから始めたくない場合でも、Figma Siteを先取りする方法はいくつかあります。
Figma Designからのコピーと貼り付け
デザインを取得してウェブページに直接コピーして貼り付けるか、既存の デザインライブラリ からアクセスします。
ブロックを使ったサイトの構築
既成のブロック（ランディングページ、ヘッダー、フッター、カスタマイズ可能なセクションなど）をドラッグアンドドロップして、すぐにサイトを組み立てることができます。
レスポンシブに構築する
Figma Sitesを使用すると、異なる画面サイズに合わせて完璧なピクセルのレイアウトを作成する場合に多くの制御が可能になります。
Webページを追加
新しいサイトを作成すると、グレーのコンテナが表示されます。これはWebページです。各Webページには、名前、プレビュー用のボタン、新しいブレークポイントを追加する方法があります。
ツールバーのWebページアイコンをクリックして、新しいWebページを追加します。
ブレークポイントを追加
ブレークポイントは、異なる画面サイズのニーズに応じてウェブページのレイアウトを変更するための特定の画面幅を定義します。
追加のブレークポイントを設定することで、Webページの外観や操作感を微調整し、デバイス間でのユーザー体験を最適化できます。
ブレークポイント全体を編集
Webページに複数のブレークポイントがある場合、すべてのブレークポイントでオブジェクトを同時に追加、選択、編集できます。
作業のプレビュー
準備が整ったら、サイトをプレビューして、ユーザーの体験を実際に体験してみましょう。最初に公開しなくてもアニメーション、インタラクション、応答性を迅速に確認できる優れた方法です。任意のウェブページで [プレビュー]アイコンをタップするか、Shift Space キーボードショートカットを押すだけでインラインプレビューが開きます。