漫画LPの作り方をWebデザイナーが手順別に徹底公開!漫画LPの作り方を知っておきたい担当者様必見!

近年その効果から大注目の漫画LP。

そんな漫画LPの作り方を、漫画歴15年・Webデザイナーのディレクターであるミツモト漫画製作が「デザイン」「漫画」両方の製作をポイント解説いたします。

・作り方を理解してこれから漫画LPを発注したい
・作り方を理解してディレクションして進行・製作していきたい

これから漫画LPを製作・発注をする担当様で、漫画LPのフローを知りたい担当者様のお役に立てたら幸いです。

まずは漫画LPは通常のLPと何が違うのか?を軽く説明いたします。

【漫画LPとは?】

漫画LPとは通常のランディングページに、漫画を併せた物。

通常のランディングページより
ランディングページの効果をより高める事ができます。

テキスト主体のランディングページを見るより気軽に読めるのが大きなポイントです。

近年では文字のみのコンテンツは読まれない傾向が強いので、漫画を使ったPRは大きく注目されています。

主な効果は以下の様になります。

・ついつい見てしまう(つかみの強化)
・最後まで読み進めてもらえる
・擬似体験をしてもらえる
・記憶に残りやすい

ランディングページにおいて、より効果を高めた物が漫画LPとなっております。

また記事後半には漫画LPを安くデザインからコーディングまで一括で制作出来る「漫画LPスタートプラン」のご紹介を致しておりますので、ご興味のある企業様・担当者様はご覧ください。
漫画LP。LP・漫画それぞれの制作工程を解説

最初に漫画LPを製作するにあたり、「LP部分」「漫画部分」それぞれの作り方を簡単ご紹介いたします。

【LP部分の作成】

・原稿、デザイン
LPのデザインを作成。ターゲティングから原稿のライティング、デザインを起こしていきます。この時のポイントといたしまして「漫画が入ることを考慮する」という点があります。
漫画はカラーで構築される物が入る場合がほとんどなので、色味や画面の構成比率を踏まえてデザインするのがポイントです。
実際に漫画を入れると印象がガラっと変わる場合があるので、ダミーで漫画をさしこみつつデザインを構築するのがおすすめです。

・コーディング
LPのコーディング。デザインを元にコーディングを行います。
コーディングというよりデザインの部分で詰めている部分ですが、漫画自体の幅をコントロールするコーディングをする事を推奨いたします。
漫画は大きすぎると見えにくくなるので(PCで見た場合)幅を広げすぎない様にコーディングすることをおすすめします。

【漫画部分の製作】

・シナリオ作成。漫画のシナリオを作成します。シナリオは漫画のセリフや場面を簡単に書き出し漫画の流れを作る工程です。
誰がどこに居て何をするか。をここで構築していきます。

・ネーム作成。シナリオを元にネーム(漫画のセリフや場面、人物を簡単に描いたもの)を作成します。ネームの出来で漫画の出来が左右される部分なので、じっくり作っていく工程です。

・作画。ネームを元に作画をしていきます。線画からカラー、吹き出しからセリフを入れて仕上げていきます。

【仕上げ】

デザインに漫画を入れて、それをコーディングしていきます。
スマホ対応・コンタクトフォームやタグの設置を行い漫画LPは完成です。

ここまではLP・漫画それぞれの制作工程の解説でした。
次はそれぞれを全体的なフローに落とし込んだ解説をしていきます。
全体的な漫画LPの作り方(フロー)

漫画LPは通常のLP制作に漫画を制作する工程(チェック含め)がありますので、通常の工程との違いも解説していきます。

また漫画を外注する場合のポイントも各工程に書いていきますので、参考になれば幸いです。

通常のLPの制作工程は
・ヒアリング
・原稿作成
・WF作成
・デザイン作成
・コーディング
大まかな流れですが、LPの流れは上記のフローで進めます。

そして漫画ランディングページの作り方は
・ヒアリング
・原稿作成・シナリオ作成
・WF作成・ネーム作成
・デザイン作成・作画
・コーディング作業
上記の様なフローが漫画LP仕様となっております。
各工程に漫画制作における工程が挟まってきます。ここに関してもポイントを抑えつつ漫画LPのフローを解説していきたいと思います。
①漫画LP作成(ヒアリング)

まずはヒアリングを行います。

ターゲティング、ランディングページなどの情報を元に、発注者と製作者の情報の共有・認識を合わせていきます。

上記に関しては通常のLPの進行と変わりはありません。

漫画LPを作成する場合はここから「漫画を使ってどう使っていくか」を決める部分が入ってきます。

漫画の作画テイストやテンション・物語の大枠、どこのセクションに入れるか?などザックリとでも良いので、すり合わせをしていきます。

ここで大枠を決める事で、以降の工程で大幅な認識のズレを無くすのが目的となっています。

発注者様に漫画LPの知見が少ない場合は、実際の漫画LPを見せつつ進行するとイメージがつきやすく、すり合わせもスムーズに進行する事ができます。
②漫画LP作成(原稿・シナリオ作成)

ヒアリングを元にライティングとシナリオの作成をおこないます。

原稿と並行して漫画のシナリオを作成していきます。

ここでポイントなのは原稿のどこの部分に漫画を入れるか決めてしまう事。
事前のヒアリングで大枠は決めているので、原稿作成の工程で漫画の入れる部分を決めてしまいます。
理由といたしまして、LPの流れにちゃんとハマっているかを壁打ちしつつ決めていく為で、テキストの時の方が、ストーリーとして書き換えやすいのもポイントです。

原稿をある程度書いてから、漫画のセクションを入れ込んでみる。
例えば「お悩み」のセクションの上に実際に悩んでいる主人公が登場する漫画をせっちしてみる。その時に流れに不自然さはないか?を見ていきます。

そうして原稿に当てはめていき、漫画のシナリオも進行していきます。

漫画LPにおける漫画のストーリーの大枠は「悩み」→「解決」→「紹介」→「変化」なので、そこに各セクションを当て込んでいくとスムーズに漫画のシナリオが進むと思います。
原稿・シナリオ作成のポイント

ここでは漫画を外注する際のポイントをご紹介します。
漫画を外注する場合は制作会社・イラストレーター・漫画家に発注する場合がほとんどだと思います。

原稿はこちらで作成する部分として、「シナリオをこちらで書く」「発注先で書いてもらう」を選択します。

この際に「きちんとシナリオを書けるか」を確認するのがポイントです。
制作会社に限ってはシナリオ作成に問題はありませんが、イラストレーターや漫画家はシナリオをキチンと書けるか?の精査が必要になってきます。

原稿や流れを説明し、その展開に合わせたシナリオを描けるか。
ここは確認がしにくい部分ですが「実際に描いている漫画を見せてもらう」が一番確認しやすいと思います。
「セリフに違和感はないか?」「突飛な展開はないか?違和感はないか?」「キャラに一貫性があるか?」は最低限確認しておく事をおすすめします。

または自社でシナリオを作成。ライターさんにシナリオ部分を外注などの手もあります。

原稿とシナリオは漫画LP作成においても軸になる部分なので、しっかり作り込む事をおすすめします。
③漫画LP作成(WF作成・ネーム作成)

原稿とシナリオが完成したらWF(ワイヤーフレーム)とネームを作成していきます。

WFはデザインの設計図なので、ここで漫画のセクションを作り実際に確認してもらう事とWFとしてのイメージがつきやすいです。

先の原稿とシナリオも先方に確認してもらいつつ進めているとは思いますが、ざっくり漫画の展開などをWFに付け加えておくと、流れの把握がしやすいと思います。

ネームに関しては漫画家が進めていく工程です。
シナリオを元に簡単なセリフや背景、キャラクターを描き込んでいきます。

ネームをチェックし、ネームに不足がないかを確認していきます。
WF・ネーム作成のポイント

ここでは主にネーム作成のポイントを解説していきます。

シナリオと違いネームはほぼほぼイラストレーター漫画家側の作業になります(稀にネームまで渡す会社様も居ます)。

なのでネームを都度チェックし、修正・変更を行ってください。

と言っても何をチェックして修正すれば良いのか分からない。そう思う方も多いと思います。そんな方に「見るべきポイント」を解説します。

ポイントと致しまして「セリフの流れ」「立ち位置」「全体の流れ」「全体のコマの大きさ」があります。

一つずつ説明していきます。
・セリフの流れ
シナリオで決めている部分なので、大幅なセリフの変更はありません。しかしネームは「セリフの位置」「コマを跨ぐ」部分が発生する為、セリフの流れが適切か確認する必要があります。例えば「会話のセリフなのにいきなり次のコマに行き会話が展開される」などセリフを読み進めにくい場合は修正が必要ですし、「吹き出しの中のセリフが過剰に多い」場合も読みにくさに直結するので、修正が必要です。「読みやすい」を意識して修正してください。ここは一読者としての意見で大丈夫です。

・立ち位置
次に立ち位置のチェックです。漫画は空間を描く為、登場人物の立ち位置があります。ここを「セリフの都合」で立ち位置を変えてしまうと、読者は誰のセリフか・どうやって展開しているか。を認識しにくくなるため、立ち位置は元々決めたものを守っているかチェックが必要です。
左に立ってたのに、いきなり右に瞬間移動してたら読者は違和感を覚えます。
漫画にとって「違和感」は読み手のテンションを下げるので避けてください。

・全体の流れ
上記二つと通づる所ですが、漫画全体を通しての流れに違和感がないかもチェックが必要です。シナリオをネームに落としむ段階で全てを型に落とし込む事は不可能で、「つなぎ」の部分が漫画では必要になってきます。そのつなぎが不自然だと流れが止まって、違和感に繋がります。
ネームを確認し全体的にスムーズに見れるか?を意識してチェックしてください。

・全体のコマの大きさ
こちらもネームチェックの際に確認して欲しい項目です。
ターゲットがtoBなのかtoC なのかで変わってくる部分ですが、基本的に「見やすいか」を意識して確認してください。
コマがあまりに小さいとセリフやキャラクターが見えにくくなり漫画としての効果を発揮できません。逆に大きくしすぎると枚数が多くなり、展開に間延びしてしてしまいます。
toBではPCでの閲覧が多くなりますので、ある程度細かくても見やすいですがtoCの様なスマホで閲覧が多い場合はコマ数が少ないと見えにくくなるのでそこを加味してチェックしてください(スマホverでコマを分割する方法もありますが、対応しているかのチェックは必要です)

この様にネームに関しては「見やすさ」「違和感がないか」を意識して確認する事をおすすめします。

ネームは漫画の元ですので、ここの詰めが甘いとそれがそのまま漫画になり、修正が困難になるので、ネームの段階でガッチリ決めておきましょう。
④漫画LP作成(デザイン・作画作成)

デザインと作画を行なっていきます。

デザインはPCとSPで分けて作成。
漫画は線画から着色・セリフ分けまで行なっていきます。

デザイン・作画についてのポイントを見ていきましょう。
デザイン・作画作成のポイント

デザインと作画に関してのポイントを紹介していきます。
まずはデザインですが、なるべくなら「漫画をあてこんでデザインしていく」事をおすすめします。やはり漫画LPは漫画がビジュアルとして強い為漫画が入っているだけで、デザインとしての見た目やセクション毎の繋がりなどの印象が変わってきます。ただ作画した物を待っていると、その分時間がかかってしまう為、仮の漫画を入れてデザインをしていくのをおすすめします。

作画に関しては、イラストレーター・漫画家が進行していく物ですがチェックする部分として「線画が細すぎないか」「テキストはキチンと縦仕様になっているか」「素材等で著作権に触れていないか」はチェックする項目です。

・線画が細すぎないか
線画とはキャラクターや背景を描いている線のことです。この線が細すぎると見えにくくなりますので、ある程度の太さで描いているかのチェックが必要です。

・テキストはキチンと縦仕様になっているか
漫画のセリフは基本縦書きのため、キチンと縦のテキストとして書かれているか・カーニング等は適正か?のチェックが必要です。またセリフに関しては漫画のセリフに特化したフォントがありますので、そちらを使用を推奨いたします。

・素材等で著作権に触れていないか
ここは良く散見される部分なのですが、明らかにネットに落ちている背景素材を使っている漫画があります。加工はしてるとはいえここはチェックし排除していく方が、安全だと思います。また背景だけでなく小物類もこういったケースがあるので、チェックをおすすめします。

デザインや漫画の作画に関してはクリエイターの領域で仕上がりが変わるので、チェックは見やすさ分かりやすさやクリエイティブ上の守らなければいけないルールを守っているかチェックする事がほとんどです。
⑤漫画LP作成(コーディング)

最後にコーディングを行なっていきます。

デザインをコーディングしていく作業になります。

今まで作ってきたデザインと漫画をコーディングしていく作業で特段特別な工程はありませんがポイントを紹介していきます。
コーディングのポイント

コーディングのポイントですが、デザインの時に漫画をあてこんで作成してると思いますが、実際の画面で漫画の大きさを確認する事をおすすめします。
意外と幅が広がりすぎて見にくいな。と思うこともあるので、実際に使用する端末で確認するのがポイントです。
またスマホ版に関しては漫画の分長くなりがちなので、デザインで縮められる部分は縮める。例えばBOX系を縦並びではなく、横並びにする。本文を折り畳む。など色々とチェックしていくのがポイントです。
ここはデザイン時に詰めていると思いますが、やはり実機だと感じる部分があるので、そこは臨機応変に対応するのがおすすめです。

また漫画そのものを載せた際に小さくて見にくい場合は漫画を「コマ単位」で書き出し、縦一列や縦二列を併用し編成するのもおすすめです。
(ここに関しては先ほども述べた様に対応しているかの確認が必要な部分です)

以上が漫画LP作成のフローとなります。
基本的にはLPの制作と同時進行的に漫画を制作していくのがベストで、ここはデザイン部分と漫画の乖離を少なくできるのが主な理由になります。

効果的な漫画LPを作るなら、デザイン面と漫画はキチンと溶け込んでいなれければいけないので、一緒に進めることを推奨いたします。
漫画LP作成パターン別解説

ここはからは「漫画LP作成パターン別解説」として漫画LPを制作したい企業様・担当者様に、漫画LPを作成方法をパターン別にご紹介いたします。
制作会社に一括して発注して作成

一番手間暇がかからない作成方法です。
それと一番安全な作成方法だとも思います。

ほとんどの制作で漫画LPとしてデザインから漫画作成、コーディングまで請け負っているため、一括して発注する事が可能です。

費用感が高めですが、その分クオリティは保証されています。

相場感は40万〜になります。
(デザイン・漫画2P・コーディング・コンタクトフォーム含む)

また費用感が高くて合わない。という担当者様はこちらのプランをご検討ください。

ミツモト漫画制作「漫画LPスタートプラン」
こちらはテンプレートデザインを使用して低価格で漫画LPを一括して制作できるプランとなっております。
テンプレートといってもデザイナーがこだわって作り込んだモダンなデザインとなっております。漫画LPつかってみたいなーという企業様がおりましたら是非ご検討くださいませ。
漫画LPスタートプラン: https://mitsuo-labo.com/magna_lp_start/
漫画LPの漫画部分のみ発注して作成する

漫画LPの作り方を検索してる多くの企業様はこちらに該当するのではないでしょうか?

漫画部分のみの発注方法は以下の通りです。
・制作会社に発注 相場は5万〜
・個人のクリエイターに発注 相場は2万〜
・クラウドソーシングで発注 相場は5千円〜
※相場は全て1P単位

制作会社はクオリティが担保されていますが、発注先として一番高額。しかしクライアントワーク面での心配はありません。

個人クリエイターは見つけるのがSNSやHPと手間がかかる面がありますが、ある程度クオリティは担保されているし融通もきく発注先。

クラウドソーシングは探す手間は無いですし、価格は市場抑え目ですが、クオリティ担保とクライアントワーク面でコストが発生する可能性があります。
全ての人がそうではないですが「途中で飛ぶ」「上がってきたクリエイティブが全然意図と違う」などのお話しはよく聞きます。

漫画の発注先は色々ありますので、予算感やテイストで判断するのがおすすめです。

この時のポイントとしては漫画発注相手にいかにLPの方向性を伝えるか、原稿からシナリオ・ネームまでを作成してもらうか。だと感じます。

そのためにはこまめなチェックと修正をしてLP部分と漫画部分の乖離が内容進行していくのがポイントです。
LPと漫画を別々に発注する

少ないパターンかもしれませんが、LPと漫画を別々に発注して作成するパターンもあるかもしれません。

この場合のポイントはいかにディレクション側が漫画LPの進行を抑えておくか。です。

LPの原稿からWF・デザイン。漫画のシナリオからネーム・作画までのフローを管理・進行していく。

ただあまりおすすめはしません。。。

大きく漫画LP作成のパターンは以上の3点になると思います。
色々な作成方法があり、状況に応じて何を発注するか、何を内製にするかなど。
ここどうしたら良いのか分からない。そんな場合は是非お気軽にご相談ください。こちらで提案できる事が必ずあると思います。
まとめ

今回は漫画LPの作り方と致しまして。漫画LPに関しての作成別の解説、フローの解説、作成パターン別の解説を行ってまいりました。

漫画LPは漫画の流れも加わって構築していくため、通常のLP作成と違ってきます。

漫画LPの作り方は少し特殊なため、この記事が少しでもお役に立てたら幸いに思います。
漫画LPはミツモト漫画制作にお任せ!

ミツモト漫画制作では大手出版社で鍛えた漫画力と企業内デザイナーとして活動してきたWebの知識があります。

様々な業種のサイトをディレクション・構築してきましたので、効果的な漫画ランディングページの制作が可能となっております。

また漫画部分の制作だけでも承っております。

PR漫画や漫画動画・モーショングラフィックスにイラスト制作も行なっております。

何か漫画の事でお困りの際はお気軽にお声掛けください。

関連記事

PAGE TOP