Elementorの勝手マニュアル
Elementorの勝手マニュアル
ウェブサイトをこういった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にプラグインとしてインストールします。推奨されているテーマをインストールするとクリーンな実装が可能です。
インターフェイス
ドラッグ＆ドロップが基本です。右クリックしてプルダウンできるメニューも、バージョンを重ねるごとに増えているようです。
グローバル設定
サイト全体のレイアウトのルールなどを行う、グローバル設定などを見ていきます。繰り返し使う色などを設定することができます。
ウィジェット
ページの要素はすべてウィジェットとして存在していて、そのウィジェットを並べることでページを構成していきます。
ウィジェット共通機能
ウィジェットには共通機能があります。
ダイナミックタグ
Proにすると解き放たれる真のElementorパワー、ダイナミックタグの解説です。
テーマビルダー
コーディングが苦手なデザイナーの悩みが一挙に解決する神機能です。
