見出し画像

【shopify #017 いとも簡単にページが作れるアプリ】

Shopify認定教育パートナー三浦卓也さんの最新You Tubeでいとも簡単にページが作れるアプリ 【Shogun Landing Page Builder】が紹介されていましたのでここでも紹介したいと思います。
 今進めている私のサイトに導入は決めておりませんが、情報として知っているだけでも有益です。

 さくっといえば、htmlやCSSの知識がなくとも(margin/paddingの知識は必要ですが難しくないのでググッてくださいね)見た目素人が作ったとはわかりにくいページを作ることが出来ます。

画像1

画像2

 見ての通りまっさらのページから作ることもできますし、アプリが持っているテンプレートに準じて差し替えていくことが出来ます。
 この作業のほとんどがドラッグ&ドロップでできてしまうところがミソです。本当に知識がなくてもパズルのようにコンテンツを合わせていくだけで構築が可能です。

画像3

 一番初めにすることは、これから構築するページの名前=URLです。英語ベースなので、Page NameやPathは英語で入力していきます。Page Nameに英語で入れていくとPathも自動入力されます。
 そしてこの構築するページにヘッダーとフッターを入れる/入れないの設定も簡単に行えます。
 入れないほうがきれいに見えますが、特商法の表記などを改めて入れる必要があるので、メモ帳などにあらかじめ作っておいてコピペすると作業が楽になりますね。

画像4

画像5

ヘッダーありと無しの違いです。これがチェック一つで切り替えられるのは便利です。

画像6

 右側にストラクチャーというのがあります。こちらから入れたいものを選択してドラッグ&ドロップすればその機能が使えます。
 セクション・カラム・スライダー・テーブル・タブ・アコーディオン機能が挿入できます。その下のコンテンツには画像・テキスト・ヘッダーなどが設置することが出来ます。

 作りながら、PC/SPのプレビューが確認できるのも非常にうれしい機能です。三浦さんのアドバイスとしては、PCメインで作ってからSPをチェックしたほうが良いとのこと。

 理由はマージン/パディング問題。行間が詰まっていたり、文字スタートのいちがおかしかったりするのでまずは必要なテキストや画像を当て込んでから、マージン/パディングの調整を行っていく=調整していけばと思います。

画像7

 スタイルシート=cssのタブにマージンとパディングがありますので、ぜひここで数値をいれてどのように変わるのかを?確認して体裁を整えることが出来ます。

画像8

 スマホで見たときです。マージンとパディングの調整後 ↑

 そんな三浦さんからの強いメッセージはこちら!
使い倒す。触ってる人は多いけど使い倒すまでは使っていない。
とにかく遊び感覚で使って使って使い倒す!

フルバージョンはこちらから


廻らない鮨を食べたいなぁ😅