見出し画像

画像LPという選択肢のメリット・デメリット・作り方・使い所

北橋 諒一（kitahappy）

対象読者
サービスを運営しているディレクター・エンジニア・デザイナーが、コスパを考えながら最適な手段として画像LP・LP・ノーコードツールなどを技術選定できるようになることが目的

書いてる人
結婚準備アプリのCTOで開発しながら、LPを作って広告を回したりしている。

画像LPとは？

通常LPはHTML+CSSでマークアップされたものを言いますが、画像LPは画像だけでマークアップすることで、大幅にコスト削減しながらもユーザーにとってリッチなコンテンツを提供できるやり方です。

通常1本LPを作るのに30万のコストが最低限かかりますし、ライティング・デザイン・マークアップ・インフラ構築などそれぞれの専門性も高くて、成果が出せるLPというのは継続的に改善していく保守コストもかかります。

逆に言うと、LP1本のCVRが改善することでユーザー獲得コストが劇的に改善しますし、利益も劇的に改善するのでLPの生産体制・保守体制というのはサービス運営上重要度が極めて高い課題と言えます。

画像LPを活用するとLP製作・保守コストが10分の1で、自由度も圧倒的に高くなります。またエンジニアから見ると画像LPで実現できない部分だけを実装するなど出来て、LPを保守しながら育てていくことが可能になります。

実際作った画像LP↓（工数2日）
要件としては素早くリリース・素早く改善・工数は最小限・CVRは最大（泣）

画像LP以外の一般的なLP作成方法

たぶん、ほとんどの会社は下記のような形で、ディレクターがワイヤーフレーム作って、デザイナーがデザイン仕上げて、エンジニアがマークアップする30万コースではないでしょうか？

LPをフルスクラッチする

  • Wordpressでインフラを構築してテーマでLPを作る

  • HTML+CSSを納品してもらって、AWS S3などで静的ファイルを配布する 

  • 自社システムにLPを作る

この作り方だと、A/Bテストをしたり改善したりが最低でも3名関わってるので超大変です。なかなか成果を出すまでが長く投資額が大きくなりがち。

最近出てきたノーコードのSTUDIOはこの問題を解決しています。

ノーコードツールを使ってデザイナーがLPを作る

  • STUDIOでLPを作ってもらう（5万〜）

この場合は、ノーコードツールがエンジニアを不要にし、デザイナーがディレクターも兼任できるスキルを付け作業する人数を1名に減らすことで劇的にコスト削減ができます。

また、STUDIOのコピー機能を使うことで、似たようなLPの構成にかかる作業もコスト削減できるので劇的に安くなります。ココナラで5万くらいで発注できるのでいい選択肢のうちの一つだと思います。

画像LPの作り方

figmaやPhotoshopでも何でも良いけど、いつもどおりデザインを起こして、それをスライスツールで切ってExportするだけ。

ボタンはこんな風に切って、<a><img></a>で囲うだけでOK

ね、超簡単でしょ？

まとめ：LPの作り方
①フルスクラッチで作る　高い・遅い
②ノーコードツールで作る　安い・早い
③画像LPで作る　安い・爆速

画像LPのメリット

より生産性が上がるという意味で、figmaを推奨します。
ワイヤーとデザインをオープンに共有しながら、チームとコミュニケーションを取れるので素早く制作・変更ができるようになります。

  • デザイナーだけでLPを構築できるのでとにかくコストが安い

  • 画像なので自由にデザインができて、エンジニアは実装の難易度を気にしなくていい

  • 変更にかかるコストもデザイナーのみ

画像LPのデメリット

  • 動きのあるデザインは実装できない

  • 画像だけなのでSEO目的には一切使えない

  • 画像サイズが大きくなる場合は体験が悪くなる（画像をスライスして小分けにしてLazyLoadして解決）

  • PC・SPでレスポンシブ対応は無理。800pxくらいで横幅上限を付けてしまう。

  • ユーザーがブラウザ内で検索できない

当然特殊なことをしているのでデメリットはたくさんあります。
画像LPはパララックス効果などオシャレな表現は一切できません！
道具は使い所なので使えるところで使って劇的にビジネスを改善してください。

保守・運用フェーズでの画像LPの進化のさせかた

LPの本質はCVRなので、ファーストビューを改善したり、マイクロコピーを調整したり、わかりやすくデザインを変えてみたり色々ありますよね？

LPなので当然分析ツール・ヒートマップ・A/Bテストなどが入ってる前提で話します。

通常のLPと同様にヒートマップ・クリックが計測できますし、スライスした画像パーツの単位でA/B切り替えればいいので運用負荷もデザイン変更だけでほとんど実現できます。

カルーセルにしたいとかが出てきたら、その部分だけカルーセルで実装すればヒートマップを見てCVRを計測しながら改善したかどうかを振り返りつつ運用していくことができます。

CVRは上がることもあれば下がることもあるので、コストとリリース速度はかなり重要なKPIであり悩みの種でしたが、画像LPという手段を得たことで素早く立ち上げ素早くビジネスに適用できている自負があります。

素早くリリース・保守でも低コストで改善爆速だから、競合に比べて市場競争力すらあります。生産性バク上がり！

※ただの画像なのでブラウザキャッシュやCDNには注意しよう。

画像LPでLP制作すべきケース

  1. キャンペーンページ

  2. Web広告のLP

  3. アプリ内コンテンツ

  4. 不確実性の高いページ

画像LPでLP制作すべきでないケース

  1. ブランディングページ

  2. 情報鮮度が重要なページ

  3. PCページ（転送量の問題）

画像LPという武器を手に入れて高速にサービスを改善していき

画像LPとさらにfigmaを組み合わせると、ライターがLPを作ってリリースしたり、デザイナーがLP作って自分で改善したり、ディレクターが全部やっちゃったりサービス運用が爆速かつ高品質になる選択肢なのでみんなに知ってもらって世の中もっと暮らしがUpdateすると良いなと思います。

暮らしをUpdate！

この記事が気に入ったらサポートをしてみませんか？