crftロゴ

Elementorでスマホ対応デザイン!

ノーコードで対応できる!
Minoru Nitta
Minoru Nitta
グラフィックデザイナー・フォトグラファー
このエントリーをはてなブックマークに追加

Elementorでスマホ対応デザイン!

WordPressを使ってもデザインの制約が大きな障壁

 WordPressがウェブ制作の主体になって久しい感じです。サイトデザインは実装するテーマファイルで決まっていくと思いますが、やはり制約が多いです。採用したテーマで99%はやろうと思ったことが実行できても、残りの1%がどうしても達成できない。

 横にエンジニアが座っていれば解決するかもしれませんが小規模なデザイン事務所や個人のデザイナーは自分で解決していかなければなりません。

例えば困った実例

 crftを運営しているワタクシ、新田(父)も例外ではありません。弊社にはエンジニアはいるものの、極小企業なので細かいことを対応してもらうヒマが彼にはありません。

 たとえばcrftの勝手マニュアル エリア。

 グラフィックアプリのメニューを一通りリファレンスマニュアルとして解説していこうというコンセプトですが、PCでは左にメニュースマホではコンテンツの下にメニューを並べたい。これって表示する順序がスマホになると逆になるということです。

こんなの野良デザイナーの自分にわかるわけがありません。そこでズバッと解決してくれたのがElementorというページビルダープラグイン

Elementorの基本操作セクションとカラム

 Elementorではページをセクション、そしてそのセクションを横に分割するカラムでレイアウトの構成を組み立てていきます。

 このカラムの中にウィジェット と呼ばれる箱をドロップしていくことでページを作成していきます。例えばテキストウィジェット であればテキストを入力できるし、画像ウィジェット であれば画像を配置することができるといった具合です。

レスポンシブ時の対応もバッチリなElementor

 編集画面は左に制御パネル、右にプレビュー兼編集画面といった構成になるElementor ですが、左の制御パネルは右の編集画面で選択した対象によって変化していきます。さらに制御はPC、タブレット、スマホと異なったデバイスに対して異なった設定をすることも可能です。

スマホ対応用のセクション制御

 今回のスマホでカラムを逆表示する方法は、まずセクションを選択して、制御パネルで高度な設定を表示、レスポンシブデザインの項目を開いた中に設定項目があります。

 カラムを逆にする(モバイル)のスイッチをはいにすることで、スマホ表示の際は選択したセクションのカラムの内容が逆に表示されるようになります。

デザイナーの悩みを解消してくれるElementor

 このようにかゆいところに手が届くし、なにより直感的で普通のグラフィックアプリのような使い心地のElementor はいままでにないレベルでウェブデザインの自由度を広げています。アップデートを重ねることでウェブデザインのトレンドにもキャッチアップしていくし、弊社が取り扱うウェブでもWordpressとElementor の組み合わせがほとんどになってきました。

Elementor無料版とPRO版

  Elementor には機能が限定された無料版とサブスクライブ形式で購入できるPRO版があります。正直無料版ではクライアント仕事はできないと思いますが、サブスクライブ価格は良心的なものになっているので、仕事で使うなら臆することなく購入することをおすすめします。一つElementor の弱点をあげるとすれば日本語サポートがないことでしょうか?でも、増えつつある日本でのElementor コミュニティがあれば大抵の問題は解決していけると思います!