自創作サイトを改装しました。
厳密に言うと2月頃には改装していたのですが、改装直後はバタバタしていたり、改装作業が終わって「マンガ作業がしてえ！！！！！！」となったりして記事化が後に後に回っていました。そろそろ、します。
サイト改装についての記事を書いていこうと思います。記事は2回に分けて書く…つもりです。まずは改装したサイトの案内記事。第2回の記事ではメイキング関連をやろうと思います。
それでは第1回、『改装したサイトを見て回ろう』ツアー記事になります。デザインは自分で、構築はコミッションでお願いしたものになります。
トップページ
スマホ版のスクショを持ってくるのが面倒なので基本的にPC版を見ていきます。
▼旧デザイン
▼新デザイン
旧サイトはテンプレートを改造改造&改造して作っていました。元のテンプレートが良いので見た目自体はそこまで悪くはないかなと思うのですが、継ぎ足し継ぎ足しで中身をいじっていた関係でけっこう情報がゴチャついてたのが気になっていました。『どこから見ればいい？』の項目とか完全に後付ですしね。1行の文字数も多くてちょっと読みにくいし、見出しのデザインなんかもけっこう取ってつけた感がありました。
新サイトではメインビジュアルをドドン！の形式にしました。私が好きなので。メインビジュアルドドンのデザイン。
▲本館もビジュアルドドン！形式
総集本の表紙絵を描くのに一ヶ月かけたのも、総集編以外に使い回し倒すつもりだったからなので、非常に満足です。
画面全体に引かれているラインは井桁のイメージです。シリーズマンガの主人公の名前が『井正（いげただ）』なので、何かモチーフに困ったら井桁を使うことが多い。
トップに表示されるメニューも見やすくなりました。
旧サイト、薄すぎる。いやこれはですね、サイトの最初期は背景画像がもうちょっと暗い色だったので多分成立はしてたんですよ。この画像だとだいぶ見えにくいけど。
また、各項目へのリンクだけでなく作品シリーズバナーも配置しました。色々あるけどやっぱりメインはシリーズ作品らかなと思うので。トップからワンクリックで飛べるように。
スマホ版ではハンバーガーメニューからこのように開きます。
更新履歴については旧サイトよりも簡易化しました。てがろぐ埋め込み更新でなくなったのと、サイトの構造的にRSS配信ができない状態になっているので、もしRSS登録されている人がいたら～ウ～ン…と気になるところではある。
もしRSSが必要なら別途専用のてがろぐでも建てて配信してもいいかなーとは思うのですが。需要のほどが謎なんですよね。RSS、私も使ってるしSNSの直接フォローよりも圧倒的に気楽なんだけど、SNSと違って何人くらいが利用しているかが分からないのが難しいところ。需要があれば対応する意気込みはあるので、もし必要なら言ってください。
ピックアップバナー置き場。何かトピックがある時にこういうの置けると良いかなと思ったので。現状は更新中のシリーズと、総集本BOOTHへのリンクにしています。
イベントに出るときに更新してもいい…んだけど、正直ここを見てイベントを把握する人ってそんなにいないのでは…？と思うので現状はしていません。頻度的に自分への負荷になるし。お品書き作ってSNSで告知して…だけでも相当面倒なのに、やることを増やしすぎたくない。負荷は下げたい。できるだけ。
イントロダクション、まあざっくり言えば創作全体の紹介です。多分テキストはその時の気分で変わります。今の文章、なんかノリ軽くてウケる。ノリ軽めに見てほしいという気持ちが表れていますね。
マンガ一本でドドン！な作品の場合はここにマンガの紹介が入るんですけど、ウチはあくまで『世界をやりたい（その一環でサイトやマンガやテキストをやっている）』なので、こういう序文が必要になる。
一応初見向けに『ばけいづこ』へのリンクを設置しています。色々ありすぎて「さあどれ見るか選べ」と言われると困る場合もありそうなので。でも、書いているようにどこから見てもOKのスタンスです。私も創作の振り返り記事から読み始めることあります。
フォントもビジュアル重視で一新しています。更新の楽さでいえばWEBフォントを利用する方がいいんですが、理想のフォントがGoogleFontsにはないので、手持ちの有料フォントを画像化して利用しています。このやり方をすると、項目追加したい時にいちいち画像を作って書き出して…ってしないといけないのでやや面倒なんですが、ここは見栄えを優先しています。
旧サイトではなんとなく…和風？極太ポップフォント…？みたいなふわふわした感じだったのですが、新サイトでは自分の中で固まってきた自創作テイストを統一した形式で出せてうれしいです。和風というか、多分目指すはレトロ寄りな気はする。レトロ寄りだけど色褪せた感じではなく、色彩は派手めに。なんかそんな感じです。
コンセプトページ
当創作のコンセプトを詳しく記載しているページです。キャラをどう作っているかもざっくり記載。
背景画像はトップのままだとチャカつきすぎるので、抑えめなものに変更しています。
これは完全に自分用のメモなんですが、テーマカラーのカラーコードメモ置き場です。こういう場所にまとまっているとコピペするとき便利なので。誕生日は決めないけどテーマカラーは決めるタイプのオタク。
これは旧サイトにもあったんですが、カッコイイ感じにしました。色面積が広くてスポイトもしやすくなってます。
世界設定ページ
自創作世界の基本設定を記載しているページ。
▼旧サイト
▼新サイト
旧サイトはやはり、テキストを読む項目としては1行幅が広すぎて読みにくかったり、右側がスカスカになったりしてしまっていたのでまずは読みやすさを重視しています。
また、項目やテキストに関してもある程度整理しています。旧サイトはけっこう継ぎ足し継ぎ足しで内容を増やしていましたので、ごちゃつきつつあったものを整えた形です。↑スクショ部分は割とコアな設定なので文量多めになっていますが、土地や社会文化に関してはそこそこ削っています。
キャラクターページ
キャラ紹介のページです。
▼旧ページはこんな感じ
旧サイトとの差別化点・こだわりポイントとしては、キャラ一覧のサムネイルサイズを段階化したことですね。
一番上の大エリアが『主役級・本編でもレギュラー登場するキャラ』。中サイズのエリアは『複数回登場するサブキャラ（もしくはちょっと情報量の多いキャラ）』。そして、小サイズのエリアは『ゲストキャラ』になっています。出番の多いキャラほど大きく配置されているので、目安としてわかりやすいかなと。
世のコンテンツ公式サイトのキャラ一覧を見る時って、全てが均等に並んでいるとメインがどこからどこまで、とかが分かりにくくて、それをもうちょっと直感的にしたいなあという試みです。もちろん、極めて群像的またはキャラカタログ的な作品で全てを均等に見せたい場合は均等配置がいいのかなと思いますが。目的次第ですね。私も群像大好きマンとして最終的には自創作が群像になってほしいと願ってやまないのですが、現状はメインと言えるキャラに牽引してもらいながら世界を開拓していっている段階なので、この形式がいいのかなと考えています。
この配置は今後変更になる可能性があります。サブキャラからメインに上がってくる可能性もあるので。今描いてる『ゴロ月』の女子たちはどっちエリアに配置するかまだちょっと迷ってます。かぐ夜は大エリアでもいいかなーと思う一方、マキビは中エリアだしなー、固めておきたいからなーと。
キャラ詳細
▼旧ページ
▼新ページ
ポップアップ表示になりました。また、この項目でも旧ページの一行幅が非常に広かったので、コンパクトにまとまっています。
PCで見るとダイナミックに前後キャラリンクが表示される形。かなり、よいです。アニメのサイトみたいでうれしい。
そしてなんといってもウリは動く立ち絵です！まあ動くと言っても井正と沙華だけなんですけど。こんなん全キャラ実装してたら一生マンガの続き描かれへん。よければ動いているところを見ていってね。（回線状況によっては少し表示に時間かかるかもしれないけど）
これに関しては、前に見たアニメの公式サイトでこういう立ち絵表示があったので、「これ、やりて～～～～～～～～～～」とあこがれ Go My Wayになったのでやりました。メカウデというアニメです。
アニメーションについてはサイトの構築を依頼して待っている間に描いていました。昨年末くらいかな。
主要キャラの分はまた増やせたらいいな…とは思っているのですが、非常に大変なので時間が取れたらかな。
動く二人以外に関しては、全員分の立ち絵を一新しています。統一感を出したかったので。そしてキャラをズラっと並べたかったので、ゲストキャラだけでなく『作中の話題に出てきただけで特にセリフもないキャラ』も追加しました。上の子は作中にセリフありません。
止め立ち絵に関しては増やしやすいようにあまり工数かからない描き方にしています。線も塗りもシンプルに。
作品掲載ページ
各マンガシリーズを掲載するページです。背景ビジュアルなどはだいぶ前に描いたものの使いまわしだったりするので、なんかもっと良いのに変えたい気持ちはあります。まだ気持ちだけです。
マンガに関しては全ての話数を通し番号にするのではなく、シーズン形式で切り替えて話数をリセットしていこうという目論見があるのでそのようにできる形にしています。まだ1シーズンしか載ってないですが。
長編シリーズものは入るのも大変かなと思ったので、比較的単品でも読めるかなという話には『単体読みしやすめ』バッジもつけてみています。
マンガを開いたところのページはこんな感じで変化しました。
↓
マンガの掲載についてはビューアを導入したこともあったんですが、もうウェブ版は縦読みでええやろ！と思って今の形になっています。
改装ポイントとして大きいのはスマホでの表示です。マンガの画像が画面横幅いっぱいに表示されるようになりました。これで小型端末で閲覧しても読みやすくなったかなと。旧版だとスタイル設定を他ページから流用していた関係で左右余白がかなり大きく、画像がキュっとなっていたんですよね。ここは絶対改善したかったポイントなのでよかったです。
旧サイトから置いていた用語集も引き継いでいます。
PCならマンガを読める状態で用語集も開けるように。読みながら『この名前って誰のことだっけ』『この用語ってなんだったっけ』ってなったら開いてみてください。
この感じで別シリーズのページも生やしています。
背景ビジュアルによってはちょっとラインが目立つ
この辺は『同一世界観内・関連性ありの別のシリーズ話』って感じです。今は2枚目にある『ゴロ月』を描いています。
語りページ
作品語りするページです。
他ページとフォーマットを合わせたせいで語りページはちょっと一覧性が悪いかもしれない
このページは旧式の方が見やすそうですね…もしいつか改善できたらするかも。でも多分スマホで見る分にはあんまり関係ないんでそのままでもいいかも。
▼スマホ版
中身は旧版よりデザイン的には整理できている…はずです。
文章読むだけなら余白あっても大丈夫やろと思って井桁フォーマットにしてる。スマホ版だと全面表示されます。
記事ヘッダー画像なんかも表示できて“らしい”形式になったと思う
旧デザインだと画像が左側に出てるんだけど、スクロールに合わせてちょっとずつ下がっていくテンプレートだったので長い記事だとクソデカい画像を入れとかないといけなかったりした。変なことしてたな…
項目の切り替え部分についても、旧サイトよりスマートな形にできたかなと思います。
↓
旧サイトの項目背景、多分なんか調べて出てきた方法で強引になんかアレしてた感じがある。モチャっとしている。
音声版あり記事も分かりやすいようにバッジつきにしています。これは私が趣味のVOICEPEAKで作成した音声データがあるよ、という表示です。作業用BGMにすることが一応可能です。
サイト紹介はこんな感じです。次回はこのサイトのデザイン作成からコミッション依頼などを振り返ろうと思います。また書けたら更新します。
