こんにちは、 はてなCMSチームの id:kondo_hideaki です。
本日2025年8月6日に、Webサイト制作の現場で広く活用されているデザインツール「Figma」と、はてなCMSを連携する新機能をリリースしました。
デザイナーの方にも、Web担当者の方にもご活用いただける、待望の機能です。
デザインから公開までを高速化する「Figma to はてなCMS」
「Figma to はてなCMS」は、Figmaで作成したデザインデータを、AIが自動でHTML/CSSに変換し、はてなCMSにインポートできる新機能です。
はてなCMSではこれまでも、AIが記事作成を支援する「AIコンテンツアシスト」を提供してきましたが、本機能はデザイン制作のプロセスをAIで効率化・高速化するものです。
これまで、FigmaのデザインをWebサイトとして公開するには、デザインを元にコーディングを行う必要がありました。
今回の連携機能により、その工程を大幅に短縮し、Webサイトのデザイン作成や改善の高速化を実現させ、マーケティングプロセス全体の効率化に貢献します。
「Figma to はてなCMS」の主な特長
新機能には、サイト制作を効率化するための、以下のような特長があります。
AIによる自然なコード生成
AIがFigmaのデザイン構造を適切に解釈し、SEOにも配慮した自然なHTMLコードを生成します。 これにより、コードの知識がない方でも安心してご利用いただけます。
ワンクリックで素材もまるっとインポート
Figmaのデザインデータ上で使用している画像素材も、デザインと一緒にワンクリックでインポートできます。画像を個別に保存したり、アップロードし直したりする手間がかかりません。
柔軟な編集体験で、自由に調整
インポートしたデザインは、はてなCMSの編集画面で自由に調整できます。
コードを使わずに直感的に編集できる「見たままモード」と、細かな調整が可能な「コード編集モード」を使い分けることで、思い通りのサイト制作を実現します。
デザイナーもWeb担当者も、チームでのサイト制作がよりスムーズに
この機能を用いることで、デザイナーの方はもちろん、Webデザインやコーディングのノウハウがないメディア担当者やマーケターの方でも、CMS上で直感的にサイトを構築したり、デザインを更新したりすることが可能になります。
ご利用方法は非常にシンプルで、簡単な3ステップでFigmaのデザインをはてなCMSに取り込めます。
Step1: Figmaプラグインをインストール
まずはFigmaのコミュニティで公開されているプラグインをインストールし、はてなCMSと連携します。
Step2: ワンクリックでデザインを読み込む
Figma上で、はてなCMSにインポートしたいフレームまたはレイヤーを選択し、プラグインの「はてなCMSで開く」をクリックします。
Step3: はてなCMSで編集・公開
読み込みが完了したら、はてなCMSの編集画面でテキストの修正やリンクの設定などを行い、ページを公開します。
創造的な活動に安心して取り組めるように
はてなCMSは、お客様のビジネスパートナーとして、Webサイトの運用を効率化し、より創造的な活動に安心して取り組めるよう、今後も進化を続けてまいります。
ぜひこの機会に「Figma to はてなCMS」機能をお試しいただき、サイト制作・運用にお役立てください。
機能の詳細は、以下のページでもご確認いただけます。
皆様のご利用をお待ちしております！
