サイトデザインの美しさが、第一印象を左右します。しかし、一流のサイトを構築することは必ずしも容易ではありません。特に、デザインや開発の経験がない場合はなおさらです。
そこで、WordPressの「Elementor」というウェブサイトビルダーの出番です。おしゃれで、ユーザーフレンドリーなプラグインを使うことで、一行のコードも書かずに魅力的なウェブサイトを作成することができます。
この記事では、この非常に人気のあるWordPressページビルダーについて知っておくべきことをご紹介します。そして、レイアウト、ページ、さらにはカスタムElementorテンプレートページの作成など、Elementorの最も重要な操作方法にも触れます。
WordPress Elementorの基本
インターネット黎明期、サイトを作成するには、高度なウェブ開発・デザインのスキルが必要であり、そうでなければ、プロの力を借りる必要がありました。そのため、サイトの構築には時間がかかり、しばしばイライラが溜まり…コストも膨れ上がるありさま。
最新のページビルダーを使えば、特別なスキルを持たずに、おしゃれなデザインの高速サイトを構築できます。一度サイトを構築してしまえば、プログラマーでない人でも、いつでも素早く簡単にコンテンツを追加したり、レイアウトを変更したりすることができます。
WordPressのページビルダーには様々なものがありますが、500万以上のアクティブインストール数を誇る Elementorプラグインは最も人気のあるものの一つ。 Elementorでは、直感的なドラッグ＆ドロップ操作で、ウェブサイト全体からランディングページまで、あらゆるものを作成できます。
Elementorを使えば、サイトのデザインのあらゆる側面を1つのプラットフォームで管理できます。そうすることで、ブランディングとして押し出したい印象を完璧に反映させることが容易になります。
Elementorの直感的でコードを必要としないエディタは、デザインや開発の経験がないサイト運営者の間で特に人気があります。また、オンラインベンチャーのアイデアを持ちながら、必ずしも専門のデザインや開発を担うチームを雇う資金がない起業家や中小企業にもうってつけです。
経験豊富なプロであっても、Elementor を使う理由はたくさんあります。プラグラミングのスキルがあるからといって、常にゼロからすべてを作成することが賢明であるとは限りません。
Elementorには、おしゃれなサイトを短時間で構築するのに役立つ機能がたくさん。90以上のウィジェットとプロがデザインしたウェブテンプレートなどです。
つまり、Elementorは生産性を高め、利益の向上に貢献します。時短に直結しますし、定期的にWordPressサイトを構築する場合（フリーランスの開発者やWordPressサイトを扱う代行業者など）には、特に有用です。
Elementor FreeとElementor Proの比較
Elementorは”フリーミアム”です。Elementorのプラグイン自体は無料でダウンロードできます。希望であれば、Elementor Proのライセンスを購入することもできます。
この無料のWordPressプラグインには、視覚に訴えかける販売ページ、商品リスト、ビジネスサイトなどを構築するのに必要な機能が、すべて揃っています。40以上のウィジェット、およそ100のテンプレート、300以上のブロックなど。ブロックは、言うなれば、デザインの施されたセクションテンプレートです。これを組み合わせて好みのデザインを作ることができます。
高度な機能が必要であれば、Elementor Proを購入することができます。Elementorのテーマビルダーが利用できるようになり、扱えるウィジェットの数も増えます。
テーマビルダーを使えば、ヘッダーやフッターなど、サイトのほぼすべての要素を編集できます。また、カスタム投稿タイプやアーカイブページのデザインも作成可能です。
オンラインストアを開発中の方に朗報です。Elementor ProにはWooCommerceビルダーもあります。これを使用して、商品ページ、商品アーカイブ、決済（チェックアウト）ページなど、WooCommerceサイトにある様々なコンテンツに手を加えることができます。また、カートへの追加機能の自作版、アップセル、関連商品など、コンバージョンアップを考え設計されたウィジェットが利用できるようになります。
Elementor Proには、ポップアップビルダーとフォームビルダーも付属しています。ポップアップやフォームを作成できるプラグインは他にもありますが、Elementorを選ぶことで、インストールやメンテナンスに必要なプラグインの数を最小限に抑えることができます。
多くのプラグインを使用すると、ハッキングに対して脆弱になります。また、ウェブサイトのパフォーマンスに影響を与える可能性も。ですので、インストールするプラグインの数は最小限に抑えるのがベストプラクティスです。また、サイトのすべての要素を同じプラットフォームで設計するため、一貫した見た目を確保しやすくなります。
Elementor Proには、60以上のウェブサイトキットが盛り込まれています。テンプレート、ページ、ポップアップなどなど、サイト全体の構築に便利です。エキスパートライセンス以上を購入すると、さらに20のエキスパートウェブサイトキットが利用できるようになります。
Proにはプレミアムサポートが付帯します。通常、1日以内にElementorのサポートから回答が得られます。Elementor Pro Studioまたはそれ以上を選択した場合、サポートのレベルがVIPになり、ElementorのVIPカスタマーサポートスタッフにライブチャットで問い合わせることが可能になります。また、優先的に（通常30分以内に）返答がもらえます。
Web制作会社、開発者、デザイナーといった方々は、Experts Networkも要チェックです。このつながりを通じて、自分の仕事を紹介することができます。これが顧客獲得につながるかもしれません。
Experts Networkにご興味があれば、Elementor ProのExpert、Studio、Agencyライセンスをどうぞ。いずれかを利用することで、マーケットプレイスでプロフィールを作成する資格が付与されます。
Elementor Proプランは、年間49ドルから999ドルで利用できます。30日間の返金保証があり、購入前に試してみることもできます。
Elementorのインストール方法
WordPressのプラグインなので、Elementorのインストールは簡単です。WordPress管理画面から直接無料のプラグインをダウンロードするだけでOKです。
無料版をダウンロードするには、「プラグイン」＞「新規追加」に進みます。検索フィールドに、「Elementor」と入力します。プラグインが表示されたら、「今すぐインストール」をクリックします。
プロンプトが表示されたら、「有効化」をクリックします。これでサイドバーにElementorが表示されるはずです。
これでElementorの準備ができました。サイドバーのElementorをクリックすれば、すぐに使い始めることができます。
WordPressのリポジトリからElementorのプラグインをダウンロードすることも可能です。それから、WordPressのダッシュボードにログインし、「プラグイン」 >「 新規追加」 > 「プラグインのアップロード」に進みます。「ファイルを選択」をクリックし、ダウンロードしたばかりのElementorのzipファイルを選択します。
Elementor ProとWordPressを連携する方法
Elementor ProとWordPressを接続するのには、2つ方法があります。まだElementor Proのライセンスを購入していない場合は、購入が必要になりますので、公式サイトにアクセスし、「Get Started（手続きする）」をクリックしましょう。
そのまま画面の指示に従い、Elementorのアカウントを作成します。プロンプトが表示されたら、作りたいウェブサイトの情報を入力していきます。
次に、購入するプランを選択します。Elementorの利用には、アクティブなWordPressのウェブサイトが必要になりますので、自分のサイトのドメインを入力しましょう。ドメイン入力後、ElementorがあなたのサイトがWordPressを使用しているかどうかの確認を行います。
アクティブなWordPressのウェブサイトを持っているとして、次に、「Install Elementor（Elementorをインストールする）」をクリックします。この時、自分のサイトにログインしている場合は、自動的にElementorのプラグインページにリダイレクトされます。
プロンプトが表示されたら、「今すぐインストール」 > 「有効化」と進み、サイトにElementorのページビルダープラグインを追加します。
すでにElementor Proのライセンスを購入されている場合は、公式サイトにアクセスし、確認メールに記載されている情報を使ってログインしてください。
Elementorのアカウントで、左側のメニューから「Subscriptions（定期購入）」に進み、「Download Zip（zipをダウンロード）」をクリックします。
続いてWordPressのダッシュボードにログインし、「プラグイン」 > 「新規追加」に進みましょう。先ほどダウンロードしたElementor Proのzipファイルをアップロードします。
Elementor Proをインストールし有効化すると、ライセンスキーの入力が必要になります。または別の方法として、「Elementor」 > 「License（ライセンス） 」> 「Connect & Activate（接続と有効化）」に進むことも可能です。
Elementorのアカウントにログインしていれば、WordPressが自動的にライセンスを認証しますが、ライセンスを有効にするように促された場合には、Elementor のユーザー名とパスワードを入力してください。
Elementorの使い方：マスターすべき4つのタスク
特別なデザインスキルや開発スキルがなくても、Elementorを使えば個性的なウェブサイトを作ることができます。ただし、ウェブサイトを完成させる前に基本的な知識は身につけておきましょう。この章では、それを踏まえて、Elementorの使い方の流れを簡単にご紹介します。
1. Elementorページビルダーを起動する
Elementorページビルダーで新しいページや投稿をデザインするには、「固定ページ」または「投稿」> 「新規追加」に進みます。「Elementorで編集」をクリックすると、Elementorエディタが起動します。
あるいは、既存のページを編集したい場合には、そのページに移動し、編集画面を開きます。そこから「Elementor で編集する」ボタンをボタンをクリックすればOKです。
画面の左側に、Elementorのサイドバーがあり、ボタンや見出しなど、デザインに追加できる要素がすべて揃っています。
Elementor のサイドバーには、Global Widget（グローバルウィジェット）もあります。複数のデザインで同じウィジェットを利用することを考えている場合には、グローバルウィジェットとして保存するのが便利です。これを利用すれば、カスタム要素にいつでも簡単にアクセスできるようになります。また、複数のページがシェアしているウィジェットを一箇所でまとめて編集できるようになり、その変更はウェブサイト全体に反映されます。
右側にはライブプレビュー画面があり、ここでデザインを作成します。編集した内容は自動的に更新され、リアルタイムで変更を確認することができます。
2. セクション、カラム、ウィジェットを追加する
Elementorエディタでは、3つの主要なビルディングブロックを使用できます。セクション、カラム、ウィジェットです。Elementorの既製ウィジェットについてはすでに触れましたが、これをどのようにデザインに追加するかを見ていきましょう。
まずは通常、メイン画面に表示される「+」アイコンをクリックして、セクションを作成します。このアイコンをクリックすると、次に「構造の選択」が表示されます。
表示される構造は、1つ、または複数のカラムで構成されており、最終的にはこのカラムの中にウィジェットを配置していきます。見やすいレイアウトを作成する上で、非常に重要な選択です。
構造を選択すると、セクションがレイアウトに追加されます。このセクションを別な場所へ移動するには、クリックすると表示される青い点線のハンドルを掴んでください。
セクションを編集するには、「Ctrl」キーを押しながら青い点線のハンドルをクリックします。設定メニューが表示され、選択したセクションのコピーや削除など、簡単な変更が行えます。
より複雑な編集には、「Ctrl」キーを押しながら青いハンドルをクリックし、「セクションの編集」を選びます。そうすると、サイドバーが切り替わり、変更可能な項目が全て表示されます。
このセクションにウィジェットも追加することができます。サイドバーから使用したいウィジェットを探して、メイン画面にドラッグしましょう。
ウィジェットをドラッグすると、これをドロップできるセクションとカラムが強調されて表示されます。追加したい場所が決まったらマウスを離しましょう。選択したセクションにウィジェットが追加されます。
3. サイト設定を編集する
Elementor でサイト全体の設定を編集することができます。これにはデフォルトのフォントやHTMLの色の変更も含まれます。また、サイトの画像などの要素に追加できる線や影も変更できます。
このような設定をサイト全体で調整することで、統一された外観と雰囲気を作り上げることができます。また、各ページごとに変更するよりもはるかに楽で簡単です。利用可能なサイト設定を表示するには、サイドバーのハンバーガーメニューをクリックします。
各オプションを確認し、必要に応じて変更してみてください。サイトの設定が完了したら、サイドバーの一番下にある「更新」ボタンをクリックして更新しましょう。
4. 変更履歴を確認する
デザインを編集している間、Elementorがその編集内容を自動で記録しています。そのため、いつでも変更を取り消すことができ、間違いに気づいた時にはとても助かります。
変更履歴のおかげで、様々な変更を試して、気に入らなければすぐに削除する、というような実験を行うことができます。ユーザーがこのように実験を気軽に行えることで、最終的なデザインの質が向上します。
変更履歴を表示するには、サイドバーの下部にある「履歴」アイコンをクリックします。「アクション」タブが適用されたすべての変更を記録するため、セクションの作成から既存テキストの編集まで、何でも可能です。
「保存」を押すたびに、そのページの現在の状態が新しいリビジョンとして記録されます。このように保存されたリビジョンはすべて、「リビジョン」タブで確認することができます。以前保存した状態に戻したい場合は、「リビジョン」一覧から希望のものをクリックするだけです。
Elementorでページを構築する2つの方法
Elementorの基本的な流れを理解したところで、この知識を使ってページをデザインしてみましょう。まずは無料のElementorプラグインを使って、WordPressの一般的なページを作成します。その後、WooCommerceとElementor Proを使って、コンバージョンの高い商品ページを作成する方法も見ていきます。
1. WordPressの一般的なページの作成方法
ひとつとしてウェブページはありません。ですが、一方でさまざまなサイトに見られる共通要素も存在し、見出し、本文、画像などのメディアが挙げられます。このセクションでは、そのような必須要素を組み込んだページの作成方法をご紹介します。
まず、「固定ページ」>「新規追加」> 「Elementorで編集」で新規ページを作成します。次に「+」アイコンをクリックし、セクションを追加します。1カラムのレイアウトを選択して、まずは見出しから取りかかりましょう。
サイドバーに「見出し」ウィジェットがあります。このウィジェットを追加したセクションにドラッグ＆ドロップします。それからサイドバーに見出しのテキストを入力し、さまざまな設定を用いてタイトルのスタイルを変更しましょう。
次に「+」アイコンをクリックして、2つ目のセクションを追加します。今度は、マルチカラムレイアウトを選択して、画像を埋め込み、補足のテキストを追加してみましょう。
サイドバーから「テキストエディター」ウィジェットをドラッグして、追加したセクションにドロップします。その後、サイドバーの設定からテキストを追加し、スタイルを設定しましょう。
テキストが完成したら、「画像」ウィジェットをドラッグ＆ドロップでこのセクションに追加してください。
サイドバーから「プレビュー」のサムネイルをクリックします。これで、WordPressのメディアライブラリを使用して、画像をアップロードしたり、以前アップロードしたグラフィックを選択したりすることができます。
実際に作成したデザインを確認するには、サイドバーの下部にある目のアイコンをクリックすると、新しいタブにページレイアウトのプレビューが表示されます。
満足するデザインが完成したら、「公開」ボタンをクリックしましょう。ちなみに、すでにページが公開されている場合は、このボタンは「更新」と表示されています。
2. WooCommerce商品ページの作り方
WooCommerceストアを運営している場合には、Elementor Proを使ってカスタムした商品ページを作成することができます。例えば、WooCommerceの標準的なページにサイトのブランディング要素を取り入れ、より魅力的な商品ページの作成が可能です。また、さらなるコンバージョン獲得に向けてページを最適化することも。
WooCommerceのカスタム商品ページをデザインするには、まずWordPressのダッシュボードから「テンプレート」を選択します。それから「新規追加」をクリックし、次のウィンドウで、最初のドロップダウンメニューを開いて「Single Product（商品単品ページ）」を選択します。
テンプレートにわかりやすい名前をつけて、「テンプレートを作成」をクリックすると、Elementorライブラリが起動し、利用可能な商品単品ページ用のデザインが表示されます。
テンプレートを拡大して見るには、テンプレートにカーソルを合わせ、表示された虫眼鏡のアイコンをクリックします。ストアに適用するデザインを決めたら、「挿入する」をクリックしましょう。
Elementorのテンプレートには、既製のコンポーネントが複数搭載されています。これを編集したい場合には、その要素をクリック。サイドバーが切り替わり、その特定の要素に関する設定がすべて表示されます。
Elementor Proには、デザインに追加できる様々なWooCommerceウィジェットが用意されています。その内容については、サイドバーから「WooCommerce」または「Product」までスクロールして確認してみてください。
WooCommerce のパンくずリスト、カート、チェックアウトなど、高度な組み込み機能を持つウィジェットがあります。このような要素をデザインに追加するには、メイン画面にドラッグして放すだけです。その後、表示させたいセクションにウィジェットをドロップできます。
満足するデザインが完成したら、「公開」をクリックします。次に、「Add Condition（条件を追加）」を選択すると、このデザインを適用したい箇所を指定することが可能です。例えば、このテンプレートを特定の商品カテゴリのみ適用するか、ストア全体に適用するかを選択することができます。
既製テンプレートの探し方とインストール方法
Elementor のテンプレートは、ウェブサイトの作成プロセスを簡単にするためにあらかじめ設計されたページとブロックです。ページとはコンテンツ全体のレイアウトであり、ブロックは、あらかじめ組み込まれたウィジェットを含んだセクションです。ブロックの代表的な例として、ヘッダー、フッター、レビューやお客様の声、よくある質問（FAQ）などが挙げられます。
無料のElementorプラグインには、100種類以上のフルページテンプレートと、300種類以上のブロックが入っています。Elementor Proにアップグレードすると、さらに追加オプションが使用できます。
現在のデザインにテンプレートを適用するには、白いフォルダのアイコンをクリックします。このアイコンは各セクションに表示され、これをクリックするとElementorライブラリが開きます。
このライブラリには、適用可能なブロックとページのテンプレートがすべて表示されます。テンプレートの上にカーソルを置いて、虫眼鏡のアイコンをクリックすると、テンプレートをプレビューすることができます。
使いたいテンプレートが決まったら、「挿入する」をクリックします。テンプレートのライブラリに接続されていない場合は、接続の手順を完了するようポップアップが表示されます。
この接続が完了すると、テンプレートが挿入され、カスタマイズが可能になります。ウィジェットを追加したり、プレースホルダのコンテンツを削除したりすることができます。
Elementorでテンプレートを作成する方法
Elementorには、豊富に既製テンプレートが用意されていますが、すでに具体的なデザイン案をお持ちかもしれません。その場合は、自分でテンプレートをデザインするのがいいでしょう。
自分でデザインを作成することで、サイト全体の統一性を持たせることができます。あなたがWordPressエージェンシーであれば、テンプレートを使ってデザインと開発をスピードアップさせることも可能です。例えば、クライアントのサイトに適用するコンテンツや設定をすべて組み込んだテンプレートのライブラリを構築することができます。そして、そのテンプレートは、今後のプロジェクトに適用可能です。
まず、WordPressのダッシュボードから「テンプレート」を選択し、「新規追加」をクリックします。
続いて表示されるポップアップで、最初のドロップダウンメニューを開き、作成したいテンプレートの種類を選択します。選択肢には、ページ、セクション、ランディングページがあります。
次に、このテンプレートにわかりやすい名前をつけて、「テンプレートを作成」をクリックします。すると、Elementorページビルダーが起動し、通常のページを作成するのと同じようにテンプレートを作ることができます。お好きなセクション、カラム、ウィジェットを追加してください。
このデザインをテンプレートとして保存するには、「更新」または「公開」ボタンの横に表示される矢印をクリックし、「テンプレートとして保存」を選択しましょう。
このデザインは、Elementorライブラリに保存されます。ライブラリを起動し、「テンプレート」タブをクリックすると確認できます。
また、WordPressのダッシュボードから「テンプレート」>「保存されたテンプレート」に移動して、カスタムテンプレートにアクセスすることもできます。また、どのデザインも開いて、変更することが可能です。
Elementorを使い始めるためのヒントとコツ
Elementorを使えば、WordPressのウェブサイトをすぐにデザインし、構築することができますが、さらに時間を節約し、生産性を高められる方法があります。
同じページ内で再利用したいセクションを作成することがあると思います。このセクションを手動で再度作り上げる代わりに、複製することができます。複製したいセクションをクリックして選択し、「Ctrl」キーを押しながら表示される点線のハンドルをクリックしましょう。
次に「複製」を選択します。これで、元のセクションの真下に複製が作成されます。
同じセクションを複数のページ、または異なるウェブサイトで再利用したい場合には、どのセクションもブロックテンプレートとして保存することができます。保存すると、自分で作成したデザインが Elementorライブラリに追加され、いつでも簡単に使用できます。
ブロックを再利用可能なテンプレートに変更するには、「Ctrl」キーを押しながら点線のアイコンをクリックします。それから、「テンプレートとして保存」を選択してください。
画面上でウィジェットを選択し、サイドバーのコントロールを使用して、選択したウィジェットを編集することができます。しかし、ウィジェットがたくさんある場合には、異なるウィジェット間を移動するのが少し面倒です。特に、ウィジェットが重なっている場合や、小さなスペースに複数追加している場合がこれに該当します。
Elementor のナビゲータを使用すれば、ページ内のすべてのウィジェットを、対応するセクションとカラムに整理したリストが確認できます。ナビゲータのメニューパネルからウィジェットを選択すると、簡単にウィジェット間を移動することができます。サイドバーは、選択中ウィジェットのすべてのオプションが表示されるように切り替わります。
キーボードショートカットは究極の時間節約です。Elementorには、様々なホットキー（ショートカットキー）があります。「CmdまたはCtrl + ?」を押すと、ショートカット一覧が表示されます。
表示されるホットきーはすべて利用可能です。このようなショートカットを使いこなして、ウェブデザインやウェブ開発のスピードアップを図るのもいいでしょう。
まとめ
経験豊富なウェブデザイナーや開発者でない限りは、WordPressサイトの作成は比較的大変な作業です。ですが、Elementorページビルダーを使えば、サイト構築は簡単です。
無料版であっても、Proであっても、どんなタイプの投稿やページでもデザインして構築することができます。さまざまな既製テンプレートも使用できますし、自分でテンプレートを作成して、複数のページやウェブサイト上で再利用することも可能です。
WordPress Elementorプラグインの使用方法について、何かご不明点はありますか？下のコメント欄でぜひお聞かせください！
コメントを残す