![見出し画像](https://assets.st-note.com/production/uploads/images/141204927/rectangle_large_type_2_65f0a873e33a3271ec89ec12f88c62b2.png?width=1200)
【HTML to Figma to STUDIO】Webサイト制作簡単3ステップ※使い方に注意
手順
①好きなサイトのURLをコピー
②Figmaに配置(html.to.design)
③STUDIOでリリース(Figma to STUDIO)
それぞれ解説していきます!(Figma、STUDIOは登録している前提)
①好きなサイトのURLをコピー
今回はFigmaのURLをコピーします。
![](https://assets.st-note.com/img/1716163049262-ATwRoJr5tY.png?width=1200)
②Figmaに配置
Figma上でプラグインを選択し、 「html.to.design」を起動します。
![](https://assets.st-note.com/img/1716163667376-Hg1dcPddrn.png?width=1200)
先ほどコピーしたURLを ペーストし、実行します。
![](https://assets.st-note.com/img/1716163682717-bxI6FWdOnl.png?width=1200)
すると、Figma上に Webサイトが配置されます!
![](https://assets.st-note.com/img/1716163704223-bQK2jwn3dt.png?width=1200)
![](https://assets.st-note.com/img/1716163713637-infXjj2ctV.png?width=1200)
③STUDIOでリリース
Figma to STUDIOを起動。
![](https://assets.st-note.com/img/1716163759379-Fmjij3PSXZ.png?width=1200)
配置されたWebサイトを選択し、 コピーを実行してください。
![](https://assets.st-note.com/img/1716163778996-QcbH5ipatE.png?width=1200)
完了後、STUDIOにペースト。 あとはリリースするだけです。
![](https://assets.st-note.com/img/1716163833040-11DyUp4rq5.png?width=1200)
【コピー時の注意点】
ページ丸ごとだと、エラーに なる可能性が高いです。
セクションごとに細かく コピー&ペーストすることを お薦めします。
まとめ
もちろんコピーしたサイトをそのまま使用することはできません。
ただ、インスピレーションを頂戴し、アレンジすることでサイト構築の手順を大幅に短縮することができます。
なるべく「車輪の再発明」を避け、より良いクリエイティブを考案する時間に充てることが重要だと思います。
そのクリエイティブが誰かのアイデアの源となり、さらに新しいアイデアが生まれる。
こうした好循環が生まれていくと、楽しくなると期待しています。
この記事が気に入ったらサポートをしてみませんか?