Zenn
📝

テーマを使ったWordpress実装について備忘録

に公開
WordPress
tech

WordPressのテーマ選定で悩んだことと、TCD GENESISを使ってみた所感

WordPressでのサイトリニューアルにあたり、時間やコストが限られていたため、TCDシリーズのGENESISというテーマを使って実装しました。
テーマを使った構築は初めてで、選定に意外と時間がかかったため、検討時のポイントや実際の使用感を備忘録としてまとめておきます。

使用したテーマ：TCD GENESIS

  • 独自の設定画面で、用意された項目の調整が可能
  • デザインテンプレートやデモインポート機能を活用すれば、短期間でクオリティの高いサイトが作れる
  • カスタマイズ部分がテーマに強く依存するため、後から別テーマに切り替えるのが難しい
  • サポート体制がしっかりしており、ドキュメントも豊富
  • 有料テーマ：¥48,000（税込：¥52,800）
    第三者に有償で制作する場合、特別ライセンス料（1テーマにつき ¥30,000（税込：¥33,000））が別途必要

想定していたサイトがデモサイトの見た目に比較的近かったためこのテーマが有力だったが、有料テーマで無料のデモ版がなく（TCDシリーズのデモ版はあり）、購入するまで何ができて何ができないのか分かりにくく、本当にこのテーマで良いのか判断するのが難しかった。

TCD GENESISを実際に使ってみた感想

  • テンプレートのデザインが比較的クオリティ高め。テンプレート通りの見た目でよければ、手間をかけずにしっかりしたデザインのサイトが作れる
  • コーポレートサイト向けのテーマなので、同じ構成のコーポレートサイトであれば活かしやすい
  • テンプレートから標準機能だけでできるカスタマイズは制限あり
    → 例：トップのKV部分は画像の差し替えやスライドショーへの変更は可能だが、スライダーへの変更やリンクの埋め込みなど、一部のカスタマイズは標準機能では対応できない
  • 自由にカスタマイズするには、追加CSSなどでの対応が必要
    → カスタマイズCSSがGENESISのテーマと干渉しないか心配していたが、クラスなどの指定で特に問題なかった。
  • テーマを使用してる部分は基本的にHTML構造を変えることはできないので、注意が必要。
  • フリースペースも用意されていて、自由にHTMLやCSSを使うことが可能

検討したテーマやエディタ（一部）

Blocksy

  • 軽量で表示が高速（不要な機能が入っておらず、初期状態で動作が軽い）
  • ブロックエディター（Gutenberg）に完全対応
  • カスタマイザー内で多くのスタイルをGUIで調整可能
  • WooCommerceにも対応
  • 設定項目が非常に多く、初心者だと迷いやすい
  • UIが基本的に英語（日本語化はプラグインである程度可能だが完全ではない）

Elementor（ノーコード系のページビルダー）

  • ドラッグ＆ドロップで直感的に操作でき、視覚的にページが作れる
  • セクション・カラム・ウィジェットの構造で、細かく自由にレイアウト調整が可能
  • デザインテンプレートや基本パーツ（テキスト、画像、ボタンなど）も豊富に用意されている
  • スマホやタブレットごとのレスポンシブ表示設定も簡単
  • Gutenberg（ブロックエディター）とは別の編集環境のため、互換性には注意が必要
  • HTMLの出力が複雑になりやすく、ページの表示速度が重くなる傾向がある
  • Elementorで作ったパーツやレイアウトはElementor依存になるため、テーマ変更が難しくなる可能性もある
  • Elementor特有の操作性があるため、ある程度慣れが必要

Wordpressのテーマはたくさんあるように見えるけど、ブログ向けのテーマが多いこともありイメージに近いテンプレートをささっと選べるという感じではなかった。実装した経験がないとテーマを使うとどのようになるのかイメージが付きづらくて選定が難しかった...。

カスタマイズにかかった工数感（工数が増えた・減ったポイント）

・テーマを使った実装の実績がない場合、テーマ選定に時間がかかる
・テーマを活かして実装できるかどうかで、工数がかなり変わる
→工数削減を期待してテーマを導入したが、カスタマイズが多く発生したため、結果的には大きな削減にはつながらなかった
・運用面では、テーマの標準機能のみで設定できる部分もありユーザーにとっても簡単にすることができた
・別途プラグインを組み合わせないとできないこともあるので、プラグインについて調べる必要がある

テーマ（テンプレート）を活用したい場合、実装するサイトがテンプレートに近いかどうか、運用をどうするかなどによってテーマを選定することが大切。

具体的なハマりポイントや注意点

どんなところで詰まったか

・標準機能のトップKV部分は、自由度低め。フリースペースを使用してSwiper.jsなどで実装するか、プラグインを使用する必要あり（今回は運用が簡単な方が良いためプラグインを使用）
・テンプレート部分のセクションの並び順を変えたり追加・削除などは可能だが、HTML構造を変える必要がある場合は基本的にできない（例えば、display:flexを指定したいところに後から親要素をつくることができない）
・一度購入すれば、複数環境でダウンロード可能。開発環境などにも使用可能。（制作代行で利用する場合は特別ライセンス料などかかる）

まとめ

テーマを使えば短期間でサイトを構築できる反面、自由度やカスタマイズ性には制限がある場合があり、最初のテーマ選定がとても重要だと感じました。また、同時に要件が明確になってないと、テーマの選定やカスタマイズ時に手間が増えると感じました。
TCD GENESISはデモサイトと同じ構成のコーポレートサイトであれば非常に手軽に実装可能です。柔軟なレイアウト変更や機能追加が必要な場合は、他テーマやビルダー系ツールの選択肢も視野に入れて検討するのが良いと思います。

Discussion