WordPressとElementorで高クオリティなサイトを作る方法

今回はオシャレで機能的でハイクオリティで拡張性もMAXのホームページを作る方法をご紹介。
この方法を使えば格安で、メンテナンスも自分で出来て、色々イジったり、変更も超簡単なホームページの作り方をマスターすることが出来ます。

事前準備
Elementorでサイト制作
1. Elementsで無料のテンプレートを選ぶ
2. Elementorでサイトデザインをカスタマイズ
ElementorとElementsで作ったサイトの例
1. 株式会社ZENCREATE
Elementorの使いづらいポイント
1. Elementorを日本語デザインに合わせるのが難しい
2. WAFを切らないとElementorを保存できない

事前準備

今回の方法ではいくつかのプラグインを使って、通常のWordPressのテーマでは考えられないくらい自由度の高い、ハイクオリティなサイトを作っていきます。

必要なもの

WordPress導入済みサイト
Elementor(WordPressのプラグイン)
Elementor Pro(WordPressの有料プラグイン)
Envato Elements(WordPressのプラグイン)

WordPressにElementorをインストール

まずはWordPressにElementorをインストールしましょう。Elementor(エレメンター)はサイトビルダーと呼ばれるものです。プログラミングやコーディングが一切不要で、ブロック単位で色々な要素を積み上げていくことでサイトが作れてしまう素晴らしいプラグインです。

Elementorのインストールはこちら

WordPressにElementor Proをインストール

Elementorの制限を全て解除するためにはElementor Proの購入が必要です。1つのサイトで使用するだけであれば年間49ドル(約5500円)で使用可能ですので購入がおすすめです。

デザイナーにホームページの制作を依頼した場合、最低でも10万円は掛かってくることを考えればプラグイン1つで年間約5000円というのはかなりお得です。

（Elementorのみのインストールでも問題はありませんが、後述のテンプレートを使用する際にElementor Pの機能が制限されていると、テンプレートが正常に動かない可能性があります。テンプレートの使用を考えている場合はElementor Proは必要です）

Elementor Proのインストールはこちら

WordPressにEnvato Elementsプラグインをインストール

Envato Elementsの契約を行った後は、WordPressにEnvato Elementsのプラグインをインストールします。

このプラグインを使うことでElementor内部でEnvatoが使用可能になり、Elementorに対応したテーマを直接Envatoからインストールすることが出来るようになります。

Envato Elementsのインストールはこちら

Elementorでサイト制作

Elementsで無料のテンプレートを選ぶ

サイドバーのElementsからFree Kitを選択します。Envato ElementsにアップロードされているElementor対応の無料テーマが大量に表示されるので後は使いたいテーマをここから選んでInstall Kitをクリックするだけで、自分のサイトが一気にハイクオリティでオシャレでユニークなサイトに生まれ変わります。

右上のカテゴリーを選択すると、様々な選択肢が出てくるので自分の作りたいサイトにマッチしたカテゴリーを選んで、テーマを選ぶことが出来ます。

Elementorでサイトデザインをカスタマイズ

無料のテンプレートをインストールした後は該当の固定ページをElementorで編集することで、自分好みにサイトのカスタマイズが可能になります。

ElementorとElementsを使ったサイト制作はたったこれだけで完了です。驚くほどに簡単で拡張性のあるこの方法はサイト制作になかなか取り組むことが出来ない人にも簡単に挑戦できるのでぜひ試してみて下さい。

ElementorとElementsで作ったサイトの例

株式会社ZENCREATE

上記画像のサイトは弊社のHPです。AstraというElementorに特化したテーマにElementorを導入してElementsのテンプレートで制作したサイトになります。

ヘッダーをフッター部分はAstraで管理しており、ページ内部はすべてElementsのテンプレートをElementorでカスタマイズして制作しています。レスポンシブにも対応しており、スマートフォンからでもデザインが崩れること無く閲覧することが出来ます。

慣れてしまえばこの程度のサイトは1日で作ることが可能です。
また拡張性も優れているのでフォームや予約機能など、すぐに実装できるのもオススメポイントです。

実際のサイトを見てみる

Elementorの使いづらいポイント

Elementorを日本語デザインに合わせるのが難しい

Elementorは概ね素晴らしいプラグインですが、全てのテンプレートが英語を基準に作られているので、どうしても日本語のデザインやサイズ感だと違和感が出てしまうケースが少なくありません。

日本語を使う際は字間を空けたり行間を気にしたりと英語でサイトを作る際とはまた違った角度からデザインを考える必要があります。

WAFを切らないとElementorを保存できない

「WAF」というのは「ウェブアプリケーションファイアウォール」というサイトを攻撃から守ってくれるサービスです。Elementorは作業中に随時更新する機能があったり何かとサーバー側との接続頻度が過剰になることが多く、サイバー攻撃だとサーバーが勘違いしてサイトがエラーを起こすことがあります。

Elementorで作業をする際はWAF設定はオフにして置くことが重要です。折角いいデザインが作れてもWAFのせいで保存が出来なければ、やり直しになってしまうので注意が必要です。