Figma Sitesの使い方と活用ポイント：デザイナー目線レビュー

自己紹介と今回の議題

始めまして！私はアクトビに所属するデザイナーの渡邊です。
アクトビのZennブログは主に

• 「アクトビで働くエンジニアとデザイナーがそれぞれ持つ専門性」

をたくさん発信していこうという目的のもと、いろんな社員さんが書いています。
他の社員さんのブログもためになることがたくさん書いてあると思うので、ぜひ覗いてみてください！

今回担当の私が議題としてお話ししたいのは『Figma Sites』についてです。

Figma Sitesって？

Figmaが、今年4月発表したデザインからウェブサイト公開までを全て完結させることができる機能が『Figma Sites』です。
FigmaSites公式紹介ページ

デザインから公開、管理までFigmaひとつで完結できるのは本当に驚きです。デザイナーの立場から見ると、作業の流れがますますシームレスになってきていると実感します。

Figmaは特にアップデートと新機能が追加されるスピードが目まぐるしく、『便利！』と『やめてくれー』の声がアクトビのデザインチームでは飛び交います。

この記事の対象となる方

• デザイナー/web担当者
• スタートアップや小規模事業者の担当者
• ノーコードに興味がある初学者/副業希望者

あくまでもデザイナー目線の記事になります！会社様や、エンジニアさんによっては不都合が十分起こり得るベータ版の段階ですので、今後有用になるかもしれない知識としてお読みいただけると助かります！

使い方ステップ

1. サイトのデザインを作成
   （※Figma SitesはProfessionalプラン以上で利用可能です）

   デザイン作成には主に以下の3つのやり方があります。

   • カスタムドメインの設定
     Figmaのデザインシステムと同じ形で1から作成する場合は、空白のページから始めるといいでしょう。
     

   • 用意されたテンプレートをカスタマイズする
     一枚のページとして全て完成されたテンプレートが用意されています。最初テンプレートを選択して自分好みに変えたり、サービスに合わせて文章を変えることで完成させることも可能です！
     現状のテンプレートは基本的に英語で作成されているため、日本語の表記の変更や日本語に合うレイアウトに変える必要も出てきます。
     

   • パーツごとのテンプレートを組み合わせて作る
     空白のページ、テンプレートのどちらにも使えるのが、パーツごと(ヘッダーのみ、表のみ)のテンプレートになります。画面左にある+のマークを押すと好きなパーツを選択し組み合わせることで一つのサイトを作ることも可能です。
     

2. レスポンシブ対応のデザイン調整
   Figma Sitesの醍醐味はレスポンシブデザインの再現性にあります。FramerやSTUDIOなどといったノーコードサイト制作のサービスもレスポンシブによってデザインや見栄えを組み替えることができますが、FigmaSitesの大きな特徴は『一枚のデザインファイルで全ページのレスポンシブが横並びで見れて調整できる』ということです。

   • PCのサイズでデザインを作ると横に置いていたタブレットやスマホにもデザインが反映されます。
   • スマホだとサイズが大きすぎる文字や画像などはスマホの画面内で個別に変更をかけて調整できます。

   

3. アニメーションやインタラクションの追加
   デザインの見た目が完成したら、ボタンやクリックしたときにどのページにいくか、などのような挙動をつけていきましょう！

   • Interaction(インタラクション)というボタンがDesign(デザイン)の横にあるのでそれを押すことで切り替わり、ボタンやパーツに動きをつけることができます。

   

4. サイトの情報を入力
   サイトを公開するには設定と情報の入力が必要です。

   • 設定の歯車マークを左から選択するとサイトのタイトルやディスクリプションの入力から始まり、FaviconやOGPなども設定可能です。

   

5. サイトを公開しましょう！

   • いよいよ公開です！Publish(公開)のボタンを押すと、誰でも見ることができるサイトとして世に出ます。(ボタン一つでできちゃうの怖すぎる)
     

さらに詳しい作成方法を知りたい方はこちらの動画などもおすすめです！(英語ですが字幕などで追って作れば問題ないです！)↓

メリットは？

• Figmaデザインのそのままを活用して公開することができる
  なんといってもFigmaのデザインをそのままサイト制作に活用できるという一括管理のしやすさは魅力です。既存のFigmaファイルやコンポーネントを流用できるため、デザインと実装の間にギャップが生まれにくいです。

• カスタムドメインの設定
  独自のドメインを設定することが可能です。

【カスタムドメインって？の方へ】
websiteには独自のURLを自分で設定できるというものがあります=カスタムできるURLのことです。つまり、google.comがいいなーとか自分のブランド名がいいなーという会社名+.comや、ブランド名.comなどにすることができるということです。

• レスポンシブ
  実際のレスポンシブの見栄えが確認できる+デザインファイル内で横一列に並んで見える。これ結構ありがたいです。なぜなら、PCでかけたデザインの変更がスマホサイズでもかかっているかとか、ずれがないかを一目で確認できてしまうからです。

• アニメーションやインタラクション設定
  ホバーやクリック時の動き、ページ遷移アニメーションなどもノーコードで設定できます。

• 即時公開・URL発行が可能
  作ったサイトはワンクリックで公開でき、すぐにURLが発行されます。サイトのプレビューや共有も簡単です。

• カスタムコードの使用が可能
  高度なことはできない場合もありますが、簡単な入力は可能なので、画像やサービスを埋め込んだり、デザインの幅をさらに広げることもできます。
  (※ベータ版の適用範囲に関しては個人でのご確認をお願いします。)

• タグ属性を決められる
  こちらは実装側に寄った話になるのですが、タグ属性を与えることができます。
  ※どの程度細かく設定できるかは今後のアップデートで変わる可能性があります。

逆にデメリットは？

• 独自のJavaScriptや複雑なインタラクション、アニメーションの追加は難しい
  ※しゅってやってバーンして、くるっとしてポイ！みたいなアニメーションを頼まれた場合はおすすめしない方が良いかもしれません。
• 外部サービスとの連携もかなり限られている
  複雑な要求や、管理だと他サービスとの連携が余儀なくされますが、対応できないものも多いので気をつけましょう。
• 細かなSEO対策には不向き
  最低限のSEO設定（タイトル、ディスクリプション、OGPなど)は可能なのですが、詳細なSEO最適化のための設定には限界があります。
• 現状CMS機能はまだない(今後追加予定)
  お問い合わせやお知らせなどで使用されることの多いCMS機能はまだ今の時点では用意がありません。
  ※お問い合わせはGoogle Formを上手く活用することで管理ができるそうです。

誰がどう使えばいい？

今はまだベータ版です。Figmaの今後のアップデートに期待しつつ、現時点では次のような使い方がおすすめです。

• デザイナー/web担当者の場合…
  すでに業務上のデザインのためにFigmaを使用している方も多いと思います。今のうちに慣れておいて、より良い機能にFigma Sitesが刷新されたタイミングでいつでも加速できるように準備しておくというのが無難そうです。今後が楽しみですね。

• スタートアップや小規模事業者の担当者
  意外と需要がありそうなパイがこのスタートアップ、小規模事業者の「え、デザイン？え、サイト？いや間に合わせでいいけど？でも誰に聞けばいいんだ…」状態の方。

  • Figma触れそうなら、Professional契約して、LPのデザインテンプレート選んで日本語入れたい文章当てはめていって作っていきましょう。
  • それが無理そうな方は、まず『Figmaデザインが得意なデザイナー』を見つけて作成をお願いする方法もありです。慣れた人なら綺麗に作ってくれます。

• ノーコードに興味がある初学者/副業希望者
  そもそも色々デザインツールやコーディング、ノーコードのことも知りたいし触ってみたいんだ！という人や、デザイナー駆け出しでポートフォリオはノーコードで作りたくて…の人はじゃんじゃん触って練習してみてください。きっとここでの練習は役に立つと思います。

まとめ

いろいろなツールを使いこなせると、デザイナーとしての幅も広がるなと日々感じています。
今回はFigma Sites(ベータ版)をご紹介し、これを特に使いこなせると強い！と思う対象者さんに向けて発信してみました！
デザインがわかる人もわからない人も、毛嫌いせず一度試してみてください〜
あと、Figmaは本当に変化が激しいので、一年後にはこのFigma Sitesもいい意味で豹変しているかもしれないので期待しておきます。
以上！ここまでお読みいただきありがとうございました。読み疲れて癒しが欲しい方はこちら

良い1日をお過ごしください！