今回はオシャレで機能的でハイクオリティで拡張性もMAXのホームページを作る方法をご紹介。
この方法を使えば格安で、メンテナンスも自分で出来て、色々イジったり、変更も超簡単なホームページの作り方をマスターすることが出来ます。
事前準備
今回の方法ではいくつかのプラグインを使って、通常のWordPressのテーマでは考えられないくらい自由度の高い、ハイクオリティなサイトを作っていきます。
必要なもの
- WordPress導入済みサイト
- Elementor(WordPressのプラグイン)
- Elementor Pro(WordPressの有料プラグイン)
- Envato Elements(WordPressのプラグイン)
WordPressにElementorをインストール
まずはWordPressにElementorをインストールしましょう。Elementor(エレメンター)はサイトビルダーと呼ばれるものです。プログラミングやコーディングが一切不要で、ブロック単位で色々な要素を積み上げていくことでサイトが作れてしまう素晴らしいプラグインです。
WordPressにElementor Proをインストール
Elementorの制限を全て解除するためにはElementor Proの購入が必要です。1つのサイトで使用するだけであれば年間49ドル(約5500円)で使用可能ですので購入がおすすめです。
デザイナーにホームページの制作を依頼した場合、最低でも10万円は掛かってくることを考えればプラグイン1つで年間約5000円というのはかなりお得です。
(Elementorのみのインストールでも問題はありませんが、後述のテンプレートを使用する際にElementor Pの機能が制限されていると、テンプレートが正常に動かない可能性があります。テンプレートの使用を考えている場合はElementor Proは必要です)
WordPressにEnvato Elementsプラグインをインストール
Envato Elementsの契約を行った後は、WordPressにEnvato Elementsのプラグインをインストールします。
このプラグインを使うことでElementor内部でEnvatoが使用可能になり、Elementorに対応したテーマを直接Envatoからインストールすることが出来るようになります。
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のせいで保存が出来なければ、やり直しになってしまうので注意が必要です。
コメント