![見出し画像](https://assets.st-note.com/production/uploads/images/78468783/rectangle_large_type_2_b4cc8cc22aa3ddd9c8179fe4088ac3b3.jpeg?width=800)
Shopifyのノーコードツールshogunで無料LP制作
ShopifyでECサイト(幸せ家族企画)を運用しており、
LPを無料で簡単に作りたいと思い、
shogunというノーコードアプリの無料でLPを作りました。
なぜshogunを使用したか?
様々なツールがありますが、その中でshogunを使用した理由は
1番メージャーだと思ったからです。
それと無料で1ページ作成できるからというのも大きかったです。
使用して疑問に思ったこと
LPを作成するので、そこまで高度なことは要求しませんが、
CV(コンバージョン)ボタンの部分のみそれなりに作ろうと思っていました。
画像の中に画像を入れられるのか?
始めはわかりませんでしたが、入れることができました。
個人的に気になっていたことは
CVボタンにアクションを入れられるか?
ということでした。
CVボタンの作り方
色々な方法を試した最終的な結果は下記のような形で作成しました。
CVエリアの周りを3層(A、B、C)にし、
BのエリアにCVボタンの画像を入れ込みました。
![](https://assets.st-note.com/img/1652438667666-LjKrLNlbRA.png?width=800)
これにより、CVボタンの部分のみアクションを埋め込みやすく、
さらにマウスオーバーのアクションも簡単に行えるようになりました。
このように3層にしたのには大きな理由があります。
それは
スマホ、PCなどデバイスが変わった際に、
画像エリアの中に画像をいれるとCVボタンの位置がずれる
ということです。
マージンでCVボタンの位置の調整をするため、
CVボタンがずれてしまいます。
そのため、試行錯誤を行った結果、
上記の形がベストだと現段階ではなりました。
まとめ
他に良い方法があるかもしれませんが、
個人的にやりくりした結果が上記のやり方となります。
もし他に良い方法が有りましたら教えていただきたいです。
尚、参考としまして、今回shogunで作成したLPは下記となります。
なぜか上記の商品写真が異なっていますが、
それは今後改善していきます。
追記
無料版でもデバイス毎にマージンの設定が可能そうでした。
そうなるともっと簡単にLP作成ができると思います。
さすがのツールですね!
この記事が気に入ったらサポートをしてみませんか?