Elementorのワークフロー
Elementorワークフローの目次
必要な要素
ElementorはWordPress にプラグインとしてインストールします。Elementor Proにはサイトデザインを統括して行えるテーマビルダーという機能が用意されていて、ヘッダーやフッターのデザイン、投稿ページのフォーマット化などが自由に行えます。このようなデザインに自由度がある環境では多機能のWordpressテーマファイルではかえって煩わしかったり、Elementor本来の機能を邪魔してしまう可能性があります。
そこで推奨されているテーマHello をインストールするとクリーンな実装が可能です。
HelloはそのElementorの機能を優先して作成された専用テーマなので、非常にシンプルにできていて余計な作業を省くことが可能になります。
クリーンにElementorをフルに使うのにはElementor専用のHelloテーマがベストチョイスです。
WordPressとは
グラフィックデザイナーにとってウェブサイトという媒体は当たり前を通り越して主戦場になっていると思います。Wordpressは世界的も多く使われているCMSで、元々はブログ用のシステムでした。ここでちょっとWordpressのおさらいをしておきます。
ブログブーム黎明期に、Wordpressは、phpとデータベースを使いダイナミックにコンテンツを表示するCMSとして人気が出ました。かたやMovableTypeというブログシステムが完全にWordpressより人気が高く、その主な理由がサービスインするページはすべて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版の料金は2021年4月に大幅改定になりました、詳しくはElementor価格改定！ を見てください。
