参考サイトを「なんとなく良い」で終わらせず、①骨格 / ②型 / ③部品 / ④動きの
4つの層に切り分けて読み解く方法。
層ごとに分けると「何がそのサイトを成立させているか」が言語化でき、
コピーせずに原理だけ移植して自前で組み直すための地図になる。
下では実在サイトを実コードから4層分解して実演する（ai-model.jp/movie と studio.design/ja の2例・タイプの違うサイトで）。
上から下へ、抽象 → 具体。骨格は「ページ全体の並び」、型は「各セクションのレイアウトのパターン」、 部品は「その中の最小UI素材」、動きは「それらにかかる時間表現」。 この順で見ると、上の層ほど大きく印象を決め、下の層ほど差し替えが効く。
AIモデル映像制作のLP。実コード（完全ミラー）から、4つの層に分解して読み解く。 「動きが多くて何が効いているのか掴みにくい」サイトほど、層に分けると構造がはっきりする好例。
※ セクション名・クラス名は実コードの記述（class / data-* 属性）から採取。
上から下へ、共感 → 信頼 → 行動の順で積む王道のLPナラティブ。課題提起を中盤に置き、実績・社会的証明でブリッジしてからCTAへ落とす。
このサイトの個性は「スクロール連動の型」を多用している点。同じ縦スクロールでも、中身の見せ方が型ごとに違う。
型の中に置かれる最小UI。タイポの設計トークン（-primary / -secondary、jp_headline / en_headline）が全体の質感を一手に握っている。
このサイトの「リッチさ」の正体は、ほぼ全てこの層。data-* 属性でJSが動きをフックしている。動きを抜くと骨格・型・部品はそのまま静的サイトとして成立する＝動きは“最後にかける”層。
ノーコードWeb制作ツール「STUDIO」のサービスLP。①の ai-model が「物語」で説得する縦読みLPなのに対し、 こちらは「作例カタログの“物量”で説得する」プロダクトLP。同じ4層で見ると、どこに重心を置いたサイトかが一目で分かる。
※ クラス名・data-* 属性は実コードから採取（STUDIOの自動生成命名：t-NNN__content / list-N__item / theme-xxxx / carousel__slide / appear）。
「ノーコードで理想のサイトを」と名乗ったあと、すぐ大量の作例ギャラリーを見せて“これだけ作れる”を物量で証明。数字 → 機能深掘り → CTA と続く、王道のSaaS LP。
主役のギャラリーは「カテゴリ別・横カルーセル」を縦に積む型。機能パートは「英字ラベル＋サブ機能を映像で並べる」ショーケース型。
最小単位は「サイトカード（サムネ＋h4タイトル）」。これがギャラリーに何十枚も並んで“物量”を作る。STUDIOの自動生成クラス（t-NNN / list-N / theme-xxxx）が部品の正体。
主役の動きは2つ——スクロールで要素が順に現れる appear と、ギャラリーの横スライド。派手な物語演出より「気持ちよく見せ続ける」方向の動き設計。
4層に分けたら、「どの層を継承し、どの層を崩すか」を決める。 ai-model なら、骨格（説得の並び）と動き（sticky連動の気持ちよさ）は原理として継承し、 型・部品・配色・タイポは案件に合わせて作り替えるのが定石。 層ごとに分けてあるから、上の層を保ったまま下の層だけ差し替える、という安全な改変ができる。 これが「参考にしたのにテンプレ感もコピー感も出ない」状態の作り方。