- ノーコードでサイトを作る方法を知りたい。
- プログラムを触ったことがないけど問題ない？
- ノーコードってデザイン通りのサイトは作れるの？
こういった疑問にお答えします。
WordPressのノーコードツール【Elementor】
本記事でご紹介するノーコードツールはWordPressの【Elementor】というプラグインです。
Elementorは文章や画像をドラック&ドロップで配置することができ、デザインツールを扱うような感覚でサイトを制作することができます。
しかも、Elementorは基本的な機能を無料で使用することができます。
利用者数も多いため、使い方などに困った時には調べやすいのも特徴です。
コードを使用しないサイトの作り方
Elementorでは本当にコードの知識が必要ないのでしょうか？
結論、必要ありません。
その理由を、Elementorの基本的な使い方と共に説明していきます。
Elementorをインストール
まずはElementorをインストールします。
①プラグインの「新規追加」をクリック
②検索窓に「Elementor」と入力
③「Elementor Website Builder」の「今すぐインストール」をクリックし、有効化
有効化すると、このようなElementorのアカウント登録画面が出てきます。
こちらは後からでも登録できるので、全て「スキップ」をクリックして先に進みます。
Elementorの設定
Elementorのインストールが完了したら、Elementorを使用する設定をします。
設定といってもとても簡単です。
①ページ属性のテンプレートを「Elementorキャンバス」に変更
②「Elementorで編集」をクリック
Elementorの基本操作
Elementorの準備が整ったので、サイトを制作してみましょう！
基本的な動作は、画面左の「見出し」や「画像」などのボタンを右側の好きな箇所にドラック&ドロップしていきます。
例えば、「見出し」をドラック&ドロップした場合、文章を入力することで簡単にタイトルを設定することができます。
本記事ではさらに詳しい操作方法は割愛させていただきますが、このように直感的な操作でサイトを制作していくことができます。
ノーコードでも自由にオリジナルのサイトを作れる理由
Elementorはデザインの自由度が高く、Elementorだけでオリジナルデザインのサイトを作ることができます。
Elementorでは、文字の色や大きさ・余白・枠線等を細かく設定することができ、アニメーションも簡単に設定することができます。
例えば、先ほどの見出し文字のデザイン設定をしてみます。
見出しの「スタイル」タブをクリックし「書体」のアイコンをクリックすると、設定画面が表示されます。ここで、フォントやサイズ、太さ等を設定することができます。
次にアニメーションを設定してみます。
「高度な設定」タブをクリックし、「モーション効果」をクリックします。ここで、好みのアニメーションを選択するだけで、アニメーションを設定することができます。
ここで、Elementorでは高度なデザインが製作できないのでは？と思うかもしれません。
実は、Elementorには高度なデザインを行うために、「Essential Addons」や「Happy Addons」等、追加のプラグインが用意されています。これらを使用することで、さらに細かいデザインの設定を行うことができ、高度なデザインも製作することができるのです。
このように、Elementorだけで、簡単にオリジナルデザインのサイトを作ることができます。
