[絶体絶命英雄 on the comic]のサイトを作ったよ、の記録

2013/03/06

ニコニコ漫画（公式）で連載されていた「絶体絶命英雄」。
この漫画が単行本になるにあたって、
単行本の告知サイトのデザイン・作成をさせていただきました！

実際見て頂ければと思うのですが、
ここでは作り手としての備忘録として、
またサイト作成のTIPSとして、
デザインのこだわった部分や、
作りこむ際に試行錯誤した部分について
控えておきたいと思います。

indexページについて

「はじめて作品に触れるユーザー」を対象としていたのですが、
（自分を含め）作品を愛読していたユーザーも
見ていて嬉しいサイトにしたい。

サイトに入って一番最初のページはこういう作りにする、と
決めていました。

スクロール後のメイン画像

メイン画像をよくよく見ると文字が。
こちら、実は全部、
連載版で募集された「キャッチコピー」たちです。
単行本の帯に載せるため募集されたものですが、
入りきらなかったものを入れた素材を作って貰いました。

lightBox

「試し読み」タイトルのカット（←）はイラストの中から
私が選んで切り抜いたもので、気に入っています(笑)。
このコーナーやキャラクター紹介のサンプルコマでは
jQuery lightBox pluginを使いました。
シンプルで軽くて使いやすかったです。
設置時はこちらのページにお世話になりました。

背景ざくざく

今回は作品の雰囲気を損ねないために、
つるつるした、モダンな雰囲気は合わない、と判断して、
背景を10個ほど自作しました。

うっすらでも紙目を見せたり、テクスチャをつけることで
雰囲気が出るなーと思っています。

"統一感"のこと

サイトのページすべて、別の背景を使用するなど、同じひな形ではない、ということについて
作者である今野隼史さんから、納品後に聞かれました。

・「きまりごとと思われていること」を当たり前にしてしまわないこと。
・作品のイメージ、それをユーザーさんに伝えること、を最優先すること。
このふたつの意図から、今回はこういった形をとりました。

indexページでは初めて見る方に、視覚で作品の雰囲気が伝わるように、見てきた方がすこし「にやり」とできるように。
本についてのページでは、試し読み以外にも、書籍の中身のにぎやかさがわかるように。
また、サイト全体が作品とイメージが一致するように。
そう考えて組み立てると、こんなサイトになりました。

コンテンツの多い場合や、更新のしやすさが必須な時は、「ひな形」はとても便利です。
それは、更新する側にしても、ユーザーにしても。
（今回も、全部が全部バラバラだと、見る側が迷ってしまう不親切なサイトになるので、
　ナビと、コンテンツの場所・幅だけ統一しています。）

これを自由にできるのは、個人でのサイト作成の面白いところだと、自分は思っています。
pixivなど、それこそ気軽に更新できるツールが増えて、いわゆる「個人サイト」が減ったように感じますが、
「更新のしやすさ」がない個人サイトだからこそできる、おもしろいことも、たくさんある。
たとえば部屋に絵を飾るとき、その絵に合った額縁を選ぶように、
サイト全体を通して表現する自由が、そこにはあると思うのです。

それ以外も書き出すとたくさん、細部まで「好き」を詰め込んだサイトができました！

自分はずっと、サイト作りに関しては独学で、
いまだにタグを手打ちしてサイトを作っています。

でもそれだけでなく、テキストエディタさえあれば大丈夫な安心感とシンプルさ、
「打ち込んだものが自分の見せたい見せ方で表示される」感覚が楽しくて、好きだからかもしれません。

「シンプルな見やすさ」と「演出」は、
手間と、考える時間と、知恵（ネットに色んな方が記してくださったTIPS含む）、
それらを注ぎ込む愛情と好奇心で、
もっともっと良いものにできると信じていますし、
これからもしていきたいと思っています。

ソースを見るとつたないものだとは思いますが、
これらが「好きなサイト」を作りたい方々に、すこし役立てば幸いです。

神無宇宙（zrgt.net)　　　　　　　　　

ツイート