WordBench東京（2018年4月）で登壇してきました
遅ればせながら、4月20日（金）にありました、WordBench東京さん主催の勉強会でBeaverbuilderの実演を行わせていただきました。
1ヶ月近く空いてしまったので今更感たっぷりですが、どのようなことをしたのか、ちょっと報告させていただきます。
WordBench東京について
WordBenchの勉強会に参加するのは、今回が初めてです。
WordBenchの存在は知ってはいたけど、一昨年辺りまでWordPressをほぼ触らすデザインのみの作業しかしていなかったので、敷居が高い気がしていて行く機会がありませんでした。
そんな私が何故WordBench東京に登壇させて頂くことになったかというと、
弟に私が現在Beaverbuilder（ビーバービルダー）を使ってサイトを作ってると言う
↓
作業風景を見たいと弟が言う
↓
実演してみせる
↓
それを弟がSNSで呟く
↓
WordBench東京で実演してみて
という流れです。
なので、今回は弟にサポートを依頼して姉弟の中島ブラザーズで登壇。
弟と一緒でやりにくくない？って言われたりもしましたが、むしろ弟と一緒だからやりやすいです！
自己紹介でもお話しましたが、Webの師匠は弟なので。
何か分からないことがあれば、師匠に丸投げ！姉弟のチカラ関係もちょっと加算されるので私としては大変心強かったです。
Webアセンブラーとして実演してきました
このようなタイトルで話してきたのですが、ほぼ実演なのでお見せするスライドがなく・・・。
内容を少しまとめて記載しておきます。
そもそも、Webアセンブラーという言葉を知ったのも年末に弟から聞いたのが初なのですが、今回は清野さんのセッション「コードを書かない制作のWebアセンブラーなワークフロー」で非常に分かりやすく知ることができました。
Webアセンブラーとは、コードを書かずにWeb上にあるアプリやプラグインなどを組み合わせてサイト制作する人の総称。
確かに、私が現在行っているワークフローと同じ。
とりあえず、今回は実演ということで、簡単なデモサイトを作成しました。
時間が約30分とのことで、自己紹介とか色々考えると15分くらいで実演したいな〜と思っていて、自分一人でヒッソリ構築してみた時は15分で出来たのですが、やっぱり当日は喋りながら＆弟師匠の補足も入りながら〜に私の緊張も加算されて、実演だけで20分〜30分くらいかかってしまいました・・・。
今回実演するデザインはこのようなサイト。
とある旅館WebサイトのTOPページをイメージしています。
ちなみに、写真提供は九重悠々亭さん（※現公式サイトはBeaverbuilderでの制作じゃありません）。
そして、使用したプラグインはこちら。
通常業務では、BeaverbuilderProとPowerPackProを使用しています。
無料版のBeaverbuilder＆PowerPackを使用したのは、今回が初でしたが、ちょっとしたサイトだったら無料版でも出来るなぁ〜というのが個人的感想。
自分用のポートフォリオサイトとかなら無料版組み合わせて作っちゃうかも。
そして、デモの様子はこちら。WordBench東京さんのTwitterより。
最初だけですが、デモの様子。 #wbtokyo pic.twitter.com/u8w88tR8uq
— WordBench東京 (@wb_tokyo) 2018年4月20日
もう完成！ステキなサイトができました✨ #wbtokyo pic.twitter.com/L7LhM0HWPG
— WordBench東京 (@wb_tokyo) 2018年4月20日
まとめ
今回の実演の大前提として、まず私はHTMLやCSSが全く分からないです。
Webの仕事を始めてから約8年経ちますが、その内7年くらいはWebデザインのみを行ってきました。
会社としてページビルダーを取り入れようと話しが出たのは約4年前。クライアントさんから自分でサイト更新をしたいという要望が出るようになったのがきっかけでした。
更新したい部分のみにVisual Composerを入れるというサイト構築を当初はしていたと思います。
"思います"というのは、私はデザインしかしていなかったので、あまりここには関わっていないので・・・。
ただ、当時、デザインする上で不満がありました。
せっかくデザインしたのに、コーディングの段階でVisual Composerに合わせてデザインが若干変更になるからです。
それは、私がコーディングやVisual Composerを分かっていないからなのですが、正直、すっごく不満でした。
そんなこんなで、Beaverbuilderを正式に会社業務に取り入れるとなったのが約2年前。
私はVisual Composerの件があったので、もう自分で納得いくデザインで納得いくように組んだ方が良いのではないかと思い、Beaverbuilderを自分で使うようになりました。
CSSとかが分からないので、もちろん、コーディングが出来るスタッフに教えてもらいつつ。
後は、海外のBeaverbuilderについてのブログを読み漁り。
このデザインを再現するには、どうしたら〜と思ってもCSSは書けないので、それに対応するモジュールを漁り。
約2年経った今では、自分がやりたいデザインをBeaverbuilder（+他モジュールプラグイン）でほぼほぼ再現できるようになりました。
ざっくりとですが、私がBeaverbuilderを使うことのメリットです。
■ 自社でもクライアントでも更新しやすい
→今までは、コーディングが出来るスタッフに更新の度に依頼をするので、コーダー業務に負担があったのですが、Beaverbuilderを導入することによって、営業スタッフ含め、誰でも更新できるようになりました。もちろん、クライアント側も更新しています。
■ 別のサイトを作る時に利用できる
→データの移行も簡単にできるので、例えば交通アクセスとかプライバシーポリシーのページとか、データをいくつか保存しておいて、その中からセレクトして使うこともできます。自分の中でのテンプレート化みたいな感じです。
■ WordPressなのでプラグインが使える
→WordPress内のプラグインも利用できます。パンくずリストとか、インパクトのあるスライダーとか。ショートコードも入れ込み可能。ウィジェットでサイドとかも作れます。
そして、私が思うBeaverbuilderを使う時のポイント。
■ Beaverbuilderでできる範囲でデザインする
→めっちゃ動いてインパクト大のサイトとかは難しいと思います。どうしてもBeaverbuilderのみで出来ない場合は、コーディングスタッフに相談しています。
クライアントの要望等によって、Beaverbuilderのみで制作するか、カスタムフィールドと組み合わせるか等は振り分けています。
■ モジュールを覚える必要がある
→Beaverbuilder単体では再現できないところを、addonと呼ばれるプラグインを追加することによって構築しています。
しかし、このaddonモジュール・・・。ものすごい数があるので、こういう動きをするとかある程度把握する必要があります。これが把握できないと、デザインもBeaverbuilderで再現できないものになってしまいます。
この1年くらいひたすら触ってきましたので、多分、私は日本一Beaverbuilderやそのaddonの操作に詳しいと自負しています。
こういったBeaverbuilderなどのページビルダーを習得するのに時間がかかるということもありますが、ページビルダーはとにかく楽しいです！
だって画面みながら、ポチポチでサイトが作れるんですよ〜！
凝ったデザインとか考えなければ、CSS知らなくてもすぐに出来るようになると思います。
とにかく、私はBeaverbuilderが大好きなので、語り合える仲間が欲しいと最後は訴えてきました。
川端さんのセッションで”Elementor”も気になったので、今度触ってみます。
ページビルダーだけでサイトを作るということには、ある程度限界があります。
私のようにCSSを知らないと尚更。
でも、色んなプラグインやサービスにデザインしかしてこなかった私は、新たな可能性を感じています。
コード書けたらなぁ〜！と思うことも多々ありますが、コードを今から学ぶより私はページビルダーを突き詰めようと思っています。
