SWELL向けFigmaテンプレートを無料配布｜.figの入手・読み込み・編集

2025年6月22日2026年10月3日

SWELLで制作するサイトの画面をFigmaで検討するためのテンプレートを無料配布しています。配布形式は .fig。Figmaへ読み込み、文章・色・配置を検討する用途に使います。

WordPressへ取り込むテーマや着せ替えデータとは用途が異なります。Figmaでデザインを変更した後は、WordPress側でSWELLの設定やブロックを使って実装します。

配布ファイルと更新範囲

2026年10月3日に配布ファイルを取得し、ブラウザー版Figmaで読み込みと表示を確認しました。実画面と確認したフレームは記事後半に掲載しています。現行SWELLの全機能の再現や、すべての文字の編集を確認したものではありません。2024年5月以降の機能や表示は、制作するサイトで照合してください。

既存の紹介では、トップ・記事・カテゴリー・著者ページのPC幅1920px／スマホ幅390pxと、ブロックのデザインパターンを案内しています。これらは素材の設計幅です。制作するサイトのコンテンツ幅や画面幅に合わせて調整します。

SWELL向けFigmaテンプレートの配布フォルダーを開き、TEMPLATE -SWELL_v02.fig を選んでダウンロードしてください。旧表記の TEMPLATE -SWELL.fig と取り違えないよう、末尾の _v02 を確認します。

Googleドライブで「プレビューできません」と表示されても、ダウンロードしたファイルをFigmaへ読み込む手順で扱えます。配布フォルダーへアクセスできない場合は、リンクとログイン状態を確認してください。

2026年10月3日から無料配布とし、codocでの購入は不要です。商用利用・加工・再配布・顧客への納品の条件が分からない場合は、使用前に運営者へ問い合わせてください。無料で取得できることと、利用の許諾範囲は別の確認事項です。

ファイルブラウザーへのドラッグ＆ドロップでも読み込めます。この手順はFigma公式のインポート案内に基づいています。共有先の権限やフォントを含む確認は、.figファイルの読み込み方で説明しています。

対象	照合する内容
フォント	指定されたファミリーとスタイルが使えるか。置換した場合の改行・幅
ページの横幅	PC／スマホのフレーム幅、コンテンツ幅、左右の余白
見出し・ボタン	Figmaの見た目と、SWELLのブロック設定・追加CSSの対応
ヘッダー・フッター	メニュー数、ロゴの大きさ、実際に載せる文章量
更新内容	使用するSWELLのバージョンに追加されたブロックや設定

配布原本を残し、作業用のコピーで編集します。色や文章を変えた後は、PCとスマホの両方で改行と余白を確認してください。画像として書き出す際は、Figmaの書き出し倍率も確認します。

Figma上で完成した画面は、WordPressの表示を比較するための設計資料になります。WordPress側の表示は、ブラウザー、使用フォント、コンテンツ量、SWELLの設定によって変わるため、実装後の画面で確認します。

ボタンや見出しの見た目を検討する場合は、ボタン素材35種類と見出し素材40種類も参照できます。部品の扱い方はアセットとライブラリ、操作記事の一覧はFigmaの使い方まとめから確認してください。

2026年10月3日、ブラウザー版Figma Designの日本語UIで、配布ファイルをドラフトへインポートして確認しました。これは今回の読み込み・表示の確認で、すべての文字の編集、フォントの充足、利用環境での再現を保証するものではありません。

Page 1にトップ・記事・カテゴリー・著者のPC／SP用フレームと「SWELLブロック集（PC）」が表示されました。選択したトップページ（PC）は幅1920、トップページ（SP）は幅390でした。これは素材内の設定値で、すべての閲覧端末の幅や現行SWELLとの完全一致を示すものではありません。

よかったらシェアしてね！