動画制作会社（綺麗系・シンプル／ナチュラル）のWebデザイン見本

小さなお店・工房・地域の会社の経営者。派手な広告動画ではなく、自分たちの仕事を、ありのまま伝える動画がほしい人。ページそのものを「1本の映像のタイムライン」に見立てる。横に進むと、下のタイムコードが進む。


業種	IT・Web（企業・お店の動画を作る小さな制作会社）
系統	綺麗系（余白・細い線・明朝・彩度を落とした色・ゆっくりした動き）
テイスト	シンプル／ナチュラル・やさしい
色	茶・ベージュ
形	ページ全体が横に動く（PCだけ。スマホとJSなしは縦並び）
スライド	なし
メインビジュアル	画像1枚のLP風（野原のカメラの写真1枚に、大きなコピーと相談ボタン）
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A04 ロゴだけの幕から写真がにじみ出て、ロゴが定位置に溶け込む／C04 タイムコードと工程の名前が進む横長のパノラマ／E01 文字の形に写真をくり抜き、中の写真が流れる
架空の会社	「ひだまり映像舎（HIDAMARI FILMS）」— 〇〇市の、4人の映像制作会社。お店・工房・会社の紹介動画

だれに向けたページか

小さなお店・工房・地域の会社の経営者。派手な広告動画ではなく、自分たちの仕事を、ありのまま伝える動画がほしい人。ページそのものを「1本の映像のタイムライン」に見立てる。横に進むと、下のタイムコードが進む。

PC（1080px以上・JSあり）は、縦スクロールでページ全体が横に進む。画面の下に映像編集ソフトのようなタイムライン（目盛りと再生ヘッド、00:00:12:05 のタイムコード）が出て、横に進むほど進む。

読み込みの幕（A04）：生成りの幕にロゴ「ひだまり映像舎」だけ。写真が、ぼかし＋透明からにじみ出て、ロゴは小さくなってヘッダーの定位置に溶け込む（1.6秒・2回目は省く）
メインビジュアル：野原のカメラの写真1枚を全面に。大きなコピー「ありのままを、いちばんきれいに。」と「無料で相談する」ボタン
わたしたちについて：短い文
くり抜き文字（E01）：巨大な「FILM」の文字の形に谷の写真をくり抜き、横に進むと中の写真が流れる
制作の流れ（C04）：横長のパノラマ。「ヒアリング→企画→撮影→編集→納品」が、タイムコード 00:00 → 05:00 の目盛りとともに進む。撮影・編集の写真を挟む
これまでの仕事：カフェ・パン屋・工務店・旅館の4本（写真と、短い説明。実績は見本）
料金：3つのプラン（〇〇円〜）
ご相談：濃い区切りに大きなボタン
フッター（横の旅が終わったあと、縦に出る）

JSや GSAP が無いとき・スマホ・prefers-reduced-motion：幕は出ない・全部ふつうの縦並び・タイムラインは出ない・くり抜き文字の中の写真は止まったまま
横の動きは ease: none で、スクロールした分だけ。幕は1回だけ（sessionStorage）
ゆっくり（1.2〜1.8秒）。揺らす・回す動きはしない

新しく3枚：野原のカメラ（メインビジュアル）／撮影の様子（後ろ姿）／編集の机。写真庫から4枚：カフェ（001）・パン屋（010）・木の家（004）・谷の宿（006）を「これまでの仕事」の場面とくり抜き文字の中に。

料金・制作日数・実績の社名は見本の値（〇〇）。会員が本物に替える。