Shopifyでランディングページ（LP）を作成する方法を徹底解説
はじめに
今回の記事では、Shopifyでランディングページを作成する方法を調査致しました。
少しでも皆様の役に立てれば幸いです。
それでは、頑張って行きましょう。
ランディングページ（LP）とは何か
LP（ランディングページ）とは、検索結果や広告などを経由して、訪問者がアクセスするページのことを指します。
訪問者が着地するというイメージから、ランディングページ（LP）と呼ばれています。
また、ランディングページといっても広い意味でのランディングページと狭い意味でのランディングページがあり、各々の使われ方が異なります。
ちなみに、広い意味でのランディングページとは、ホームページの中でも訪問者が最初に訪問するページそのものを指します。
トップページや、会社案内ページなどがそれに当てはまるかと思われます。
しかし、Web業界において一般的な意味で使われるランディングページは、訪問者のアクションを誘導することに特化した縦長のレイアウトのページを指します。訴求力を高くなるようにページを作成することで、ユーザーにアクションを促すことができます。
今回は、Shopifyにおいて、この狭義の意味でのランディングページを作成する方法を解説していきます。
通常のShopifyのページとは別に、訴求力高めの縦長レイアウトのページを作成することで、Shopifyのコンバージョン率を向上させることができます。
それでは次に、ShopifyでLPを制作するメリットを解説していきます。
Shopify（ショッピファイ）でLPを制作するメリット
通常、ランディングページを作成する際には、WordPress等のページやStudioなどのノーコードツールで作成することになるかと思います。
しかし、Shopifyを用いてLPを作成することで、Shopifyの豊富な決済システムを利用しながらランディングページを作成することが可能になります。
また、Shopifyにはノーコードで複数のランディングページを作成することができるアプリが複数あるため、Webに対する専門知識が無くても簡単にランディングページを作成することができます。ShopifyにはApple PayやGoogle Pay、paidyなどの豊富な決済システムが存在するため、それらを利用しながらランディングページを制作することが可能になります。
また、Shopifyの月額は29ドルと比較的安価であるため、ランディングページ（LP）を制作する際は選択肢に上がって来るかと思います。
Shopify（ショッピファイ）でランディングページ（LP）を制作する方法
それでは、Shopifyでランディングページを制作する方法について解説していきます。
Shopifyでランディングページを制作する方法として、Liquidによるコーディングを用いてランディングページを制作する方法が挙げられます。
それでは、実際にLiquidのコーディングを用いてShopifyサイトにランディングページを作成する方法を見ていきましょう。
ランディングページ（LP）となるページを作成する
まず、ランディングページとなるページを作成しましょう。
Shopifyの管理画面から、テーマに移動して下さい。
テーマに移動した後は、現在のテーマのアクションから、コードを編集を選択しましょう。
テーマの編集画面に移動したら、新しいtemplateを追加するを選択して下さい。
以下のように作成しましょう。
新しいテンプレートを作成する。目的:の部分はpageを選択して、テンプレートタイプにはJSONを選択しましょう。
ファイル名にはpage.lpを指定します。
このようにすると、Shopifyで新しいテンプレートを作成することができます。
右下のテンプレートを作成するから、テンプレートの作成を行いましょう。
このような状態になりました。
しかし、この状態ではテンプレートの作成を行なうことができていません。
なぜなら、セクションを一つも呼んでいないからです。
Shopifyはなぜか、セクションを一つも呼び出していないテンプレートを作成できないようになっています。
そのため、page.jsonから以下のコードをコピーして、新しく作成したpage.lp.jsonに貼り付ける必要があります。
{
"sections": {
"main": {
"type": "main-page",
"settings": {
"padding_top": 28,
"padding_bottom": 28
}
}
},
"order": [
"main"
]
}
上記のコードをpage.lp.jsonに貼り付けて、保存するをクリックしましょう。
これで、新しいテンプレートを作成することができました。
それではここから、このテンプレートを呼び出してみましょう。
Shopifyの管理画面のサイドバーから、ページに移動します。
ページに移動したあとは、右上のページを追加をクリックしましょう。
この画面から、テンプレートを選択してページを追加することができます。
この画面の右下のテーマテンプレートから、先程作成したテンプレートを選択することができます。
lpを選択して、適当にタイトルをつけて保存しましょう。
ここまでで、ランディングページとして使用するためのページを作成することができました。
こちらのコンテンツの部分をコーディングすることで、コーディングを用いてLPを作成することが可能です。
画像を貼り、右上のページを表示から移動すると、先程作成したページに移動することが可能です。
上記のように作成すると、実際のページは以下のようになります。
ここまでで、コーディングを用いてランディングページを作成する方法を解説しました。
ここからは、更にLiquidコーディングを用いてランディングページ（LP）を作成することになります。
しかし、ゼロからランディングページを作成するのは大変なので、いくつかのおすすめのランディングページ作成アプリをご紹介します。
ランディングページアプリの紹介
それでは、ランディングページ作成アプリをご紹介します。
まず一つ目に紹介するのは、ランディングページの中でも特に画像のみのランディングページを作成するのに特化したアプリです。
らくらく画像ランディングページ | リテリア Easy LP
こちらは、ランディングページの中でも全て画像で更生されているランディングページを作成するのに特化したアプリです。ランディングページ作成アプリの中で、唯一日本製のものになっています。
以下のようなランディングページ（LP）を、ノーコードで簡単に作成することができます。
こちらのアプリを使用すれば、訴求力の高い画像LPを、見た目を確認しながら簡単に作成することが可能です。
上記のように新しく作成したテンプレートに導入することで、画像LPを任意の数作成することが可能になります。
また、画像同士を重ね合わせる機能や、画像にリンクを貼り付ける機能、ヘッダーを削除する機能などが存在するため、お好きな画像ランディングページを作成することができます。
また、Online Store 2.0に完全対応しているアプリであるため、導入後にShopifyのコードを汚染することはありません。
訴求力の高い画像LPを作成する際には、第一候補として挙げられるアプリであると言えます。
また、トップページにLPを導入することも可能である点も非常に嬉しいです。
下記のように、ノーコードで余白を自由自在に調整することが可能になっています。
また、以下の画像のように、画像LPを作成するための機能が一通り揃っています。
こちらの機能を無制限に使うことができて、価格は14.99ドルになっています。
ecforceで作成するような画像LPをShopifyで作成しようと思った際には、選択肢として考えられるでしょう。
また、スマホ時のデザインにも対応していて、こちらのアプリを利用すれば、横幅がきっちりと埋まった画像LPを作成することが可能になります。
アプリの導入後は、アプリの横幅をセクションの幅と合わせるのチェックボックスを外すようにして下さい。そうすれば、横幅まできっちりと埋まった画像LPを作成することができます。
Shogun Page Builder
こちらは、海外製の有名なページビルダーアプリです。
以下の画像のように、様々な要素をノーコードで配置することが可能になります。
Shopifyのストアカスタマイズ画面を、別のアプリでもう一度再現しているようなアプリです。
マーケティングツールとしても優れているため、既に存在するページのA/Bテストを行なう場合などにも有効です。コンバージョン率が高いページを見つけ出すことが可能になります。
Shogun内の管理画面から、Shopifyストアのノーコードでカスタマイズすることが可能になります。
しかし、Shopifyのテーマファイルを非常に汚染するアプリであるため、導入前には必ずバックアップを取るようにしましょう。
Shogunを入れたストアを、後ほどLiquidコーディングを用いてカスタマイズすることは困難になります。Shopifyのコーディングを用いずに、こちらのアプリのみでランディングページを作成する際には、候補に挙がるアプリになります。
価格は、以下のように39ドル・99ドル・299ドルのみ３つになっています。
デザインテンプレートが豊富であるため、様々なランディングページを作成することができます。
しかし、あくまでShogunのテンプレートに左右されるものであるため、デザイナーが作成したデザインカンプを再現することは不可能です。デザイナーが作成したデザインカンプを再現する際には、Liquidコーディングを用いる必要があります。
エンジニアはいないけれど、Shogunで提供されているランディングページを利用したい際には候補に挙がるアプリであるといえるでしょう。テーマファイルを非常に汚染するアプリであるため、導入する前に必ずバックアップを取ることを忘れないようにしましょう。
PageFly
こちらも、非常に有名な海外製のページビルダーアプリになります。
機能は先程紹介したShogunとほぼ同じで、テーマファイルを非常に汚染するという注意点もShogunと同じになります。
PageFlyを利用すれば、デスクトップやタブレット、スマートフォン向けのページを比較的かんたんに作成することが可能になります。
Shogun同様に非常に豊富なテンプレートを提供しているので、デザインにこだわりたい方にもおすすめです。しかし、あくまでPageFlyの用意しているテンプレートであるため、デザインカンプをそのまま再現することは難しいです。
また、分析機能も優れているため、その辺りも評価のポイントになります。
値段は以下の３つになっています。
テーマファイルを非常に汚染するアプリであるため、エンジニアが存在しない場合の手段であることを念頭において下さい。
Shopifyでランディングページを作成する際に念頭におくべきこと
Shopifyでランディングページを作成する際には、Shopifyのファイルの構造を熟知しておくと良いでしょう。
Shopifyには、以下のようなテンプレートファイルがあります。
このTemplates配下のファイルが、Layoutのcontent_for_layoutから呼び出されることになります。
正確には、Templatesファイルで自らが呼び出されるLayoutを指定して、指定したLayoutのcontent_for_layoutにTemplatesファイルが格納される形になります。
どちらにしろ、Shopifyでユーザーの目に見える全てのページには、ファイルの実態があります。
そのため、例えば商品ページの商品の下にランディングページを作成しようとして、product.jsonから任意のセクションを呼びだした際には、全ての商品ページの下にランディングページが追加されることになります。
ここで、product.jsonのコードを確認してして見ましょう。
デフォルトのproduct.jsonは以下のようになっています。
{
"sections": {
"main": {
"type": "main-product",
"blocks": {
"vendor": {
"type": "text",
"settings": {
"text": "{{ product.vendor }}",
"text_style": "uppercase"
}
},
"title": {
"type": "title",
"settings": {
}
},
"caption": {
"type": "text",
"settings": {
"text": "{{ product.metafields.descriptors.subtitle.value }}",
"text_style": "subtitle"
}
},
"price": {
"type": "price",
"settings": {
}
},
"variant_picker": {
"type": "variant_picker",
"settings": {
"picker_type": "button"
}
},
"quantity_selector": {
"type": "quantity_selector",
"settings": {
}
},
"buy_buttons": {
"type": "buy_buttons",
"settings": {
"show_dynamic_checkout": true
}
},
"description": {
"type": "description",
"settings": {
}
},
"collapsible-row-0": {
"type": "collapsible_tab",
"settings": {
"heading": "Materials",
"icon": "leather",
"content": "",
"page": ""
}
},
"collapsible-row-1": {
"type": "collapsible_tab",
"settings": {
"heading": "Shipping & Returns",
"icon": "truck",
"content": "",
"page": ""
}
},
"collapsible-row-2": {
"type": "collapsible_tab",
"settings": {
"heading": "Dimensions",
"icon": "ruler",
"content": "",
"page": ""
}
},
"collapsible-row-3": {
"type": "collapsible_tab",
"settings": {
"heading": "Care Instructions",
"icon": "heart",
"content": "",
"page": ""
}
},
"share": {
"type": "share",
"settings": {
"share_label": "Share"
}
}
},
"block_order": [
"vendor",
"title",
"caption",
"price",
"variant_picker",
"quantity_selector",
"buy_buttons",
"description",
"collapsible-row-0",
"collapsible-row-1",
"collapsible-row-2",
"collapsible-row-3",
"share"
],
"settings": {
"enable_sticky_info": true,
"gallery_layout": "stacked",
"media_size": "large",
"mobile_thumbnails": "hide",
"hide_variants": true,
"enable_video_looping": false,
"padding_top": 36,
"padding_bottom": 12
}
},
"image-with-text": {
"type": "image-with-text",
"blocks": {
"image-with-text-0": {
"type": "heading",
"settings": {
"heading": "Image with text",
"heading_size": "h1"
}
},
"image-with-text-1": {
"type": "text",
"settings": {
"text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>",
"text_style": "body"
}
}
},
"block_order": [
"image-with-text-0",
"image-with-text-1"
],
"settings": {
"height": "small",
"desktop_image_width": "medium",
"layout": "text_first",
"desktop_content_position": "top",
"desktop_content_alignment": "left",
"content_layout": "no-overlap",
"color_scheme": "background-2",
"mobile_content_alignment": "left",
"padding_top": 36,
"padding_bottom": 36
}
},
"multicolumn": {
"type": "multicolumn",
"blocks": {
"column-0": {
"type": "column",
"settings": {
"title": "Free Shipping",
"text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>",
"link_label": "",
"link": ""
}
},
"column-1": {
"type": "column",
"settings": {
"title": "Hassle-Free Exchanges",
"text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>",
"link_label": "",
"link": ""
}
}
},
"block_order": [
"column-0",
"column-1"
],
"settings": {
"title": "",
"heading_size": "h1",
"image_width": "full",
"image_ratio": "adapt",
"columns_desktop": 2,
"column_alignment": "left",
"background_style": "none",
"button_label": "",
"button_link": "",
"color_scheme": "background-1",
"columns_mobile": "1",
"swipe_on_mobile": false,
"padding_top": 36,
"padding_bottom": 36
}
},
"product-recommendations": {
"type": "product-recommendations",
"settings": {
"heading": "You may also like",
"heading_size": "h2",
"columns_desktop": 4,
"color_scheme": "background-1",
"image_ratio": "square",
"show_secondary_image": true,
"show_vendor": false,
"show_rating": false,
"columns_mobile": "2",
"padding_top": 36,
"padding_bottom": 28
}
}
},
"order": [
"main",
"image-with-text",
"multicolumn",
"product-recommendations"
]
}
結局のところ、呼び出されているセクションはorderを確認すれば分かります。
orderにはmainとimage-with-textとmulticolumnとproduct-recommendationsが呼び出されています。
その各々が、sectionsというkeyに対応したオブジェクトのkeyとして存在しています。
ここで、オブジェクトのkeyとして設定されているmainの実態は、typeとして設定されているセクション（ここではmain-product）のエイリアスのような扱いを受けます。
つまり、このproduct.jsonではmain-product.liquidとimage-with-text.liquidとmulticolumn.liquidとproduct-recommendations.liquidが、この順番で呼び出されている形になります。
つまり、Shopifyにおける商品ページの実際は、これらのセクションであるということができます。
Shopifyにおいてランディングページを作成するということは、product.json等のテンプレートファイルを編集することになります。その際に、注意しなければならないことがあります。それは、同様のテンプレートを参照していた場合に、相互に影響し合う場合があるということです。
つまり、商品Aのランディングページを作成する際にproduct.jsonを編集（セクションを追加）するとします。
そうすると、同じproduct.jsonをテンプレートとして利用している商品Bにも、商品Aと同じセクションが追加されることになります。
基本的に、全く同じランディングページを別々の商品に適用することは殆ど無いため、このような仕様は望ましいものでは無いはずです。
基本的に、「商品Aのランディングページ」と「商品Bのランディングページ」という風に、別々にランディングページを生成したいはずですよね。
そのようにするためには、作成するランディングページ毎にTemplatesファイルを作成する必要があります。
これは、先程のテーマのコード編集画面からの新しいtemplateを追加するから新しいテンプーとファイルを作成し、各々の商品のテンプレートとして作成したTemplateファイルを指定する必要があります。
せっかくなので、商品ページでランディングページを作成する方法についてまとめていきます。
同様の方法で、ブログページやコレクションページでもランディングページを作成することができます。
商品ページでランディングページを作成する方法
それでは、商品ページでランディングページを作成する方法について解説していきます。
新しいtemplateを追加するより、新しいproductテンプレートを作成する必要があります。
以下のように、商品テンプレートを作成しましょう。
product.practice.jsonという名前のファイルが作成されました。
このファイルに、以下のように既存のproduct.jsonのコードを貼り付けて、保存しましょう。
{
"sections": {
"main": {
"type": "main-product",
"blocks": {
"vendor": {
"type": "text",
"settings": {
"text": "{{ product.vendor }}",
"text_style": "uppercase"
}
},
"title": {
"type": "title",
"settings": {
}
},
"caption": {
"type": "text",
"settings": {
"text": "{{ product.metafields.descriptors.subtitle.value }}",
"text_style": "subtitle"
}
},
"price": {
"type": "price",
"settings": {
}
},
"variant_picker": {
"type": "variant_picker",
"settings": {
"picker_type": "button"
}
},
"quantity_selector": {
"type": "quantity_selector",
"settings": {
}
},
"buy_buttons": {
"type": "buy_buttons",
"settings": {
"show_dynamic_checkout": true
}
},
"description": {
"type": "description",
"settings": {
}
},
"collapsible-row-0": {
"type": "collapsible_tab",
"settings": {
"heading": "Materials",
"icon": "leather",
"content": "",
"page": ""
}
},
"collapsible-row-1": {
"type": "collapsible_tab",
"settings": {
"heading": "Shipping & Returns",
"icon": "truck",
"content": "",
"page": ""
}
},
"collapsible-row-2": {
"type": "collapsible_tab",
"settings": {
"heading": "Dimensions",
"icon": "ruler",
"content": "",
"page": ""
}
},
"collapsible-row-3": {
"type": "collapsible_tab",
"settings": {
"heading": "Care Instructions",
"icon": "heart",
"content": "",
"page": ""
}
},
"share": {
"type": "share",
"settings": {
"share_label": "Share"
}
}
},
"block_order": [
"vendor",
"title",
"caption",
"price",
"variant_picker",
"quantity_selector",
"buy_buttons",
"description",
"collapsible-row-0",
"collapsible-row-1",
"collapsible-row-2",
"collapsible-row-3",
"share"
],
"settings": {
"enable_sticky_info": true,
"gallery_layout": "stacked",
"media_size": "large",
"mobile_thumbnails": "hide",
"hide_variants": true,
"enable_video_looping": false,
"padding_top": 36,
"padding_bottom": 12
}
}
},
"order": [
"main"
]
}
保存が終了したら、商品管理から、商品を追加しましょう。
右下のテンプレートから、先程作成したテンプレートファイルを選択しましょう。
これで、作成した商品と作成したテンプレートファイルが紐づくことになります。
商品とテンプレートファイルを紐づけた後は、商品ページに移動しましょう。
セクションを追加から、この商品の下の部分に任意のセクションを追加することができます。
追加したセクションの実態はproduct.template.jsonに格納されることになり、このテンプレートを利用している商品のみ、セクションが追加されることになります。
ここまでで、任意のテンプレートページを作成してセクションを追加する方法について解説しました。
終わりに
今回の記事では、Shopify（ショッピファイ）でのLP（ランディングページ）制作方法について解説しました。アプリを導入するなどさまざまな方法を紹介しましたが、どの場合においても、Shopifyの知識が必要になります。
また、ShogunやPageFlyは非常に有名なShopifyのランディングページ生成アプリではありますが、テーマファイルを著しく汚染することになるので、導入には十分に慎重になる必要があります。また、画像のみのランディングページを作成する場合には、「らくらく画像ランディングページ」がおすすめです。
Shopifyで訴求力の高いランディングページを作成して、ストアの訴求力を高めていきましょう。
今回の記事が、少しでも皆様の御役に立てれば幸いです。お疲れ様でした。
Discussion