画像LPから会話型LPへ

CONCEPT

最初は画像を並べるだけでもOK。
でも、少し工夫すると“読ませるLP”になります。

Before

8枚画像を縦に並べるLP

作りやすく、スマホでも見せやすい。ただし、セリフや見出しを直すたびに画像修正が必要になりやすい。

After

会話ストーリー型LP

人物画像はそのまま、名前とセリフはHTMLで修正可能。読者の目線を会話で誘導し、CTAまで自然につなげます。

進化ポイント

セリフ修正がラク

吹き出しの文字はHTMLなので、VSコードで文章を変えるだけ。

日本語崩れに強い

画像生成で崩れやすい日本語は、画像ではなくHTMLに分けます。

ストーリーで読ませる

悩みから解決、納得、行動まで、8コマで自然に流します。

8 SCENE STORY

同じ内容を、8コマの会話ストーリーへ。

左の男性、右の女性、名前、セリフ、すべて修正しやすい形です。

そうた

知子

SNSに漫画を投稿してるんだけど、すぐ流れていくんだよね

それなら、自分の作品サイトに誘導するといいんじゃない？

そうた

知子

作品サイト？サイト作るなんて難しそうで…。サーバーとかもよく分からないし。

そんな本格的なサイトを作らなくても大丈夫です。

そうた

知子

えっ、1ページだけでもいいの？ちゃんとしたサイトじゃなくても？

はい。とりあえず、作品紹介、プロフィール、SNSリンク。この3つだけでも十分でしょ。

そうた

知子

でも、サイト作って公開って、費用がかかるんでしょ？

そこね、無料で公開できるとこは多いけど、いいの見つけたの。

そうた

知子

自分のサイトに作品置いとくと、何がいいの？

流れても、リンク貼っとけばいつでも見てもらえるでしょ。

そうた

知子

それって、noteや販売ページにもつなげられる？

もちろん。自分のサイトがあれば、教材・商品紹介・プロフィールにもつながるよ。

そうた

知子

でもさ、こういうサイトの画像の文字って直すのが大変だよね。

そう、だから今回は文字をHTMLで重ね、あとから直せやすくしたの。

そうた

知子

これなら、自分の漫画ページにも使えそう

まずは試しに、1ページ作ってみましょう。

EDITABLE

名前も、セリフも、あとから直せます。

画像には文字を焼き込まず、HTML側で吹き出しを重ねています。セリフを変えたい時は、index.html内の該当部分を編集するだけです。

<div class="speaker-name male">そうた</div>
<div class="bubble left">
  <p class="bubble-text">SNSに漫画を投稿してるんだけど…</p>
</div>

START GUIDE

この作り方を、まとめています。

画像を並べるだけのLPから、セリフ修正可能な会話型LPへ。Canvaと無料公開ツールで作る手順を、学べます。

noteで作り方を見る

※このURLは仮です。販売するnote記事のURLに差し替えてください。

最初は画像を並べるだけでもOK。でも、少し工夫すると“読ませるLP”になります。