ウェブサイトの「開き方」9通り
どのトップページも、同じ問いに答えています。ページを重くせずに、最初の1画面をどう「高そう」に見せるか。ここに挙げるのが現在流通している9つの答えです。それぞれについて、動きの実演・容量・破綻の仕方をこのページ上で確認できます。上のメニューからルートを選んでください。
ルート別のヒーロー容量（目安）
一般的な実装レンジの中央値（転送バイト数）。掲載サイトの実測値ではなく、手法ごとのエンジニアリング上の目安です。
軽い方の4ルートは 300KB 未満です。ルートA・ルートF の隣では細い線にしか見えませんが、その差こそが要点です。
9つのルート
フルブリード動画
ヒーロー領域いっぱいに自動再生の映像を敷き詰める、いわゆる「動画背景」。
▶ 何を見るか
画面全体が動く。それが魅力であり、同時にファイルが巨大になる理由でもあります。本来ここには MP4 が入ります。上部の赤いバーは、訪問者が待たされているダウンロードを表しています。
⚠ どこで破綻するか
モバイル回線のスマートフォン。ヒーローがページ全体の重量の8割を占めることも珍しくなく、意図的にポスター画像へ LCP を渡さない限り、Largest Contentful Paint は動画の到着を待ち続けます。
⚙ 実装のポイント
ポスター画像を LCP 要素に（WebP・fetchpriority="high"）、動画は preload="none"、AV1 主／H.265・H.264 フォールバック、720p、5〜8秒ループ、ffmpeg -movflags +faststart、IntersectionObserver で取得を開始。
掲載サイト — ★ は研修中に実際に開いてみる価値があるもの
オーストリアの風景をフルスクリーン動画で。季節ごとのコンテンツ、最小限のナビゲーション。
「写真的な映像のトップページ」という要望に最も近い一例。国レベルの観光サイトでの実装。
www.austria.info/en-us実際の人物がさりげなく動く映像。大規模な商品カタログの上でシームレスに切り替わる。
日本市場向けの貴重な参考例。動画を載せながらサイトが重く感じられない。トリミングとループ長を要研究。
www.uniqlo.com/jp/ja小麦畑をフルスクリーン動画で。生産地からの物語と、リアルタイムの生育サイクル表示。
装飾ではなく「産地の証明」としての動画。
www.pastamancini.com/enフルワイドの動画ヒーロー。ラグジュアリーファッションのキャンペーン映像。
www.ysl.com制作会社のポートフォリオにおけるフルワイド動画ヒーロー。
www.stinkstudios.comコーポレートサイトのフルワイド動画ヒーロー。
www.isiglobal.com高解像度のフルワイド動画。アパレルブランド。
www.newlinehalo.comラグジュアリーヨットチャーター。海と船体の映像。
y.coアイルランドの古城ホテル。敷地の映像。
www.dromoland.ieハイライトリールのループ。全画面動画でデバイス横断のレスポンシブ対応。
映像作家のポートフォリオ。ヒーロー動画に議論の余地がない唯一のケース。
fabioformato.comナイキのシューズを抽象的に捉えた催眠的な映像で始まる。ミニマルなレイアウト。
生活シーンではなく抽象的な製品の動き。そのぶん圧縮効率が良い。
mastheadmagazine.comモーション主導のシネマティックなヒーロー。
madeinevolve.com大規模EC上のキャンペーン動画ヒーロー。
www.nike.com/caスピリッツカテゴリのブランドフィルムをヒーローに。
havana-club.com/es映像を軸に構成されたキャンペーン用マイクロサイト。
endless-summer.richardmille.comコンシューマーハードウェアの製品動画ヒーロー。
molekule.com地域観光。現地の映像。
visithumboldt.comクリエイターチャンネル。スローモーション映像そのものがヒーロー。
www.theslowmoguys.com人材エージェンシーの動画背景ヒーロー。
www.talent10.com住宅建築の動画背景ヒーロー。
focalpointhomes.com商業不動産の動画背景ヒーロー。
springmillcampus.com長年知られるシネマティックな制作会社サイト。作り込まれた映像シーケンス。
歴史的な参照点。フルブリード動画という定石を作ったサイトのひとつ。
blacknegative.comスタジオのシネマティックなポートフォリオ。
heurebleue.studio動画ヒーローを持つデザインスタジオ。
www.sublimio.com自転車系ハードウェアの製品動画ヒーロー。
www.tether.bikeベンチャーファンドの動画ヒーロー。
betterangels.vcテクノロジーブランドの動画背景。
www.bluzelle.comアプリのランディングページの動画ヒーロー。
nova.appエージェンシーサイトの動画背景。
mediaboom.comLive Nation 傘下サイトの動画ヒーロー。
distronation.livenation.com中東ホスピタリティ系メディアの動画ヒーロー。
www.hospitality-business.ae映像作家のポートフォリオ。リールをヒーローに。
films.bybrettjohnson.comレストランサイト。料理の動画ヒーロー。
中小規模の参考例。小さな事業者によるルートA実装。
www.nealaguna.com動画背景ヒーロー。
www.biquiti.comサービス業の中小企業による動画背景。
中小規模の参考例。
eagleclean.co.uk動画背景ヒーロー。
www.matter.toクリエイティブエージェンシーの動画ヒーロー。
dcny.co食品ブランドの動画ヒーロー。
ollys-ollys.comエージェンシーサイトの動画背景。
www.madisonvine.com講座ランディングページの動画ヒーロー。
videocreatorcourse.comフィルムを用いたキャンペーン用マイクロサイト。
ltd-edition.mfk-publishing.comエディトリアル企画の動画ヒーロー。
www.futuremobility.se静止画 + CSS モーション
高品質な静止画1枚を CSS だけで動かす。ゆっくりした拡大・移動（ケン・バーンズ効果）＋フィルムグレイン＋ビネット＋グラデーションマスク。
▶ 何を見るか
これは静止画1枚です。生命感は26秒かけた拡大変形と、動くグレイン、ビネットだけで作っています。指摘されるまで動画でないと気づかない人がほとんどです。
⚠ どこで破綻するか
枠の中では何も動きません。風も、歩く人もいない。動き自体が本質の被写体（ダンススタジオ、稼働する工場ライン）では、この手法は成立しません。
⚙ 実装のポイント
1920px の WebP/AVIF 1枚、transform: scale() を20〜30秒、SVG の feTurbulence ノイズを不透明度15%前後・overlay 合成で重ねる。JavaScript は一切使いません。
掲載サイト — ★ は研修中に実際に開いてみる価値があるもの
高解像度の静止画に、ノイズ／グレイン効果を重ねている。
まさにルートBの技法。静止画をフィルムらしく見せているのはグレインです。最初に見るべき一例。
movestudio.siteエディトリアル調の写真だけでヒーローを構成。動画は不使用。
valentincheval.designフルワイドの写真。ホスピタリティ／建築系。
casamami.co製品の静止画だけでヒーロー全体を構成。
www.osmo.supplyギャラリー形式の静止画。
www.foundryuk.comミニマルなレイアウトに静止画の要素。
artversion.com開発者ポートフォリオの静止画ヒーロー。
www.davidlangarica.devミニマルなヒーロー。動く要素なし。
cretivox.comミニマルなヒーロー。動く要素なし。
dorstenlesser.comミニマルなヒーロー。動く要素なし。
www.monoceros.com鮮やかな静止画に、軽いアニメーションを重ねている。
spotify.designざらついた液状のエフェクト背景。静的なベースにテクスチャを重ねた例。
テクスチャだけで静的なヒーローをどこまで持たせられるかを示す例。
leopoldmanguette.com写真シーケンス / スライダー
3〜5枚の静止画をクロスフェードまたはスライドさせ、それぞれにゆっくりズームをかける。
▶ 何を見るか
4枚、それぞれに独自のゆっくりズーム。5秒ループが「1つの空気感」しか運べないのに対し、ヒーローが複数の主張を順番に語れるようになります。
⚠ どこで破綻するか
4枚を最初にまとめて読み込ませると、ルートB程度の見栄えのためにルートA並みの重さを払うことになります。両方の悪いところ取りです。
⚙ 実装のポイント
1枚目だけ preload し、残りはアイドル時にデコード。JS のカルーセルライブラリは、表示する画像より重いことすらあるので CSS トランジションで。
掲載サイト — ★ は研修中に実際に開いてみる価値があるもの
高解像度画像のフルワイドスライダー。
シーケンス手法の最も分かりやすい参照例。
www.associate.studio/home製品写真によるフルワイドスライダー。
mogutable.com単純なクロスフェードではなく、写真が積み重なるアニメーション。
一般的なカルーセルより面白い。この切り替えの発想は真似する価値あり。
riadmammadov.com写真をグリッド状に、3Dレイアウトで配置。
www.theboathouse.agencyキュレーションされたギャラリーが回転しヒーローになる。
www.awwwards.com条件付きアップグレード
既定は静止画。回線速度・画面幅・モーション設定が揃ったときだけ動画を読み込む。
▶ 何を見るか
3つのボタンを押してみてください。同じページ、同じコードで、3人の訪問者がそれぞれ違うヒーローを受け取ります。スクリーンショットでは判別できない唯一のルートです。
⚠ どこで破綻するか
QA です。訪問者ごとに表示が変わるので「自分の環境では問題なかった」が意味を持たなくなります。目視ではなく端末マトリクスが必要になります。
⚙ 実装のポイント
prefers-reduced-motion、navigator.connection.effectiveType、最小ビューポート幅で分岐。既定をポスターにし、動画はあくまで上乗せとして扱うこと。
掲載サイト — ★ は研修中に実際に開いてみる価値があるもの
動画と埋め込みクリップ。prefers-reduced-motion 時はポスターのみにフォールバック。
リファレンス実装。見た目では判別できないので、DevTools で回線を絞って変化を観察すること。
www.apple.com/siri製品ページが端末性能とモーション設定に応じて動きを段階的に落とす。
同じ手法を非常に大規模なサイトで運用している例。
www.apple.com限定領域 / マクロ動画
動画をパネル内（画面半分など）に収める、またはマクロ（寄り）で撮って情報量そのものを減らす。
▶ 何を見るか
左右とも同じだけ動いています。右はマクロの寄り画で、細かいディテールがほとんどないぶん、エンコーダーが割くビット数が桁違いに少なくて済みます。
⚠ どこで破綻するか
退屈な寄り画は、ただ安っぽく見えるだけです。マクロが免除してくれるのはファイルサイズであって、アートディレクションではありません。
⚙ 実装のポイント
寄りで撮る／トリミングする、被写界深度を浅く。あるいは動画を画面半分のパネルに収めれば、エンコード幅が1920pxではなく約700pxになり、体感品質そのままでファイルサイズが一桁下がります。
掲載サイト — ★ は研修中に実際に開いてみる価値があるもの
フルブリードではなく、見出しの横に半画面の動画パネル。
パネル手法そのもの。エンコード幅がおよそ半分になり、容量もその分下がる。
www.buffmotion.comフルワイドのマクロ動画。寄りの画角、浅い被写界深度。
マクロ映像は高周波成分が少なく、同解像度の広角風景よりはるかによく圧縮される。
www.duten.com/enフルワイドのマクロ動画。飲食業。
2つ目のマクロ事例。Duten と見比べると法則が見えてくる。
baron.bar背景映像ではなく、領域を区切ったインタラクティブな製品デモ。
clickup.comヒーロー枠の中に収めた、変形するインタラクティブ要素。
www.jeton.com3D / WebGL
Three.js や React Three Fiber などでリアルタイムに描画するジオメトリ・シェーダー・製品コンフィギュレーター。
▶ 何を見るか
ここには動画も画像も存在しません。1フレームごとに計算されています。ボタンでループを止めると、絵は残るのにコストだけが消えることを確認できます。
⚠ どこで破綻するか
ミドルレンジの Android。GPU が回り続けるためバッテリーを消費し、発熱でスロットリングします。しかも段階的な劣化がなく、動くか真っ白かの二択です。
⚙ 実装のポイント
メッシュは Draco 圧縮、テクスチャは KTX2、ドローコールを制限、IntersectionObserver で画面外に出たらループ停止、そして必ず静的フォールバックを用意すること。ヒーローを二度作る覚悟が要ります。
掲載サイト — ★ は研修中に実際に開いてみる価値があるもの
WebGL 主導のインタラクティブ体験。3Dスタジオのポートフォリオの基準点。
このカテゴリの旗艦。WebGL ヒーローの上限を知りたければまずここから。
lusion.co3Dのオオカミをヒーローオブジェクトに。インタラクティブ。
dogstudio.co3D と AR のインタラクティブ要素をヒーローに。
noomoagency.comデザイン家具のカタログ上で 3D/WebGL アニメーション。
制作会社ではなく実際の商材を扱う企業の例。事業会社でも成立することを示す。
gufram.itインタラクティブな 3D 製品コンフィギュレーター。
ルートFの最良ケース。顧客が実際の購入品を構成するため、3D が容量に見合う価値を生んでいる。
lipstylo.dolcegabbana.com/en/master/dg/online3Dオブジェクトでヒーローを構成。
www.spotcreates.com3Dアニメーションのヒーロー。
fancy.design3Dイラストをヒーローに描画。
redlight.dev3Dのフルーツ要素。アグリビジネス。
3D にとって意外な業種。テック系だけの手法ではないことを研修で示すのに有用。
delassus.com/en回遊できる3D空間をヒーローに。
neverland.agency3Dの図形でヒーローを構成。
atelierdesign.be全面的な3D体験。
chapter.millanova.comアプリのランディングヒーローに3D要素。
tinytracks.app3D体験そのものがヒーロー。
www.otherlife.xyz3Dのヤシの木のアニメーション。
alireza.com暗号資産プラットフォームの3Dアニメーション。
www.ravendao.net3Dの液体状の球体をヒーローオブジェクトに。
www.bravis.com宇宙をテーマにした3Dヒーロー。
venturi.space/en3D要素とタイポグラフィ主導レイアウトの組み合わせ。
F と H のハイブリッド。全面的な3Dシーンでなく小さなオブジェクト1つでも3D感は出せる。
digital-cover.com3Dの岩をヒーローオブジェクトに。
weaintplastic.com3Dのスプリットスクリーン構成。
www.peter-tarka.de3Dイラストとアニメーション。農業分野。
www.b-egg.farm3Dイラストとアニメーションのポートフォリオ。
david-hckh.comイラスト / ベクター
手描き・ベクターのアートワーク。SVG や Lottie でアニメーションさせることも。
▶ 何を見るか
すべての線は stroke-dashoffset をアニメーションさせて描いています。この絵全体がわずか数百バイトのパスデータです。
⚠ どこで破綻するか
イラストの流行は移り変わりが速く、素材ライブラリをそのまま使うと競合4社と同じ顔になります。
⚙ 実装のポイント
SVG はインライン化（<img> ではページの CSS から動かせません）。同じ動きなら Lottie の JSON のほうが GIF や MP4 より小さくなるのが普通です。
掲載サイト — ★ は研修中に実際に開いてみる価値があるもの
アニメーションする猫のイラストをヒーローに。
www.nope.ee/en/ice-creamスクロール連動のインタラクティブなイラスト。
thepleasurepersuit.hello-jury.com/en_usパララックス効果つきのイラストヒーロー。
boy-coy.comインタラクションを伴うイラスト。
www.juice.agencyカスタマイズ可能なフラットイラストのシステム。
www.humaaans.comベクターイラストのヒーロー。
leoff-paris.com大胆なイラストとモーションの組み合わせ。
mew.xyzアニメーションするイラストのヒーロー。
clac.ioイラスト主導。テクノロジー分野。
prevalent.ai線画イラストのヒーロー。
中小規模かつ非常に軽い。小規模クライアント向けの有力なひな型。
coffeeroastingman.rsカラフルなイラストのヒーロー。
crazycreative.design手描きイラスト。食品ブランド。
aurabora.comカラフルなクラシックイラストのポートフォリオ。
kelseydake.comサービス業の中小企業によるイラストヒーロー。
地味な業種における中小規模の参考例。
peststopboys.co.ukフラットイラストのヒーロー。
thriveweb.com.auイラストベースのヒーロービジュアル。
phamilypharma.comタイポグラフィ主導
大きな文字組みとレイアウトでヒーローを成立させる。画像はほとんど、あるいは全く使わない。
▶ 何を見るか
画像は一切ありません。サイズ、リズム、時間差のある出現だけでヒーローを成立させています。このカタログの中で最も軽い手法です。
⚠ どこで破綻するか
コピーが本当に良くなければ成立しません。そして Web フォントが、重さの移動先として静かに新たなボトルネックになります。
⚙ 実装のポイント
使う文字だけにサブセット化して preload、font-display: swap、静的4ウェイトより可変フォント1本。
掲載サイト — ★ は研修中に実際に開いてみる価値があるもの
タイポグラフィ主導のヒーロー。動く要素なし。
www.crftd.nlタイポグラフィ主導のヒーロー。
radiance.familyタイポグラフィ主導のヒーロー。消費財ブランド。
bennett-tea.comタイポグラフィ主導のヒーロー。
efront.digitalタイポグラフィ主導のヒーロー。
ransomltd.com文字組み主導にモーション効果。写真は不使用。
www.rno1.comタイポグラフィ主導のヒーロー。
www.brandaiddesignco.comタイポグラフィ主導のヒーロー。
monolith.nycタイポグラフィ主導のヒーロー。
apres-creativestudio.comタイポグラフィ主導のヒーロー。SaaS。
hourly-app.comタイポグラフィ主導のヒーロー。
weddingart.org動的な文字のトランジションでヒーローを構成。
www.wavespace.agency文字とモーション主導のスタジオサイト。
ochi.designスプリットスクリーン、文字主導。写真は不使用。
cubavodka.com/en独創的なスプリットスクリーン。写真は不使用。
wadeandleta.comインタラクティブなデザインショーケース。レイアウト主導。
www.spinxdigital.comグラデーション / 抽象 CSS
色面・グラデーション・メッシュ・図形を、すべて CSS だけで描く。
▶ 何を見るか
このページに画像ファイルは存在しません。色面は放射グラデーションにぼかしをかけ、transform で動かしているだけです。
⚠ どこで破綻するか
普及しすぎたこと。SaaS の初期設定のような見た目になり、ブランドが競合と入れ替え可能に見えてしまいます。
⚙ 実装のポイント
ダウンロード量はほぼゼロですが、大きなぼかしレイヤーは描画コストを食います。transform と opacity だけをアニメーションさせ、background-position は絶対に動かさないこと。
掲載サイト — ★ は研修中に実際に開いてみる価値があるもの
カラフルなグラデーションのヒーロー。写真は不使用。
www.byooooob.com色面の上に構成されたコラージュ。
wearebreakfast.com幾何学図形と色面。
www.meplace.co色彩主導のヒーロー。写真は不使用。
gelatolaboca.comヒーロー上でインタラクティブに色が変化する。
calar.inkグラデーション背景のヒーロー。
hellohumans.agencyレトロなコラージュ表現。
www.chatmonchy.com/bestmemoryホバー効果つきのグラデーション。
www.fromroswell.comグラデーション背景のヒーロー。
www.leeroy.caアニメーションする幾何学図形。
ladder.ioグラデーションと3D要素の組み合わせ。
dotlinecode.com/enアニメーションする図形のヒーロー。
www.dinergy.com.au