Libertas

カンコさん運営のHariHariのサイトを制作しました。今回は制作を経て所感。

フリーサウンドを手がけているHariHariのトップは以下のリンクから。
HariHarihttp://kanko.ninja-web.net/

サイトトップはこんな感じ。相手方のサイトの印象以前にテンプレート的に考案していたので、カンコ、という冬を連想させる配色には至れていません。

で、今回は小難しいデザインワークや、仕様上記をつけたところなどの技術的な話はありません。多少の面識を持つカンコさんのサイト紹介と、制作秘話についてです。

HariHari

カンコさんの作られたサイトHariHariは、なんでもはりはり鍋、のはりはりらしいです。だからといって鍋のサイトにしてもおかしいので、とりあえずはハンドメイドのような親しみやすい雰囲気を出そうとデザインしました。

なんだか2000年以前の海外の配色に思えます。あと何がハンドメイドらしいかって、色の不一致がげふんげふん。個人的な印象は、何もないところに放り出された感じ。

話を戻してHariHari。Soundのリンクから音楽を視聴、ダウンロードできます。カンコさんは若い頃音楽をやられていたようなので、曲作りには不便を感じていないようでうらやましいです。ここの「天気雨」はお気に入りです。

初期のフリーノベルゲームが好きなようなので、その頃を連想させるmidiサウンドは古き良きあの感覚と、現代に合わせられた音作りをしてくれそうです。サイト制作の件もあり、ノベルゲーム制作の際にはサウンドを用意してくれるとのこと。やったね！

2chでの作曲経験もあるカンコさんは、HariHari更新をゆっくりと続けるようなので、ツボにはまるサウンドを心待ちにしています。

制作秘話

秘密にするもなにも、サイト制作に当たった日数は一日だけ。自己への挑戦でした。

現状、Libertasも何もデザインされていない状態です。これに一区切りつけるために、（このニュアンスの許可はもらっています）習作として制作しました。すると身についている知識から漠然としているところまでがわかるわかる！実装に不安なところは妥協したこともあり、htmlやcssは少しも詰まりませんでした。デザインのほうがはるかに難しいです。

確かに、よくよく考えてみるとcssでのレイアウトは、経験の無い方ではホームページビルダーを使ったとしても難しいものに思えます。その分喜んでもらえました。やったね！

技術的なことを一つ言うとすれば、CMSを使わないなら、管理する人のhtml理解度に合わせて制作することも必要ですね。多少のバグを包容できるシンプルなサイトが重要そうです。

一日の集中で作れて、それがオリジナル。多少野暮ったくてもそれは嬉しいものに思えます。機会があったら別の方のサイトも作りたいなぁ。最も仕事じゃないので主観混ぜまくりで、クライアントほったらかしですが。興味のある方は連絡ください。

そんなこんなのサイト制作。僕のほうからもありがとうございました。

僕自身のサイトをリニューアルしました。現段階（'08.08.06）ではblog以外ですが、間違いなく完成するところまで来たので、備忘録、雑感などを書き留めます。

トップページの全体。白と余白を大事にするように気を使いました。そしてこれに絡めた話題。Webページのデザインってどうしたら出来るのか、クリエイティブな発想はどこから来るのか。今の自分のレベルで感じていた事はこんなこと。

Libertasとしての悩み

同人サイトとしての問題

僕のサイトはとりあえず同人サイト。同人サイトってことは、絵とかがあるわけです。色々な絵を描くはずですが、やっぱり健全な同人はエロがあって肌色があるわけです。そこで衝突が起きたのは、僕のサイトは大気を表現したデザインにしたかったこと。大気といえば空やら雲ですね。ってことはブルーです。しかしどうにも同人サイトにブルーは大敵だと思いました。

技術がないために写真加工は使えません。そのため、ブルーは直接色としてどこかに使用されます。考えたら、色の効果として冷静、鎮静効果があるために、エロにブルーを使うと、たぶん冷めます。冷静になってしまってエキサイトしてもらうことが出来なくなる。それじゃあ問題ありです。で考えた結果、大気の表現は止めよう、となりました。それに代わるレッドなら、たぶんエロい効果があるはずです。ほんのり温度を感じる、きっとエロい。エロいことはいいことだ。以上のことが同人サイトを作る際に感じたこと。

背景が白いことは面白みがないのか

同人サイトはどこ行っても白ばっかり。先に取り上げた問題に気がつく前は、こちらもどうしたらいいか悩みました。青がいいんだ、という思いは理詰めで行かないと納得してくれません。

結論を言うと、背景が白い方が汎用性が高い。当たり前の話ですけど、体感するのにこれだけかかるとは、素直じゃないです。

僕のサイトは、同人サイト兼blogサイト兼......と、何をしだすかわかりません。先ほどの問題のように、コンテンツカラーが反発する可能性もあります。不適合なコンテンツは別サイトを作ればいいのですが、そうも言ってられない大人の事情があります。無彩色の黒でも代替が可能ですが、黒い背景は目を疲れさせるWebコンテンツとしての問題が付きまといます。やっぱり白いほうがいいようです。もちろん文字とのコントラストを考えた上での話。

Portfolioサイトでは、白以外のあるカラーで統一して作成している場合が多くありますが、それも単品物のサイトだからでしょう。少なくとも今の僕の技量では、色を使うことは出来ません。白も白なりに難しいのですが。

製作最中の悩み

デザインに泣く

僕はデザインについて一般以上の知識を持ち合わせていませんが、今回の件を踏まえてデザインは気が狂うほど難しいと実感しました。それではデザインとは何か。Wikipediaを参照すると以下のようにあります。

デザインの語源はデッサン(dessin)と同じく、"計画を記号に表す"という意味のラテン語designareである。つまりデザインとは、ある問題を解決するために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。

これを踏まえて、普段なんらかの創作をしているときにデザインをしているのか、といわれると非常に怪しいですね。『ある問題を解決するために思考・概念の組み立てを行う』、これはどう読んでもアタマを使う話です。思いつきではなく、目的へ向けた明確な思考プロセスがないと土台が弱い。ましてや専門の教育も受けていないので、今回は前回の色彩論の付け焼刃知識をベースに、数多のWebページを教科書として読み解いていきました。色彩論、個人的には十分に役に立ちました。

結果、文章レイアウトのパターンは以前から知っていたのですが、Webデザイン的にするべからず、と（暗に指摘しているように思えた）パターン、配色が見えてきました。この事はもう少し積み立てて確固としたものにして情報量を増すまで、言及は避けようと思っていますが、文章にしなければ理解しにくいことだと思えるので、いずれ挑戦してみたいです。

製作時間に泣く

納得の行くサイトを作るのに今回費やした時間は、直接的には７日間です。この期間はサイト作りと逃避のブラウジング以外何もしていませんでした。i Know!が遅れたりランニングにいけなかったりと、個人的には最低の期間。中のあたりは意識飛んでました。気がついたら完成、気がついたら２度目の月曜日。

しかし間接的には２年です。サイト製作を勉強したのが３年前、実際にサイトを構えようとCSSで本格的に組みだしたのが２年前。そしてサーバをレンタルしたのが１年半前。LibertasはTopデザインを２度過去に変えていますが、確かに実力が上がっていくのがわかりました。お絵かきみたいだ。

素人の考えですが、やはり勉強をしても頭でっかちなだけで、折角だから勉強ついでに、と実装したいことが目的にそぐわなくともやってみたくなります。あるところでは極端にユーザビリティを重視してみたり、はたまたモダンブラウザのみのレイアウトで構成したり。これらは一旦吐き出してしまわないと、どうにも我慢が出来ないもので、若気の至りと考えればいいのでしょうか、それを乗り越え、今回のデザインに到達できたわけです。その甲斐あって、考えがぐっと深まりました。それだけでもよかったのかもしれないです。

製作期間を支えてくれた音楽はこちらの二つ。アーティストBT含むTranceと徐々に明るくなるHouse、どちらもニコニコ動画です。精神的にかなり助けになり、感謝も含めてBTのアルバム、ESCMを購入しました。そしてデザイン名を、ある音楽にちなんで『Fleming August』としました。二つ含めて個人的な感想はProgressiveですね。成長を予感させる音楽はいい。

その他製作期間中に思っていたこと等

すごいなと感じた大学生のサイト

二人しか捕捉していませんが、一人はfamiさんのサイトMOGSTYLE。こちらのデザインになったのはfamiさんが20になられた時のはずですが、しっかりとした作りでこれぞxhtml+CSS！といえるサイトをはじめて感じさせてくれました。これを二十歳で作るって......すげえぞ。最近は更新されていないのが残念です。

もう一人は『の』さん（かっこ付けでないと読み飛ばしてしまう）のサイトVERSION510。こちらも二十歳のときに作られたサイトのはずです。落ち着いた配色と、方向性のぶれないコンテンツは、『の』さんの人格を感じます。これを二十歳で作るって......すげえぞ。最近はVERSION510を離れ、別サイトの運営をはじめられているようです。そちらもコーディングが確りしていて、大人の作りでカッコイイ。

お二人ともアマチュアです。（前略）すげえぞ。こうやって並べるって事は、やはり意識しているからなのですが、依然雲の上。画像加工を含めて、レベルアップしていきたいです。Webデザインを意識して製作し、３年であのレベルに到達できるケースを何例か見ました。たぶん３年やれば到達できるんです、きっと。それに期待しながらアンテナを伸ばし続け、来年の冬には、僕ももう少しクールになりたいです。

絵用のサイトとして、新たに「Carpediem!」を制作しました。制作期間５日間のうち、前回までのミスから学習したことや、雑感などを書き留めます。

トップページ。必要以上に情報を載せないことに気を使いました。

いたずら描きから18禁絵までを今後掲載していくCarpediem!のトップは以下のリンクから。
Carpediem!http://carpediem.libertatem.org/

Carpediem!を作るまでの思考プロセス

着手前

本当はLibertas一本でやっていきたかったのですが、遅かれ早かれ、一般的な内容を扱うblogサイトと同人サイトの雰囲気は反発するな、と思っていました。それが最近になって、ついに別サイトを作ろうという強い意志に変わったので、制作し始めることにしました。

Libertasの規模の大きさから学んで、実力的に完成しきれないものは作りたくなかったことと、絵サイトに特化した（正確に言えば絵サイトにデザインされた）web制作というものを真剣にやってみようと思いました。

そのためにまず、自分で一からデザインして作ることをやめました。所詮僕程度のオリジナリティですから、気持ちを変えて他人のデザインから学んで、作り変えることで完成は出来ないだろうかと考えました。

次に絵サイトとしての目的を考えました。本来の目的のみの実装にすれば一つ目の目的も手間がかからないために達成できることもあります。（実際のところはまだ詰めれると思っているのですが......）絵サイトはシンプルであることが、もう何度も言っていますが重要であると考えています。ただ、簡素なだけといってしまうと例えば、画像を左そろえで列挙がありますが、あくまでも作る側の視点ではwebサイトとしては不完全に思えます。それは、ミスマッチした額縁に絵を飾っておくことと同義に思えます。理想としてはひとつのサイトとしての一貫性を維持しつつ、シンプルに絵を見せることが重要なはずです。

以上の２点が製作前に漠然と考えていたことです。

製作を始めてから

テンプレートはMovable Type4に付属してくる「tristan-blue-4.2」を使用することにしました。若干崩れていますが、外観は次のようになっています。

最初見たときは、いまどきのblogから離れて、シンプルなものだと感じたので、これを使おうと思いました。しかし、htmlを見たところ７重のdivが出現。作り変えることにしました。そのほかにも問題がありましたが割愛します。

シンプルフォーマットで特に参考にしたのは、膣外射精さんの見せ方と、サイトで使われているテンプレートです。人によってはまんまパクリだろ、と思う方もいるかもしれませんが、それは後ほど説明。

実際に作り変えるに当たって、僕が直面した障害や、新たに技術的に用いたテクニックは「初心者～中級者のMTによるサイト製作で抑えたい36の項目」で列挙しましたので、それは省略します。

今回のデザインにあたって詳細

先に膣外射精さんのサイトとの差別化について。僕はあらかじめwebサイトとしての機能を充実させることを念頭においていました。そのために、画像へのアクセスを容易にするためにタグクラウドと検索を実装しました（実装といっても技術はさして必要ないので、デザイン上の取捨選択なのですが）。また、内部的な話ですが、本文として文字を表示することがない前提での製作をしています。所詮絵サイトだから、いっそ言葉は要らないだろうと、そう思い切ってやってみました。ただし、同人サイトとしての形も持たせるために、拍手返信のフォーマットは作ってあります。

いってしまえば上記のことだけでしか、表示の差はない、ともいえます。絵サイトのシンプルというのは、現状、タイトルと日付、その他小項目いくつかか��%

「ノエシスの隙間（ダウンロードリンク）」を作り始めた理由、製作期間の出来事などなど、自分用まとめ。吉里吉里などの初学者への注意事項にも簡単に触れています。

作り始めた理由

「突然やらなければいけないと実感した」ために、ゲームを作ることになりました。細々としたものを挙げれば、最近何もやっていなくてダメだなぁと思っていたり、今年ゲームを作らないと罰ゲームをうけなければいけないことなど、色々ありました。

製作プロセス

特に考えも無しに、着手。７日間で完成しきること以外のルールは特になし。実際は８日間かかり、内１日は作業内容の放棄を行っています。次のリストの工程をそれぞれの日に行っています。

1. シナリオの執筆 (7kbyte)
2. シナリオの執筆 (7kbyte)
3. シナリオの執筆 (8kbyte)
4. 吉里吉里の学習、実装 / 素材探し（音、背景）
5. 吉里吉里への実装 / 素材探し（音、背景）
6. 吉里吉里への実装、調整 / 絵の制作
7. ゲーム内の素材の調整
8. 吉里吉里の調整 / シナリオの構成見直し

これらの工程を、日ごとに次に示します。

１日目、無駄なシナリオの執筆

作ろうと思ったと同時に書いたシナリオは翌日放棄することとなります。その内容は、『突然変異して現われたじゃがいもと神を巻き込む戦闘を繰り広げられた後、主人公のおにゃのこが触手にやられるお話』。

２日目、「ノエシスの隙間」の執筆

前日の作品を見直す前から、自分にとってとても不快な予感がしたので、新たに書き直すことにしました。勢いだけでは何もできないので、多少冷静に物語を構築。

考える時間もないので、オムニバス形式で一つについて語る作品にするとだけ決めて、この日に半分書きました。

３日目、「ノエシスの隙間」、シナリオ草稿完成

草稿で完成と言うのかはわかりませんが、そうせざるをえない状況。執筆スピードは、プロットがある場合は１時間に原稿用紙３枚ほどかけるのですが、案の定、今回は後半手が止まりがちでした。次以降、プロットは欲しいですね。

４日目、主に吉里吉里の学習

音と背景の作業は、吉里吉里からの出力を確認しながらでなければ全体のイメージをつかめません。そのためにまず、シナリオを吉里吉里で扱わなければいけません。吉里吉里の勉強を、webサイトのみで学ぶ必要があります。

この時最も役にあったのは、吉里吉里/KAGのリファレンスサイト群。

• 吉里吉里２ リファレンス
• KAG System リファレンス
• 吉里吉里2/KAG3によるノベルゲーム開発

今回のゲームを作るときに、振り返ってみるとこれらのリファレンスサイト以外は必要ありませんでした。読みこなす前提としては、なにかしらのプログラム言語を知っていること、基本中の基本を押さえていること。丁寧に上から読んでいけばすぐ理解できます。

また、このゲーム限りになったとしても、こまめにマクロを組んでいけば、触れたことはありませんが、NScripter程度に楽になるのではないかなと思われます。

レイヤーの変更処理と、複数のメッセージレイヤの扱い方さえ憶えれば、吉里吉里特有の技術に躓くことも無いはずです。

５日目、吉里吉里への実装二日目

クリックによるゲーム進行程度は実装できたので、背景と音楽を用意する必要があります。簡単に見つけるテクニックがいくつかあります。

• 好きな作品のリンクを覗く
• 海外のサイトも使う
• 一見使えないテクスチャの利用方法を考える
• 著作権、使用条件を確認する

「フリー　効果音」、などで探してもなかなか効果的な素材は見つかりません。自分の作るゲームに似た雰囲気を持つフリーゲームを参考にリンクを調べましょう。

また、海外のサイトには日本では手に入らない音、テクスチャがあります。こちらもGIGAZINEなどのリンクから十分に調べるといいです。ノベルゲにおいて、テクスチャは材質がアップされていることから、俯瞰、集中などの表現を手っ取り早く行うことができます。

著作権、使用条件は、使用する素材を保存する度に、最低でもそのサイトのurlをメモ帳に保存しましょう。あとあと使用条件、タイトルを確認できます。

次に、素材の加工について触れていきます。

入手した素材は、そのまま使うとやや荒い印象を受けます（と僕は考えている）。そのために加工する必要があり、ここではPhoto shop cs4を使いました。一週間で完成縛りを加えているので、体験版で十分です。

後の工程でも使いますし、PSに似たフリーウェアを使って大体の操作を知っている方は使ってみるのもいいと思います。

６日目、絵の制作

背景も出来、音も聞こえるようになったので立ち絵の具合も見ていきたい段階と言えます。絵をさささっと描いて、実装していきましょう。

今回最初に描いたのは、フードを被った少年の絵。かれこれ数ヶ月全く絵を描いていないので、どこまで描けなくなっているかが今回の壁でした。案の定、少年の絵は塗りがムラムラ......

絵柄も作品に適当とはいいがたいものですが、適当に萌え絵を並び立てるよりは妥当な雰囲気に仕上がりました。あれやこれや配置などを考えながら描いて、一つのパターンを１時間ほどで描いていきました。

７日目、暫定版リリースへ向けて

およそゲームとして動作すると言えるところです。ここまでで８割完成したと言えますが、ここからが本番です。最後の１割の工程、確認と調整では、妥協せずに行えば今までと同じだけの時間がかかります。簡単に終わる、と思える事でそれなりに時間がかかったものを書いていきます。

タイトル画面の作成。最初のロゴと、タイトル画面のエフェクトなどを作りきるのに３時間半かかりました。ロゴとその雰囲気を保てる背景をどのように作っていくかなどが非常に時間ががかり、ここに２時間かけています。クリッカブルマップという処理を使っていますが、これを実装するのは手間で、ルーチンワークに持ち込むためにあれこれ試行錯誤してみるといいと思います。

あとがきの製作。後書きは最後に書くものですが、これを付属させる場合はこれにかかる時間も忘れがちです。僕は先ほど、１時間３枚と言いましたが、後書きは惰性で書いても（品質を落とし続ければ別）これ以上のスピードが出ないということです。原稿用紙３枚は、ゲームで読むのに３分かからない程度です。であるなら、これ程度の後書きであっても１時間かかることを肝に銘じておく必要があります。

デバッグ。一本道なのでましですが、これも30分ほど集中して確認しました。吉里吉里は見せ方次第で、クリックを連打するとエラーを吐きやすいコードとなります。そのために、読み飛ばし状態でも確認する必要があります。また、イベントフラグの確認は、見て取れるようにしないと非常にややこしいバグの原因となりますので、プログラムにうとい方は、複数人のヒロインを攻略する恋愛ゲームは非常に難しい作品であると思えます。

細々としたことは忘れてしまいましたが、この他にも時間が色々かかります。短期決戦の場合は、最終日の時間を十分に確保しておく必要があります。

８日目、最終版リリースに向けて

ここも基本的にデバッグと微調整だけです。ただし先にも書いたとおり、時間はかかります。

readmeの作成。書き方によりますが、30分から１時間ほど。１時間を超える人も割といるような気がします。

アイコンの変更。使うアイコンの決定から多少の加工、結合までに１時間近くかかります。短くするには、あらかじめアイコン案を作っておくこと。

作り終わってから雑感

ノベルゲーム作りは、思った以上に楽でした。自分の実力を見極めれば、無理のない製作プランを練ることができました。また、一週間という短い期間での製作なので、難しいことはすぐ諦められたのも大きいです。

ただ、ゲーム自体の出来は、雰囲気ゲーとしては自分でも可くらいはあげられるのですが、肝心のシナリオが下手なので、シナリオこそは時間を多く確保しておく必要がありますね。

それでは今後も、Libertasをよろしくお願いします。