Elementorのワークフロー

Elementorワークフローの目次

必要な要素

ElementorはWordPressにプラグインとしてインストールします。推奨されているテーマHelloをインストールするとクリーンな実装が可能です。と、いうのもElementorにはテーマビルダーという機能があって、Wordpressで一般的なテーマでデザインを編集する機能をオーバーライドできてしまいます。HelloはそのElementorの機能を優先して作成された専用テーマなので、非常にシンプルにできていて余計な作業を省くことが可能になります。

WordPress、Elementor、Helloが必要な要素になります。

WordPressとは

グラフィックデザイナーであれば、もう素通りできないものになっていると思います、Wordpress。ここでちょっとおさらいをしておきます。

ブログブーム黎明期に、Wordpressは、phpとデータベースを使いダイナミックにコンテンツを表示するCMSとして人気が出ました。かたやMovableTypeというブログシステムも人気があり、その主な理由がサービスインするページはすべてhtmlに変換されたものであるから、というものだったように記憶しています。そうこうしているうちにYahoo!の検索エンジンとしての地位が失墜、Googleがどんどん進化して、htmlだろうがphpだろうが正確に情報を整理しはじめて、結局は無償で導入でき、エレガントに情報を整理表示できるWordpressに軍配が上がった!という感じだったと思います。

と、いうことでいまではWordpress1強。あくまで2020年現在までの話ですけど。CMSという観点でみればJoomlaとか他のものもいろいろありましたが、とりあえずしばらくはWordpressで間違いないと思います。

WordPressを運用するには

そんなWordpressを運用するには少しだけサーバーに条件があります。

  • 最新のphpが利用できる
  • MySQLが利用できる


今どき上記の要件を満たしていないホスティングサービスを探すほうが難しいとは、思いますがサービス選びでのポイントは

  • サーバーアップタイム(落ちない)
  • 料金(ハードディスク無制限でも、通信従量などトラップあり)
  • 管理画面(メールなど管理は簡単なのが良いです)


などなども比較検討するとよいと思います。

そんな事情をいろいろ考えて、新田(父)が行きついたサービスがXSERVERさま!もう、さま!です。コストを考えてもっぱら海外ホスティング派でしたが、XSERVERくらいの価格になれば十分安いですし、とにかくダウンタイムを経験したことがない!さらにXSERVERはWordpress運用に特化した仕様になっていて、Wordpressのインストールも超絶簡単!基本クリックと少しの入力でバンバンサイトを量産していけます。

WordPressをインストールしたら

プラグインのインストール

本題はElementorでした。Wordpressの管理画面メニューのプラグイン>新規追加からElementorで検索、表示されたElementorをインストールします。

テーマをインストール

テーマもインストールしましょう。Helloというのが推奨テーマです。テーマはサイトに対してグローバルに機能を付加したり、デザインのルールを制御するファイル群で、Wordpressで作るサイトのデザインや振る舞いはすべてこのテーマ次第というのが常識ですが、Elementorはそこが違います。なんとテーマビルダーという機能があって、テーマが担当の部分までもをユーザーが編集することが可能になります。ここが、他と一線を画すElementorの優れた部分です。プラグインと同じように、Wordpressの管理画面>外観>テーマ>新規追加ボタン>Helloで検索、インストールという流れです。かならずHelloである必要はありませんが、いまのところ経験上、各種設定項目が重複したりがなくなるのでHelloが最善の選択に思えます。

ところで、このテーマファイル、ものによっては頻繁にアップデートがかかります。Wordpressでは機能の改善や改造をするのにテーマファイルを編集する必要がある場合があって、アップデートをかけると、その編集内容は新しいバージョンのテーマファイルに書き換えられてしまいます。

そのような問題を回避するために、Childテーマという差分だけを内包したテーマファイル群を利用しますが、Helloに関してはそのChildが公式サイトにはなく、GitHubで公開されています。

Elementorの初期設定

サイトロゴマークなどサイトのグローバル設定

Elementorのページの編集画面にあるグローバルメニューから、Site Setting > Site Identityと進んで設定します。

ヘッダー、フッターの設定

サイトの基本パーツであるヘッダーとフッターを設定します。Elementorでは設定したヘッダーとフッターを無視してランディングページやキャンペーンページを作成するモードも用意されています。まずはサイトの基本形を作るのが重要です。

アーカイブの設定

日々追加していく記事を、カテゴリ分けなどでリスト表示する動的なページのデザインを指定します。

投稿ページの設定

記事単体の表示デザインを設定します。

404ページの設定

ページが見つからなかった際に表示するエラーページのデザインを編集します。

上記のページには動的に変化する内容、例えば最新の投稿などがあると思いますが、それらはすべてウィジェットと呼ばれるモジュールを配置することで表示することが可能です。

このような決まり切ったページの基本的な情報処理方法をテンプレートとして保存していき、そのテンプレートが利用される条件も設定。言ってみればInDesignやIllustratorで段落スタイルなどを設定していく考え方によく似ていると思います。

ドラッグ&ドロップとグローバル設定で爆速ウェブ作成

デザインとは設計、設計は行き当たりばったりで作るものではありません。経験が少しでもあるグラフィックデザイナーであれば仕込み、まとまったアイデアがいかに重要かを知っていると思います。コンセプトさえしっかりしていればあとは作業するだけ。作業に使うエネルギーは簡単に見積もりできるのでメンタル的なストレスは非常に軽いです。Elementorでのウェブ作成はグラフィックデザインにおける制作に対する考え方とよく似ています。

グローバルなデザインを考える>グローバルな設定をする。

グローバルデザインをベースに要所要所でインパクトのある演出を作る>ドラッグ&ドロップで情報の種類を配置して、各々スタイル設定で細かい演出を施す、といった流れで爆速でウェブを作成できます。

無料版とPRO版

Elementorは無料でインストールできるプラグインです。しかし無料版には使えるウィジェットの種類に制限があって、テンプレートもイカすやつに限ってPROのみダウンロードできるような仕組みになっています。PRO版は1年間のサブスクリプションで、使用できるサイトの数が1,3,1,000と3コース用意されていて、それぞれの価格が49ドル、99ドル、199ドルになっています。業務案件として導入するのであれば圧倒的に1000サイトコースがオトクです。