無料で始めるweb漫画サイトを作る方法

StrawMan Templat sampleより引用


『StrawMan Template』は無料サービスFC2ブログを利用した、漫画公開・ブログ機能・収益化を内包したオールインワン型テンプレートです。

利用にかかる費用はゼロ。
思い立ったその日に開設でき、webサイト制作に必要な知識（HTML/css）はコピー＆ペーストで済むように設計されています。

以下の項目別に特徴をまとめましたので個人サイトに興味のある方の一助になれたら幸いです。

Wordpressという幻想

個人がサイトを作るならWordpressが一番だ！！
だって、たくさん使われているしサイト作りで調べるとみんながそう言っているから！

おそらく一般的に浸透した個人サイトへのイメージは、こんなところだと思います。
まずはこの幻想を打ち破ります。

Wordpressの紹介は儲かる

サイトの作り方を調べていると、高確率でWordpressを推す記事が目に入ると思いますがこれにはカラクリがあります。

Wordpressを推す記事では高確率でドメイン+サーバー、場合によっては有料テーマへの誘導リンクが貼られているはずです。

これらすべてアフィリエイト、成約すると紹介者にお金が落ちる仕組みです。
一般的な無料ブログを紹介しても誘導する商材が有料ドメインぐらいしか存在しないため美味しくないのです。


その結果、ブログで稼ごうと夢見るブロガーたちが書き上げたものが検索上位を席巻したというわけです。

ブログで稼ぐこと自体は素敵だと思うし憧れますが、記事が正確で有用であってこそ。

検索上位で見られるWordpressの紹介が正しいかというと答えはNOです。

Wordpressで収益化

収益化に最適なのがWordpressというのはありえません。
どのように収益化するかであって、Wordpressを使うとお金が入るようなうまい話は無いのです。


Wordpressを勧めるサイトはバズ記事（受けのいい記事）を量産して儲けようぜ！という考えが根底にあります。

ですが、ブログでジャンジャン儲けられるのは全体の１％。
下手をすると１％以下と言っても過言ではありません。

皆様がよく目にするこういった記事は、１％の集まりでありそれ以外は日の目を見ることもなくgoogle検索の12ページあたりに埋まっていると考えてください。


バズ記事で収益化とは、google検索で上位表示され多くの人の目に止まり読まれる記事に広告を貼るという意味です。
これは、特定の言葉で検索し解説記事へという流れです。

つまり、この手のサイト構成は分断された解説記事の連なりで出来ていてブックマークするようなサイトではないということです。
なぜなら、解説は必要な時に検索して読めば十分であり、ブックマークするとしても記事単位です。
よほど専門性が高いサイト、例えばプログラム指南のようなものでもない限り連続した記事には限界があるのです。


ですが、創作系サイトは違います。
創作系のサイト構成は連続する記事（創作物）のまとまりです。
つまり、サイトをブックマークしてもらうことが重要かつ容易であり、収益化の方向も記事に挟まれた広告だけではなく販売から支援まで様々な戦略が可能です。


その証拠に、解説記事の冒頭は『どうも○○（名前）です』と自己紹介めいたもので始まるものが多いはず。

連続したまとまりを持つコンテンツ作成が難しい以上パーソナリティで勝負する他なく、作品/作者名表示が当たり前で名前が覚えられやすい漫画とは収益化一つとっても手段が違うんです。

有料ドメインは資産

有料ドメインとは、有料で取得できる個人サイトのアドレスです。

当サイトで例えると、『https://yamanosu.com』の太字部分が有料ドメインです。
（無料サービスでは『https://dettalant.blog.fc2.com』などの太字がサービス固有の無料ドメインになります）


Wordpressの紹介記事でよく書かれている『有料ドメインは資産、積極投資で一歩リード』といううたい文句ですが、Wordpressとはなんら関係がありません。

当サイト（FC2ブログpro）が有料ドメインを使っているように、無料サービスでも当たり前に契約できます。
企業ならともかく、個人がサイトを持つ第一歩でやることではありません。

なにより有料ドメインは年契約です。
資産になるというのは嘘ではありませんが、まずは更新を維持できるか、そもそもサイト運営が向いているかなどの判断がついてから契約したほうがいいと思います。

Wordpressの真価

Wordpressが優れている部分を紹介します。


・カスタマイズの拡張性
無料ブログとは比べ物にならないほどカスタマイズができます。
自由に思い通りのサイト作りが可能です。
（当然ながらゼロからwebサイト制作が出来るプログラマーに比べれば下です）


・共同管理
個人個人に編集権を割り当てられるため、企業のような複数人での管理に向いています。


これらを重視する方はWordpressがおすすめです。
ただし、カスタマイズについてはプログラムの知識が必須なので使いこなす自信が無い場合は、Wordpressの真価は発揮できないと考えていいです。


ようは目的です。
日記サイトでWordpressは明らかにオーバースペックですし、大企業が無料ブログを自社サイトに使うのはどう考えても悪手。

目的に合うかどうかがすべてです。

SEOに強い

SEOとは、検索エンジンの上位に表示されるようにするテクニックのことです。

WordpressがSEOに強いは嘘。
検索エンジン最大手ことgoogle検索に有効に働くSEOとは、有用な記事を書きたくさんの人に見てもらう以外ありません。

システム的なアプローチではなく、人に対するアプローチこそがSEO。

google検索の穴をつくようなやり方は即対策されますので有効ではないのです。


見出し要素やもくじなどでしっかり整え、正確で有用で思わず引用したくなる記事作りこそがSEOの王道です。


つまり、Wordpressでも無料ブログサービスでもSEOに差なんて無いのです。

それでもWordpressが上位に表示されるのは、Wordpress利用者が多いだけの話でWordpressがSEOに強いわけではありません。


そうはいっても自分の作品名やサイト名ぐらい検索上位に表示されたいと思うのが普通ですがそこはご安心ください。
作品名のような、知っていないと検索されないようなキーワードで検索上位を取ることなんて簡単です。

『ヤマノス』

『神様セカンドライフ』

早ければ１か月で検索上位に上がってきますのでご安心ください。

有料の壁

Wordpressを使う場合、おそらく有料での利用になると思います。

おおまかな計算ですが


Wordpressでのサイト維持費
・サーバー代が、おおよそ月/1000円。
・ドメイン代は年契約ですので、おおよそ年/1000円


まっさらなサイトでもこれだけかかります。
（ローカル環境でWordpressを構築してから課金する手もありますが、環境を整えるのにも知識がいります）


私見ですが、個人サイトは気軽になんとなしに作っていいものだと思います。

最初は手作り感あふれる秘密基地。

この秘密基地が、趣味性の高いお城になるか、ちょっとした商店になるか、それともでっかいビルになるか。

記事を書くことやサイトを運営するには向き不向きがありますので先のことはわかりませんが、自分に適性があると感じたときにでも有料プランに移行すればいいだけの話です。


初手有料は個人サイトに不向きだと感じています。

Wordpressのまとめ

以上がWordpressの真実です。


『StrawMan Template』は無料サービスFC2ブログを利用した、漫画公開・ブログ機能・収益化を内包したオールインワン型テンプレートです。

Wordpressのみならず、既存の漫画特化サイトのすべてを上回るようデザインと機能を追求した決定版で、各投稿サイトの上を行く閲覧環境と公開環境を実現しましたので是非使ってみてください。

もちろん無料です。

テンプレートとはなにか？

テンプレートとはサイト全体のデザインのことで、StrawMan Templateは漫画を公開する・日記や記事の個人発信・カスタマイズの拡張性・収益化に特化したうえで、閲覧者がストレスを感じないデザインに落とし込んだものです。

なお、現在記事をご覧いただいている当サイトのテンプレートはStrawMan Templateをカスタマイズしたものです。


カスタマイズをしていないStrawMan Templateを適用した当サイト



汎用型ブログテンプレートbasic_whiteを適用した当サイト



ハイデザインブログテンプレートMuseを適用した当サイト


以上のように、StrawMan Templateは無料ブログサービスFC2で提供されているテンプレートの一種です。

StrawMan Templateのコンセプト

当テンプレートのコンセプトと個人サイトを持つことの意義を説明します。


StrawMan Templateは、個人作家が投稿サイトに登録するのと同程度の手間で自分のサイトが持て、各作家が望む自由な創作活動を応援するために作られました。


当テンプレートが内包するコンセプトはこうです。

自創作の発信基地

投稿サイトの規約に縛られない自由な発信を可能にする場の構築。

例えば電子書籍の告知をしようとしても、comicoもLINEもジャンプルーキーでも公開停止を食らいます。
せめてSNSの宣伝をと考えても、comicoはそれすら許しません。

大手でこれらが許されるのは、ニコニコ静画とマンガボックスインディーズだけです。



個人サイトを作ったとしても中々PVは増えないかもしれませんが、投稿サイトではなくわざわざ個人サイトを訪ねてくれる読者は間違いなく優良な読者であり、作家の告知に耳を傾けてくれる可能性が高い上客です。


似たようなケースでSNSがありますが、何日分もさかのぼってチェックしてくれるフォロワーは少数派。
だからといって、定期ツイートはポストに放り込まれるビラのようなもの。
効果が薄いうえにミュートリストに入れられる可能性大です。


主題をSNSで発信し、詳細は個人サイトで伝えるのが作家にとっても読者にとっても有用なプロモーションだと考えています。

簡単にカスタマイズできる構成

当テンプレートは、カスタマイズを前提に設計されていて、サイト立ち上げ後に最低限の見た目を整えることを推奨しています。

投稿サイトに登録するとき求められる、作者画像・作品表紙・作者ページの看板画像などが手元にあると仮定して１時間以内に最低限の見た目は整えられることを追求しました。


すでに嫌な予感がしている方もいると思いますが、カスタマイズにはHTMLとcssというプログラム（以降、コードと表記）を変更しなければいけません。

嫌な予感が確信に変わった方もいると思いますが、覚えてもらうのは２つだけ。


・ctrl+Fで検索

・コードに全角を使わない


これだけです。
これ以外はいりません。

headもbodyもpaddingもclassも覚えなくて大丈夫。


皆様がやることは

・指定された文字列をctrl+Fで検索し、該当箇所にコピペ。

・指定された文字列をctrl+Fで検索し、該当箇所の数字やテキストを変える。

これだけです。


当テンプレートはカスタマイズを前提としていますので、公開にあわせ解説記事を提供していきます。



これらの記事は一般的なコード解説記事と全く異なる手法で書かれています。

具体的に説明すると、この解説記事を読む人たちはプログラムを学びたい人ではなく、カスタマイズという成果が欲しいだけなので手順だけ書くというコンセプトで書かれています。


つまり、サルでもわかるのさらに上。
覚えんでもいいよという、プログラマーから見ればありえないトンデモ記事を作成してもらうことを飲んでもらいました。



一般的なコード解説サイト

解説→サンプル→コード


StrawMan Templateの解説記事

サンプル→コード→解説



プログラムを学びたいんじゃなくてここの部分を変えたいだけなんだ！

専門的な用語も使い方もいらないからどこいじるのかだけ書け！

そもそもなんて検索したらいいかわからん！

最近の私はプログラムに興味津々ですが、サイト開設当初はこんなことの連続でした。


ですのでStrawMan Templateの解説は


①の画像を変えるときは、これで検索してここに画像のURLをコピペ
②のタイトルを変えるときは、これで検索して好きなタイトルで上書き
③のタイトルを変えるときは、これで検索して好きなタイトルで上書き
④の記事前文の表示量を変えるときは、これで検索してこの数字を減らす（増やす）

当テンプレートが謳うカスタマイズが容易というのは、徹底的に作家目線で解説するという意味です。


専門用語もコードの知識もいりません。
スクショを見て指定の記事に飛び、指示通りコピペ・数字変更・テキスト変更だけでカスタマイズが可能です。

なお、当テンプレートのHTMLとcssはありえない量の解説をコードに併記してありますので、それなりにプログラムの知識がある方はコードを読めばわかるよう配慮されています。

googleアドセンスを意識したテンプレート

広告収入のなかでも最上位のサービスがgoogleが提供しているgoogleアドセンスです。

オンライン ビジネス - ウェブサイトの収益化 | Google AdSense – Google

自分の「好き」を収益に。AdSense でウェブサイトやコンテンツを収益化する方法を学びましょう。

当テンプレートはgoogleアドセンスを前提とした表示幅の調整をしてあります。

googleアドセンスには審査があり、画像を主体としたサイトは弱くテキストが強いと言われていますので、記事（日記のようなテキスト群）を許容できるデザインに統一。

審査と広告の設置を見越して設計されています。

ホールド力のある場

サイトとは読者の来訪により成立する場ですので、サイトの外に誘導することは避けるのが基本です。


個人サイトにリンクを貼り、漫画はここの投稿サイトへGO！日記はこっちへGO！


はっきりと言いますが、ここで散った人たちは高確率で戻ってきません。
投稿サイトにしろ、ブログにしろ、移動先はポータルサイト。

ポータルサイトはポータル内で回遊させるように囲い込むのが基本です。


イラストのポータルサイトpixivを思い浮かべてください。

自分のイラストや漫画の下に表示される関連イラスト。
pixivを離れるとき表示される外部サイトへ移動しようとしていますの警告ページ。
（警告ページはpixivとは関係のないサイトだよと示すSEO的な面もあります）

これらすべて、ポータルから出さないための仕掛けです。
もちろん、投稿サイトやブログサービスもポータルです


ですので回遊する仕掛けにあふれたポータルサイトから読者が戻ってくることは稀というわけです。
回遊の仕掛けに引っかからないとしても、作品などで強い満足感を得られた後に戻る可能性は薄いです。


個人的な感想になりますが、あっち行けこっち行けで設計されているサイトは正直めんどくさいです…。
漫画が面白かったとして、どこを拡散したらいいのかよくわからないし、漫画が目的だとしたら個人サイトや日記サイトをフォローする必要性が希薄です。

ようは迷わせる仕掛けは悪手であって、わかりやすさこそが王道です。



個人サイトで目指すのはこれらポータルサイトと同じく、自分のコンテンツ内を回遊させること。
そのために、テキスト系の記事によるコンテンツの増量やコメントアバターなどの遊び心ある仕掛け。

簡単ではありませんが、読者同士が交流できる仕掛けが作れれば最高だと思います。
この仕掛けはいまだ実現できていませんが、読者同士の交流とは作者がなにもしなくてもコンテンツが生まれるという意味であり、そこで生まれるコミュニケーションは高確率で作品に対する共感です。

一応それにつながるよう、コメント欄に返信機能などの仕掛けは入れてありますがなかなか難しいです。



アバターは自分の創作由来のものに自由に替えられます。
返信機能はコミュニティが生まれるきっかけになればと入れています。


そして当サイトに実装されてある、端末に直接アプローチできるプッシュ通知などを後付けできるカスタマイズ性を得るためにFC2を採用しています。

私が考える収益化の意味

個人サイトのPVにより収益が上がるのは間違いありませんが、創作の出来や運用により大きくばらつきます。

googleアドセンスを例に挙げると、１PV＝0.1円が正直な実感であり、数万PVでもそこまで跳ねるものではないのが現状です。

ですが、PVによる収益化は手段の一つ。
自分のサイトで聞く耳を持った読者に対し告知できる場を築くことが真の収益化です。


これが出来れば、サイトの価値は単純なPVでは測れません。
電子書籍の告知、支援の呼びかけ、販売代行サービスによる読み放題サイトへの誘導など、創作から派生する思いつく限りのプロモーションが仕掛けられます。

しかもSNSと違い、拡散の過多に一喜一憂する必要はありません。
貴方のサイトに集まった読者は貴方の言うことに耳を傾ける度量があるからです。


FC2proとドメイン代を月換算すると500円未満。
500円のサイトの運営費をgoogleアドセンスでペイするとしたら月5000PVが必要（0.1円換算）

月5000PVを達成したら、FC2proとドメインを取得しgoogleアドセンスと契約。


そうやってサイトを育てながら、自身の創作を軸に色々な仕掛けを打っていく……。


収益の額は才能に比例するかもしれませんが、利益の大小にかかわらずモチベーションは絶対に上がります。
そして高いモチベーションは作品の寿命を延ばし、作家と読者にとって最良の結果につながると信じています。


当テンプレートは、こういった私の思想をサイトデザインに落とし込みエンジニアが組み上げたものです。

そういった強いイズムと高度なスキルの合作により生まれたStrawManは、漫画特化テンプレートを名乗るに足る出来だと確信しています。

漫画に特化したデザイン

なぜ『StrawMan Template』は漫画公開に特化したテンプレートなのかをデザインの面から紹介します。

ストレスの無い表示幅

PC版StrawMan Templateは、一般的なテンプレートと異なり記事の表示幅を広くとってあります。


漫画の表示エリア。


これ、デザインを学んだ人にとってありえない広さです。
もっと余白を持たせ、左右の区切りにメリハリをつけるのが正しいです。


ですが、漫画を見やすくするために敢えてギリギリまで表示幅をとってあります。


漫画を見やすいと感じるには法則があります。

当然ながら小さい画像は論外。
セリフが読める程度に表示することが必要です。

さらには、webで読む漫画は原稿の2/3が表示されていれば快適に見え、それ以上に拡大すると途端に読みにくくなります。


縦横比を上げすぎて読みにくく感じる例
→理由
一部しか見えないため圧迫感が生じる。
漫画とは、全体を俯瞰しながら作画の仕掛けにより誘導されたポイントをフォーカスしつつ読み進めるもの。
読んでいない場所は見えなくていいというのは間違い。


つまり、全体がある程度俯瞰できる表示幅が最適であり、当テンプレートの表示幅もそれを強く意識しています。

実際の例

スマホやタブレットも同様に、ある程度俯瞰して読める状態をキープしています。

カラム構成

画像の青マスクが記事表示エリア、赤マスク部分の独立した領域をカラムと言います。
（右の赤マスクなら右カラム）

このデザインは、YouTubeをはじめ市民権を得た一般的なカラム構成です。

サイトに訪れた方がどこを見たらいいのかわからない、なんてことがないように標準的なデザインを採用しています。


そして当テンプレートは、収益化を見越したデザインです。
右カラムの表示幅は、googleアドセンスで効果が高いとされている広告サイズを元に設定されています。



StrawMan Templat sampleより引用

もちろん、初期状態で表示されている右カラムの項目はすべて入れ替え可能。

電子書籍の宣伝、漫画投稿サイトの宣伝、お仕事のご依頼フォーム、支援者の募集、管理者が求めるあらゆる収益化や宣伝に活用できるようデザインしました。


なお、スマホとタブレットでは右カラムは本文の下に表示されます。


スマホでのカラム構成

この場合、告知が目に入らないことになりますのでそれを解決するアニメーションジャンプ機能を実装しました。


赤マスクのSNSに注目（現在はプロフィールに変更しています）。


これは、ページ内の指定した場所にアニメーションしながら移動する機能です。
（押すと、右カラムのSNSの項目に移動します）

閲覧者目線では、スムーズにジャンプできる便利機能。

ですがこの機能の真の目的は、右カラムの存在をアニメーションにより強制的に認識させる。

つまり、記事下にコンテンツがあることを知らないスマホユーザーにアニメーションで右カラムの存在を伝える作家ファーストの機能です。

敢えて落としたデザインで統一

デザインで大事なのは統一感です。

当テンプレートは、デザインの法則に基づき、敢えて落としたデザインで統一してあります。


デザインを落とした理由はこうです。

洗練されたデザインが売りのサービスといえばwixです。


上のリンクはwixの活用法として公開されているサンプルサイトです。

綺麗にまとめられたハイデザインが特徴で、漫画家やイラストレーターの使用率が高い人気のサービスです。


ですがこれには罠があります。


上質なデザインは異質なものを許しません。

先ほどのサイトに、広告や告知や日記が差し込まれたところを想像してください。

すべて台無しです。
優れたデザインとはそういうものなのです。

wixはポートフォリオなどの名刺的サイトならOK。
読者を集めたり告知をしたりと、名刺以上を求めるなら適していないというのが私の持論です。


広告やテキスト主体の記事を想定する以上、ハイデザインなサイトは不可能です。

これらを許容できるのは、敢えて隙のある一段落としたデザインかオーダーメイドしたサイト以外ありえません。


上記の理由から、敢えて落としたデザインで統一することにより雑味を許容することを目指したのが当テンプレートです。

漫画の邪魔になる要素は排除

漫画とは、セリフ・目線・擬音など様々な要素で視線をコントロールし、読んでいるときに読者を離さないように組まれているものです。
こうした緻密な設計を、漫画以外のもので妨害するのはナンセンス。

邪魔になるものはすべて排除しています。


具体的に説明します。


なにより避けなければいけないのが動く要素です。

動きというのは想像以上に目を引くもので動画広告やGIF広告はそういう効果を狙ったものですし、注目してほしい場所に動きを付けるサイトも存在します。


こういったものは一切仕込んでいません。

画面上に透過して置いてあるメニューボタンや上に戻るボタンを、画面が止まっているときは非表示にするなどできますが、これは明滅する要素。
つまり動く要素です。

他にも、色々なサイトで使われている上からメニューが追従するなども動く要素。

このような漫画に没頭するのを妨害する要素は、どんなに優れた機能だとしても使いません。


原稿のホールド力が、デザインによって阻害されるなんてことはあってはならないと考えています。



以上が、デザインから見た漫画特化テンプレートの特徴になります。

漫画を最高の状態で見せる機能

StrawMan Templateには、商業サイトを上回る状態で漫画を公開する機能が仕込まれています。

高機能漫画ビューワーlaymicをはじめ、ライトボックスやギャラリーなど、自力でFC2用に最適化したプログラムを書いてようやく実装するレベルのものが最初から搭載されています。


簡単に紹介するのも難しいほど、たくさんの機能を載せていますので、ここでは一覧の紹介に止め別記事で解説します。

主な機能
・テーマ切り替え
・カスタムテーマ
・TOP画像
・漫画ビューワーlaymic
・ライトボックス
・グローバルナビゲーション
・追従ボタン
・アニメーションジャンプ
・カテゴリリンク
・コメントアバター
・外部サービス設置ガイド
・ギャラリー
・ライトボックスリンク装飾
・記事編集リンク
・検索フォーム


なお、機能はたくさんありますが、一番の売りは漫画ビューワーlaymicです。
各出版社が運営する様々な漫画サイトのビューワーを過去のものにするべく開発した漫画ビューワーの決定版ですので是非試してみてください。


漫画特化型テンプレートStrawMan Templateの機能の紹介

スタッフクレジット

最後に、StrawMan Templateの制作にかかわった人たちを紹介します。

リラ

SNS

webサイト（閉鎖）

フロントエンドエンジニア
テンプレートのテーマをコードに落とし込む敏腕プログラマー。
StrawMan Templateとlaymicビューワーの権利者。

融

SNS

webサイト

テスター
スマホ全般の機種依存問題をチェックするテスター。

神様セカンドライフファンの皆様

提案とデバッグ
様々な提案と不具合個所の報告。

秋田LV3

ディレクター
テンプレート全体のテーマとデザインの統括。




以上が、StrawMan Templateに興味を持っていただいた方向けのプレゼン的記事になります。


機能の紹介はコチラ
漫画特化型テンプレートStrawMan Templateの機能の紹介


StrawMan Template総合案内板へ戻る

関連記事

• [FC2ブログ対応] オススメ外部機能の紹介と実装方法
• 漫画特化テンプレートStrawMan Templateの機能の紹介
• 無料で始めるweb漫画サイトを作る方法
• StrawMan Templateの各種機能の表示見本
• 斜め上のアフィリエイト活用法と画像の権利