ノーコードWeb制作ツールElementorの3大要素、セクション・カラム・ウィジェット
Web制作を行う場合、通常UI/UXのデザインをIllustratorやXDなどのツールで制作し、コーディングを行います。デザインを制作する時点でコーディングで「このように書いていこう」と考えながら作り、完成したデザインをスライスし改めてレイアウトしていくと思います。
ノーコードでWebサイトを制作できるElementorは、画面上でデザインを考えながらコーディングができる為、作業工数が大幅に削減できます。
制作にかかる工数が落ちれば、クライアントへの提供価格を抑えられたり、利益率を高められる為Webデザイナーとしてのメリットは大きくなります。
今回、ElementorでノーコードWeb制作を進めるにあたりはじめに理解しておくべき3大要素のセクション・カラム・ウィジェットについて解説します。
基本的な事ですが、こちらをきちんと理解してから作業を進める事で、さらに制作スピードをアップさせたり、制作中のトラブル対応にも役立つと思いますので、Elementorを始めたばかりの方は是非ご覧ください。
html+CSSでのコーディング時の考え方
一般的なWebサイトは、下の図のようにブロックを上から順番に配置しながら制作します。<div>で囲んだブロックを話の順番に積み下げていくイメージです。中にはブロックの中に横並びにする要素も出てきますので、その場合flexboxなどを利用して横並びの要素を作っていきます。
上のデザインは、上のブロックと下のブロックに大きく分かれています。
コーディングをするなら、上のブロック（<div>）の背景に画像を挿入し、左側にロゴとテキストを配置ます。
下のブロック（<div>）を横並びの列（<flexbox>）にして、画像（img）とテキスト（pやspan）等の要素が入っている小さなブロックを三つ横並びにするでしょう。
Elementorでも同じように考えるので、
ブロック、横並びの列、要素の3つを覚えておいてください。
Elementorでの考え方
Elementorでも考え方は同じで、ブロック、横並びの列、要素を工夫しながらレイアウトをしていきます。
考え方が同じなので、これまで通りElementorの作業に入る前に、IllustratorやXDなどのツールで先にUI/UXを制作してからコーディングを行う時に考え方を変える必要はありません。（一部Elementor特有の制約もあるので、別の記事で紹介します）
ブロックを作るセクションについて
上記のサンプルにある<div>で囲んだブロックはセクションで管理します。
セクションはその中に入れる要素を囲う箱のような役割を持っていて、基本的に横並びにする事はできず縦に積んでいきます。（特殊なコーディングをすると、横スクロールWebサイトのようにセクション自体を横並びもできるようになりますが、今回は割愛します。）
セクションには背景に色や画像を設置したり、表示の際のアニメーションやmargin、paddingを設定する事も可能ですが、基本的には「ブロック」としての機能するものとして考えましょう。
工夫次第では、パララックス画像を背景に設置した巨大なイメージとして使用したり、映像を配置して、フルスクリーンの映像コンテンツとして使用する事もできます。
横並びの列を作るカラムについて
カラムは横並びの列を設定する要素です。
セクション追加の際に、1カラム、2カラム、3カラム、幅の比率が違うカラムなどを選ぶ事ができます。
選択したカラムは後で比率を変更する事ができます。例えば50%50%で作っていたカラムを30%70%にしたり、2列のカラムで作っていたけどやっぱり3カラムにしたり、1カラムに減らす事もできます。このように、カラムもセクションと同じように「ブロック」ですが、横並びにできる（または1つで横並びにしない）ブロックの中の箱のようなものになります。
Webサイトはいくらでも縦にスクロールする事ができますが、一度に目に入るスペースは限られています。
カラムをうまく利用して、ユーザーが欲しい情報を1つの画面に収める方が良いのか、スクロールして順番に見てもらう方が良いのか考えながらレイアウトを考えるようにしましょう。
文字や画像要素を作るウィジェットについて
セクションやカラムはブロックや箱として、何かを中に入れるためのものでしたが、ウィジェットはその中に入れる要素になります。
サンプルのデザインでは、画像、01などの通し番号、見出しがウィジェットとなります。
01の左右にあるーは、カラムでも作れますが、1つのカラム内にinlineで設置したーと01とーを並べる事で横並びにしています。
このように、箱の中に入れる要素がウィジェットで、Elementorでは初期段階で様々なウィジェットが搭載されています。
また、Elementorの拡張プラグイン、Premium addonsやHappy addonsなどを追加インストールすると使えるウィジェットが増えていくので表現の幅が広くなります。
ただし、プラグインは追加すればするほど重くなり、プラグイン同士のバッティングでトラブルが発生するリスクが高くなりますので、無闇に追加せず、基本的な機能をいかに工夫して表現するかを考えてからにしましょう。
まとめ
ノーコードでのWeb制作ツールとして優秀なElementorですが、膨大な機能の役割はきちんと理解してから制作すると、作業効率が高まります。わたしも独学でElementorを学びましたが、最初は「セクション？カラム？」と、何が何の役割をしているのか、いつ使うものなのかがわからないまま使っていました。最初はテストサーバーで遊びながらいろんな機能を試して、役割を理解していくと良いと思います。
Elementorの操作などについてご質問があれば、わかる範囲で回答しますのでコメントにお願いします。
☆☆オススメ紹介☆☆
Elementor
こちらの記事でご紹介したノーコードWeb制作ツールElementorのホームページです。英語表記なので、英語が苦手な方はGoogle翻訳などで日本語化してご覧ください。
拡張プラグイン
Elementorには上記のように拡張プラグインがたくさん存在しています。Premium addonsは、投稿をカルーセルできるなど面白いウィジェットがあり、Happy Addonsはカラム自体にリンクを設置できるなど、Elementor本体にない機能を追加できます。
Xserver
さくらサーバー、kagoya、ロリポップなど、クライアント指定の様々なサーバーでElementorを使ったWeb制作をしてきましたが、Xserverがダントツで早く安定していました。サーバーによってはElementorが使えないという事もあったので、サーバー選びは慎重に行いましょう。
Xserver以外を選ぶつもりは（いまのところ）無いというほどぼくは信頼しています。
※上のバナーからXserverを契約すると2,000円割引を受ける事ができます。
この記事が気に入ったらサポートをしてみませんか？