メニューを開く 項目を開く 記事投稿時刻 コメント トラックバック カテゴリー ブログテーマ タグ URLリンク コメントの編集 コメントに返信する

webマンガビューワーlaymic完全攻略ガイド

2020/01/25  17:50
6
web漫画ビューワーlaymicの開発が完了しましたので、主な使い方をまとめました。





webマンガビューワーlaymicとは


ホームページで漫画を公開することを目的とした多機能ビューワーです。

sagyou021


見開き・縦読み・拡大・全画面・一覧表示・html使用可・PC/スマホ可と、現状存在するあらゆるマンガビューワーの機能を盛り込んでいます。

sagyou020.png
ビューワー上の機能一覧



さらに、作者が読ませたい理想の状態を初期設定に指定したうえで、各読者のお好みの読み方に再設定もできます。

sagyou019.png
ビューワーの習熟度にあわせ細部にわたる設定が可能



オーバーレイウィンドウで起動するためサイトデザインにとらわれない運用ができ、html/cssを編集できるあらゆるサイトに実装可能ですが、これからホームページを開設しようとする初心者(またはプログラムを覚える気のない方)向けのFC2テンプレート同梱版もありサポート記事も充実しています。

laymic同梱版ビューワーサンプル

laymicスクリプト版ビューワーサンプル


当然ながら、FC2同梱版スクリプト版ともに無料でご利用できます。








laymicの基本的な使い方


laymicの導入方法は、FC2テンプレート同梱版は実装済みなので割愛。

スクリプト版の導入方法は所定の位置にコードをコピペで完了です。

漫画家は、プログラムを覚える暇があるならコマを埋めるとか言っちゃう人種なので、laymicを実装済みのFC2テンプレートStrawMan Templateのカスタマイズやlaymicの使い方もコピペして必要な場所を書き換えてで統一されていますのでお気軽にご利用ください。


sagyou018.png
膨大な注釈を併記していますので、ある程度の知識があればわかるように作られてあるのがStrawMan Templateです。
もちろん初心者向けに、各種解説とチュートリアルも用意してあります(約1時間で最低限のカスタマイズが可能です)。


laymicの使い方は同梱版・スクリプト版共通で、基本コードをコピペし、原稿画像のURLなど関連部分を書き換えれば終了です。








laymicの操作方法


スマホに関しては、スワイプやピンチなど一般的な操作方法を踏襲しています。

PCについては
・左右端をクリック、またはホイール操作でページ送り。
・中央部分をクリックで機能の呼び出し。
・サムネイル表示と進捗バーからのページジャンプ。
・ホイールクリックでズーム。
・ズーム時のドラッグ操作。
キーボード操作に対応。


とくに、ホイールクリックズームの使い勝手は抜群です。
これにより、旧来のセリフサイズの作品もストレスフリーで読めるようになっていますので是非お試しください。

sagyou022.png
最大倍率での表示










作家の理想通りに原稿を表示する設定


laymicはビューワー内の環境設定から、読者が自由にカスタマイズできますが、作者が読んで欲しい状態を初期状態に設定できます。

htmlに原稿サイズや、タテ読みヨコ読みなどの読み方向、英語や横セリフ作品用にページめくりの反転など最初に表示する理想の状態を設定できます。

右めくりサンプル


特に、原稿サイズは表示に関わってきますので設定することを強くオススメします。


なお、laymicそのものに指定を入れることで作品ごとに個別設定もできます。


デフォルト設定の指定について








読者による理想の再設定


作者の理想はともかくとして、私はこう読みたいと思う読者も多いはずです。

そこでlaymicでは、ある程度のカスタマイズを読者が設定できるようになっています。

sagyou020.png
タテ読みヨコ読みはアイコンから切り替えられます。


これ以外にもlaymicの習熟度により、覚えたから送りアイコンは邪魔と思う方もいるはずです。
それらはlaymic内の設定より表示非表示が切り替えられます。

sagyou019.png
初期値は作家(管理者)が指定した初期設定


これらの設定は同じサイトのlaymicにのみ引き継がれます(別サイトのlaymicは再度設定が必要です)。








htmlの活用


laymicはhtmlが使えますので思いつく限りの汎用性があります。

例えば、ページのラストにリンクを付けた画像(原稿)を使うことにより、電子書籍販売ページに移動するなどの運用も可能です。

リンク付き画像サンプル(最後のページをクリックするとAmazonに飛びます)


なお、上記のサンプルでは以下のようなhtmlが設定されています。



<a href="移動先のURL" target="_blank" ><img src="画像URL"></a>



移動先のURLにストアURL。
画像に原稿URLを指定し、原稿設定エリアに配置することにより完成です。

これ以外にも様々なhtmlが設定可能です。








商業サイトライクな雛型の設定


商業サイトのビューワーでは、漫画の最後に告知エリアがセットされています。

サンプル(ワンパンマン)


上記リンクの最終ページにあるような、告知エリアの雛型も配布しています。

告知雛型サンプル



解説すると

sagyou023.png

・雛型一つ目
楽天広告は広告コードをコピペ。
googleAdSenseは改行を省いてコピペ。

・雛型二つ目
各種告知はhtmlの活用で解説した画像付きリンクを縦に並べたもの。

投票03
透過PNG画像のみ(300*100)


雛型は、同梱版laymic・スクリプト版laymicには入っていませんので、配布ページより入手し実装してください(いつもの通りコピペです)



リンク先でも書かれていますが、雛型の使用には一つだけ注意点があります。

固定表示型
シンプルながら大雑把な固定配置を行う。
表示調整などは行わないため、表示領域依存での表示崩れが起きる可能性あり

縮小表示型
表示領域に合わせて内容を縮小表示する。
「最大サイズに対する現在縮小率」が適用されるので、場合によっては小さくなりすぎるかも




解説すると、縮小表示型を使うと表示崩れは置きませんが、すべての要素が画面内に収まるよう縮小されるため、広告の改変による規約違反になりかねません。


そこで、googleAdSenseなどの広告を使う場合は固定表示幅型を使ってください。
これは推奨ではなく必ずです。



この場合、表示崩れが起こりやすいので1ページにたくさん配置しないようにする。
または、崩れの起きない告知バナーの枚数を見つけるなどひと手間かかります。

なお先ほどの雛型サンプルは固定表示型。
広告2枚、300*100を6枚ビタ付けの場合は崩れが起きないことを確認しています。








サムネイルの設定


laymicには一覧表示機能が搭載されていてクリックしたページにジャンプできます。

これは、1話のボリュームが多い作品で読み返したいシーンを探すときや、丸々1冊公開した際の目次代わりを想定しています。

サンプル

サンプルを一覧表示にすると、話ごとに白紙が挟まれています。

話のタイトルや、何ページから2話と覚える人はまずいません。
紙のコミックを、パラーっとめくり白紙ページでおおよその話の区切りのアタリを付ける動作を機能に落とし込んだのが、縮小表示で話の区切りを探せるようにした一覧表示です。


ですが、一覧表示は元画像を縮小しただけなので、雛型ページのリンクが生きています。

これでは想定外のページに飛ばされますので、サムネイルを設定できるようになっています。


サムネイル設定済みサンプル

PR0000.png
サムネイルに指定している画像


もちろん、雛型以外にも設定可能ですので、どうしても軽量化したいときには全ページにサムネイルを指定できます。
(FC2は画像をアップロードすると、ファイル名末尾にsがついたサムネイル画像が作成されますのでそれを指定するのもアリです)


サムネイル画像を別途指定する








SNSからビューワーを展開する


SNSのリンクにlaymicの起動URLを張ることにより、即ビューワーを立ち上げることが出来ます。

PCでは、ページ偏移が分かりやすいためなぜこれが売りになるのか分かりづらいですが、スマホは別。
スマホから起動URLを踏むと、SNSとlaymicの移動が分かりにくいおかげで、SNSからワンタップでビューワーが立ち上がるように見えます。

これを活用すれば、SNSで漫画を公開するときに、より読みやすい環境で公開することが出来ます。


laymicを即起動するURLは、ビューワーを開いた状態のURLになります。


サンプル(laymicを設置した記事)

サンプル(laymicを開いた状態の記事)








laymicの弱点


laymicは、商業ビューワーに出来てlaymicにできないことはないところまで突き詰めた高性能ビューワーですが、そのせいで起こった弊害が二つあります。


一つは読み込み速度。
サンプルから直接起動した場合画像の読み込みが追い付かないケースがあったと思います。

今回のような機能を確かめるために漫画の内容を読まずに即一覧表示にしたり、漫画のラストの雛型を見ようとページを送りまくると読み込みが追い付いていないことに気づくと思います。

ですが、こんな読み方はあり得ません。
1ページ目からじっくり読んでいくのが想定されている使い方ですし、1ページも読まずに一覧表示するのはレアケース。

漫画ビューワーで読み込み速度を追求するのは、ユーザーの使用する姿を想定していないのと同義だと思っていますので問題ないと考えています(laymic自体の起動は激速ですし)。



もう一つは、laymicビューワーで全て完結してしまうことです。



たとえば、ビューワーの最後に次の話の起動URLを設定したとします。

そうすると、記事に戻ることなくビューワーからビューワーへ移動できてしまうため、告知や広告と漫画に関連した記事やその他のコンテンツが目に入らなくなってしまうのです。


ですのでlaymicをご利用の際は、1話終わったらビューワーを閉じざるを得ないようなレイアウトをお勧めします。








ご意見ご要望とlaymicの権利


StrawMan Template同梱版laymicのご意見ご要望ご質問はエンジニアまで。

スクリプト版laymicについてはエンジニアまでお願いします。

なお、laymicとStrawMan Templateの権利はエンジニアことリラ様に帰属します。



な~んかきな臭い…もっと言えば仲違いの匂いを感じる方もいるかもしれませんので簡単にお話しします。

元々StrawMan Templateとlaymicは、すべてのアマ作家が商業に頼らずに最高の状態で作品を公開できるようにしたいという理念からスタートし、共感してくれたエンジニアやテスターと私の読者の皆さんで作り上げたものです。

つまり、作家が望む最高の状態で公開できる環境を伝え、エンジニアがコードに落とし込んだのがStrawMan Templateとlaymicです。

当然ながら、フォントサイズや余白の0.1remまで私は関わっておりますので共同制作者ではありますが、アマ作家の創作環境向上のためにやったわけで権利が欲しいのではありません。


そういうわけで、完成したら一切合切の権利はリラ様のもの。
StrawMan Templateに同梱されたlaymicについてはこれからも協力するけれど、スクリプト化したlaymicは自分の創作物として育ててと伝えています。


なので、細部を見比べるとStrawMan Template同梱版とスクリプトlaymicには微妙な違いがあります(私は一瞬で気づいた!)。
これは、プログラマの理念や読者としての要望はわかるけれど、作家やデザインの観点から折れてもらった部分が、エンジニア主導になったことにより復活したからです。


StrawMan Template版サンプル

スクリプト版サンプル


以上のことからエンジニアの創作物、スクリプト版laymicへ私から強い要望を出すことは、お前のマンガの筋を変えろと要求されるのと同じこと(即断る)。

私の意見はlaymic誕生の経緯からみて無下にできないものになるのは確実なので、スクリプト版への要望や感想は皆様から直接エンジニアへお伝えいただくようお願いします。

私からは、1ページに4枚原稿を表示する?流石にそれはおかしいやろ!ってことがない限り静かに見守っていこうと考えています(もしくはサブ垢作って凸)。


同梱版laymicについては、StrawMan Templateでの表示を前提とした作家の意向が強く反映されたものなのでこれからもお気軽に~


私たちはいつも通り~


2020/01/26追記
一つ言い忘れていました。
StrawMan Templateとlaymic(overlay comic)はエンジニアに名前を付けてとお願いしたものです。

マンガ畑にいる私にとって名付けとは命を吹き込む行為です。

これを委任している時点で、StrawMan Templateとlaymicはエンジニアの子であることは明白で、私は口やかましい教育係みたいなものです。








終わりに


漫画家ってどうなれば漫画家なのか?

ネット以前なら、紙媒体に掲載され収入を得ることが漫画家を名乗る条件だと思います。


では今はどうでしょう?
ネットが普及し、電子書籍が当たり前になり作家が直接全世界で販売できる今、どうなれば漫画家なのかを定義できる人はいません。

いたとしても、異論が上がることは確実です。



正直に言えば、私は漫画家に憧れていません。

一部だとは思いますが、問い合わせや持ち込みに対し返信をせず囲う飼い殺しをしたり、長時間拘束低賃金を誇るかのような一般企業では考えられない昭和の商習慣が横行し、平成初期から指摘されていたネットの移行に今更四苦八苦している出版社の声が、漏れ伝えてくる現状に憧れるわけがありません(強いて言えば、学者や郷土史家に憧れています)。

それよりも、ネットが切り開いた誰でも自由に出版できる今の方に憧れを抱いています。


言い換えれば、商業出版に載らなければ無収入だった時代は終わり、どんな作品でも収益が生まれるのが今の時代です。


もちろん、才能により収益に差はあります。
才能の世界なのは否定しませんしそうあるべきだと思います。

ですがゼロはあり得ないのです。


その才能と収益と相談し、専業を目指すか趣味のモチベーションにするか、はたまたプロを目指す活動資金にするかは書き手の自由。

ですが、そのための環境がまったく整備されておらず、投稿サイトに囲われ宣伝も禁止、さらには出版社の雑な戦略でgoogleアカウントをBANさせておいて知らぬ顔のようなアマチュアを軽く見る時代遅れの価値観に一発入れたくて生まれたのが、誰にでも投稿サイトや商業サイト以上の公開環境を提供するStrawMan Templateとlaymicでした。



オリジナルもので自費出版で食えているひとはいますが、元々商業で活躍していたプロや、商業出版に囲われてはいたけれど連載まで届かなかったプロ予備軍がほとんどです。

次の目標は色々ありますが、StrawMan Templateとlaymicを通じ、商業経験がないのに専業で食えるアマチュアを生み出す。

そんなことを考えています。



武器がなかった昔なら絵空事ですが、今は最高の鍛冶屋が最高の武器を作ってくれました。


右手にStrawMan、左手にlaymicでこれからも活動していきますのでよろしくお願いします。





StrawMan Template総合案内板へ戻る
関連記事

コメント

コメントアバター画像
スコ 2020/01/26 17:31

こちらでは初めまして!
laymicコミックビューワーを導入させていただきました!
StrawManとlaymanを作られた思いの一言一句に全く共感しました!

囲い込んでおいで「先生」と呼ぶ慣習はお為ごかしだな〜と感じていた感覚は私だけではなかったんですね^^;
漫画家に憧れていましたが、商業誌に掲載できることもなく結局はこうして自分でweb公開しているやり方を選んでいるのは、きっと何かに呼ばれていたんだと思ってます。
これからいろんな可能性が広がりそうでワクワクしますね!!
ありがとうございます!お二人の想いを共有して私も活動頑張ります!!
コメントアバター画像
名も無きハタハタ 2020/01/26 19:03

全然わかんないけどがんばって!
コメントアバター画像
玲子 2020/01/26 20:26

れべるさん さんが忙しいのは重々承知だけど、いつか「コス☆ナポ」の漫画レビュー記事を投稿すると思って楽しみにしてます。
コメントアバター画像
http://lushliftcream.org/ 2020/09/01 07:01

Thanks for finally writing about >webマンガビューワーlaymic完全攻略ガイド - ヤマノス <Liked it!
コメントアバター画像
名も無きハタハタ 2023/10/07 20:30

はじめまして。便利に使わせてもらっています。
昨今のWEBコミックを取り巻く環境の変化もあり、将来のアップデートでの議題にあげてもらえればと思う項目があります。
一つ目がデフォルトを縦読みにするオプションです。
二つ目が転載・AI学習対策として画像にすかしをいれる機能の追加です。
もし機会があればよろしくお願いします。
コメントアバター画像
れべるさん 2023/10/07 21:14

名も無きハタハタ さんへの返信

いつもご利用ありがとうございます。

透かし機能のご要望確かに承りました。
エンジニア不在のためアップデートは難しい状況ですが、利用者や要望が増えたときは外部に発注などなにかしらの対応を考えますのであまり期待をせずご利用いただけたら幸いです。

デフォルトを縦読みは、FC2テンプレートのHTML内にlaymicの初期設定を指定できる項目がありますので下記の記事を参照願います。


yamanosu.com/blog-entry-946.html#layop
・straw_manテンプレートlaymicビューワー関連設定解説記事
laymicオプション引数紹介

// ビューワーの初期方向設定
viewerDirection: "horizontal",

// ビューワーの初期方向設定
viewerDirection: "vertical",

vertical に書き換えで縦読みがデフォルトになります。

コメントの投稿