menu
イラストレーターのための新しいポートフォリオサイトテンプレート「Illustfolio Lumina」を作りました
Home / Blog(Archived)

同人告知サイトつくるときのノウハウまとめ

■
#webデザイン#同人
SANOGRAPHIX
Posted on 2013-08-03
Profile

同人誌の告知ページを作るの、だんだん知見がたまってきたのでノウハウを御シェアさせていただきます。昨日こういうの作った。 ↓

パッケージ等でよく見る「あの短い英文」の正体って何なの？ 同人誌「プロダクトポエトリー研究」をC84にて無料で配布します – 日本同人誌デザイン協会

サイトは Wordpress で構築している。理由は予約投稿機能を使って公開時間の指定ができるからです。

ティザーサイト

まずティザーサイトを作った。こんな感じ。↓

カウントダウンの部分には、以前作って GitHub で公開していたカウントダウンタイマーを使っている。CSS いじって今風にした。まだこの段階では内容が悟られないようなデザインにする必要がある。

CSS3 Countdown - sanographix

ティザーサイトを作る理由は、公開した瞬間の勢いが良いと結構拡散すると思っているから。Google Analytics のリアルタイム解析を見ていたのだけど、このティザーサイトを作ったことで、23:55分くらいには50人くらい見てる感じだった。公開後は、勢いあるときはリアルタイムで150人くらい見てた。Illustfolio作ったときは200人くらいだったからまあこのくらいか、という感じ。

ページ構成

実はティザーサイトの正体は 404 ページで、このような構成になっている。

  • 404.php
    • ティザーサイト
  • top.php
    • 本番のサイト（固定ページ）

Wordpress の設定でtop.phpをフロントページにしたうえで、公開日にあわせて予約公開しておく。すると、 Wordpress にログインできる自分だけが本番のサイトを確認できて、それ以外のゲストユーザーは 404 ページに飛ばされる。こうすることで、早い段階で本番環境でサイトの確認ができるうえ、時間になったら自動でページが公開されるメリットがある。

ウェブサイト

ウェブサイトは、下記を意識して作った。

  1. 誤解なく正確に内容が伝わること
  2. 嫌われないデザインにすること
  3. スマートフォンでも見やすいこと
  4. SNS でシェアされやすいこと

1.誤解なく正確に内容が伝わること

告知サイトでは、特に文言に気を配る。過去の告知では情報が正確に伝わらず色々失敗して、委託するって書いてあるのに書店委託しないのかな〜とか言われたり、悲惨な目にあった。「これは何なのか」「いつどこで頒布するのか」とか、優先して伝えるべき情報を分かりやすく伝えることを意識した。読みやすさを重視して本文サイズを大きめにしている。

2.嫌われないデザインにすること

運良くサイトがバズったとして、RT とかでこういうサイトまわってきたら基本的に怪しまれるし、だいたい人になんか見せたら欠点から先に探すと思う。そういう、ぼくを知らない人とか文脈を知らない人がサイトを見たときに、少なくとも嫌われないようにしたい。そのためには、完成度をなるべく高めて重箱の隅を突付くような隙を与えないのが大事だと思う。サイト、色々な人が色々感想言うけど、IE で崩れてるとか、本質と関係ない感想が一番あほらしい。あとは、クソオシャレにしすぎるとかえって腹立たしいみたいなのもあるから、適度にふんわりさせたりして、いろいろ気を遣って疲れる。

3.スマートフォンでも見やすいこと

全部のブラウザでまともに見れるようにするのは勿論だけど、会場からもスマートフォンでチェックできるように、レスポンシブデザインにしている。画像は Retina 対応しているけど、全部高解像度にすると重くなるし、去年の夏それで負荷が高まってサイト落ちた経験があるので、なるべくファイルサイズの節約をしている。このへんに知見を書いた。↓

4.SNS でシェアされやすいこと

すべてのオープングラフタグを正しく設定するのに加えて、新しい OGP タグのarticle:publisherにも対応した。jadda.info は Twitter Cards を設定済みなので、こういう感じでリッチに情報が出る。

また、サイトのタイトルは結構悩んで決めた。いわゆる「バズるタイトル術」みたいなのあまり好きではないんだけど、Twitter とかでシェアされたときに唯一こちらがコントロールできる情報だから仕方ない。最初の 『パッケージ等でよく見る「あの短い英文」の正体って何なの？ で興味を引き、 同人誌「プロダクトポエトリー研究」をC84にて無料で配布します で言いたいことを伝えるようにした。ひとこと入れてツイートしたい人もいるだろうから文字数はできるだけ少なくしてある。ちなみに、自分がツイートするときは先頭に【おしらせ】って入れると RT されやすい気がする。経験則なので根拠はないです。

あとはソースを見るまでが告知サイトということで、ソース見た人が面白がってくれるように恒例のネタを仕込んである。皆さん自身で確かめてください。

カーニングまわり

和文は webfont を使っているのだけど、見出しとかカーニングしたい。そこで、span芸でこういうことやってる。涙ぐましい感じ。

<h2 class="kern">プロ<span style="letter-spacing:-0.05em">ダ</span><span style="letter-spacing:-0.2em">ク</span>ト<br>ポ<span style="letter-spacing:-0.15em">エ</span><span style="letter-spacing:-0.08em">ト</span><span style="letter-spacing:-0.05em">リ</span>ー<br class="touch">研究</h2>

ブラウザ幅によって見出しの改行位置を変える

上記のspan芸をする副作用としてテキストの折り返しが効かなくなり、ブラウザ幅が狭い時（つまりスマホのとき）に困る。そこで、スマホで折り返したい部分に<br class="touch">と書いておいて、Media Queries で出し分ける方法で解決している。試しにプロダクト・ポエトリーのサイトを開いてブラウザ幅を変えてみてください。「研究」が改行されたりされなかったりすると思います。CSS はこんなかんじ。

    br.touch {
        display: none;
    }

    @media (max-width: 767px) {
        br.touch {
            display: inline;
        }
    }

仕込みから公開までにやったこと

結構裏でいろいろやってた。

だいぶ前から

  • [ ] wordpress, tumblrに紹介記事を予約投稿
  • [ ] 自分の GitHub Pages、 tumblr、 sanographix.net、 jadda.info に告知サイトへのバナーを仕込む（まだ本番反映しない）

告知10分前くらい

  • [ ] gumroadを公開
  • [ ] jadda vol.02 告知ページを反映

告知（24:00）ぴったりくらい

  • [ ] 予約投稿なので自動で公開される
  • [ ] お知らせツイート
  • [ ] sanographix.netを反映
  • [ ] jadda.infoを反映
  • [ ] jadda.info/2012summerを反映
  • [ ] jadda.info/jadda01を反映
  • [ ] github.io/tumblr を反映
  • [ ] google analytics みておく

直後

  • [ ] twitter cards validator にかける
  • [ ] facebook validator にかける
  • [ ] google ウェブマスターツールでクロールリクエスト
  • [ ] g+ に投稿
  • [ ] facebook ページに投稿
  • [ ] tumblr に投稿

facebook validator にかけるのは、今まで 404 ページを公開していた影響で OGP がうまく表示されない可能性があるので、本番のページの情報を再度 facebook に送信する必要があるから。og:imageとかがうまく出たら成功。

おわり

知見いろいろ書いたけど、だいたい過去の反省から学ぶ感じで効率悪い。有用な告知サイトノウハウ情報お待ちしています。

Popular Posts