実像を透過する。ポートフォリオテンプレート『PRISM』に宿る透明な秩序
空間の中心で呼吸する「クリスタル」の存在感
ブラウザを立ち上げた瞬間、まず目を奪われるのは、画面中央で静かに回転する正二十面体（Icosahedron）の幾何学オブジェクトです。Three.jsによって描画されたこの立体は、単なる背景パーツではありません。
- 透過する質感: ガラスのような透明感と、背後の色彩を微かに通す奥行きが表現されています。
- 物理的な手触り: 金属感（metalness）と粗さ（roughness）の絶妙な調整が、デジタルな存在でありながら、どこか手で触れられそうな実在感を与えています。
- マウスとの対話: 閲覧者のマウスの動きに合わせて、オブジェクトが繊細に傾く仕掛け。これにより、サイト全体が「生きている」ような感覚を覚えます。
このクリスタルは、いわばサイトの「核」です。形なき思考を形にするプロセスの象徴として、そこに鎮座しているようにも見えます。
「グリッチ」がもたらすデジタルな体温
『PRISM』において最も印象的な演出の一つが、メインタイトルに施された「グリッチ・エフェクト（Glitch Effect）」です。
白く清潔な背景の中で、突如として文字が歪み、シアンとマゼンタの残像が走る。完璧に整えられたデザインの中に、あえて「バグ」のような不完全さを持ち込む。このアプローチが、現代的なデジタル・クラフトマンシップを感じさせます。
「Jost」と「Zen Kaku Gothic New」という、幾何学的でありながら親しみやすいフォントの組み合わせも秀逸です。グリッチという激しい演出を、これらの端正な書体がしっかりと受け止めることで、全体として「知的な遊び心」にまで昇華されています。
“あえてのバグ”が、デザインに人間味を宿す
PRISMで最も印象的な演出が、メインタイトルに走る「グリッチ・エフェクト」です。白く清潔な画面の中で、突然タイトルの文字が歪み、シアンとマゼンタの残像がチラッと走る。映像の信号が乱れたときのような、あの”バグ”を、わざとデザインに持ち込んでいます。
完璧に整えられた画面に、不完全さを一滴だけ混ぜる。これがPRISMの面白さです。すべてが正確でツルツルなデジタル空間は、ともすると無機質で冷たく見えます。そこに「揺らぎ」や「ノイズ」をあえて忍ばせることで、作り手の手の跡や試行錯誤のような、人間味のある体温が生まれます。
しかも、この激しいグリッチを受け止めているのが、Jostや Zen Kaku Gothic New といった端正で親しみやすい書体です。激しい演出と落ち着いた文字。この対比があるからこそ、ただ騒がしいのではなく「知的な遊び心」として成立しています。
『PRISM』を乗りこなす。想定される3つの活用シーン
このテンプレートが持つ「透明感」と「鋭さ」は、特定の表現領域において圧倒的なシナジーを生み出します。
3D・デジタルスカルプター（デジタル造形家）
テンプレートのデフォルト設定でも示唆されている通り、三次元的な造形美を追求するクリエイターにはこれ以上ない舞台です。背景の幾何学オブジェクトが自身の作品と共鳴し、サイト全体が一つの巨大なインスタレーションのように機能します。
リサーチに基づいたデザインを手掛けるUI/UXデザイナー
論理的（幾何学）でありながら、ユーザーの感情（グリッチ・色彩）に働きかけるこのデザインは、緻密な設計を得意とするデザイナーのポートフォリオに最適です。「Selected Works」に並ぶグラスモーフィズム調のカードは、情報を整理しつつも、透明なレイヤーによって「情報の奥行き」を感じさせます。
エディトリアル・ブランディングデザイナー
紙媒体の質感を知るデザイナーが、デジタルでその感性を表現する際にも『PRISM』は有効です。余白の取り方や文字の配置に、紙のような静謐さがあるため、モノクロームのタイポグラフィ作品や、ミニマルなロゴデザインが非常に美しく映えます。
あなたの「色」を屈折させる。カスタマイズのアイデア
『PRISM』は、コードの冒頭に分かりやすい設定エリア（CONFIG）が設けられており、自分だけの色に染め上げることが可能です。
サイト全体の「体温」を変える
:root で定義されているカラー変数を書き換えることで、印象を劇的に変化させることができます。
- Pale Blue Background: –bg を淡いブルーに、–text を深いネイビーに。より清潔感と知性が際立つ、実験室のような雰囲気に。
- Monotone Contrast: 背景を漆黒（#1a1a1a）に、文字を純白に。3Dオブジェクトの白が闇に浮かび上がり、ラグジュアリーなギャラリーのような空間へ。
3Dオブジェクトの「物質感」を調整する
JavaScript内の material の設定を少し変更してみましょう。
- 金属の塊へ: metalness: 0.9, roughness: 0.2 に。クリスタルは鏡面仕上げのクロームへと変わり、重厚でインダストリアルな印象を与えます。
- 光り輝く宝石へ: color: 0xffcc00 (ゴールド) に変更。アクセントカラーと連動させることで、サイト全体が華やかな輝きを放ちます。
中央のクリスタルは、数値ひとつで”素材”が変わる
PRISMの主役である、中央でゆっくり回る幾何学オブジェクト（正二十面体）。これはThree.jsという仕組みで描かれた3Dで、設定の数値を変えるだけで、その”素材感”を自在に変えられます。たとえば金属感（metalness）を上げて粗さ（roughness）を下げると、ガラスのような透明な結晶が、鏡のように磨かれたクロームの塊に。色をゴールドに変えれば、華やかに光る宝石のように。同じ形のまま、ガラスにも金属にも宝石にもなります。
背景の色プリセットと組み合わせると、世界観がさらに動きます。淡いブルー×ネイビーにすれば実験室のような清潔さ、漆黒×純白にすれば3Dの白が闇に浮かぶラグジュアリーなギャラリーに。オブジェクトの素材と背景の色、この2つで印象がほぼ決まります。
ひとつ留意点として、3Dは通常のページより少し負荷が高めなので、凝るときはスマホでの動きも確認しておくと安心です。AIに頼むなら「中央の3Dをクローム（金属）寄りにして、背景を漆黒×純白のギャラリー調にして」と伝えると、素材と空気感を一度に変えられます。
18枚のカードに「物語」を込める
『PRISM』はデフォルト設定は最大18枚の画像表示に対応しています。これを単に「作品1、作品2…」と並べるのではなく、例えば「思考のプロセス」を順番に並べてみる。フェードアップ・アニメーションによって、スクロールするごとに自分の思考が形になっていく様子を、閲覧者に追体験してもらうことができます。
「グラスモーフィズム」という境界のデザイン
作品を収めるカードには、背景をぼかす「グラスモーフィズム」が採用されています。
背景の3Dオブジェクトが、カードの背後をうっすらと横切る。この「透けて見える」という体験が、情報の階層を分けるだけでなく、サイト全体の一体感を生んでいます。リンクにマウスを重ねると、カードがふわりと浮かび上がるインタラクションは、ユーザーに対する細やかな配慮であり、デジタルにおける「触り心地」の追求と言えるでしょう。
『PRISM』のグリッチ・エフェクトを見つめていると、どこか人間味のようなものを感じます。完璧なグリッド、完璧なレンダリングの中に忍ばされた、あえての「揺らぎ」。
ポートフォリオに求められるのは、スキルの証明だけではありません。その奥にある、作り手の人間性や、試行錯誤の痕跡です。この『PRISM』というテンプレートは、あなたの作品という光を美しく屈折させ、時にはノイズ混じりの情熱さえも、洗練された表現として届けてくれるはずです。透明な秩序の中に、あなただけの「色」を投影してみてください。
本テンプレートは、有料noteをご購入いただいた方への限定特典（シークレットテンプレート）として公開しております。
→ 無料HTMLテンプレート「EYANCA」ダウンロードページ
