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コマ目 無料ツールで始める方法
創作くん
案内さん

でも、公開するにはお金がかかるんでしょ?

Canvaで画像を作って、無料公開ツールを使えば、低コストで始められます。

05
5コマ目 作品ページの価値
創作くん
案内さん

SNSの投稿と、作品ページって何が違うの?

流れて終わらず、読者があとから戻ってこられる“置き場所”になります。

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に差し替えてください。

作り方を見る