ウェブサイトの制作

動機

この「アトリエ」ウェブサイトの発端は、自身のプロジェクトを展示するために個人ポートフォリオ型のウェブサイトを作成した父との小さな意見の食い違いにさかのぼる。

父のウェブサイトは非常に簡素で視覚的な魅力に欠けると判断し、率直に批評を伝えたところ、父はいつものように「批判するのは簡単だ」と返答した。彼の意図は要するに以下の通りである。

[!warning] 実際に自分で制作することは遥かに困難である

要するに、父は私に独自のウェブサイトを作成するよう挑戦を突きつけたのであり、私はそれを受諾し、より優れたウェブサイトを構築することを約束した。 当時、私はアークナイツのファンであり、そのスタイルに影響を受けた作品を制作したいと考えていたため、アークナイツのダークでグランジなテック調のデザインを模倣するという構想が生まれた。

しかし、私が生まれる前から両親はガンダムの熱心なファンであり、その影響で私もファンとなった。ガンダムの美学を取り入れる計画は最初から明確にあったわけではないが、常に念頭に存在していた。特にコックピットの描写シーンである。\

（なお、私のお気に入りはGN-005 ガンダムヴァーチェとHG ガナーザクウォーリア（ルナマリア専用機）である。要するに、大型の火器を好む傾向がある）

美学・デザイン言語

アークナイツ（HYPERGRYPH）およびゼンレスゾーンゼロ（MiHoYo）は、非常に優れたビジュアル言語とスタイルを有している。ゼンレスゾーンゼロにおいては特にCRTモニター／アレイの表現に強く惹きつけられた。

デザイン要素	主なリファレンス	目標とする実装 Execution
グリッドおよび空間レイアウト	Monster-Siren-Records + Hypergryph	ダーク調の背景、細い境界線グリッド、高コントラストのテキスト
ビューポートのポストプロセス	ゼンレスゾーンゼロ	アナログCRT走査線、フリッカー遷移、微細なノイズオーバーレイ
UIコンポーネント	アークナイツ（ゲーム本編）	カスタムカーソル、発光ステータスインジケーター、等幅フォントのメタデータ
ローディング画面 + 音楽プレイヤー	Monster-Siren-Records

アーキテクチャとイテレーション

右側に示したブレインストーミングの記録は、ウェブサイト構築の初日に作成されたものの残存物である。 当時すでに「Reactbits」の存在を認知しており、そのコンポーネント、特に「Fuzzy Text」をウェブサイトの基盤として利用することを想定していた。

クリーンなデジタル空間を好むため、当初はシンプルかつ洗練された個人ウェブサイトの構築を目指していた。しかし、頻繁に利用していたお気に入りのウェブサイトであるMonster-Siren-Records（アークナイツの音楽配信プラットフォーム）は、ゲームのアートスタイルを反映した動的かつ視覚的な要素で構成されていた。

アークナイツはモバイルゲームでありながら、ほぼ全てのジャンルにおいて優れた楽曲を制作しており、新曲の発表には常に強い関心を寄せていた。アートスタイルおよび美学的観点においても非常に洗練されているため、オンラインでHTMLおよびCSSの講座を受講する過程で、さらに詳細な調査を行った。

---

HTML、JavaScript、CSSのオンライン初心者レッスンを完了した後、バージョン1を作成した。

---

この段階で、HYPERGRYPHのMonster-Sirenウェブサイトから可能な限り多くの要素を取り入れる方針へと転換し、黒背景と横スクロールを採用した構造から開始した。

HYPERGRYPHのウェブサイトでは、マウスのスクロール入力が水平スクロールへ変換される仕様となっており、これを再現する試みに多大な時間を費やした。

最終的にスクロール入力を水平方向に変換することで概ね動作させることができたものの、この処理により水平スワイプ動作が阻害される問題が発生した。適切なスクロール操作が妨げられることによる操作性の低下を避けるため、最終的にこの機能は除去した。

Monster-Siren-Recordsを模倣した横スクロールの動的検証記録のみが手元に残されている。

また、Monster-Siren-Recordsと同様に画面左上にオーディオビジュアライザーを配置することを構想し、その実装処理はClaudeに任せた。

その後、1つのプロンプトからウェブサイトを生成するHugging Faceの「Deepsite AI」の存在を知り、Monster-Siren-Recordsの再現を試みる過程で利用枠を消費した。 生成されたウェブサイトは洗練されていたものの、目的としていた方向性とは異なっていたため、走査線、クロスヘアカーソル、メニュー項目、および「Hello Friend」テキストの揺れ処理のロジックのみを抽出して利用した。多数のウェブサイトやポートフォリオを観察した結果、AI生成によるウェブサイトは極めて汎用的であり、3Dアニメーションを含むものも含め、独自性に欠ける傾向があることが判明した。

ウェブサイトの制作を開始してから数か月後、ゼンレスゾーンゼロがリリースされた。広告において歪み効果と独特のデザインが融合されていた点に強い関心を持った。 Bangbooを用いたCRTモニターアレイ／ナビゲーションの構造は非常に優れた概念であり、プロジェクトへの導入を決定した。同時にリリースされた『Balatro』（優れたCRTエフェクトを備える）の影響もあり、CRTによる歪み効果に対する関心が深まった（Cool Retro Termの利用を開始するに至った）。

撮影素材からアセットへ

背景として使用されている画像はすべて、自身が所有するスマートフォンのカメラ（AQUOS Sense 9）を用いて撮影されたものである。 この機器は特定の条件下において独特の撮影挙動を示し、撮影された画像に意図しない光学的な効果をもたらす場合がある。 具体的には、撮影操作を行った際、画面上ではキャプチャが完了したように表示されるものの、センサーの露光が継続している場合がある。その結果、端末を移動させた際に絞りが閉じるまでの数秒間の動きが記録され、初期表示とは異なるブレ生じた画像が生成される。

例として： ブレが生じた階段の写真と、その翌夜に撮影した鮮明な写真が存在する。 このブレの生じた階段の写真を特定セクションに使用することを決定した。当初の構想では、壁面を除去・傾斜させ、不透明度のグラデーションを適用することで無限に続く奥行きを表現し、ビューポート幅の3分の1の中央領域にブログへのアクセスポイントを配置することを計画していた。 しかし、GIMPでの編集技術の制限もあり、意図した視覚効果が得られなかった。 そのため、画像を3つのパーツに分割し、独自のトランジションアニメーションとして配置する仕様へと変更した。

ホームセクションについては、当初、大阪の建造物のワイヤーフレーム、あるいは大阪城をアークナイツ風にスタイライズした画像を配置することを計画し、Gemini Nano Bananaによる生成を試みたものの、十分な結果が得られなかったため、導入用の文言を記述する形式に変更した。 その後、配置を側面に移動させた際、自ら撮影した鮮明な大阪城の写真を使用することが最も適切であるとの結論に至った。