Webデザイナーが解説!NoCodeツールElementorの導入

ロードマップ

「NoCode(ノーコード)ツールでよく聞くElementorってなに?」
「Elementorを使うと簡単にサイト制作ができるって本当?」

NoCode(ノーコード)ツールで、よく出てくるElementor気になるけれど、実際に使用してみないと何が良いのかわからないですよね…

そこで本記事では以下についてまとめました。

  • WebデザイナーがElementorを使用した方が良い理由
  • Elementorの購入方法からWordPressへの導入まで
  • Webデザイナ−がおすすめする!Elementorと一緒に使用すると、さらに良いサイトを作成できる方法

この記事をみるだけで、Webデザイナ−が、Elementorを使用するべき理由が理解でき、クオリティの高いサイトを作成する方法を知ることができます!

Elementorを取り入れて、案件単価を上げてみましょう!

ぜひ最後まで読んでみてください。

Elementor(エレメンター)とは?

Designed by Creativeart / Freepik

NoCode(ノーコード)ツールで、最近よく聞く、Elementor気になるけれど、Elementorがどんなものなのか全然しらない…情報しりたい!という方も多いと思いますのでElementorについて説明していきます!

Elementorとは?

ElementorとはWordpressのプラグインで、デザインを見ながら作成できる便利なツールです!

直感的にドラッグ&ドロップで操作して自由自在にサイト構築ができます。

コードを書かずに使用することが出来るので作成時間の短縮に繋がります。

使えるようになるには、多少の勉強が必要ですが、コードを勉強するより学習時間を削減できる便利なツールです。

Elementorの価格

Elementor公式ページ

Elementorは無料版と有料版があります。

有料版の価格設定は上の画像の通り米ドル49/年〜あります。

お試しで有料版を使用したい場合は1サイトでいいと思いますが、Webデザイナ−として案件でも使用していきたいのであれば、25サイト・米ドル199/年がおすすめです!

金額によって作れるサイト数が変わってくるのでご自分の活用方法に合わせてプランを選んでみて下さい。

無料版と有料版の違い

無料版と有料版の違いは画像をみてもらえると一覧になっているのでわかりやすいと思います。

私が有料版を使用している主な理由は以下です。

  • header、footerのテンプレートがある
  • 追加CSSの記載ができる
  • ポップアップ機能

header・footerのテンプレート

有料版だと、header・footerのテンプレートがあり、WordPressの編集ページで設定するとどのページにいってもheader・footerとして表示されるので便利な機能です。

無料版の場合は別途プラグインを入れる必要があります。

追加CSSの記載ができる

ドラッグ&ドロップでサイト作成が簡単にできるElementorですが、テンプレートにはない細かいデザイン部分を調節したい時に有料版だとCSSを記載してデザインの幅を広げる事ができます。

ポップアップ機能

クリックするとページ遷移せず、同じ画面内に表示させる事が出来ます。

ちょっと説明を付け加えたい時に他ページに移行せず、ポップアップで表示できる機能は便利です。

Elementorを使用するメリット・デメリット

Designed by Creativeart / Freepik

Webデザイナーの初心者だけではなくベテランも使用しているElementorのメリット・デメリットを把握して自分にあった使い方をしていきましょう!

メリット

Elementorには以下のメリットがあります。

  • コーディングの知識が全くなくても、Webサイト作成ができる
  • テンプレートが豊富にあるので、Webサイト作成の時短につながる

メリットを上手に使用してクオリティの高いサイトをより短い時間で作成できるようにしていきましょう!

コーディングの知識が全くなくても、Webサイト作成ができる

画像を見るとわかるように、左側にでてくる項目を右の画面にドラッグ&ドロップするだけで作成できます。

画像はボタンの項目をドラッグ&ドロップしてボタンが配置された画像です。

ビジュアルを見ながら配置ができるので見た目を確認しながら、コーディングの知識がなくてもWebサイトを作成することができます。

テンプレートが豊富にあるので、Webサイト作成の時短につながる

有料版は約140種のテンプレートから選ぶ事ができ、無料版でも約40種ほどから選ぶ事が出来ます。

さらにこのテンプレートを変更して自分の理想にも近づける事ができます。

テンプレートを使用すれば簡単におしゃれなサイトの構築ができるので、サイト制作の時短にも繋がります。

デメリット

手軽におしゃれなサイトを作成できるElementorのメリットですが、もちろんデメリットもあります。

私が思うElementorのデメリットはこの一つです。

有料版は1年単位のサブスクリプションしかない!

Elementorは無料版もあるので、有料版を使用してみてから、自分の使用方法と照らし合わせて、来年継続するか考えていけばいいと思います。

Elementorの購入方法

Designed by Creativeart / Freepik

Elementorの有料版を取り入れてみたいと思った方の為に、Elementorの購入方法をご紹介していきます!

  1. プランの選択
  2. 個人情報入力
  3. 購入

Elementor公式ページ

プランの選択

画像左から詳細(2021,05,20現在のレート計算)

  • 49ドル(約5,342円)/年、1サイト
  • 99ドル(約10,793円)/年、3サイト
  • 199ドル(約21,695円)/年、25サイト
  • 499ドル(約54,403円)/年、100サイト
  • 999ドル(約108,915円)/年、1000サイト

この中からどのプランにするか選択します

個人情報入力

金額を選択すると、個人情報を入力する欄がでてきますので画像を参考に入力して下さい。

購入完了

個人情報を入力後スクロールすると支払い方法の選択がでてきます。

  • クレジットカード
  • PayPal

この二種類になりますので、ご希望の決済方法を選択し入力、【Checkout】をクリックすれば、購入完了です。

WordPressへのインストール方法

Designed by Creativeart / Freepik

では実際にWordPressへの導入方法を無料版と有料版、画像付きで解説していきます。

有料版(Elementorpro)を使用するにも、無料版のElementorが必要になりますので、有料版を使用の方も無料版を導入してから、有料版を導入してください。

無料版の導入方法

  1. プラグイン
  2. 新規追加
  3. キーワードに「Elementor」入力
  4. Elementor Website Builderの「今すぐインストール」→「有効化」を選択

これでElementorがインストール済みプラグインに導入されました。

有料版の導入方法

有料版を導入するにはまずElementorのZipファイルをダウンロードする必要がありますので、マイアカウントページに入った所から説明していきます。

Elementor公式ページ

Elementorからのダウンロード

  1. サブスクリプション
  2. Zipダウンロード
  3. 自分のパソコンのフォルダにダウンロードされました。

WordPressへアップロード

  1. プラグイン
  2. 新規追加
  3. プラグインのアップロード
  4. ファイルを選択を押して、先程ダウンロードしたZipファイルを選ぶ、又は、Zipファイルをドラッグ&ドロップする

これでElementorpro(有料版)のインストールが完了しました。

 

WebデザイナーがElementorと一緒に使用している、おすすめのプラグイン3選

Designed by Creativeart / Freepik

Webデザイナーが実際に使用している、Elementorの機能を拡張してくれる、おすすめプラグイン3選をご紹介します!

  1. Happy Addons for Elementor
  2. EnvatoElements
  3. Contactform7

1. Happy Addons for Elementor

このプラグインを入れると出来ること

  • 500を超える無料アイコンが使用できる。
  • Elementorで使用できるウィジェットが追加される
  • Happy Effectという新しいアニメーションオプション
  • カラムの順番をデバイスで変えられるようになる

プラグインの有料版もありますが、無料版でも十分満足に使えますので試してみて下さい。

2.Envato Elements

このプラグインを入れると出来ること

Elemetnorのテンプレートを簡単に、Elemetnorの操作画面からロードすることが可能になる。

プラグインの有料版もありますが、無料版でも十分満足に使えますので試してみて下さい。

3.Contactform7

このプラグインを入れると出来ること

問い合わせフォーム作成

有料版のElementorをいれればお問い合わせフォームが作成できるようになりますが、無料版でお問い合わせフォームを作成したい場合はこちらを使用するのがおすすめです。

まとめ|Webデザイナーが解説!NoCodeツールElementor

Designed by Creativeart / Freepik

本記事ではWebデザイナーが解説!NoCodeツールElementorの導入について以下に内容をご紹介しました。

  • Elementor(エレメンター)とは?
  • Elementorを使用するメリット・デメリット
  • Elementorの購入方法
  • WordPressへのインストール方法
  • WebデザイナーがElementorと一緒に使用している、おすすめのプラグイン3選

いかがでしたでしょうか?

Webデザイナ−が、使用するElementorの便利さを理解できたと思います!

Elementorを取り入れて、クオリティの高いサイトを短い時間で作成し、案件単価を上げてみましょう!

コメント

タイトルとURLをコピーしました