FigmaデザインをそのままWebサイトに変換

公開：2026年8月26日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

この記事はプレスリリースです

本記事は、PR TIMESに掲載された企業・団体等のプレスリリースを原文のまま転載しています。記事内容は発表時点の情報です。

発表元: トライベック株式会社
原文: PR TIMESで元のプレスリリースを読む
配信日時: 2026年8月26日 11時00分
転載日: 2026年8月27日

発表内容については発表元へ、当サイト上の訂正・削除については、当サイトのお問い合わせフォームにご連絡ください。

転載

プレスリリース本文

～「Hirameki 7」がプラグイン公開。デザインから公開・運用までを効率化～

トライベック株式会社（所在地：東京都港区、代表取締役社長：後藤洋）は、中小企業向けDXプラットフォーム「Hirameki 7（ヒラメキセブン）」において、デザインツール「Figma」のデザインデータを書き出すプラグイン「Figma to Hirameki 7」を正式リリースし、Figmaから公開・運用までがつながるようになりました。プラグインはFigma Communityで無償公開しており、どなたでも利用できます。

「Figma to Hirameki 7」は、Figmaで選択したレイヤーのノードデータをJSONファイルとして書き出すプラグインです。書き出したファイルを「Hirameki 7」側でインポートすると、Figmaのデザインを統合エディタに反映できます。デザインを見ながらゼロから組み直す工程を省き、制作の続きをスムーズに進められます。

主な対象は、Figmaを日常的に使うフリーランスや制作会社です。デザインはFigmaで作り込み、公開と公開後の更新は「Hirameki 7」で運用する。デザインと運用のそれぞれの強みを活かしながら制作から運用までを一貫した流れで進められる環境を提供します。

＜POINT＞

1. Figmaプラグイン「Figma to Hirameki 7」をFigma Communityで正式公開

2. Figma上で選択したレイヤーのノードデータを、JSONファイルとして書き出し

3. 書き出したファイルを「Hirameki 7」でインポートすると、テキスト・画像・オートレイアウト・ベクターが統合エディタに反映されます

今回のリリースの概要

中小企業向けDXプラットフォーム「Hirameki 7」（https://www.hirameki7.io/）は、AIページ自動生成機能「AIサイト」において、プロンプトや参考URL、チラシやパンフなどのPDFを入力するだけでWebページを数分で自動生成し、生成したページを統合エディタでそのまま編集できる「AIが作ってヒトが仕上げる」制作体験を提供しています。

今回リリースした「Figma to Hirameki 7」は、この制作体験の入口を広げるものです。Figmaで制作したデザインデータを元にコーディング工程を介さずにランディングページやWebサイトを制作できるようになりました。デザインの検討はFigmaで、公開と運用は「Hirameki 7」で2つのツールをつなぎ、制作から公開までのプロセスを効率化します。

ご利用の流れ

1. Figmaでレイヤーを選択し、プラグインを実行

Figma上で「Figma to Hirameki 7」をインストールし、対象のレイヤーを選択して実行します。選択したレイヤーのノードデータがJSONファイルとして書き出され、そのままダウンロードできます。

対応する要素は、テキスト・画像・オートレイアウト・ベクターです。オートレイアウトで構成されたデザインほど「Hirameki 7」上での再現度が高くなるため、取り込みを前提とする場合はオートレイアウトでの設計を推奨します。

2. 「Hirameki 7」でファイルをインポート

ダウンロードしたJSONファイルを「Hirameki 7」でインポートすると、Figmaのデザインが統合エディタに反映されます。デザインデータを見ながら要素を組み直す作業を挟まずに、編集フェーズから制作を再開できます。

また、スマホデザインの同時インポート、もしくは自動レスポンシブ設定をONにすることでHirameki 7上でスマホデザインを作成する手間を省くことができます。

取り込まれる単位は、Figma上での選択範囲にそのまま対応します。ページ全体を選択すればページとして、セクションやパーツだけを選択すればその単位で取り込まれます。サイト一式をまとめて移す使い方も、既存ページに特定のセクションだけを足す使い方も可能です。

3. ノーコードエディタで仕上げ、公開・運用まで完結

反映されたデザインは、「Hirameki 7」の統合エディタでそのまま編集できます。テキストや配色の調整、パーツの追加、レスポンシブの確認まで、コードを書かずに仕上げられます。7月に追加した自由レイアウトやテーマのカスタマイズ、エディタ内AI画像生成とあわせてご利用いただけます。仕上げたページはそのまま公開でき、公開後の更新はCMSで運用。フォーム・名刺管理・メール配信・ダッシュボードといった機能ともつながります。

URL：https://www.hirameki7.io/function/marketing/site/lp-figma/

今回リリースしたプラグインを活用することで、デザインから実装への引き渡しにかかる手間を減らしデザインデータを見ながら組み直す工程を圧縮できるため、その分の時間を提案やデザインの作り込みに充てられます。

アイデアとイメージを自由に、驚くスピードでカタチに。「Hirameki 7」では、こうした制作フローを制作パートナーのみなさまと一緒に推進しています。

URL：https://www.hirameki7.io/lp-partner/site/