同人誌の告知サイト（特設サイト）作るときにやってること

そろそろコミケが近づいてきたので、同人誌の準備してる人もいると思う。同人誌といえば、ぼくは同人誌を発行するときには必ずその告知サイトを作って事前に公開している（特設サイト、ランディングページ、名称は色々あるがここでは告知サイトと呼ぶことにする）。そこで、なぜそれを作るのか、どういうことを考えて作っているか書いてみたい。

過去に作った告知サイト事例

過去3回分くらいは、下記のような同人誌を発行して、それぞれサイトを作った。あわせてスクリーンショットも載せる。ちなみに、いずれもペライチで作っていてページ遷移は無い。

なぜ告知サイトを作るのか

作った同人誌を周知する手段として、告知サイトの他に、Twitter、Pixiv、自分のホームページやブログ、あるいは会場にポスターなどを掲示する、などがある。その中でも、告知サイトは最も手間がかかるので、TwitterやPixivだけで済ませる人も多い。にもかかわらず毎回作る理由は、ぼくのことを知らない人にも買ってほしいからだ。せっかく本を作るからには、なるべく色々な人に買ってほしい。告知サイトは毎回ゼロから構築するぶん、より本の内容が色濃く反映されたものになる。だから、初見の人にも興味を持ってもらいやすいと思う。逆に、本を作ってもそんなに広く知られたくないと思っているなら、告知サイトを作る必要はない。

何を重視しているか

何を重視するかによって、サイトの構成や考え方は変わると思う。例えば、作品の世界観を重視するために動きをつけるとか、ビジュアルを全面に押し出すとか。一方ぼくの場合は、毎回「誤解なく正確に内容が伝わること」を最も重視している。その理由は、ぼくの本は毎回企画主旨が変わるからだ。また、作品ではなく情報誌という体裁をとっているため、ビジュアルよりも「これは何の本なのか」が最も伝えたい情報になる。したがって、見た目の派手さは犠牲にしてでも、「分かりやすさ」を優先して制作している。分かりやすさの例でいうと、大きめのフォントサイズを使ったり、見出し等に（格好つけて英語使うよりも）日本語を使ったりして、ちゃんと読んでほしい感を出している。

どんな情報を記載するか

何度か作っていると、こんな構成にしたら分かりやすいかな、というパターンが段々見えてくる。そこで、思いつく限り列挙する。記事冒頭のスクリーンショットを参照しながら読むと良いかもしれない。

この本は何であるかを1行で表す文章をつくる

企画ありきの本を作るので、「これは何の本なのか」が伝わらないと、いくら頑張って告知サイトを作っても意味が無い。そこで、どういった主旨の本であるかをできるだけ短くまとめた文章を考える。一度作ってしまえば、それをサイトのタイトルや見出し、ポスター、Twitterの告知などに使いまわせる。たとえば、jadda+ Issue #1を作ったときは、こうした。

付録に「デザイナーすごろく」が付いてくる同人誌

↑ これが一番短い状態。サイトのタイトルやTwitterの告知などは、これを適宜アレンジを加えて使いまわした。何度も繰り返し同じフレーズを用いることで、読者に覚えてもらいやすくなる効果もある。

ファーストビューに「これだけは伝えておきたい」ことを載せる

ファーストビューとは、ページを開いた時に最初に見える部分のことで、ブラウザでスクロールなしに見られる範囲のこと。PCなら、だいたい高さ600pxくらい？だと思う。が、厳密に高さを決めてなんかするというよりは、一番伝えたいことは上のほうに書こう、ということが言いたかった。例えば、プロダクトポエトリー研究を作ったときに一番伝えたいことは「無料である」ということだった。だから、ページをスクロールしていったら「ああ無料だったのね」と分かる、というのではだめで、ファーストビューで伝える必要があった。

また、別の例としてTumblr入門では、委託頒布が決まった後からファーストビューに「委託&PDF販売中」の文字を付け加えている。これは過去の失敗から学んだことで、以前別の告知サイトを作ったとき、ページの途中あたりに「委託します」と書いてあるにもかかわらず、「これ委託しないのかな〜」という反応をもらったことがある。閲覧者は、驚くほど文字を読まないことを学んだ。既刊同人誌において知りたいことは「いま買えるかどうか」だと思うので、即売会以外で買えるのであればその案内も目立つ場所に置くようにしている。

閲覧者は文字を読まないけど、じゃあ説明を一切省いていいとは思っていない。隅々までちゃんと読んでくれる人はほぼいないという前提のもと、せめて「これだけは伝えておきたい」部分を読み飛ばされないように気をつける、ということだと思う。

仕様を載せる

基本的なことだけど、「いつ・どこで・いくらで売るか」を最低限載せる。加えて、書影、ページ数、委託の有無、誰が作ったかのクレジットもあるとよい。ただし、企画主旨などと比べると優先度の低い情報なので、毎回ページ下部あたりに置いている。

なお、仕様に頒布場所のスペース番号を載せたりすると思うけど、画像ではなくテキストで書いたほうが親切。画像だと、サークルチェックするときに文字をコピペできないからだ。

サークルについてを載せる

ぼくのことを知らない人にも買ってほしい、という目的でサイトを作っているため、閲覧者は当然自分のことを知らない可能性がある。そこで、ぼくについて何も知らない、事情や文脈も知らない人が見に来ることを想定して作っている。ということは、どんな活動をしているサークルなのかも知らないので、簡単なプロフィールやメンバー紹介を載せている。もっと詳しく知りたい人は個別のウェブサイトを見るとか、Twitterを見るとかすればよいので、ここは簡単でよい。

既刊案内を載せる

これも、ぼくのことを知らない人が見に来ている、という前提でやっていることで、過去の実績として、既刊もあわせて載せている。ぼくは既刊のダウンロード版を販売しているので、その場で買って読むことができる。

どんな部分に気をつけるか

ちょっとしたテクニックについても書く。

スマートフォンでちゃんと見られるようにする

アクセス解析を見ていると、半分近く、場合によっては半分以上がスマートフォンからのアクセスなので、スマートフォンはもう無視できない割合になっている。だから、スマートフォンで表示できないとか、うまく操作できないデザインは避けたほうがよい。最低限スマホで普通に見れて、なるべくならレスポンシブとか最適化を施したほうがよい。

ツイートボタンに画像を含める

ツイートとか、いいねとか、シェアボタンを置くのは定番のテクニックだと思う。このツイートボタン、文言を自由に変更できて、そこにpic.twitter.comのリンクを含めると、ボタン経由のツイートに画像を含めることができる。画像つきツイートはクリックされやすくてお得。こういう感じ ↓

河原でギターを弾いていたらときめき事案になった朝倉さんのインタビューが載っている同人誌「jadda+ Issue #1」をコミックマーケット3日目（日）・東O-29aで頒布します #C86 pic.twitter.com/SZfX7WgCEy http://t.co/I8BXc3wzJ7
— てぃ (@cube10)
2014, 8月 12

やり方は、ツイートボタンのaタグに data-text を加えて、最後に pic.twitter.com のリンクを加えるだけ。

 <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-text="付録に「デザイナーすごろく」が付いてくる同人誌「jadda+ Issue #1」をコミックマーケット3日目（日）・東O-29aで頒布します #C86 pic.twitter.com/y96B0ikimU" data-url="http://jaddaplus.com/issue1/">ツイート</a>

この pic.twitter.com/y96B0ikimU だけど、クリックすると元ツイートに遷移するので、事前に告知画像をツイートするとネタバレになってしまう。したがって、ネタバレを避ける告知の流れとしては

告知サイトを pic.twitter.com 無しのボタンで一旦リリースする
画像付きツイートをする
ボタンに pic.twitter.com を加えて、再度リリースする

という流れになると思う。

以上です

告知サイト、こういう感じで考えていますというのを書いた。先程も書いた通り、何を重視するかによってサイトの構成やデザインは変わると思う。もし、次出す本はなんか告知してみようかな、とか考えている方がいらっしゃれば参考にしてみてください。