Figma to STUDIOの使い方｜料金プランについて解説
従来のサイト制作は「デザイン→コーディング→公開」という流れが一般的でしたが、現代では「デザイン→インポート→ノーコードで調整→公開」という流れになってきています。
コーディングで制作すると時間がかかりますが、インポート＋ノーコードで調整になると圧倒的な時間短縮につながります。
今回紹介するFigma to STUDIOは、デザインをインポートする機能であり、使いこなせるようになるとワンクリックでデザインデータを実装できます。
ぜひ参考にしてみてください！STUDIOの詳しい使い方については、ぜひ以下のガイドを参考にしてみてください。
Service
【最安15万円〜】
全てセット料金のホームページ制作サービス
サイト企画〜公開まですべてセット料金になっており、「余計な料金は一切いただかない」というのをモットーにしています。
最安15万円〜からホームページが作れて、すべてオリジナルデザインで制作可能です。また自社管理できる「Studio」というツールを用いているので、プランによっては維持費0円で運営できます。
期間限定で制作費用の3万円割引キャンペーンもやっていますので、ぜひお気軽にご相談ください！
Figma to STUDIOとは
「Figma to STUDIO」とは、デザインツールFigmaで作ったデザインをノーコードWeb制作ツールSTUDIOに取り込むための機能です。
イメージしづらいと思うので、どのようなことができるのか手順で解説します。
- Figmaでデザインする
- 作ったデザインをSTUDIOに取り込む（Figma to STUDIOを利用）
- STUDIOでデザインを微調整してサイト公開する
つまり、デザインをそのままWeb化できるツールということです。
簡単にFigma to STUDIOのメリット・デメリットも紹介しておきます。
| メリット | デメリット |
|---|---|
| コーディングが分からなくてもWebサイトをある程度作れる サイト制作コストが圧倒的に減る デザイナーだけでWebサイト制作が完結する | 多少デザイン崩れは起きる CMSやアニメーションは移行できない 仕上げはSTUDIOで行わなければならない |
Figma to STUDIOを利用すれば、制作スピードを大幅に短縮できるため、Figmaでデザインをしている方は必ず使うべきといえます。
Figmaはデザインツール
Figmaとは基本的に無料で使える、インストール不要のデザインツールです。
今、一番伸びているツールといっても過言ではないほど、注目されているデザインツールです。
下記は、デザインツール利用者のグラフをまとめたものです。（2022年時点）
シェア率が圧倒的に高いツールであり、世界的にみても一番有名なデザインツールといえます。
ただし、デザインはできてもサイト公開機能はありません。
Kaji厳密には、Figma Sitesというサイト公開機能がありますが、まだまだ実用的ではありません！
そのため、Web制作ツールと組み合わせてサイトを作っていく必要があります。
STUDIOはノーコードWeb制作ツール
STUDIOは、日本発のノーコードWeb制作ツールです。現在シェア率を伸ばしているツールであり、今注目されています。
ノーコードWeb制作ツールの「STUDIO」の特徴は、下記のとおりです。
| 特徴 | 詳細 |
|---|---|
| デザイン自由度が高い | 数あるノーコードWeb制作ツールの中でも、一番を争うくらいレベルが高い。 |
| コードが基本的に不要 | HTMLやCSSを知らなくてもサイトを作れる。 |
| 公開までワンストップ | 作ったサイトはワンクリックで公開できる。サーバーなどの煩雑な手続きは不要。 |
| CMS機能が無料プランでも使える | ブログ記事や制作実績など、繰り返し追加するコンテンツを管理できる |
そのため、下記のような人におすすめのツールといえます。
- デザインはできるけどコーディングが苦手
- 小規模〜中規模のWebサイトを素早く作りたい
- 個人事業主やフリーランスで、ポートフォリオやサービスサイトを作りたい
- 自社管理できるホームページを作りたい
STUDIOのメリット・デメリットについて詳しく知りたい方は、ぜひ以下の記事をチェックしてみてください。
Figma to STUDIOの料金プランについて
「Figma to STUDIO」は完全無料で使用できるプラグインになります。
なのでFigmaで作ったデザインをSTUDIOに移行させる分には、お金をかけずにできます。
ただし、「独自ドメインを利用したい」や「広告なしのホームページを作りたい」などの希望がある場合は、STUDIOの有料プランでサイトを公開する必要があります。
Kaji無料プランではもちろんながら、様々な制約が設けられているからです！例えば、1ヶ月あたりの閲覧数やページ数などが挙げられます。
STUDIOの料金プランについては、以下の記事で詳しくまとめています。
どの料金プランにすれば良いかわからないという方は、ぜひ参考にしてみてください。
またSTUDIOの無料プランでできること・できないことについては、「Studioの無料プランでできること12選｜できない事例も紹介！」で詳しく説明しています。
Figma to STUDIOの使い方
「Figma to STUDIO」の使い方はシンプルであり、初心者でもすぐに使いこなせます。
実際の画像を用いながら、具体的に説明します。
①：Figma to STUDIOをインストールする
「Figma to STUDIO」はFigmaに存在するプラグインです。
プラグインのインストールは、Figma側で行います。
「Figmaホーム」→「Plugins」→「Manage plugins…」をクリックします。
検索窓で「studio」と入力して、Figma to Studioが候補に出てきたら、クリックして選択します。
「Run」をクリックします。
すると、Studioへログインする案内が出てくるので、アナウンス通りに進めていきます。
Kajiログインが完了したら、「Figma to STUDIO」が使えるようになります！
②：貼り付けたい箇所をコピーする
Figma to STUDIOを起動したまま、コピーしたいセクションを選択します。
そして「Tipボードにコピー」をクリックします。
③：STUDIOのデザインエディタ上で貼り付ける
STUDIOにログインして、デザインエディタ上で貼り付けます。（Ctrl+V または Cmd+V で貼り付けができます）
Kaji多少デザインが崩れる可能性はありますが、大枠レスポンシブ対応までしてくれます！
Figma to STUDIOにできないこと
大変便利な「Figma to STUDIO」ではありますが、まだまだ出来ないことも存在します。
それぞれ具体的に説明します。
CMS機能や動的コンテンツは移行できない
Figma to STUDIOで移行できるのは静的デザインのみであり、CMS機能や動的コンテンツは移行できません。
そのため、CMSアイテムとの紐付け、CMSアイテムの蓄積などはすべて自分で行わなければならないので注意しましょう。
デザインをSTUDIOに移行した後の流れは、下記のとおりです。
- 繰り返し要素を見つける（ブログ記事・制作実績・スタッフ紹介など）
- STUDIOでCMSコレクションを作成する
- デザインをCMSに接続する
- テスト運用（CMSアイテムを入れて、デザイン崩れが起きないのかなど）
手間はかかりますが、手動でCMSとの紐付けを行うようにしましょう。
またCMSアイテム数の上限は料金プランごとに決まっているので、まだ料金プランをどれにしようか悩んでいる方は、ぜひ以下の記事を参考にしてください。
階層の深いデザインはデザイン崩れしやすい
またFigma to STUDIOは、階層の深いデザインの移行を苦手としています。
イメージしにくいので、実際の画像を載せておきます。
Kajiイラストの背景がはみ出てしまったり、前面に出てきてしまったりなど、複雑な階層はデザイン崩れしやすくなっています！
なので、Figmaでデザインするタイミングで、下記を意識することが大事になります。
- 階層を浅くする（無闇に入れ子にしない）
- 固定値（px指定）をなるべく避ける
- Auto Layoutを正しく使う
Figma to STUDIOを利用する場合は、なるべくFigmaのデザイン段階でシンプルな階層設計を実現することが大切です。
一括でデザインを移行することはできない
Figma to STUDIOは、一括でデザイン移行できないというデメリットがあります。
例えば、10ページのサイトを作成した場合、1ページずつSTUDIOに読み込む必要があるため、最低でも10回は移行作業を行わなければなりません。
ただ、各ページのボリュームが大きい場合、1ページ丸ごと移行すると固まってしまう可能性もあります。そのため、なるべくページを小さな単位で分割して、移行するのがコツになります。
Kaji例えば、ヒーローセクションのみ移行→サービス一覧のみ移行という感じで、小分けにするのがポイントです！
デザインの一括移行に関しては、今後のアップデートに期待するしかなさそうです。
Figma to STUDIOに関するよくある質問
Studioでのサイト制作は「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービス「ラク子」を運営しています。
Kaji「デザイナー」と「フロントエンジニア」のフリーランス3名で運営しています！
- ポッキリ価格でホームページを制作できる
- 専属デザイナーが完全オリジナルのデザイン作成
- 納品後1ヶ月間は無料の電話サポートあり
- 自社更新できるホームページが作れる
- ホームページ制作期間中は何度でも無料相談できる
- 顔の出ているフリーランス3人が運営
- 維持費0円でホームページを運営できる
料金プランは、以下の通りです。
ポッキリ価格でホームページが作れるサービスであり、個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
送信中です
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
※コメントは最大500文字、5回まで送信できます