GENETEC - Works

サイト名: TDU Drivers Garage
使用ツール: Photoshop CS4 / TeraPad
使用言語: XHTML1.0 / CSS2.0 / PHP5
制作期間: 2日 (共通部分の制作のみ)
ジャンル: コミュニティサイト

このサイトはオンラインレースゲーム"Test Drive Unlimited"の日本人のプレーヤーをターゲットにしたコミュニティサイトです。
ゲームで撮影した写真や動画を他のユーザーと共有するための大容量アップローダーや、ゲームについて語り合えるフォーラムなどを設置しています。

ヘッダー部分にあるクルマ(s2000)の画像は、自分がMetasequoiaを利用しモデリングした3Dモデルを使っています。
また、ゲームでのオンラインツーリング等の企画をしやすいように、ツーリングフォーラム内で立てられた新着トピックに関しての簡易情報をヘッダーに表示する機能をPHPで実装しています。

当初は自分が制作したゲーム用MODの配信用サイトでしたが、利用者が増えるにつれコミュニティサイトへと変化して行き、現在に至ります。

デザインのコンセプトは、ゲームの舞台がハワイのオアフ島なので、海をイメージしたカラーリングでシンプルに制作しました。

サイト名: LFS Drivers Garage
使用ツール: Photoshop CS4 / TeraPad
使用言語: XHTML1.0 / CSS2.0 / PHP5
制作期間: 1日 (トップページの制作のみ)
ジャンル: コミュニティサイト

このサイトはオンラインドライブシミュレーター"Live for Speed"の日本人のプレーヤーをターゲットにしたコミュニティサイトです。
ゲームについて語り合ったり、レースなどの企画をたてるためのフォーラムや、公式ニュースの日本語訳を掲載したりしています。

世界各国に多くのプレーヤーが存在するゲームであるにもかかわらず、日本語版の準公式サイトが無かったため、これを作るに至りました。
丸1日集中して徹夜で制作作業にかかり、Photoshopで12時間かけてデザイン、10時間程度でコーディングし、トップページを完成させました。

透過PNGを多様しているため、IE6以下に対応させるためのIEPNGFIXの実装、クロスブラウザのチェックの繰り返しに苦労しました。

サイト名: LFS CITY DRIVE GARAGE
使用ツール: Photoshop CS4 / TeraPad
使用言語: XHTML1.0 / CSS2.0 / PHP5
制作期間: 鈍意制作中...
ジャンル: ゲームとの連携コンテンツ

このサイトはオンラインドライブシミュレーター"Live for Speed"で自分が制作した"シティクルージングシステム"と連携させるガレージコンテンツです。
Live for Speedは本来サーキットを周回し、タイムを競ったりレースをしたりすることが目的のゲームですが、市街地コースをひとつの街とし、順走・逆走関係なく自由に走り、プレーヤー同士でカーチェイスやクルマの売買、ツーリング等を行うために自分が新たに制作したゲームシステムです。

このゲームではサーバープログラムを改造するための機能が実装されており、C#でこれらのゲームシステムを実装しました。
ゲームのユーザーデータの管理にはMySQLデータベースを利用しており、このサイトからデータベースを経由してクルマの売買や各種ユーザーデータの管理等を行うことが出来るようになっています。
また、このゲームシステムの利用者は日本人に限らないため、ウェブサイトに表記される文章の英語・日本語切り替えが出来るギミックをPHP及びJavaScriptで実装しています。

サイト名: LFS LAPTIME RANKING
使用ツール: Photoshop CS4 / TeraPad
使用言語: XHTML1.0 / CSS2.0 / PHP5
制作期間: 5日
ジャンル: ゲームとの連携コンテンツ

このサイトはオンラインドライブシミュレーター"Live for Speed"で自分が制作した"ラップタイムレコードシステム"と連携させるランキングコンテンツです。
PHPでコース・区間別・クルマ・クラスで条件を設定し、詳細にランキングを検索するシステムを実装しました。
レコードの表示範囲が狭かったため、区間タイムの表示をどこに置くか考えるのが大変でした。最終的にレコードタイムの右側にある「»」をクリックすると区間タイムが表示されるようにJavaScriptで実装しました。

また、検索条件の指定が複雑なため、脆弱性のチェックやデータベースのレコード問い合わせのチェックを何度も行いました。

ラップタイムのレコーディングをするためにLive for Speedと連携させるコンソールアプリケーションをC#で制作しました。

サイト名: Undefined
使用ツール: Photoshop CS4 / TeraPad
使用言語: XHTML1.0 / CSS2.0 / PHP5
制作期間: 1日
ジャンル: ブログ

このサイトは横浜デジタルアーツ専門学校Web科での進級制作の課題・レポート用に制作したブログです。
進級制作ではグループ分けされ、そのグループ内の人間が誰でも簡単に記事を投稿・編集できるようにデザイン・コーディングしました。

netmania様から提供されているウェブログシステムのPHPソースをベースに、自分のサーバー上で動作するように改造してあります。
誰でも簡単に記事編集がしやすいようにWYSIWYG HTMLエディターを実装できるFCKeditorを導入しています。

サイト名: Portfolio (旧)
使用ツール: Photoshop CS4 / TeraPad
使用言語: XHTML1.0 / CSS2.0
制作期間: 2日
ジャンル: ポートフォリオサイト

リニューアル前のポートフォリオサイトです。
画面サイズが小さくても綺麗に表示できるようにリキッドレイアウトにしてあります。

白黒基調に青色を少し噛ませ、見ていても疲れないような爽やかでシンプルなデザインにしました。
必要最低限な情報だけを掲載し、ポートフォリオサイトよりも掲載作品を強調するために質素な作りにしてあります。

サイト名: R Drivers Garage (ﾘﾆｭｰｱﾙ)
使用ツール: Photoshop CS4 / TeraPad
使用言語: XHTML1.0 / CSS2.0 / PHP5
制作期間: ~~鈍意制作中...~~ 制作中止
ジャンル: コミュニティサイト

このサイトはオンラインレースゲーム"R"の公式サイトとして当初制作していましたが、制作途中に本家のゲームサーバー及び公式サイトが閉鎖、以後開発代表者と連絡がとれなくなってしまったため制作を中止した作品です。
基礎は出来上がっていたので一応ポートフォリオの作品として掲載させていただきます。

自分はこのゲームに登場するクルマ及びコースの3Dモデリングを行っていました。
最初から開発サイドにいたわけではなく、当初はこのゲームの完成度に感動し、ゲーム用MODや改造プログラムの制作をしていました。
その延長線上でファンサイトの運営から始まり、ゲームのオンラインイベントの企画やアップデートプログラム、ロビーアプリケーションの開発などに至っていました。

自分の原点はこのゲームにあると考えています。このゲームが無ければPHPやC#、3DCGモデリング等に触れることは無かったと思います。

個人開発ゆえの宿命ではありますが、突然の閉鎖は大変残念でなりません。
またいつの日かこのゲームが復活し、開発サイドに戻れることを切に願います。

サイト名: R Drivers Garage (現行)
使用ツール: Photoshop CS4 / TeraPad
使用言語: XHTML1.0 / CSS2.0 / PHP5
制作期間: 2日 (共通部分の制作のみ)
ジャンル: コミュニティサイト

R Drivers Garageのリニューアル前の現行サイトです。
データベースと連携させたラップタイムランキング(サーバープログラム側で未実装のまま閉鎖)や、チームマネージャー、各種ユーザーデータの管理、XOOPSフォーラムとの連携等、さまざまなコンテンツを盛り込んでいます。

最初は自分が制作したゲーム用MODの配布サイトでしたが、利用者が増えるにつれ、コミュニティサイトへと変わっていきました。

MODを作るためのリファレンスガイドや他人の作ったMODのレビュー・配信、アップローダーなどを設置しています。

サイト名: Kiwi Soft
使用ツール: Photoshop CS4 / TeraPad
使用言語: XHTML1.0 / CSS2.0
制作期間: 2日
ジャンル: 架空の製品紹介サイト

学校のWebの授業の課題として制作した架空の会社のサイトです。
テキスト原稿はあらかじめ用意されていたものをそのまま使用し、各ソフトウェアのイメージ画像等はPhotoshopで制作しました。

イラストレーターでロゴのデザインとワイヤーフレームを作り、コーディングしました。
苦労した点は特にありませんが、全体のレイアウトやコンテンツの順番に悩みました。

サイト名: nail salon angy
使用ツール: Photoshop CS4 / TeraPad
使用言語: XHTML1.0 / CSS2.0
制作期間: 2日
ジャンル

Broz Groupにてコーディング業務を担当したサイトです。
素材用画像の切り出しにPhotoshopを使用しています。

サイト名: Costcut.jp
使用ツール: Photoshop CS4 / TeraPad
使用言語: XHTML1.0 / CSS2.0
制作期間: 1時間
ジャンル

Broz Groupにてコーディング業務を担当したサイトです。
素材用画像の切り出しにPhotoshopを使用しています。

サイト名: 川崎中部トヨペットサービス
使用ツール: Photoshop CS4 / TeraPad
使用言語: XHTML1.0 / CSS2.0
制作期間: 3時間
ジャンル

Broz Groupにてコーディング業務を担当したサイトです。
素材用画像の切り出しにPhotoshopを使用しています。



画像をクリックすると新しいウィンドウで拡大表示されます

この3Dモデルはオンラインレースゲーム"Test Drive Unlimited"のゲーム改造MODとして制作した作品です。
モデリングにはフリーのポリゴンモデラーMetasequoiaを利用し、実際にs2000を所有している友人に資料用の写真撮影等の協力をしていただき、制作にあたりました。

制作はマイペースに進行させていたので1ヶ月以上掛かりました。
図面の無い内装は写真を見たり実車に触れながらモデリングを行いました。そのため、各部品の大きさや位置関係の調整が物凄く大変でした。

ゲーム内では各ライトの点灯、ドア・パワーウィンドウの開閉、ドライバー(アバター)がステアリングやギヤスティックの操作を行う等のアクションがあるため、各部品ごとでオブジェクトの分割なども行っています。
また、3Dモデル上のメーターも動作するため、メーターパネル描画用のイメージもイラストレーターにて別途制作しました。

※ファイルの整理が出来次第MQOファイルとテクスチャ一式を公開予定です。

準備中...

Tsuka's portfolio site