創作サイトを改装した【メイキング編】

前回は改装したサイトの案内記事でした。今回はサイト改装までのことを振り返る記事になります。

サイトを改装したかった理由

前記事にも書きましたが、中身がゴチャゴチャしてきたのが気になってきたからですね。

旧サイトはテンプレート産なのもあってけっこう無理やり魔改造しているところがありました。本来は長文とかを載せることを想定していないレイアウトでテキストを見せてたりね。

加えて、開設初期に比べるとコンテンツが増えており、増えるたびに継ぎ足し継ぎ足ししていたため、若干煩雑になっていた、というのもありました。お部屋と同じで、長く使っていると『とりあえず一旦ここに置いておこう』で次第にゴチャゴチャになっていく感じといいますか…。

外観だけでなく、内容の整理もしたかった、という具合です。

 

改装したいなあと思っている期間の話

改装完了リニューアルオープン日は2026年2月なのですが、『改装したいなあ』はけっこう前から思い続けていました。

てがろぐを遡ってみると、2025年3月に『サイト改装したすぎてデザインカンプ作った』とか言ってた。なお、この時期はマンガの方がキリのいいところに向けて絶賛進行中だったので、『勢いで作ったけど今すぐどうこうできないので一旦蔵入り』になっていました。

その後、マンガがキリのいいところまで描き終わり、キリの良いところまで描けたので本にしようとなり、作りたい仕様に向けての調べものやデータ整理・表紙絵作成・イベント出展準備などの作業が優先タスクだったのでまた数ヶ月。デザインカンプを作ったのが3月だったのに気づけば秋に。時の流れが早すぎる。

諸々の作業が一段落し、そろそろ…そろそろやる…の段階でけっこうモダモダ。作るならコミッションを利用したいなと思っていたので、『本作ったりイベント出たりでけっこう出費かさんだしな…もうちょっと先にするか…』とか言いながらしばらくモダモダしていました。別に衝動買い的出費ではなく自分の中で確定していたことだし、いつ出しても使う額は一緒だろって話なんだけど、人間ってなんかそういう謎のバランスを取ろうとする瞬間がありますよね。

ていうかまあシンプルにコミッションという形で他者と関わることをビビっていたフシもある。普段徹底的に一人でやることをしている創作なので、そこで他者の手を借りるとなると前提共有についてあれこれ考えないといけないし、失礼がないか気になるし、うう…うおお……億劫だ…億劫…という。根本的に外交に関してひたすら怠惰な気質すぎる。

 

なぜコミッションなのか

私は一応サイトのコードいじりくらいはできるんですが、スキルとしては配布テンプレート改造が限界です。イチからやりたい形を自分で構築、ということができる技量はありません。

それこそ一人遊び楽しい創作マンであればスキル習得を目指してお勉強する…というのもひとつの手なのですが、現状の自分の優先度としては『マンガとか描く方に時間を割きたいかも』という感じなんですよね。なので、サイト構築に関しては既にスキルを持っている他人の力を借りようかなあと。

お金がかかってしまうので、趣味の一人遊び創作サイトとしてはあまり一般的ではない(みんな、無理せず楽しもう)んですけどね。自分的には2年やってみて『全然ライフワーク化できちゃうな』と思ったので、長い目で見て満足のいく自創作世界遊びのために投資することにしました。なんというかこう、しばらくレンタカー乗り回してみてからマイカー購入みたいな…そんなノリです。

 

コミッション依頼まで

コミッション依頼にエイヤとするまで

デザインを作る(2025年3月)

前項の通り、これだけはけっこう前から着手していました。一人でできるからね、これはね。

この時は本当にコミッションを利用するのか、微妙に決めあぐねていて実現性が曖昧なところだったんですが、一旦自分のやりたい形を自由に作ってみよう!という感じです。

初稿がこれ20250313224426-admin.jpg

井桁を用いようとかの大枠は一緒ですが今よりおとなしいです。背景にはがっつり一枚絵をドン!したいとは思っていたのですが、この時点ではそもそもそんな一枚絵が存在しなかったので既存の絵を当て込んでいますね。(そもそもこの背景絵自体、素材に色を塗っただけのものなんですが)

 

デザインを直す(2025年8月)

最初のデザインを作成してから5か月、本づくりが一段落してきたタイミングで久しぶりにデザインデータを開き、修正作業をしていたようです。

20250817230308-admin.jpg

デザインイメージ。ほぼほぼ今の形になりました。ていうか再現度が高すぎて『これはデザインイメージの方』って言わないとわかんないですね。すごいや。

トップページ以外のデザインも揃えて、25年8月にはデザインは出来上がっていたようです。実際に依頼するのは12月になります。寝かせすぎぃ!

 

資料作成

デザインができたし、いざ依頼…の前に、依頼内容と仕様要望をまとめた資料を作成しました。個人の小規模依頼だし最悪なくてもいけるのかなとは思うのですが、やはりあった方がいいだろうということで。

ていうかペライチページならともかく、そこそこ物量があってしかも(コミッション依頼層に比すると)若干特殊なことをやっているサイトですから、ウチに関しては絶対必要だったと思う。曖昧な指示で自分の思ってたのと違うのが出てきてリテイク、ってカスクライアントあるあるだしね…

神クライアントになりて〜〜〜〜〜

というわけでできたのが以下のようなスライドです

20251128233509-admin.jpg

多くない…?量が……

多いな……

一応、概要的なものは最初の数ページにまとめて、『以降は実制作時に都度参照してもらえればいいです資料』という形式にはしてある…のだけど、果たしてこれでよかったのか、定かではありません。なんせ、個人の一次創作サイトでがっつりコミッション依頼ってそんなに聞いたことがない。検索してもパッと引っかからない。同人誌の表紙依頼とかならそこら中に先人のレポが転がっていますが、これに関してはそういうわけにはいかないので正解がわかりません。「これで合っててくれェ…!」という“祈り”です。

量が多くなるのはまあ、さもありなんという感じではあるのですが。主なページだけでも『トップページ・コンセプトページ・世界設定ページ・キャラクターページ・マンガとか載せるページ・作品語り載せるページ』…とありますからね。しかも、それらをPC版・スマホ版で想定しないといけない(今回は大変すぎたのでタブレット比率のことは若干意識薄めにして入る。多すぎるよ意識しなきゃいけないデバイスのサイズが)

 

依頼先探し

というわけで資料を作り終えたのが12月の頭あたり。いよいよ依頼だ…!!じゃない!誰に依頼するか決めないと!

目星自体はそれまでにもつけていたのですが、ここで改めて確定させます。探す際の条件としては

・作ったデザインを再現しますよ系
・なんとなく個人の趣味依頼でもいい感じに受けてくれそう(フィーリング・値段感)

この辺りですね。デザイン込みで全部やるタイプの窓口は今回は違うので除外しつつ、PR画像や価格表、レビューなどを見つつ…で絞っていきます。といっても私はコミッション依頼経験がほぼ無いので、何をポイントに見分ければいいかは全然分かっていないのですが。レビューなんてよっぽどヤバい人じゃなければ皆いいこと書くだろうし。ていうかそもそもどのコミッションサイトで探すのが適しているかも微妙によく分かってなかったし。

そんな中で今回お願いしたのがこちらの方

花田ケンタ@web制作さん(経営者/Webエンジニア/マーケター)のプロフィール | ココナラ
Web制作 × 効率化で「やってよかった」と思える成果を | スキル: WordPress・freee・Google Analytics | 経験: フロントエンドエンジニア・経営者・CEO・COO | 評価: 93件

決め手は…PR画像のデザインがしっかりしていたことです。『デザインはこちらで作成してコーディングのみお願いする』と言っても、デザイン的知識の乏しいコーダーさんの場合『再現して落とし込む』段階で意識的なズレが生じる場合があるため。(極端な話、余白が大事という知識がないためにデザインにある余白を無視しちゃう、とか。流石に極端な例ですが。)

 

見積もり〜正式依頼

ここから本格的な制作依頼に入っていきます。ここを踏み越えたらもう一人ではいられません。他人干渉の領域です。ハァハァ…き、気が重い…!(普段コスト無視で一人で好き勝手やってるから…)(クライアント自分・作業者自分だと…なんとリテイク回数は無制限…!!でも…他人相手にそれは…駄目ッ…!)

そうも言っていられないので予算目安とともに見積もり依頼をしました。具体的な金額についてはなんか生々しい話になるので伏せさせてください。有料マガジンとか持ってる人ならそういうとこでしがちだよね具体的な費用の話。うちはそういうのないので

すぐに返信がきまして、一旦通話にて相談したいとのこと。確かに内容が内容だし、あんまりない依頼だろうしな…と思いつつ承諾。通話!ハードルが高い!でも必要そうなのでやる!

予定を取り付け、通話にてヒアリング開始。内容の確認などを行いました。こちらは不慣れで探り探りでしたが、流石に向こうは慣れているというかプロと言うか、話しやすい雰囲気で色々聞いてくれました。た、助かる〜…

それで通話での相談内容なんですが、『構築をWordPressでしないか』という話でした。自創作サイト、けっこう量がある上に同じ形式のページ構成も多い割にオール手打ちサイトだったので、改装サイトもそのつもりでいたんですが……アレですね、冷静に考えると確かにWordPressの方が良すぎますね。この場合

(WordPress…ざっくり言うとサイトづくりのプログラム/システムのこと。主にブログ運用に使われている。ページをどんどん追加していくタイプのサイトだとこっちの方が色々楽だし管理がしやすい。このブログもWordPressで構築している。)

色々相談した結果、『WordPress用のテーマを構築する』という形で依頼させていただくことになりました。

 

待機期間(立ち絵作成)

納期についてはめちゃくちゃ余裕を持ってお願いしました。短納期も受け付けておられますが、ウチは別に急いでないというか、改装さえできればいつでも…くらいの感じなので。一ヶ月ちょっとを納期に設定しました。なんなら一ヶ月でいいの?という気持ちまである。イラスト依頼とかだと激短納期のイメージだ。一ヶ月って。

この待機期間に新サイト用立ち絵を作っていこう、となりました。旧サイトでは立ち絵の規格がけっこうバラバラだったので(しっかり描きこんでるのもあればラフ画もあり…)そこを揃えようかなと。

クリスタでまとめてデータ管理しつつ、使い回せるレイヤーはコピーして使ったりして時短を図りました。影色用の色乗算レイヤーとかね。

 

そして、前記事でも紹介した通り主役級の二人には動く立ち絵を作ってみました。やってみたかったので…

動く絵簡易振り返り

アニメーション立ち絵、作業記録を軽く残していたので見ていきます。作業はクリスタのアニメーション機能を使ってやってます。

まずはざっくり動きのラフ。二人とも装飾揺れものが多いので一旦そこら辺無視して素体の動きを描きます。

素体をベースに羽織もののラフを足した版。↑素体の沙華はかなり大げさにしゃがんでからつま先立ちするモーションでしたが、「つま先立ちするだけでそんなに溜めいらんな」と思って修正しています。

更に細かいパーツを描き足していく。とにかくこれはパーツごとにやった方がおそらくよい。1コマずつ全パーツ描きながらやってると多分大量に破綻ポイントができる

井正のマントの奥の方の広がり方とたわみ方がちょっと気に入ってるんだけど、実際は完全に隠れる場所なのである。

描いたラフを下絵に線画を起こした状態。こんな短いアニメーションでも動きが破綻してないかめちゃくちゃ気にしないと変になるの大変すぎる。気を抜くとすぐに揺れものの動きがぎこちなくなったりする。

最後に色をつけて完成です。でも影つけるとなると影の動きもぎこちなくならないか気を付けないといけないの大変すぎる。
上のGIFではなんか変色してますが、実際の色味はサイトで見てみてね。

 

アニメ色塗りに際して効率的にやってよかったなって思ったのはレイヤーカラーを設定したフォルダの使いまわし

こうなってる。レイヤーカラーというのは、ざっくり言うと『このレイヤー上で黒を使ったらこの色に変わります(黒以外だと明度に合わせて同色相の色になります)』という設定です。
普段は下書きレイヤー化する時などによく使う。

CLIP STUDIO PAINT ユーザーガイド | 公式マニュアル
CLIP STUDIO PAINT(クリスタ)のパレットは、選択したレイヤーに対して、・・・・・などの効果を付けられます。

パーツごとにレイヤーカラーを設定したセットを作っておくことで、色を塗る時にいちいち該当の色をスポイトしたりカラーパレットから選んだりしなくても、黒を塗るだけで固有色がつきます。セット作るときだけ面倒ですが、総合的には多分手間は減ってると思います。

 

あと、なんとなく「こうするとよく見える気がする」があるんだけど、文章で説明しにくいので気になる方は動画で見てください。

バッカーノのOPみたいにある瞬間を静止画としてピタっと切り取る、みたいな表現にしたい場合は遅れ揺れナシの方がいいかもしれないと思った。

 

確認用ページ到着〜修正など

そんなこんなで一ヶ月が経ち、『少し納期を延ばしたい』という連絡もありつつOKしつつ(改装されるならいつでもいいため)、1月末頃に確認用ページが届きました。

ページを開く(ドキドキ…)→うおおおお!自分の作ったデザインがWEBページになってる〜〜〜〜!!!!すげ〜〜〜〜〜〜!!!!!!!

と、興奮しつつ、一通りワッショイしたあと冷静に見ると細かい部分でデザインカンプや資料と異なる部分があったので、修正依頼用のチェックと資料作りを開始しました。見積もり段階で提示した情報との差異について修正を依頼することは…まあ正当性があると思うから…(クソクライアントになることを、恐れすぎている。)

これがチェックすればするほどけっこうな量出てきて、最初の修正依頼をまとめるだけでも数時間かかっちゃいました。ただ、これに関してはコーダー側が悪いというわけではなく、ある程度織り込み済みで進めていく範囲の話なのかなと。結局自分のデザインとその意図・細部のこだわりを隅から隅まで把握しているのは自分だけですし、コーダー側は私以外にも沢山の仕事を並行しているわけですしね。コミッションサイトを利用して気軽に依頼できるということは、チェックは自己責任で行う必要がある、ということなのかなという理解です。

ともあれ、大枠のデザイン再現はかなりイイ感じにしてくださっているので、あとは私がちゃんと目を光らせてチェックバックしつつ根気よくブラッシュアップしていくのが大事なのかなと…!もちろん、最初のデザインイメージや資料から妥当な範囲で。

…と言いつつ、私の伝達漏れのせいで想定と仕様が異なっていた部分なども発覚し、「あ〜〜〜〜〜〜っ」ってなるなどもしました。こういう場合は「追加費用出せますので修正お願いします…」という姿勢で……チェックバックを……(でも無償で修正してくれました。優しい…)(おそらく工数や修正規模によると思われます)

いや〜〜…この、チェックバックの期間、精神がゴリゴリにすり減ってましたね。笑
大半が依頼時の情報に即した妥当な修正依頼だとは思いつつ、他人に「ここの線の太さがデザインと違うので1ピクセル減らして、あとここの文字が中央からほんのちょっとズレていたので直してもらって、あとここと、ここと、ここと、ここと………」「すいません追加で修正点あったので五月雨式に失礼します。ここと……」ってひたっっっすらこまっっっっかい部分の直しをお願いするの、謎の申し訳なさがあり……。私はいつも他者に干渉して迷惑をかけることを恐れている。

というかなんなら、あまり一般的ではない依頼ゆえに「この仕事、この予算で受けてみたけど実際は思ったより工数かかったな……、とか思われてたらどうしよう…」とかも考えてた。気にしすぎかもしれない。いや、私は少し気にするけど気に病むほど気にするわけではないので、そうは思いつつまあ大丈夫っしょ、とも思っていたのですが。(気にしいの中では楽観的という自己評価)

まあ多分…依頼時に渡したデザインカンプや仕様資料との差異、は、細かい部分であってもガンガン修正お願いして大丈夫だと思います。ゴッドイン細部。お金も払っているわけだし、ここは遠慮してはいけない…いけないザウルス!

ていうかシンプルな静的サイトならワンチャン自分でも直せるけど、WordPressテーマという形のプログラムだと「これくらいのスタイルは自分で直せばいいか…?」とかやってるとうまくいかなくて、結局「すいません、これくらいは自分で直せばいいかと思ってやったんですが、なんかうまく表示されないので修正お願いしていいですか……」と(納品確定後に)追加連絡することになります。しちゃいました。バカ!これは本当に駄目クライアント寄りの行為だと思う。猛省。

 

あと反省点としては、『見た目だけでは気付けない部分もある』ということが最初わかっていなかった、というのがありますね。ぱっと見で分かる外観の修正点は最初のチェックバックでほぼ潰せたんですが、編集してみたり、仮画像を実際の画像に差し替えたりすることで発覚するエラーや崩れもあるので。それ関連で『納品確定後に気付いて追加で修正依頼するやつ』をかなりやってしまいました。ほぎゃー!!ギャオオオーン

サイトのチェックする時は編集したり追加したり画像を差し替えたりといったことも全部一通りやること…!!重要です。本当に…

 

まあ色々あったのですが、根気よく修正対応していただけて助かりました。感謝、感謝…

 

 

納品〜コンテンツ流し込み作業

というわけで沢山沢山チェックバックと修正を経て、正式な納品・依頼完了ということになりました。

しかしながらこれでサイト改装完了というわけではありません。作ってもらったのはあくまでサイトの構築部分なので、マンガやテキストやキャラページなどを流し込んでいく作業は自分でやることになります。こんなとこまで任せていては予算がいくらあっても足りないというか、追加しながらテキストを修正したり整理したりするので自分でやった方が絶対良い。

『サイト改装はいつでもいい』とは散々言っていましたが、2月に入った段階で『できたら2月のコミティアまでには改装完了しておきたいな…』という欲が出てきたので、イベント直前まで必死でこの流し込み作業をしていました。チェックバックで思った以上に日にちが過ぎてしまってけっこうカツカツだったものの、一応間に合ってよかったです。でもこの時ヒィヒィ言いすぎてMPが完全に枯渇したので、こうやって振り返り記事を書くのが遅くなったというわけです。振り返り記事なんてもんはねえ、MPが不足していると書けませんからね。

 

リニューアル公開後

という感じでまあ公開したのですが、その後もちょくちょく修正点を見つけちゃったり、追加で仕様を変更したいポイントを見つけたりしたので、再び見積もりに駆け込むことになったりしました。これに関しては追加仕様の話もあったので追加費用もお支払いしつつやっていただきました。

追加修正についてもゆっくり納期でお願いしていたので、そのあたりが一通り終わったのが4月に入ってからでした。今は概ねいい感じかなと思います。少しばかり気になる表示もある(ブラウザサイズによっては文字がすごいでかくなる)のですが、まあ〜〜これは先でもいいかな。

 


 

サイトリニューアル振り返り記は以上になります。大変だった。「人様に迷惑をかけているかもしれない、俺はクソクライアントかもしれない」という自意識が。でもやりたかったので、できてよかったです。クラウドソーシング、最高〜!

マイライフワーク・拠点の大掛かりな工事は完了したので、また一生一人遊びに戻ります。マンガをせっせとね、描きますよ。イベントには出ますけどね。

ここまでお読みいただきありがとうございました〜。気が向いたら見に来てね。おわり