10sec Tips

今年のFigmaの大規模アップデートで追加されたFigma Sitesは、Webサイト制作をFigma上で完結できる機能です。コードは不要で、デザイン→サイト公開をこれ1つでできてしまいます。

Figma Sitesの概要

Figmaで直接Webサイトをデザイン・公開できるサービス

Figma Sitesは、デザインツール上でそのままWebサイトを作成・公開できる機能。コーディング作業を行うことなく、Figmaだけで完結します。

Figma側で用意しているテンプレートも使用可能なので、さくっと構築することも可能です。

コード不要でデザインそのままのサイトを立ち上げ

作成したデザインをWebに最適化して自動的にHTML/CSSに変換。HTMLやCSSの知識がなくても、完成したデザインをそのまま公開できます。

オートレイアウトを活用すれば各デバイスへのレスポンシブ対応が自動的に行われます。

ページ構造やナビゲーションをビジュアルで編集

ページの階層構造やリンク設定、ナビゲーションの編集なども、Figma上で直感的に操作できます。

ワンクリックで公開可能

ページ公開やドメイン設定もFigma内で設定可能。カスタムドメインの設定も可能です。

既存のFigmaデザイン資産をそのまま活用

すでにFigmaデザインで作成したUIやコンポーネントを再利用できるので、デザインからWeb公開までをシームレスにつなげられます。

実際に作ってみた

１．新規作成

今回はテンプレートから作ってみました。

任意のテンプレートを選択すると、キャンバスにコンポーネントやページが表示されるので、これを元にデザインを調整していきます。

※1から作成したい場合は空のサイトを選択してください。

２．デザイン作成

スタイルを調整したり、足りないコンポーネントを追加したり、プレビューを見ながらレスポンシブ対応ができているかを確認しながらデザインを作ります。

「挿入」から用意されたパーツやGoogle Map、Youtubeの埋め込みもできます。

また、Figma Makeを利用して、コメントフォームも作成して配置してみました（動きはしますがコメントは残せません）。

プレビューでのレスポンシブ確認がFigma デザインより使いやすい！

配置したパーツのタグも設定可能

３．インタラクションを設定

インタラクションを設定してページ同士を繋げたり、挙動の調整をします。

Figmaデザインでは選べないインタラクションも用意されてました。

４．公開準備

左パネルの「公開」ボタンを押して公開の準備をします。

「課題」項目に公開にあたって作りの不備や修正点が表示されるので、整えていきます。

５．公開、サイト設定

「公開」ボタンを押したら公開完了です。

私はサイト設定に気づかず先に公開してしまったのですが、サイト設定は後からでも調整できました。

ファビコンの設定、パスワード設定などはここから設定可能です。

※ドメインの編集は公開後にのみ可能となります。

できないこと

CMS機能

現時点ではCMS機能はないので、更新性が高いコンテンツには向いていません。

機能的な要素

Figma Makeで作ったけど使えなかったコメントフォームや、問い合わせ、検索、絞り込み、ログイン等は使えません。

このサイトの記事カテゴリの切り替えも手動で無理やり作ってます。

現時点で向いているのは静的なページやLP、小規模で簡易なサイトかなと思います。

詳細なSEO設定

最低限のSEO設定はできますが、詳細な設定は限界があるようです。

リッチな動き

インタラクションでアニメーション：ディゾルブを設定していたものがありましたが、サイト公開時のチェックで弾かれてしまいました。まだ多くを試せてはいませんが、リッチな動きをさせたいサイトには向かないかもしれません。