Advertisement

 

かつて昔、コードを学んだり、ウェブデザイナーでない限り自分のウェブサイトを作ることは、ほとんど不可能でした。

 

しかし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を使ったウェブサイトの作り方は、2通り。ゼロから作るから、ライブラリからテンプレートを利用するかです。

 

フォルダアイコンをクリックすると、ページまるごとデザインした「固定ページ」と、パーツごとに分けられた「ブロック」、自分で作成し、保存した「テンプレート」、3つのタブが表示されます。

 

ここでは試しに「ブロック」よりひとつ選び、「挿入」ボタンでページに配置します。

 

たったこれだけの操作で、選択したブロックが見事に表示されました。

 

 

 

つぎにElementorの基本となる構造を理解しておきましょう。

 

Elementorは「セクション」、「カラム」、「ウィジェット」という3つの組み合わせからなります。

 

セクション」がもっとも大きく、青いボーダー線で判別できます。そして、その中に「カラム」があります。ここでは1つのカラムが適用中で、黒いドット線で見分けが可能。このカラムには、見出しや文章テキスト、ボタンといった「ウィジェット」が利用されています。それぞれのアイコンより操作が可能。

 

 

 

「ウィジェット」のアイコンを右クリックすると、複製やコピー、削除などを指定できます。ウィジェットはドラッグで自由に配置を変更でき、青いラインでどこに配置されるか判別できます。

 

 

 

作成したカラムにお好みのウィジェットを追加、編集したり、「セクション」ごと削除したいときは+アイコンをクリック。

 

 

 

「セクション」と「カラム」は、「レイアウト」「スタイル」「高度な設定」という3つのタブが展開。「ウィジェット」では、「コンテンツ」「スタイル」「高度な設定」という3つに。

 

 

 

この記事では、Elementorのインストールにはじまり、Elementorの基本的な使い方や概要について詳しくみてきました。

 

特別なスキルを必要とせず、 はじめての人でも本格的なホームページを直感的に作成できるのを実感できたかと思います。

 

次回は、無駄がなく統一感のあるホームページ作りに欠かせない、「デザインシステム」をいよいよ作成していきます。

 

前回の記事では、Elementorエディタの使い方の基本を詳しくみていきました。 今回は、Elementorをつかったホームページ制作のプロセス改善、