KAIZEN REPORTブログ
2018.12.26 | LPデザイン制作の改善
【CVX活用講座Vol.3】スマートフォン向けランディングページをCVXで作成
コンバージョンラボが提供するLPOクリエイティブ改善支援ツール「CVX（シー・ブイ・エックス）」。ランディングページの作成はもちろん、分析改善のフェーズでもご活用いただける「インハウスでLPOを完結させる」ことに特化したツールです。
おかげさまでBtoB/BtoC問わず様々な企業様に導入いただいておりますが、昨今ではスマートフォンに最適化したランディングページの制作が重要視されるようになって久しいかと思います。
CVXには独自のデザインテンプレートを活用したランディングページ制作機能がありますが、今回の記事ではスマートフォン向けのLPテンプレートを用いたランディングページ作成にフォーカスを絞ってご紹介できればと思います。
▼CVX活用講座の過去記事はこちら
【CVX活用講座Vol.1】デザイン編集機能でランディングページを作成する-ファーストビュー編-
【CVX活用講座Vol.2】ノンデザイナーがCVXを活用してLPファーストビューデザインの制作に挑戦
ーーーーーーーーーーーーーーーーーーーーーーーーー
＜目次＞
1.スマートフォン向けLPテンプレート紹介
2.スマートフォン向けLPのファーストビュー制作
3.最後に
ーーーーーーーーーーーーーーーーーーーーーーーーー
スマートフォン向けLPテンプレート紹介
CVXには150種類以上の多彩なテンプレートが搭載されています。
弊社がこれまで400案件以上のランディングページを制作してきた経験を生かして、様々な商品・サービスをテーマに、ランディングページに必要なコンテンツを盛り込んだテンプレートを作成しています。PC向けだけではなく、スマートフォン向けランディングページのテンプレートも豊富にご用意していますので、今回はその一部をご紹介させていただきます。
健康サプリメント
ナチュラルで健康的な印象のLPデザインテンプレートです。お悩み・ユーザーボイス・成分詳細など健康サプリ系LPで鉄板とも言えるコンテンツを不足なく盛り込みました。
オーダースーツ
オーダースーツをテーマとしたランディングページのデザインテンプレートです。フォーマルな衣装であるスーツをテーマとし気品のあるデザインテンプレートとなっております。
脱毛サロン
女性を対象とした脱毛サロンのデザインテンプレートです。 ガーリーなデザインで印象も晴れやかなデザインテイストとなっています。 店舗紹介コンテンツなどがあるため、複数の店舗を運営している企業様などにおすすめです。
動画製作
動画製作によるマーケティング支援をテーマとしたデザインテンプレートです。全体としてグラデーションによる配色を用いることでメリハリのあるランディングページデザインとなっております。
旅行ツアー
海外旅行ツアーをテーマとしたデザインテンプレートです。インパクトのある大きな画像を配置することにより、整列しながらも印象的なランディングページデザインとなっております。
転職支援（法人）
法人向けサービスとして、信頼感と清潔感を重視したデザインテンプレートです。主にtoB向けサービスにも活用しやすいテンプレートとなっております。
今回ご紹介したテンプレートの他にも、BtoB/BtoC問わず様々な商品・サービスのスマートフォン向けLPテンプレートを搭載していますので、気になる方はお気軽に無料お試しにお申し込みください。
スマートフォン向けLPのファーストビュー制作
それでは実際にスマートフォン向けテンプレートを活用したスマホランディングページのファーストビュー作成例をご紹介いたします。
以下の「男性向けボディオイル」ランディングページのファーストビューは「オーダースーツ」テンプレートを元に作成したものになります。
どのような手順で作成したのか、順を追ってご紹介いたします。CVXのデザイン編集機能のコツも合わせてご紹介できればと思っておりますので、ぜひご一読ください。
1）LPデザインテンプレートを選ぶ
まずはテンプレート選択画面から、希望のテイストにあったLPデザインのテンプレートを選択します。気になるテンプレートをクリックすると、全体イメージを確認することができます。
今回は「男性向けボディオイル」がテーマのランディングページを作成したいので、黒やネイビーを基調にした、メンズ向けの洗練されたイメージの「オーダースーツ」テンプレートを選んでみました。
「メンズコスメ」テンプレートも合いそうだったのですが、「オーダースーツ」は最近追加された新規テンプレートなので、この機会に使ってみたいと思います。
※はじめてで慣れないうちは商品・サービスが近いものを選んだり、初めての方におすすめテンプレートもあるので、そちらを使用するとスムーズです！
納得のいくランディングページを作成するために、テンプレート選択の段階から、ある程度作成したいランディングページ像を固めておくといいでしょう。
★TIPS!★
・希望のデザインテイストに近いテンプレートを選ぶ
・商品・サービスが似ているテンプレートを選ぶ
2）テキスト編集
デザイン編集画面では、テンプレートのテキストや画像を入れ替えていくことができます。まずはテキストの内容を変更してみましょう。
テキストボックスをクリックして、キャッチコピーを変更していきます。この辺の操作感はパワーポイントなどに似ているので、スムーズに取り組めるかと思います。
テキストを変更しました。メインキャッチが3行になってしまったので、少しだけフォントサイズを調整します。テキストボックスのツールバーから、フォントサイズの変更を選択し、調整しましょう。
調整が完了しました。
CVXのスマートフォン向けテンプレートは、はじめからスマホ端末での閲覧を想定して、文字数などを最適化した形で作られています。
そのため、なるべくテンプレートのテキストと同じ文字量になるように意識しながらキャッチコピーを差し替えていくと、それだけで綺麗で読みやすいコンテンツを作ることができます。
前段で行ったフォントサイズの変更についても同じ考え方ができます。テンプレートのフォントサイズは文章が読みやすいように検証した上で設定されていますので、基本的には大きく変える必要はなく（あまりに文字量が違う場合は必要ですが）微調整レベルで十分です。
★TIPS!★
・テキストはテンプレートとなるべく同じ文字量になるように意識する
・フォントサイズの変更は必要最低限でOK
3）画像差し替え
ここからは画像の差し替えを進めていきます。
差し替えたい画像をクリックすると、画像変更画面が開きますので、任意の画像をアップロードし、差し替えを行っていきましょう。
元画像と縦横のサイズを揃えた画像を使うと、綺麗に差し替えることができます。元画像のサイズは画像変更画面の左上「元の画像」から確認することができます。
今回はボディオイルランディングページ用にあらかじめ用意しておいた画像に差し替えます。
元々の画像が左側にテキストを入れるため、右側にスーツイメージが寄っていたので、差し替え用の画像も同様に商品イメージを右側に寄せた画像を作成しました。
テキストなど他要素との位置関係を考えながら画像差し替えを行うと、綺麗に編集を行うことができます。もし画像の用意が難しい場合でも、CVXでは要素の移動ができるため、細かな微調整が可能です。
同じ要領で、ヘッダーロゴとコンバージョンボタンも同様に差し替えを行なっていきます。
やはり画像を変更すると、元テンプレートからかなり印象が変わります。
社内にデザイナーがいる企業様であれば、よりクオリティーの高いランディングページ作成を行えるのではないでしょうか。
自社での画像のご用意が難しいという企業様には、弊社でパーツデザイン作成も行なっておりますので、その点はご安心ください。
★TIPS!★
・元画像と同じサイズの画像で差し替える
・テキストなどの他要素の位置を考える
・画像の用意が難しい場合は、弊社でパーツ作成も可能
テキストと画像を差し替えて、「男性向けボディオイル」ランディングページのファーストビューが完成です！
最後に
いかがでしたでしょうか。
今回の記事でご紹介させていただいたデザイン編集機能について、わかりやすくご覧いただけるデモ動画もございますので、この機会に合わせてご覧いただけますと幸いです。
今後も定期的に、CVXの便利な機能についてご紹介する記事を投稿させていただきます。
少しでもCVXに興味の湧いた方は、無料お試しも可能ですので、ぜひお気軽にお問い合わせください。
-
2013.8.2 LPデザイン制作の改善
-
2022.4.28 LPデザイン制作の改善
-
2015.9.28 LPデザイン制作の改善
-
2015.1.30 LPデザイン制作の改善
