こんにちは根本です
今回はElementorを使ってWebデザインの
模写練習をする際のポイントについて
ご紹介していきたいと思います
Elementorユーザーの中には
一時的に自分のサイトを作成するために
Elementorを使うっていう方も
もちろんいると思うんですけど
その一方でホームページの制作を請け負ったりとか
そういうのがしたい方もいらっしゃると思います
そういった方の場合は日々Elementorの
スキルをどんどん磨いていきたいって思っている方
多いと思うんですね
じゃあどうやってElementorのスキルを
伸ばしていけばいいのか磨いていけばいいのかっていうと
一番手っ取り早いのは模写練習だと思うんですね
ただ模写練習をするといってもいきなりその模写を始めても
なかなかスキルアップが難しいんですね
なので今回はその模写練習を始める際のポイントということで
模写練習をやるまでにやっておきたいことこととか
あと実際に模写練習する際のポイントとか
そういうのをご紹介していきたいと思います
と言ってる僕も最初はElementorの
使い方あまり理解してなくて上手くページが作れませんでした
今からだいたい2年とか2年半くらい前ですね
にElementorを使い始めたんですけど
最初本当にめちゃくちゃ簡単なページしか作れなくて
でそこからほぼ毎日のように
Elementorに触れてきて
だいぶ使いこなせるようになりました
なので今回はそんな僕の経験を基に全部で7つ
ポイントを用意しましたので
Elementorを使い始めて間もない方とか
あるいはこれから使っていこうと思っている方は
ぜひ参考にしてみてください
じゃあさっそくご紹介していきたいと思います

Elementorの基本的な使い方をマスターする

まず1つ目のポイントとしてはElementorの
基本的な使い方をマスターするっていうことです
これは当たり前と言えば当たり前なんですけど
Elementorの基本的な使い方を
マスターする。これが1つ目のポイントです
模写練習をする前にやっておきたいことですね
になるんですけどElementorの使い方
基本的な使い方は必ず知っておいてください
その基本的な使い方って何かっていうと
例えばウィジェットの使い方とか
あとはElementor特有の設定とかですね
そういうのが結構ありますので
そういった内容をしっかり覚える
それが重要になってきます
ただし全ての機能を理解する必要はありません
よく使う機能とそうでない機能っていうのがやっぱり出てきます
なので取捨選択をしてよく使うものだけ最初は理解すればOKです
じゃあどんな機能を理解すればいいかっていうと
僕の方でいくつかピックアップしました
よく使うウィジェットと後はセクションとカラムの設定とか
マージンとパディングですね
この3つ理解しておけば基本的には大丈夫です
まあ大丈夫というか模写練習ができるようになります

よく使うウィジェット解説

まずよく使うウィジェットについてご紹介していくと
まずは基本の中にあるウィジェットですね
ここでは内部セクションとか見出しとか画像。テキストエディター
動画ウィジェットとボタンウィジェット
区切り線とアイコンですね。ここらへんはよく使います
それから一般の中にあるもの
アイコンボックスとかアイコンリストとか
推薦文。アコーディオン。切り替え。ソーシャルアイコンですね
ここら辺が良く使いますので覚えておいてください
全部で14個のウィジェットですね
もちろんこれら以外にもウィジェットっていうのは
たくさんありますし人によってはもしかしたら
他のウィジェットもよく使うっていうことも
あるかもしれないですけど僕の経験上この14個くらいしか
基本的には使いませんのでまず最初はこの14個
しっかり覚えておけばOKなんじゃないかなと思います
じゃあ続いてはセクションとカラムの設定ですね
セクションもカラムもだいたい似たような設定に
なっているんですけどスタイルにある背景と
後背景オーバーレイの設定ですね
ここらへんの使い方をマスターすればセクションと
カラムの設定は基本的には大丈夫です
それからマージンとパディングこれは両方とも
余白を作ることができる設定でマージンの場合は外側に
パディングの場合は内側に余白を作成することができます
まあ特になんですけど僕の場合はパディングを
よく使う傾向にあります
まあマージンも使わないことはないんですけど
まあ比率でいうとパディングの方がよく使います
ということでポイントの1つ目としては
Elementorの基本的な使い方
特に14個のウィジェットですね
内部セクションと見出し。画像。テキストエディター。
動画。ボタン。区切り線。アイコン。アイコンボックス
アイコンリスト。推薦文。アコーディオン。切り替え
ソーシャルアイコンですね
この14個。それからセクションとカラムのスタイルにある
背景と背景オーバーレイの設定ですね
で最後マージン、パディングの設定です
これくらい覚えておけばまあ簡単なページは作成できますので
ぜひ使い方を覚えてみてください

シンプルな構成のページを参考にする

続いてポイントの2つ目に関しては
これは実際に模写する際なんですけど
シンプルな構成のページを参考にするというものです
模写を始める前の段階として参考にするページを選ぶと
思うんですけどその際にできるだけシンプルな構成ですね
特に初心者の方の場合はできるだけシンプルな構成のページを
選ぶようにしてください
特になんですけど日本でよくあるホームページとか
ランディングページとかの場合は構成が複雑だったりとか
あと中にはPhotoshopを使って
画像を作成してそれをページに埋め込んで終了とか
そういうのが結構あるんですね
そういうのはElementor単体で
模写するのは難しいので出来るだけ構成が簡単なものは
選ぶようにしてください
Elementorは非常に便利なツールなんですけど
やっぱりできることとできないことっていうのがあります
なのでできなそうな構成のものは最初から選ばないっていうことが
重要なんですね
まあ具体的にはよく曲線があるとかあとは図形があるもの
そういうものはできるだけ選ばないようにしてください
で逆に僕がお勧めするページに関しては
Elementorのテンプレートです
Elementorをインストールすると
無料版と有料版のテンプレートが用意されているんですけど
無料版使う方は無料版だいたい10種類くらいですね
無料で使えますのでそのテンプレートを参考にして
模写練習をするといいんじゃないかなと思います
まあすべてのテンプレートをチェックしているわけでは
ないんですけど基本的にはElementorだけ
Elementorとストックフォトだけですね
でページが作れますので
最初はElementorのテンプレートが
一番おすすめです
まあストックフォトに関してはピクセルとか
ピクサベイっていうところでクレジット表記なしで
しかも無料でダウンロードすることができますので
そういった所でストックフォトをダウンロードしてきて
だいたい同じようなページを作ってみると
いいんじゃないかと思います
しかもElementorのテンプレートを
使うことによってまあどういう設定になってるのか
どういうエフェクトがかかってるのかとか
どういうウィジェットが使われているのかとか
そういうのが編集画面を見ることによって
簡単にチェックできますので初心者の方非常にお勧めです
ただしElementorの無料版使ってる方は
そのテンプレートの数が結構少ないので
もっと練習をしたいっていう方はエンバトエレメントっていう
無料のプラグインを導入してみてください
このプラグインを導入することによって追加で
無料で使えるテンプレートがゲットできます
ということで2つ目のポイントとしては
シンプルな構成のページを参考にする
模写するということですね。はい

同じ色を使用する

じゃ続いて3つ目のポイントとしては色のピックアップです
つまり同じ色を使用するっていうことです
もちろん慣れてきたら自分オリジナルの色を
使ってみてもいいと思うんですけど
最初は全く同じ色を使うことをおすすめします
Elementorのテンプレートを使う方は
そのテンプレートを取り込んで編集画面から色を持ってくれば
OKなんですけどテンプレート以外のページを参考にする方は
Googlechromeの拡張機能を使ってみてください
僕の場合はColorPick Eyedropperっていう
拡張機能を使っているんですけどこれを導入することによって
1回そのページの任意の部分をクリックすることによって
カラーコードを表示してくれます
であとはそのカラーコードをコピーして
ページで設定をすることによって
全く同じ色を使用することができるんですね。はい
っていうことでこれが3つ目のポイントですね

レイヤー構造のチェック

続いて4つ目のポイントに関しては
レイヤー構造のチェックです
これは結構難しい作業なんですけど
レイヤー構造を見極めるっていうのはとても重要です
Elementorの基本概念としてはセクションの中
セクションという箱の中にさらにカラムって箱があって
そのカラムの中にウィジェットを突っ込んでページを
構成していくっていうのが基本概念になっています
セクションでもカラムでも背景色を追加したりとか
画像を挿入したりとかウィジェット単体でも
背景に色を追加したりとかそういうのが設定できるんですね
なのでどれをどの順番に設定をすればいいかっていうのが
結構迷いがちです
なんですけどその順番レイヤー構造はページの構成に関わってくる
部分なので一番重要と言っても過言ではないくらいなので
参考にするページをよく見てどの部分にどんな要素を
追加すればいいのかってのを自分で考える作業してみてください
ちなみになんですけど先ほどもご紹介したように
セクションの中にカラム
そしてウィジェットって順番に追加をしていきますので
レイヤー構造としては一番下の部分にセクションが来て
その上にカラム。そしてウィジェットっていう順番になります
基本的にはこの順番ですね
例えばこのような画像があったとします
これは比較的簡単なページなんですけど背景に画像が
埋め込まれていてその一つ上に白い背景のものがあって
さらにその上にテキストとかボタンが挿入されています
このようにどんなレイヤー構造になっているかっていうのを
見極められればあとは比較的簡単に設定することができます
ちなみにこの画像はElementorの
テンプレートのものなんですけどセクションの背景に
画像を埋め込んでその上カラムの背景で白い背景を追加して
でさらにその上にテキストとかボタンのウィジェットを
追加していけばいいっていうのが分かります
結構ページを模写する真似するっていうのは簡単だと
思いがちなんですけどこういった構造
ウィジェットを追加する前の段階として
意外とつまずいてしまいがちなので最初にしっかりと
レイヤー構造を見極めるっていうのが重要になってきます

余白の調節

じゃあ続いて5つ目のポイントとしては余白の調節ですね
これはポイントの1つ目のところでも簡単にご紹介しましたけど
書籍でも余白に特化したものがあるくらいなので
余白の調節というのはとても重要です
しかも余白の調節は少し難しいです
レイヤー構造よりは難しくはないと思うんですけど
パディングを調節すれば対応できそうだなというものが
分かってもカラムを調節した方がいいのか
それともウィジェットで対応した方がいいのかとか
あるいはページの構成上ウィジェットで対応してしまうと
外観がおかしくなってしまうとかそういったことが
たまにあるんですね
なのでどの要素どのセクションなのか
どのカラムなのかどのウィジェットなのか
そういう見極めも重要ですしどれくらい余白を作るのかって
いうのも判断しないといけません
余白を作る場合はそういう難しさがあります
あと余白関係で言うとスペーサーっていうウィジェットがあります
一応このスペーサーを使うことによって
余白を持たせることができるんですけど
できるだけ使わないで模写したりとか
ページを作成することをお勧めします
結構セクションとかカラムとかあとはウィジェットもそうですけど
高度な設定のパディングとかマージンで対応できることが
ほとんどなので極力スペーサーを使わずに対応することを
おすすめします
はいじゃあ続いては6つ目のポイントですね
6つ目はセクション構造の見極めです
先ほどもご紹介しましたけどセクションの中にカラムがあって
でその中にウィジェットを突っ込んでページを作成する
それが基本的な概念になるんですけど
それだと対応できないっていうことがたまにあります
例えばこのような画像です
特になんですけどカラムが枠で囲まれているような
デザインになっていると大元のセクションの中にあるカラムで
オーダーを追加したくなると思うんですけど
それだとうまく対応ができません
この場合は他にも対応方法があるかもしれないんですけど
内部セクションというものを使ってカラムの中にさらに
セクションが追加できるウィジェットですねを追加して
その中にウィジェットを追加してっていうような構成に
していくんですけどその内部セクションでオーダーを
つけるとうまくいくんですね
このようにメインのセクションあるいはカラムで
対応すべきなのかそれとも内部セクションを追加して
それで対応すべきなのかっていうようなセクション構造の
見極めっていうのがポイントになってきます
なのでElementorを使って模写をする際は
セクションとかカラムで対応できるのかそれとも
内部セクションを使って対応しないといけないのかっていうのを
常に頭に入れておきましょう

セクション構造の見極め

6つ目はセクション構造の見極めです
先ほどもご紹介しましたけどセクションの中にカラムがあって
でその中にウィジェットを突っ込んでページを作成する
それが基本的な概念になるんですけど
それだと対応できないっていうことがたまにあります
例えばこのような画像です
特になんですけどカラムが枠で囲まれているような
デザインになっていると大元のセクションの中にあるカラムで
オーダーを追加したくなると思うんですけど
それだとうまく対応ができません
この場合は他にも対応方法があるかもしれないんですけど
内部セクションというものを使ってカラムの中にさらに
セクションが追加できるウィジェットですねを追加して
その中にウィジェットを追加してっていうような構成に
していくんですけどその内部セクションでオーダーを
つけるとうまくいくんですね
このようにメインのセクションあるいはカラムで
対応すべきなのかそれとも内部セクションを追加して
それで対応すべきなのかっていうようなセクション構造の
見極めっていうのがポイントになってきます
なのでElementorを使って模写をする際は
セクションとかカラムで対応できるのかそれとも
内部セクションを使って対応しないといけないのかっていうのを
常に頭に入れておきましょう

引き出しを用意しておく

で最後の7つ目のポイントとしては
引き出しを用意しておくっていうことです
これはポイントというよりも
たくさんElementorを使うとか
たくさんいろんなページを模写するっていうことなんですけど
やっぱりこのウィジェットを使ってこういうことが
できるっていうような引き出しを持っていないと
なかなか模写することができないんですね
なので最後に引き出しを用意しておく
たくさんElementorを使う
模写するっていうことを上げておきました
まあ僕の経験からそうなんですけど
Elementorの基本的な使い方を勉強したりとか
あとは模写をしているといろんなデザインというか
このウィジェットを使えばこんなことができるっていう
アイデアや引き出しっていうのがどんどん増えていきます
僕も使い始めて間もない頃は結構迷うことがあったんですけど
練習するうちにこのウィジェットとこのウィジェットを
組み合わせることによって同じデザインができるなって
いうのがどんどんわかってきたんですね
なのでこれからElementorをたくさん使って
模写をして引き出しとかアイデアですね
そういうのをどんどん増やしていってください
これが最後の7つ目のポイントになります

エンディング

ということで今回はElementorで
模写練習する際のポイントとして
全部で7つポイントをご紹介してきました
まあ最初はElementorを使って
どのように設定すればいいのかっていうのは分からないと
思うんですけど一番最初はやっぱり基本的な使い方
ウィジェットだったりとかセクションとかカラムの設定とか
マージン、パディングの使い方ですね
そういう使い方を理解してあとは模写練習を始めて
練習を積み重ねていくことによって必ず上達していきますので
できれば毎日少しでもOKなので
Elementorを使ってみてください