静寂を纏い、作品の「気配」を届ける。ポートフォリオテンプレート『AETHER』が提案する新しい見せ方
画面の向こう側に「奥行き」を感じさせる設計
『AETHER』をブラウザで開いたとき、まず目に飛び込んでくるのは、漆黒の闇の中に揺らめく黄金の粒子です。Three.jsを用いたこの動的な背景は、単なる装飾ではありません。マウスの動きに呼応して、粒子がかすかに揺らぎ、視点を変える。そのインタラクションが、平坦なディスプレイの中に「空間」を生み出しています。
特筆すべきは、画面全体に施された「ノイズオーバーレイ」の質感です。デジタルなコードで書かれたWebサイトでありながら、どこか古い銀塩写真や、ざらついた手漉きの紙を思わせる質感が、情報の「新しさ」よりも「深さ」を強調しています。この微細なノイズがあることで、背景の黒は単なる「#050505」という色コードを超え、深い夜のような、あるいは宇宙の深淵のような「奥行き」へと変化しています。
言葉を「情景」に変えるタイポグラフィ
このテンプレートでは、欧文フォントに『Cinzel』、和文フォントに『Noto Serif JP』が採用されています。
- Cinzel: 碑文のような彫りの深さを感じさせる書体。
- Noto Serif JP: 繊細で、日本語の情緒を崩さない明朝体。
この組み合わせが、見出しの「Digital Alchemist（デジタルの錬金術師）」というデフォルトのキャッチコピーと共鳴しています。文字は単に情報を伝える記号ではなく、デザインの一部として機能しており、特にメインタイトルの「呼吸するようなアニメーション」は、閲覧者の心拍数に寄り添うような心地よいリズムを生んでいます。
ポートフォリオにおいて、饒舌すぎる説明は時に作品の邪魔をします。『AETHER』は、タイポグラフィの美しさによって「多くを語らずとも伝わる」土壌を整えてくれているように感じます。
「AETHER」を活かす。想定される3つの活用シーン
このデザインは個性的ですが、だからこそ、特定のジャンルにおいて圧倒的な没入感を生み出します。
抽象表現を主軸とするフォトグラファーや映像作家
色鮮やかなスナップ写真よりも、モノクロームの作品や、光と影のコントラストを追求する作家に最適です。ギャラリー部分の画像がデフォルトでモノクロ（ホバーでカラー）になる仕様は、作品の「形」や「構図」をまず見せたいという意図に合致しています。
ハイエンドな工芸・ジュエリーデザイナー
「ゴールド」をアクセントカラーに据えた配色は、金属の輝きや宝石の質感を扱うブランドと相性が良いでしょう。余白を贅沢に使い、一つの作品を大きく見せるモーダル表示は、ディテールへのこだわりを伝えるのに適しています。
アンビエント・エレクトロニカ系のミュージシャン
音を視覚化するような背景の粒子は、音楽ポートフォリオとしても機能します。自由記述エリア（Philosophy）に、音作りに対する思想を綴り、ギャラリーをアルバムジャケットやライブ写真のアーカイブとして活用する。視覚と聴覚がリンクするような体験を提供できるはずです。
あなたの色に染める。カスタマイズのアイデア
『AETHER』の設計は非常にシンプルで、CSSの変数を少し書き換えるだけで、その表情を劇的に変えることができます。
色彩のトーンを変えてみる
:root で定義されている –accent: #d4af37;（ゴールド）を書き換えてみましょう。
- #c0c0c0（シルバー）: より冷徹で、未来的な印象へ。
- #e03e3e（深い赤）: 伝統的な和の美意識や、情熱的なアーティストの雰囲気へ。
- #00ced1（ターコイズ）: 幻想的で、海底を思わせるような浮遊感へ。
アクセントカラー一つで、背景の粒子やカーソルの色まで連動して変わるため、サイト全体の統一感を損なうことなく、自分自身のブランドカラーを反映させることが可能です。
フォントで「声色」を変える
現在はセリフ体（明朝体）がメインですが、これをあえて「細身のゴシック体」に変えてみるのも面白いかもしれません。例えば、Google Fontsから Inter や M PLUS 1p の細いウェイトを読み込み、適用してみる。すると、神秘的な雰囲気はそのままに、より「現代的で洗練されたデザイン事務所」のような、シャープな印象へとシフトします。
粒子の密度と動きを調整する
JavaScript内の particlesCount（粒子の数）や material.size（粒子の大きさ）を調整することで、背景の「密度」をコントロールできます。あえて粒子の数を半分にし、一つひとつのサイズを大きくすれば、それは雪のようにも、あるいは水中の泡のようにも見えてくるでしょう。自分の作品が持つ「重さ」に合わせて、背景の空気の密度を調整する。そんな細やかなカスタマイズが、このテンプレートの醍醐味です。
「カスタムカーソル」というおもてなし
最後に触れておきたいのが、独自のカーソル表現です。PCサイトにおいて、マウスカーソルはユーザーの「指先」そのものです。『AETHER』のカーソルは、リンクに触れるとふわっと広がり、まるで指先が光に触れたかのような感覚を与えてくれます。
こうした細かな演出は、一見すると自己満足に見えるかもしれません。しかし、サイトを訪れた人は、その小さな反応の中に「このサイトの主は、細部にまで意識を払っている」という丁寧さを感じ取ります。その信頼感こそが、ポートフォリオにおいて最も重要な要素ではないでしょうか。
『AETHER』には、情報がぎっしりと詰め込まれてはいません。むしろ、情報の少なさが、見る人の想像力を掻き立てます。
デザインを削ぎ落とし、本当に見せたいものだけを、最適な光の中に置く。このテンプレートは、単なるWebの雛形ではなく、自分自身の活動を一度整理し、「自分は何者であり、何を大切にしているのか」を問い直すための、「フレーム」であるように思えます。
本テンプレートは、有料noteをご購入いただいた方への限定特典（シークレットテンプレート）として公開しております。
→ 無料HTMLテンプレート「EYANCA」ダウンロードページ
