SWELLで制作するサイトの画面をFigmaで検討するためのテンプレートについて、読み込み方と編集時の確認項目を紹介します。この記事は無料で読めます。テンプレートの購入・ダウンロードはWAZAの販売記事で案内しています。配布形式は .fig。Figmaへ読み込み、文章・色・配置を検討する用途に使います。
WordPressへ取り込むテーマや着せ替えデータとは用途が異なります。Figmaでデザインを変更した後は、WordPress側でSWELLの設定やブロックを使って実装します。
配布ファイルと更新範囲
| 項目 | 内容 |
|---|---|
| ファイル名 | TEMPLATE -SWELL_v02.fig |
| 形式 | Figma Design用の .fig |
| 配布記事に記録されている更新 | 2024年5月、SWELLブロックのデザインパターンを追加 |
| 用途 | SWELLを使うサイトの画面設計・デザイン検討 |
| 料金 | WAZAで単品1,000円。対象のサブスクリプションでも利用可能（この解説記事は無料） |
以下は、2026年10月3日に配布ファイルを取得し、ブラウザー版Figmaで読み込みと表示を確認した際の記録です。今回の本文確認では、配布ファイルの再取得や実機操作は行っていません。実画面と確認したフレームは記事後半に掲載しています。現行SWELLの全機能の再現や、すべての文字の編集を確認したものではありません。2024年5月以降の機能や表示は、制作するサイトで照合してください。
既存の紹介では、トップ・記事・カテゴリー・著者ページのPC幅1920px／スマホ幅390pxと、ブロックのデザインパターンを案内しています。これらは素材の設計幅です。制作するサイトのコンテンツ幅や画面幅に合わせて調整します。
テンプレートの入手先
テンプレートの購入・ダウンロード先は、WAZAの「Figmaで使えるSWELL用テンプレート」にまとめています。単品1,000円で購入するか、対象のWAZA購読プランに加入すると、記事内の有料部分からダウンロード先を確認できます。
すでに対象のWAZA購読プランに加入している方は、契約しているcodocアカウントでログインしてください。商用利用・加工・再配布・顧客への納品の条件が分からない場合は、購入前に運営者へお問い合わせください。
Figmaへ読み込む手順
.figファイルを、名前と拡張子が分かる場所へ保存します。- Figmaのファイルブラウザーを開きます。
Create new→Import→Import from computerを選びます。TEMPLATE -SWELL_v02.figを選び、Openを押します。- 読み込み後、
Doneを押して作業するファイルを開きます。
ファイルブラウザーへのドラッグ＆ドロップでも読み込めます。この手順は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との完全一致を示すものではありません。
よくある質問：SWELL向けFigmaテンプレートを使うときのチェックリスト
このSWELL向けFigmaテンプレートは、無料ですか？
この解説記事は無料です。テンプレートのダウンロードは、WAZAの販売記事での単品購入（1,000円）、または対象の購読プランへの加入で利用できます。
このテンプレートを読み込めば、WordPressサイトに反映されますか？
反映されません。WordPressへ取り込むテーマや着せ替えデータとは用途が異なります。Figmaでデザインを変更した後は、WordPress側でSWELLの設定やブロックを使って実装します。
どのファイルをダウンロードすればよいですか？
TEMPLATE -SWELL_v02.figを選んでください。旧表記のTEMPLATE -SWELL.figと取り違えないよう、末尾の_v02を確認します。
最新のSWELLの機能も、再現されていますか？
記事では、現行SWELLの全機能の再現や、すべての文字の編集を確認したものではないと説明しています。2024年5月以降の機能や表示は、制作するサイトで照合してください。
テンプレートのPC幅やスマホ幅は、そのまま使えますか？
既存の紹介では、PC幅1920px／スマホ幅390pxを案内していますが、これらは素材の設計幅です。制作するサイトのコンテンツ幅や画面幅に合わせて調整します。
Googleドライブで「プレビューできません」と表示されたときは？
ダウンロードしたファイルをFigmaへ読み込む手順で扱えます。配布フォルダーへアクセスできない場合は、リンクとログイン状態を確認してください。