かつて昔、コードを学んだり、ウェブデザイナーでない限り自分のウェブサイトを作ることは、ほとんど不可能でした。
しかし2021年となったいま、WordPressとElementor（エレメンター）のようなドラッグ&ドロップを基本とした、直感的なWebページビルダーを使えば、誰でも簡単にウェブサイトを作れるようになりました。
この記事では、WordPressとElementorをつかってホームページを作成する方法を、順番を追ってご紹介します。
Elementorって何？特長は？
Elementorは、WordPress向けドラッグ＆ドロップのページエディタで、プロのような美しいホームページを簡単に、かつスピーディーに作ることができます。
特長としては、ドラッグ＆ドロップによるデザインの追加や並び替え、編集をリアルタイムで行うことができる点。コードの知識不要で、誰でも簡単にハイクオリティなデザインを作成でき、ホームページ制作を根本から変えてしまう可能性も。
90種類を超えるの便利なウィジェットや、すぐにサイトを立ち上げるテンプレートライブラリ200種類、直感的なスマホ向けレスポンシブ編集ツール、デザインの過程をさかのぼるリビジョンヒストリー機能など、ホームページ作成に必要なツールが一式揃った充実度。
プラグインのダウンロード数を着実に増えており、有効インストール数は500万以上で、口コミが高評価なのも納得です。
Elementorのインストール
Elementorを利用するには、WordPressをインストールしておく必要があります。まだ準備ができていないという人は、手順をまとめた基本ガイドを活用してみましょう。
今回利用したテーマは、Elementor公式テーマとなる「Hello」。無料WordPressテーマやカスタマイズのしやすいプレミアム有料テーマも検討してみても良いでしょう。
WordPressの管理画面より、「プラグイン」>「新規追加」にすすみ、「Elementor」で検索します。
「今すぐインストール」をクリック。最後に「有効化」をクリックしたら、Elementorを使う準備は整いました。
Elementorの基本的な使い方
Elementorの準備ができたら、実際に試してみましょう。まず「固定ページ」>「新規追加」へと進みましょう。タイトルを入力したら、画面上部にある「Elementorで編集」ボタンをクリックしましょう。
おめでとうございます、無事にElementorエディタ画面を開くことができました。
右側が「コンテンツエリア」、ホームページのデザインやレイアウトを追加、編集する核ともいえる部分。
左側が「レイアウトパネル」、ウィジェットと呼ばれるホームページ作成に必要なツールが並びます。
「ウィジェット」は、ホームページにさまざまなデザイン要素（見出しタイトルや文章テキスト、画像、動画など）を追加できる、いわゆる部品のような役割。レイアウトパネルの右上のアイコンより、いつでも呼び出すことができます。
レイアウトパネルの左上にある「ハンバーガーメニュー」より、アクセス可能なのが以下の通り。
- サイト設定: サイト全体の配色や書体などの設定をまとめてできる
- テーマビルダー: ヘッダーなどサイトのパーツを1箇所で管理できる（Elementor Pro専用）
- ユーザー設定: インターフェースをデザイン変更、ダークモードやレイアウトパネルの幅の調整など
「サイト設定」と「テーマビルダー」機能については、次回以降に詳しくご紹介します。
レイアウトパネルの下部分にもいくつかのアイコンがあります。
「設定」をクリックすると、「サイト設定」でページの名前を編集したり、レイアウトの選択などが可能。真っ白の状態からはじめたいときは「Elementorキャンバス」、ヘッダーを残したいときは「Elementor全幅」 としましょう。
その他にも、ウェブページの要素をまとめて確認できる「ナビゲーター」、編集履歴を確認する「ヒストリー」、スマホなど異なる画面サイズに切り替えできる「レスポンシブ・モード」が用意されているので、これらも後ほど詳しく。
Elementorを使ったウェブサイトの作り方は、２通り。ゼロから作るから、ライブラリからテンプレートを利用するかです。
フォルダアイコンをクリックすると、ページまるごとデザインした「固定ページ」と、パーツごとに分けられた「ブロック」、自分で作成し、保存した「テンプレート」、3つのタブが表示されます。
ここでは試しに「ブロック」よりひとつ選び、「挿入」ボタンでページに配置します。
たったこれだけの操作で、選択したブロックが見事に表示されました。
つぎにElementorの基本となる構造を理解しておきましょう。
Elementorは「セクション」、「カラム」、「ウィジェット」という３つの組み合わせからなります。
「セクション」がもっとも大きく、青いボーダー線で判別できます。そして、その中に「カラム」があります。ここでは1つのカラムが適用中で、黒いドット線で見分けが可能。このカラムには、見出しや文章テキスト、ボタンといった「ウィジェット」が利用されています。それぞれのアイコンより操作が可能。
「ウィジェット」のアイコンを右クリックすると、複製やコピー、削除などを指定できます。ウィジェットはドラッグで自由に配置を変更でき、青いラインでどこに配置されるか判別できます。
作成したカラムにお好みのウィジェットを追加、編集したり、「セクション」ごと削除したいときは+アイコンをクリック。
「セクション」と「カラム」は、「レイアウト」「スタイル」「高度な設定」という３つのタブが展開。「ウィジェット」では、「コンテンツ」「スタイル」「高度な設定」という３つに。
この記事では、Elementorのインストールにはじまり、Elementorの基本的な使い方や概要について詳しくみてきました。
特別なスキルを必要とせず、 はじめての人でも本格的なホームページを直感的に作成できるのを実感できたかと思います。
次回は、無駄がなく統一感のあるホームページ作りに欠かせない、「デザインシステム」をいよいよ作成していきます。
