Elementor

Table of Contents

ウェブサイトをこういったGUIで作成できるようにしようという動きは随分前からありました。AdobeでいうところのDreamweaver、Microsoftでいうところのホームページビルダー。

ElementorはWordpressのプラグインとして実装しますが、WordpressでかなりのレベルのWYSWYGエディターを実現するものです。

この映像はElementor本家サイトから拝借してきたものですが、これを見れば一目瞭然。そのレベルは大きく進化して、もうIllustratorやInDesignでレイアウトをしているような感覚に陥ります。Elementorは無料で利用できますが、PRO版に有償でアップグレードをすることによって、機能をふやしたりテンプレートをダウンロードすることが可能になります。使えば使うほど有償版にせざるを得ないトラップ満載なので、最初からあきらめて有償版にしてしまうのが良いと思います。

WordPress + Hello + Elementorで実現する爆速ウェブ開発環境

Adobe XDなどウェブを開発する環境もいろいろと試行錯誤されていると思いますが、正直デモサイトのような構築もWordpressをベースにHello+Elementorで作ってしまうのが一番効率が良いように思えます。もし会員サイトのようなものの開発であってもで、デモというレベルであれば十分動きも再現できますし、スマホやタブレットでの表示もウェブブラウザで普通に見たほうが、問題点を早期に発見することが可能です。開発環境としても非常に強力ということになります。

なぜElementorなのか?

グラフィックデザイナーは時代のテクノロジーに翻弄されます。印刷技術、DTPの進化、映像の発展による動くデザインの需要、そしてウェブサイトという現代ではメインになりつつあるメディア。ウェブは表示したり動いたりだけではなく情報の動的な表現が必要になるメディアです。そういったメディアに対して良質な表現をするためには、非常に高いスキルが要求されます。コンピューターがデザイナーのメインツールになった今、自分が使う道具に対しての知識を高めるのは当然ですが、日々進化していくウェブテクノロジーをデザイナーが常にキャッチアップしていくのは非常に困難です。そういう状況を大きく改善してくれるのがElementorです。

ワークフロー

WordPressにプラグインとしてインストールします。推奨されているテーマをインストールするとクリーンな実装が可能です。

インターフェイス

ドラッグ&ドロップが基本です。右クリックしてプルダウンできるメニューも、バージョンを重ねるごとに増えているようです。

グローバル設定

サイト全体のレイアウトのルールなどを行う、グローバル設定などを見ていきます。繰り返し使う色などを設定することができます。

ウィジェット

ページの要素はすべてウィジェットとして存在していて、そのウィジェットを並べることでページを構成していきます。

Elementor関連記事