ソースコードやチュートリアルも併せて公開されている Mr. Panda's Psychologically Safe Portfolio

doxas : 2026-05-08 12:03:31

Codrops で記事化されている

今回ご紹介するのは非常にユニークなプロジェクトのウェブサイトです。

なにが発端となってこのプロジェクトが始まったのかよくわからないのですが、どうやら Codrops の記事として詳細が公開されているので、そのために作られたものなのですかね？

YouTube 動画でチュートリアルが公開されていたりもするのですが、まず企画が先にあって、そのために作られたデモサイトなのかなと思います。

今回のサイトは、実際にチュートリアル動画や Codrops の記事を見ることで、使われている技術やその具体的な手法などを学ぶことができます。

また GitHub でソースコードも公開されているので、いろんな意味で非常に参考になるプロジェクトなのではないかなと思います。

サイトだけを見ると、なにか風刺の利いた変わったウェブサイトという印象を受けるかもしれません。

本物のペーパークラフトを写真撮影したかのような質感が見事ですよね。

こちらは Blender などを利用して事前に陰影をベイクしておくことで質感を再現しているのだと思いますが、さまざまな要素をインタラクティブに動かすことで、さながら動く絵本のような体験に仕上げています。

母語が英語じゃないと手書きされた文字やテキストを理解するのが難しいとは思うのですが、建付けとしては人間を研究している Mr.パンダが主人公のポートフォリオということになっていますね。

サイトの閲覧は基本的にはスクロール等のシンプルな操作だけで行なえます。

動きは非常に滑らかで、スイスイと進めていくとあっという間にループしてしまうと思いますが、丁寧に１つ１つの要素や変化を細かく観察していくとなかなか手が込んでいることがわかります。

これだけの実装が普通にオープンソースかつチュートリアル動画つきで公開されているというのは、なんとも太っ腹と言いますか、すごく有益なコンテンツだなと感じました。

GitHub のリポジトリを見ると、Readme の最後にはもっと良くするためには？といった感じのセクションがあり、そこに書かれている箇条書きを眺めることでも思考を飛躍させることができそうですね。

このようなアイデア勝負系のウェブサイトでも、やっぱり結局は、神は細部に宿るんだなということがすごく実感できる事例だなと感じます。

こういうのを見てすごいな～と感心することは誰にでもできますが、実際に手を動かし、真似して、なにかを感じ取った稀有な数パーセントのクリエイターだけが、次のステージに行けるんでしょうね。