AI を活用したいまだかつて無い Pierre Mouchan さんの超個性派ポートフォリオサイトがすごい!
正直 WebGL は主役ではない
今回ご紹介するのは Pierre Mouchan さんのポートフォリオサイトです。
Pierre Mouchan さんはフリーランスのフルスタック系の開発者さんで、もちろん WebGL を使った事例も手掛けている方なのですが、今回のサイトはどちらかというと WebGL は「とても重要な脇役」という感じでしょうか。
バックエンドの仕組みなどは私もよくわからないのですが、AI を活用した驚きのポートフォリオサイトは唯一無二の存在感を持っています。
リンク:
Freelance Fullstack Developer - Pierre Mouchan
世界観はしっかりと作り込まれている
今回のサイトは、ちょっとしたファンタジーの世界観を下敷きにした作りになっていて、おおよそ個人のポートフォリオサイトだとは一見してわからないような見た目をしています。
イントロの演出もナレーションの音声が付いたかなりしっかりした作り込みがされていて、なにも知らずにこれを見たら、なにかのゲームのティザーサイトかなと思ってしまうかもしれません。
世界の謎を紐解く旅を続ける旅人が、太陽の神に出会い世界の真理に触れる、そんな感じの導入です。
イントロのシーンはスクロールで場面を進めていく形ですが、ナレーションが一定まで進むと、スクロール操作をトリガーに場面が進むようになっています。
一応、画面の右下の部分からイントロはスキップできるようになっていますが、それほど長いイントロというわけでもないので、ゆったりとイントロ演出を見ながら進めるのがおすすめです。
イントロの演出が終わると、絵本の世界がそのまま 3D になったかのような、イラスト風の 3D シーンが現れます。
画面の右上にいるのが太陽の神、ということになるのでしょうか。
今回のサイトでは、画面の左下あたりにある吹き出し部分が「旅人の話すセリフ」となっており、そこにユーザーが自由にテキストを入力できるようになっています。
ここに入力されたテキストは Enter 等で送信すると非同期に AI によって処理され、その返答を右上にいる太陽が返してくれる、という感じです。
ただし質問できる内容は「ポートフォリオサイトの主人である Pierre Mouchan さんに関すること」に制限されていて、結果的に AI とその返答する内容がポートフォリオサイトのコンテンツそのものになっているという非常に面白い建付けです。
試しに日本語でもいいですかと(英語ではなく日本語で)尋ねてみると、Pierre は日本語はわからないよ! と太陽が教えてくれました……
私は AI や機械学習の領域には本当に無知なのでわからないのですが、ChatGPT やそれに類するテキストを処理する AI に、Pierre Mouchan さんの情報をあらかじめ与えた状態にしておいて、それをユーザーの入力に応じて動かしているということなのだと思います。
WebGL のビジュアルも雰囲気満点で非常に素晴らしいのですが、AI が返答してくれるという試みの面白さがあまりに強烈すぎて、ついついそちらにばかり意識が向いてしまいます。
WebGL のビューは世界観に非常にマッチした絵作りになっており、細部にまで観察してみると太陽の光芒が動いていたり、鳥が空を悠々自適に飛んでいたりと結構凝った絵作りになっています。
ぜひチェックしてみてください。