STUDIO＋Figma

はじめに

Figmaを触りだして数ヶ月、STUDIOと連携できるようなのでそれについての備忘録。FigmaからSTUDIOに書き出してそのままウェブサイトになったらサイト制作がラクになるのかどうなのか。

STUDIOとは

Webサイトをノーコードで制作できるサービス。

メリット

1. コーディングはほぼ不要なので制作コストを減らせる

2. 無料テンプレートのデザイン完成度が高い

デメリット

1. デザインに制限があり、細かなデザイン微調整が難しい場合も

2. 複雑なアニメーションは不可

3. アクセス制限ができない

4. ローカルバックアップ（データエクスポート）やバージョン管理の機能がない

5. STUDIOのサービスに何かあった場合（サービス終了とか）に、WEBサイトを別のサーバーに移すことができない

6. 1サイトにつき1つのライセンスが必要（約12,000円～／年）

7. 編集に若干のコーディング知識は必要

8. 無料テンプレートの数が少ない（現在約25個）

Figmaとの連携

操作感

1. Figmaでの作り方にもよるが、STUDIO側でインポートした際に崩れが発生

2. ある程度の調整は想定内だが、STUDIOの操作感もクセがあり、Adobe系ソフトのような操作感ではないため微調整でも思うようにはいかない。慣れが必要。

3. まずはSTUDIOの仕様に配慮した構成でFigmaコンテンツを制作することが重要。

4. 凝ったレイアウトには不向き。

5. ページ単位での一括取り込みは容量的に厳しく、かつ調整が複雑になるのでセクションごとに都度取り込んでSTUDIO上で調整、という繰り返しが現実的。

サイト公開

1. ノーコードなので、STUDIOで取り込んだ後、htmlなどをエクスポートするわけではなく、webサーバに直接公開となる。

2. 無料プランの場合、独自ドメインでの公開は不可で、有料プランでのみwebサーバのDNSをSTUDIO側に向けることで可能に。

主な用途

以下のような要件のサイトが考えられる。
全て満たす案件で、かつ、FigmaおよびSTUDIOの操作に慣れるほど数をこなしていけば、通常コーディングに比べてコストメリットは出てくるかも。

1. 費用を極力抑えたい

2. 商品のLP、キャンペーンページのようなシンプルレイアウトの1ページ構成

3. 動きはほぼ無し

4. 公開後に大きな更新がそれほど発生しない

5. webサーバを契約したくない、もしくは公開ドメイン名の希望はない
   ※公開先URL：https://〇〇〇〇〇.studio.site
   ※独自ドメインの場合はwebサーバパネルへのアクセス権限が必要

「既存サイトをSTUDIOに変換」するサービス展開を検討

面倒な最初の設計を対応。以降の運用はクライアント対応。

メリット

1. ノーコードベースにより直感的な操作によりクライアント担当者が自分で更新できるため、スピーディーな更新が可能。

2. 更新費がかからない。STUDIOの基本利用料のみ。

3. STUDIO操作の慣れが必要だが、学習コストは低そう。

デメリット

大規模サイトには向かない（一から作り直す方が効率的）

---

参考サイト

Figma to STUDIO
Figmaで作成したデザインをノーコードWeb制作ツール「STUDIO」に最適化したデータへ変換しインポートすることができる。
https://www.figma.com/community/plugin/1274345780965443906/figma-to-studio

Figma Community