Claude × Higgsfieldで作るポートフォリオサイト5選

5つのサイトすべてについて、作るためのプロンプトを載せています。使うツールは二つです。画像と動画はすべて Higgsfield、ページの構築は Claude Code です。

一つの画面で完結させたい場合は、HiggsfieldをClaudeのコネクタ（MCPサーバー）として追加してください。設定は一度だけで、その後は同じチャットの中でClaudeが画像や動画を生成できるようになります。

プロンプトは英語のまま載せています。ClaudeもHiggsfieldも英語の指示で最も安定して動くので、そのままコピーして使ってください。

まずは仕組みから

5つのうち4つは、同じシンプルな考え方で動いています。訪問者のカーソルやスクロールが、動画や二枚の画像を操作する。だからページがリアルタイムに反応します。5つ目の、最後に紹介する重なりのサイトは動画を一切使いません。コードだけで、スクロールするとヒーロー部分が紙を重ねたような層に分かれていきます。

動画を使うサイトの下準備は一つだけです。 通常の動画ファイルは、完全な一枚の画像を数秒に一度しか持っておらず、その間のコマは差分として記録しています。スクロールで再生位置が飛ぶたびに、ブラウザはそのコマを組み立て直す必要があり、映像がカクつきます。以下のプロンプトはすべて、Claudeに keyint=1 で動画を書き出し直すよう指示しています。すべてのコマが完全な一枚になるので、どの瞬間にも一瞬で移動できます。ターミナルを開く必要はありません。Claudeが実行します。

動画はすべて5秒から8秒に収めてください。 すべてのコマが完全な画像の動画は重くなります。短くすればサイトは速いままです。

1. 隠れた自分が現れるポートフォリオ

訪問者があなたの顔の上でマウスを動かすと、その下から金属の質感をまとったもう一人のあなたが、波紋のように現れます。3Dに見えますが、実際は平らな画像を二枚重ねただけで、カーソルが上の画像に柔らかな穴を描いています。

ポートレートを二枚作ります。 Higgsfieldで、まずスタジオで撮ったようなすっきりしたポートレートを作ります。次に、まったく同じ構図で金属版やヘルメット姿の版を作ります。効果のすべては二枚がピクセル単位で重なることにかかっているので、二枚目は一枚目を入力画像にして作ってください。

Keep the exact framing, pose, head position and lighting of the input
image. Change only the material: the person is now a polished chrome
sculpture, same face, same expression. Same plain background.

効果を作ります。 方法は二つあります。無料のドラッグ＆ドロップ型エフェクトツール Unicorn Studio で二枚を重ねる方法なら、コードは不要です。もう一つは、Claudeに液体のような表示効果をゼロから作らせる方法で、こちらも無料で、透かしも入りません。画像を front.jpg と back.jpg として保存し、Claude Code に次のプロンプトを貼り付けます。

Build a single self contained index.html: a portfolio hero with front.jpg
stacked exactly over back.jpg, both object-fit: cover and perfectly
aligned. Draw front.jpg on a canvas and let the pointer erase a soft,
round hole in it (radial gradient brush, about 180 px) so back.jpg shows
through. Add a subtle liquid ripple distortion around the edge of the
hole. The hole follows the cursor and slowly heals over two seconds, so
the page returns to normal when the visitor stops. Dragging a finger does
the same on touch screens. With prefers-reduced-motion, show front.jpg
with a button that swaps to back.jpg instead. Then run it and show me a
preview.

ページに仕上げます。 効果が動いたら、もう一つのプロンプトでランディングページ全体にします。「Build a complete portfolio landing page around this hero, with my name, one line about my work, three selected projects and a contact button.」

2. スクロール連動アニメーション

下にスクロールすると、アニメのキャラクターの口がどんどん大きく開き、その中から黒い穴が広がって、最後はページ全体を飲み込みます。上に戻すと、口は閉じていきます。スクロールバーがアニメーションを一コマずつ再生しているわけです。後で紹介するパララックスのサイトと同じ仕組みで、映画のような映像の代わりに遊び心のあるキャラクターのアニメーションを使っています。

アニメーションを作ります。 HiggsfieldのSeedanceで、一続きのクリップとして作ります。何より大事なのは、ゆっくり一定の速さで動くことです。速さにむらがあると、スクロールに結びつけたときに遅延のように感じられます。

アニメーション用のプロンプトです。

A flat 2D cartoon face in the center of a plain cream background, seen
from the front, simple line art. The mouth opens slowly and steadily,
wider and wider, and a pure black void spreads out from inside it until
the whole frame is solid black. One continuous shot at a constant speed,
ending on a fully black frame. No cuts, no camera movement, no flashes.
Minimal and playful.

ページを作るプロンプトです。 クリップを anim.mp4 として保存し、そのフォルダで Claude Code を開いて貼り付けます。

Build a single self contained index.html with a scroll linked animation
hero. Make a tall scroll section, around 300vh, with a sticky inner
wrapper pinned to the viewport (position: sticky; top: 0; height: 100svh)
that holds anim.mp4 with object-fit: cover, muted, playsinline,
preload="auto" and a poster image. Keep the video paused and let scroll
drive it: map my progress through the section, from 0 to 1, onto the
video from its first frame to its last, so scrolling down opens the mouth
and scrolling up closes it. Run this in a requestAnimationFrame loop that
eases currentTime toward the target (a lerp) so it feels smooth. Never
set currentTime directly inside the scroll event, and wait for
loadedmetadata before using duration so it is never NaN. Place my name
and a short intro over the video with z-index, and fade the text out as
the black takes over the screen. On touch devices and with
prefers-reduced-motion, loop the clip on autoplay or show the poster
instead. Encode the video again with ffmpeg using
-x264-params keyint=1:min-keyint=1 -pix_fmt yuv420p so every frame is a
keyframe and scrubbing is instant, and export the first frame as
poster.jpg. Then run it and show me a preview.

口と黒い穴は、アイデアの一例にすぎません。花が開く、顔が形になっていく、ロゴが自分で描かれていく。始まりから終わりまで滑らかに変化するものなら、同じ作り方で何でも使えます。クリップが何をしていても、スクロールがそれを再生します。

3. 手で操る、紙がくしゃっとなるポートフォリオ

訪問者がWebカメラの前で拳を握ると、紙細工のあなたのポートレートがその場でくしゃくしゃに丸まっていきます。ほかの動画サイトと同じ仕組みで、カーソルやスクロールの代わりに手がスライダーになっています。

平らなポートレートを作ります。 HiggsfieldのSeedreamに自分の写真を数枚渡し、黒い背景に置かれた紙細工の彫刻のようなポートレートを作ります。

丸まる動画にします。 そのポートレートを開始フレームとしてSeedanceに渡し、彫刻全体がゆっくり紙の玉に丸まっていく様子を、一続きのテイクで作ります。

The paper sculpture portrait slowly crumples inward from every side until
it becomes a tight ball of paper in the center. One continuous take,
static camera, black background, even speed, no cuts.

Claudeでつなぎます。 クリップを scrunch.mp4 として保存し、プロンプトを一つ貼り付けます。Webカメラでの手の認識が加わり、手を開いたり閉じたりすると動画が前後に再生されます。動画の書き出し直しも含まれています。

Build a single self contained index.html where my hand controls
scrunch.mp4 through the webcam. Use MediaPipe Hand Landmarker
(@mediapipe/tasks-vision from jsDelivr, one pinned version) in VIDEO mode
for one hand. Measure how open the hand is from 0 (fist) to 1 (open) by
averaging the distance from the four fingertips to the wrist and dividing
by palm size, then smooth it. Open hand shows the first frame (flat
portrait), a fist shows the last frame (crumpled ball). Keep the video
paused and ease currentTime toward the target in a
requestAnimationFrame loop. Before the camera starts, show poster.jpg and
a Start button explaining that the camera stays on this device. Without
a camera, the mouse wheel controls it. Encode the video again with ffmpeg
using -x264-params keyint=1:min-keyint=1 -pix_fmt yuv420p and export the
first frame as poster.jpg. Serve it locally, since the camera only works
on https or localhost, and show me a preview.

4. パララックススクロールのポートフォリオ

ページを下にスクロールすると、映画のような場面が再生されます。ポートレートが粒子になって消えていく、カメラがゆっくり寄っていく、製品が回る。3Dの場面がその場で描画されているように見えますが、実際はスクロールバーに再生位置を結びつけた一本の動画です。

ヒーロー動画を作ります。 HiggsfieldのSeedanceで、ゆっくりした映画的なクリップを一本作ります。一続きのテイクで、動きは控えめに、カメラの動きは一つだけにします。構図を自分で決めるために、開始フレームの画像をアップロードしてください。

Claudeでつなぎます。 クリップを hero.mp4 として保存し、プロンプトを一つ貼り付けます。動画を画面に固定し、その再生位置をスクロールに結びつけ、書き出し直しも行うので、スクロールすると場面が進みます。

Build a single self contained index.html: a cinematic parallax scroll
hero. A section about 400vh tall holds a sticky wrapper (position:
sticky; top: 0; height: 100svh) with hero.mp4 filling it, object-fit:
cover, muted, playsinline, preload="auto" and a poster. Keep the video
paused and map scroll progress through the section, 0 to 1, onto its
timeline, easing currentTime toward the target in a
requestAnimationFrame loop and waiting for loadedmetadata before using
duration. Fade in my name at the start, my role at about 30 percent and
a link to my work at about 70 percent. On touch devices and with
prefers-reduced-motion, show the poster with the text instead. Encode
the video again with ffmpeg using -x264-params keyint=1:min-keyint=1
-pix_fmt yuv420p and export the first frame as poster.jpg. Then run it
and show me a preview.

5. 層が重なって動くポートフォリオ

魔法のように感じるのがこれです。スクロールすると、ヒーロー部分が紙が一枚ずつ浮き上がるように層に分かれていきます。写真、見出し、背景、ボタンがそれぞれ別の層になり、違う速さで動くので、ページに本物の奥行きが生まれます。動画は使いません。コードだけで、自分の切り抜き写真と文字でとても映えます。

層を用意します。 必要なのは、別々の画像や文字になった素材だけです。背景を消した自分の切り抜き写真、見出し、背景、ボタン。写真の切り抜きは、無料の背景削除ツールならどれでも大丈夫です。

ページを作るプロンプトです。 写真を photo.png として置いたフォルダで Claude Code を開き、貼り付けます。

Build a single self contained index.html: a layered parallax hero that
feels like sheets of paper. Stack these as separate layers, from back to
front: a full bleed background, a large headline, a cut out photo of me
(photo.png, transparent), a short subline and a call to action button.
On scroll, move each layer up the page at a DIFFERENT speed with
transform: translate3d (background slowest, then headline, then photo,
then subline, button fastest) so they separate like lifting sheets of
paper and the page gains depth. Put a soft shadow under the photo layer
so it looks like it floats above the others. Drive it from a
requestAnimationFrame loop that reads scrollY, not a scroll listener that
sets styles directly, add will-change: transform to the moving layers,
and clamp the movement so nothing drifts off screen. With
prefers-reduced-motion, turn the parallax off and show a clean, still,
stacked hero. Make it fully responsive and order everything with z-index
so the photo sits above the text where they overlap. Then run it and
show me a preview.

紙らしさは、層ごとの速さの違いと、写真の下の柔らかな影から生まれます。それでも平たく見えるなら、層どうしの速さの差を大きくするか、背景を少しぼかして奥にあるように見せるよう、Claudeに頼んでください。

リンク

• Higgsfield すべての動画とポートレートに
• Claude Code すべてのページの構築に
• Unicorn Studio 1つ目のサイトのノーコード効果に

どれかを公開したいときは、フォルダを Netlify Drop にドラッグすれば、数秒で共有できるリンクが手に入ります。

Claude Codeが初めてなら、ウェブサイトのファイルを実際に作って保存までしてくれる版のClaudeだと考えてください。チャットの方はファイルについて話すだけです。普通のClaudeのチャットでも作れます。ページを一つのHTMLファイルとして頼み、ダウンロードしてください。