AIで漫画制作が身近に！WordPressで漫画を表示できるプラグイン「MangaFocus」とは？

最近は、AIを使ってイラストや漫画を制作することも、ずいぶん身近になってきましたね。

以前は、漫画を作ろうと思っても「絵が描けない」「制作を依頼すると費用がかかる」といったハードルがありました。

ところが、生成AIの進化によって、絵を描くことが得意でない方でも、キャラクターや背景を作りながら漫画制作に挑戦できるようになってきています。

もちろん、ストーリーを考えたり、キャラクターの見た目を統一したり、コマ割りを調整したりと、まだまだ工夫が必要な部分はあります。

それでも、以前と比べて漫画制作に取り組むための選択肢が増えているのは、興味深い変化です。

ホームページでも漫画を活用する時代に

漫画といえば、娯楽作品として読むものというイメージが強いかもしれません。

しかし、漫画は商品やサービスの内容を伝える手段としても活用できます。

例えば、商品の特徴をストーリー形式で紹介したり、サービスを利用する流れを漫画で説明したりする方法です。

文章だけでは伝わりにくい内容でも、登場人物の会話やイラストを組み合わせることで、読者が具体的な場面をイメージしやすくなる場合があります。

企業紹介や採用活動、教育コンテンツなどにも応用できそうですね。

これまでは漫画を制作すること自体が大きなハードルでしたが、AIを活用することで、小規模な事業者や個人サイトでも漫画を取り入れた情報発信を検討しやすくなっています。

ホームページ制作の視点から見ても、漫画を使ったコンテンツやマーケティングは、今後さらに活用の幅が広がりそうな分野だと感じます。

でも、WordPressで漫画を表示するには？

漫画を制作できたとして、次に考えたいのがホームページへの掲載方法です。

WordPressなら、画像を順番に並べるだけでも漫画を公開できます。

ただし、実際の漫画のようにページをめくったり、見開きで表示したりするには、専用の仕組みが必要になります。

特に気になるのが、ページをめくる方向です。

日本の漫画は一般的に右綴じで、右から左へ読み進める形式が多く使われています。

一方、WordPressの画像スライダーや電子書籍表示ツールには、左から右へのページ送りを基本とするものもあります。

右から左へのページ送りに対応し、漫画向けの閲覧機能まで備えたWordPressプラグインとなると、選択肢はそれほど多くありません。

また、スマートフォンでの読みやすさも重要です。

パソコンでは問題なく読める漫画でも、スマートフォンの小さな画面では、セリフや細かな描写が見えにくくなってしまうことがあります。

そこで今回取り上げるのが、WordPressで漫画を表示できるプラグイン「MangaFocus（漫画フォーカス）」です。

MangaFocus（漫画フォーカス）とは？

MangaFocusは、WordPressの投稿や固定ページに漫画を掲載できるプラグインです。

通常の画像表示とは異なり、漫画を読むための専用ビュアーが用意されています。

ページめくり、見開き表示、縦読み、全画面表示など、漫画に合わせた閲覧方法を選べるのが特徴です。

さらに、漫画のコマを一つずつ拡大して読める「フォーカスモード」も搭載されています。

なお、MangaFocus自体は漫画を生成するツールではありません。

AIで作成した漫画や手描きの漫画など、完成した画像をWordPress上で表示するためのプラグインです。

日本の漫画に合わせた右綴じ・左方向への読み進め方

MangaFocusで注目したい機能の一つが、ページをめくる方向を選べることです。

日本の漫画は一般的に右綴じで、ページを右側へめくりながら読み進めます。MangaFocusでは、この日本の漫画特有のページ送りにも対応しています。

ところが、一般的なスライダーや海外製の電子書籍ビュアーでは、左から右へのページ送りを前提としているものもあります。

単に画像を切り替えるだけなら問題ありませんが、日本の漫画を自然な読み順で表示したい場合には、こうした違いが気になるところです。

MangaFocusでは、日本の漫画に合ったのページ送りに対応しており、反対に左から右へ読み進める設定も選択できます。

さらに、2ページを左右に並べる見開き表示にも対応しています。

紙の漫画に近い形で閲覧できるため、見開きを使った演出のある作品でも、ページの構成を活かした表示が可能です。

スマートフォンで読みやすい「フォーカスモード」

もう一つ、特に注目したいのが「フォーカスモード」です。

最近はスマートフォンでホームページを見ることが当たり前になっていますが、漫画の場合は少し事情が違います。

例えば、パソコン向けの漫画をそのままスマートフォンに表示すると、ページ全体が縮小されてしまいます。

その結果、セリフが小さくなったり、細かな描写が見えにくくなったりすることがあります。

かといって、読むたびに画面を拡大して、位置を移動して、次のコマでまた調整して……というのは、なかなか面倒ですよね。

フォーカスモードは、そうしたWEB漫画の読みやすさを考慮した機能です。

漫画のコマを一つずつ拡大表示

フォーカスモードでは、漫画の各ページにあるコマの範囲と読み進める順番を設定できます。

例えば、1ページに4つのコマがある漫画なら、1コマ目、2コマ目、3コマ目……という順番で、各コマを拡大表示できます。

閲覧する側は、設定された順番に沿ってコマを読み進められるため、毎回手動で拡大・縮小する必要がありません。

スマートフォンの小さな画面でも、セリフや登場人物の表情などを確認しやすくなる仕組みです。

スマートフォン専用の表示範囲も設定できる

さらに、パソコン用とは別に、スマートフォン用のコマ範囲を設定することもできます。

パソコンとスマートフォンでは、画面の大きさも縦横比も異なります。

そのため、同じ範囲を拡大しても、表示される内容の見え方が変わってきます。

スマートフォン向けに範囲を調整できるのは、なかなか興味深い仕組みですね。

ただし、コマの位置や順番を自動で認識するわけではなく、あらかじめ設定する必要があります。

このフォーカスモードは、無料版でも利用できます。

見開き・縦読み・全画面表示などにも対応

MangaFocusには、フォーカスモード以外にも漫画の閲覧を考慮した機能が用意されています。

見開き表示

2ページを左右に並べて表示する方法です。紙の漫画に近い形で閲覧できます。

縦読み表示

ページを縦方向に連続して並べ、スクロールしながら読み進められます。

全画面表示

ブラウザの画面を広く使って漫画を表示できます。

ズーム・移動操作

漫画を拡大したり、拡大した状態で表示位置を動かしたりできます。

また、パソコンでのキーボード操作やスマートフォンでのスワイプ操作など、閲覧環境に応じた操作にも対応しています。

漫画の形式や読む人の環境に合わせて、複数の表示方法を選べる仕組みです。

WordPressへの漫画掲載と管理

MangaFocusは、WordPressのブロックエディターから利用できます。

専用ブロックを追加して漫画の画像を登録し、表示方法を設定する仕組みです。

また、「漫画ライブラリ」という管理機能も備えています。

あらかじめ漫画をライブラリに登録しておけば、専用ブロックやショートコードを使って、投稿や固定ページに掲載できます。

例えば、オリジナル漫画をまとめたページを作ったり、サービス紹介ページに説明漫画を掲載したりする使い方が考えられます。

AIの進化によって、これまで漫画を制作することが難しかった方でも、漫画形式のコンテンツに挑戦しやすくなってきました。

今後はオリジナル作品の公開だけでなく、商品やサービスの紹介、企業の情報発信など、ホームページで漫画を活用する場面も増えていくかもしれません。

ただし、漫画を制作することと、ホームページ上で読みやすく表示することは別の課題です。

MangaFocusは、日本の漫画に合わせた右から左へのページ送りや見開き表示に対応し、スマートフォン向けのフォーカスモードも備えています。

特に、スマートフォンでは漫画の文字が小さくなりやすいため、コマ単位で表示できる仕組みは興味深いところです。

ホームページに漫画を掲載する際には、漫画そのものの内容だけでなく、読者がどのような環境で読むのかも考えておきたいですね。