BEFORE / AFTER SAMPLE

画像を並べるだけのLPが、
会話で読ませるページに進化しました。

自作漫画をSNSだけで終わらせない。
同じ内容を、男女の会話ストーリーとHTML吹き出しで、あとから修正しやすいLPに作り替えた見本です。

進化版を見る 作り方を見る

CONCEPT

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

画像を縦に並べる旧LPのイメージ

Before

8枚画像を縦に並べるLP

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

左男性と右女性が会話する進化版LPのイメージ

After

会話ストーリー型LP

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

進化ポイント

01

セリフ修正がラク

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

02

日本語崩れに強い

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

03

ストーリーで読ませる

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

8 SCENE STORY

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

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

01
1コマ目 SNS投稿が流れてしまう悩み
そうた
知子

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

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

02
2コマ目 サイト制作への不安
そうた
知子

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

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

03
3コマ目 1ページだけでよいと知る
そうた
知子

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

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

04
4コマ目 無料ツールで始める方法
そうた
知子

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

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

05
5コマ目 作品ページの価値
そうた
知子

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

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

06
6コマ目 noteや販売ページにもつなげる
そうた
知子

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

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

07
7コマ目 文字修正ができるHTML吹き出し
そうた
知子

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

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

08
8コマ目 自分にも作れそうと感じる
そうた
知子

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

まずは試しに、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に差し替えてください。

作り方を見る