富田林市ホームページ作成でのWordPressのスライダー表示・figmaのデザインをWordPressでの利用

2025 4/03

2025年4月3日 2025年4月3日

WordPressのプラグイン

今回はホームページ作成のご質問での授業内容です。

カタカナばかりで分からないことを書いていると思われるかもしれません…。

その際はお気になさらず「こんな授業もしてるんだなあ」と思ってそっと画面をお閉じ下さい…。

BK Blocks

上記画像はいちえパソコン家庭教師の中嶋が制作したホームページの一部です。

生徒様より、画像を左右のスライダーでかつジグザグに表示するにはどうしたらよいかご質問があったので見本に作成いたしました。

WordPressのプラグインのBK Blocksのスライダーを利用してカルーセル表示となっています。

また、上下でジグザグ表示になるように、外観→カスタマイズ→追加CSSに以下のCSSを入れています。

.zigzag .swiper-wrapper .vk_slider_item {
    padding-bottom: 100px !important;
    transition: padding-bottom 0.5s ease-out;
}

.zigzag .swiper-wrapper .vk_slider_item.swiper-slide-prev,
.zigzag .swiper-wrapper .vk_slider_item.swiper-slide-next,
.zigzag .swiper-wrapper .vk_slider_item.swiper-slide-next + .vk_slider_item + .vk_slider_item {
    padding-bottom: 0 !important;
}
.swiper-pagination{
	display:none;
}
.swiper-button-next{
	display:none;
}
.swiper-button-prev{
	display:none;
}

左右の矢印ボタンや下部のスライド切り替えボタンは非表示にしています。

Highlighting Code Block

また、上記のCSSを表記するために、WordPressのプラグインのHighlighting Code Blockを使用しています。このホームページで使用しているSWELLテーマを作成された方が作ったプラグインということでSWELLと相性が良いとのことです。

FigmaのWebデザインをWordPressに利用する方法

Figmaでデザインされたホームページを、WordPressでできるだけ簡単に利用したいとのご質問がありました。

レッスンでは、Figma to Code・Figma To WordPress Block・Fignelなどを試しました。

Elementor用テーマに切り替えて、Elementorプラグインを入れそちらにコピーしたり等もいたしました。

しかし、全て一長一短で、完全なWebレイアウト再現はされないため、SWELLテーマで実装していくことが一番の近道かなということで落ち着きました。

以下は生徒様に参考にとお送りした分です。

1. 日本人向けのデザインテーマ

日本語サイトに適したテーマ
- Cocoon：無料でシンプル、カスタマイズ性に優れる
- SWELL：有料で洗練されたデザイン
- Lightning：無料でビジネスサイト向け
デザインの自由度が高いテーマ
- Arkhe（アルケー）：SWELLの作者による、軽量＆自由度高い
- Xeory（セオリー）：ブログや企業サイト向け

2. Figmaデザイン再現に使える専用ツール

（①）ブロック編集強化ツール

VK Blocks：Lightningとの相性が良く装飾パーツが豊富
Kadence Blocks：自由なレイアウト調整が可能
Snow Monkey Blocks：日本語対応でデザイン性も高い

（②）ドラッグ＆ドロップ配置ツール

Elementor：直感的操作でレイアウト作成が容易（最近は【Figma to Elementor Converter】の登場で、直接変換が可能に）
WordPress公式サイトエディター（Gutenberg）：ブロックで自由に編集

（③）HTML/CSS活用ツール

Simple Custom CSS：管理画面から手軽にCSS追加
Custom HTML Block：HTMLを直接編集可能

3. FigmaデザインのWordPress取り込み用プラグイン・ツール

Figma内でコード生成するツール

Figma to Code：Figma内でHTML、CSS、React、Vueコードを生成（WordPressへはHTML編集が必要）
Locofy.ai：FigmaデザインをHTML/CSSやReactに変換し、カスタムページで活用可能

WordPressプラグイン

Elementor + Figma：Elementor Proを利用してFigmaデザインを参考にレイアウト調整（直接インポートは不可）
WPBakery Page Builder：ドラッグ＆ドロップでFigmaデザインを再現
Kadence Blocks：WordPressのブロックエディターで再現しやすい

最近注目のプラグイン

Figma to Elementor Converter
→ Figmaデザインを直接Elementorのウィジェットやレイアウトに変換。コーディング不要で再現可能（β版の場合あり）。
Anima
→ FigmaデザインをHTML/CSSにエクスポートし、Elementor内のカスタムHTMLブロックで活用。
UiChemy
→ FigmaのデザインをJSON形式でエクスポートし、Elementor、Gutenberg、Bricksで編集可能に変換。

どの方法を選ぶべきか？

コーディングなしで簡単に作りたい：Elementor（またはFigma to Elementor Converter / WPBakery Page Builder）
Figmaのデザインを忠実に再現したい：Figma to Code / Locofy.ai、またはHTML/CSSでの調整
WordPressのブロックエディターで自由に調整したい：Kadence Blocks

まずは、日本語サイト向けのテーマを選び、目的に合わせたツールやプラグインを組み合わせるのが効率的です。