プログラミングに関する情報を中心に、デザイン、ライフハックなどの記事を更新していくブログです。

ユウマのブログ

プログラミング

WordPress×Elementorで爆速NoCode制作!

WordPressとElementorでNoCode制作!

Web制作に取り掛かる際、1からページ内の構成を考えてコーディングを行わなければならないため、いくらコーディングに慣れている人でもそれなりに時間がかかるのが現実です。

そんな中、最近流行り出しているのが「NoCode」というもの。

NoCodeとは、その名の通りコードを書かずにWeb制作 / 開発を行う手法のことを指します。

代表的なNoCode系ツールといえば、以下の通りです。

  • Bubble
  • Webflow
  • Glide

NoCode系ツールには様々な種類があり、使用用途や料金によって選択肢が豊富なので嬉しいのですが、デメリットの1つとして各ツールで独自のUIが組まれているので、まずはツールの使い方やデプロイ手順、設定などを覚えなければいけません。

そこで当記事では、Web制作に励む人であれば1度は使用したことがあるであろうWordPressで、NoCode制作をするためのプラグイン「Elementor」について解説していきます。

他NoCode系ツールと違い、Elementorを使う場合はプラグインの使い方を軽く覚えて、あとは普段使い慣れたWordPressでその他設定を行えばいいだけなので、学習コスト対するリターンが大きいです...!

それでは早速、見ていきましょう!

Elementorをインストール

まずはWordPress管理画面から、Elementorプラグインをインストール&有効化していきましょう。

Elementorプラグイン

Elementorのインストール&有効化が終わると、ダッシュボード左メニュー欄に「Elementor」項目が自動追加されます。

次に、初期設定を済ませる為にElementor項目の中の「設定」を開き、Elementorを利用する投稿タイプを選択しましょう。

Elementorを利用する投稿タイプを選択

ひとまずこれで、Elementorを使う準備は完了です。

ユウマ
とっても簡単ですね!

Elementorを使ってNoCodeの爆速Web制作をいざ実践!

それでは、インストールしたElementorを使って、WordPress上でNoCodeの爆速Web制作を体験していきましょう!

まずはElementor用の新規ページ作成

普段新たにページを追加する流れで、好きな投稿タイプの新規追加画面へと移動して下さい。

Elementorをインストールすると、ページの新規追加画面に「Elementorで編集」というボタンが出現します。

このボタンをクリックし、Elementorの編集画面に移動しましょう。

Elementorで編集

Elementorの基本操作

「Elementorで編集」ボタンをクリック後、以下画像のElementor編集画面へと遷移するので、ここでNoCode制作を行っていきます。

Elementor編集画面

要素の配置方法

使い方はとても簡単で、画面左側にあるメニューの中から、使いたい要素を画面右側にドラッグすることで、コードを書かずに自分の意図した位置に要素を配置していくことが可能です。

要素をドラッグ

左メニューから要素をドラッグする前に、画面右側の「ウィジェットをここにドラッグ」部分の「+」ボタンをクリックすることで、要素を囲む構造を決めることができます。この仕組みを上手く利用することで、単調なWebページになるのを避けることが可能です!

構造を編集

ちなみにElementorではレスポンシブ対応も自動で行ってくれるので、余計なことを気にせずWeb制作に取り組むことができるのも、嬉しいポイントです。

配置した要素の編集方法

配置した要素を編集するには、画面右側で編集したい要素をクリックしましょう。クリック後、左メニュー内が編集画面に切り替わるので、こちらでテキスト・大きさの変更や色の変更等を行います。

選択した要素の編集画面

要素を配置したい場合は、下記画像の箇所をドラッグすることで、任意の場所に要素を配置し直すことが可能です。

要素の再配置

ここまでで解説した、Elementorを使った基本的なWeb制作の流れは以下の通りです。

  1. 構成を決める
  2. 使う要素をドラッグ
  3. 配置した要素を編集
ユウマ
Elementorは直感的で分かりやすいので、全く使ったことがなかった僕でもインストール後30分以内には使いこなせるようになりました!

Elementorを使ったデザインパターンを紹介

基本操作を解説したところで、次はElementorを使った要素の組み合わせ(デザインパターン)の一部を3つ程、ご紹介していきます。

ユウマ
どのデザインパターンも、慣れてしまえば3分以内に組み立てることができますよ!

デザインパターン①:2カラムレイアウト

2カラムレイアウト

横長の2カラムレイアウトです。片方に画像、もう片方に見出しとテキストを配置しています。

モバイル画面で確認するとこんな感じ。

ココから画面サイズを変更する

特に何も設定しなくとも、自動でレスポンシブ対応になっていることが確認できます。

もしレスポンシブ時にセクション内の要素の順番を入れ替えたい場合は、以下の画像の流れに沿って設定を行うことで、画面サイズによって要素を入れ替えることも可能です。

レスポンシブ時の要素の入れ替え

ユウマ
要素の入れ替えだけではなく、画面サイズに応じて表示・非表示の切り替えもできますよ!

デザインパターン②:3カラムカードレイアウト

3カラムカードレイアウト

こちらのレイアウトも、色々なサイトで良く使われているものですね。

もちろん、レスポンシブ化も自動行ってくれます。

デザインパターン③:アコーディオンレイアウト

よくある質問

LPなどのページ最下部に良く見かける、よくある質問のレイアウトを作ってみました。

ちなみに、制作時間はたったの1分です!

この様に、自分で1からコーディングすると時間が掛かってしまうものでも、Elementorを使うことで一瞬でサイト制作を終わらせることができます。

最後に

いかがでしたでしょうか...?

Elementorを使うことで、WordPress上でとても簡単にNoCode制作を行えることをご理解いただけたかと思います。

当記事ではご紹介しませんでしたが、Elementorでは他にも

  • 画像カルーセル
  • タブ切り替え
  • Googleマップ埋め込み
  • ボタン
  • 画像ギャラリー
  • SoundCloud
  • ソーシャルアイコン配置

などの沢山の要素が、全て無料の範囲内で使える様になっているので驚きです...!

Elementorで作るデザインのクオリティを更に上げたい場合は、有料版に切り替えるか、HTML・CSSの知識がある方は、要素にIDとクラス付けを行うことができるので、オリジナルのCSSやJSで独自のカスタマイズを行うことも可能です。

ユウマ
ぜひアナタもElementorを有効活用して、NoCode爆速Web制作ライフを送りましょう!

-プログラミング

Copyright© ユウマのブログ , 2020 All Rights Reserved.