毎日ひとつ、美しいサイトをソースから解剖している

「このサイト、いいな」と思っても、なぜ良いのかを説明できない。それが悔しくて、LP Anatomy という学習ノートを始めました。美しいサイトやランディングページを毎日ひとつ選んで、HTML・CSS・JavaScript を読み、実際に動かして、構成・配色・文字・動き・重さを測ります。

#やっていること

1 日の流れはだいたい決まっています。

1. サイトを選んで、ソースをダウンロードする
2. 色・フォント・イージングを CSS から抜き出して、出てくる回数を数える
3. 計測用のスクリプトで、通信量と PC・スマホのスクリーンショットを取る
4. わかった「型」を、AI に読ませる品質基準（チェックリスト）に書き足す
5. 部品にできるものは、依存のない CSS と JS にして手元に置いておく

ノートのページ自体も、そのサイトの流儀で組むことにしています。真似してみると、読んだだけでは気づかない細部がわかるからです。

#これまで解剖したサイト

#最初の 6 サイトに共通していたこと

雰囲気はばらばらなのに、良いサイトには共通点がありました。

• 色の主役はひとつ。 多色に見えても「どこで使うか」が決まっている。セクションごと、ロゴの 3 色だけ、差し色は 1 点だけ、など。
• 文字は極端な対比。 太いと細い、巨大と極小。中途半端な大きさを並べない。
• イージングは 1〜2 種類に固定し、時間は 3 段階くらいにそろえる。
• 常に動いているものは 1 つだけ。 紙吹雪、スライダー、3D、波。ほかは控えめ。
• ブランド固有の遊びが 1 つある。
• 重さはほぼ画像で決まる。 重い 2 サイトは通信量の 8 割以上が画像だった。

#このサイトに活かしたこと

このサイトは「温かい飲食（びっくりドンキー）」の型を、Enludus に翻訳して組んでいます。

• 背景は紙色 2 色を交互にして、境目をゆるい楕円にした
• 色はロゴのオレンジ・水色・紺の 3 色だけ。イラストも同じ 3 色で描いた
• 日本語フォントは、そのページに出てくる文字だけを読み込むようにした
• 動きは「動きを減らす」設定やデータセーバーで止まるようにした

びっくりドンキーのトップは 20.3MB ありましたが、重さの多くは表示サイズより大きな画像と、日本語ページで読まなくてよいフォントでした。同じ雰囲気を軽く作れるか、というのもこのサイトで試したかったことです。

#これから

解剖したサイトが増えるほど、型の引き出しも増えていきます。ある程度たまったら、雰囲気ごとの型の違いを比べる記事も書いてみたいと思っています。

#更新（2026-10-20）

7 サイト目に「ほぼ日」を解剖しました。上の表に足し、共通点の見出しは「最初の 6 サイト」に直しています。

• UI は白・#3e3e3e・罫の #d9d9d9 だけ。 色は記事が持っていて、ヒーローの地色は 8 色あります。
• 切り替えは地色が 0.3 秒、写真と文章の clip-path が 0.2 秒。
• 重さは 6.94MB。 広告と同意まわりの JS、日本語フォントで約 2.2MB を占めていました。

ここから「読みもの」の型を品質基準に足し、部品にできるものは patterns/ に加えています（地色が変わるヒーロー、8 秒で自動送りするカルーセルなど。画面の外・タブが裏・「動きを減らす」設定・データセーバーで止まります）。解剖で学んだことは、ほかのリポジトリにも当てています。たとえば五十音マインスイーパーのハロウィン週の見た目は、「色は内容に持たせる」の型を使いました。

#更新（2026-10-22）

2026-10-21 に 8 サイト目として、Apple の AirPods Pro 3（日本）の製品ページを解剖しました。上の表に足しています。トップの重さは 18.2MB（スマホ表示は 7.89MB）でした。

• 背景は白と薄い灰 #f5f5f7 を章ごとに交互にして、大きな見出しと灰色の本文を、16 の章で同じ形で繰り返している
• 要素の登場は、0.15 秒ずつ遅らせる 1 つの型だけでそろえている
• 動きは「足す」作りで、読み込み時の検証を全部通ったときだけ有効になる。「動きを減らす」設定の環境には、動きを足さない
• 画像は PNG だけで、CSS も 970KB ある。軽さの面では、真似しないほうの例として記録した

最後の 1 点は、これまでの「重さはほぼ画像で決まる」と同じ向きの話です。動きを足すという考え方は、部品（patterns/）にも反映しています。「最初の 6 サイトに共通していたこと」の節は、6 サイトの時点のままです。

2026-10-22 には 9 サイト目として、スプラトゥーン 3 の公式サイトを解剖しました。上の表に足しています。トップの重さは 11.9MB（スマホ表示は 10.3MB）でした。

• CSS に出てくる色は、ほぼ白と黒だけ。 派手な色は、インクの画像が持っている。
• 登場もホバーも「少し行き過ぎて戻る」跳ねる動き。 登場は 0.35 秒、ホバーは 0.25 秒で、ホバーは 1.05 倍。
• 傾けたテープの見出しと、clip-path で斜めに切った章の境目。
• prefers-reduced-motion も saveData も、見つからなかった。 点滅や流れる帯は止められないので、真似るときは足す、という「反面教師」として記録した。

ここから「エンタメ・ゲーム」の型を品質基準に足し、部品は patterns/ に加えました（跳ねるホバー、傾けたテープ、斜めの境目、ネオンの点滅、跳ねる登場の LPA.pop）。部品の側では、「動きを減らす」設定とデータセーバーで止まるようにしています。

#更新（2026-10-23）

2026-10-23 には 10 サイト目として、Linear のトップを解剖しました。上の表に足しています。トップの重さは 17.2MB（スマホ表示は 16.2MB）でした。

• 面は #08090a から #191a1b までの 4 段の暗い灰で、境界は白の透明度。 見出しは Inter の weight 510、字間は −0.022em。
• 動きは 3 つだけ。 色の変化が 0.16 秒、画像のマスクで現れる登場が 0.8 秒、流れる帯が 30 秒。どれも「動きを減らす」設定でない環境の中に入っている。canvas と video は無い。
• 重さの中身は、ほかのページの先読み（RSC）が 7.8MB、検索の索引が 1.1MB。 軽さの面では、真似しないほうの例として記録した。

ここから「テック・ダーク」の型を品質基準に足し、部品は patterns/ に加えました（マスクで現れる LPA.wipe、縁だけが光る LPA.edgeLight、ホバーで明るくする .lpa-bright、両端を消す流れる帯）。部品の側では、「動きを減らす」設定とデータセーバーで止まるようにしています。

#更新（2026-10-25）

2026-10-24 に 11 サイト目として、星野リゾートのトップを解剖しました。上の表に足しています。トップの重さは 10.62MB（スマホ表示は 6.87MB）でした。

• UI は白と #1a1a1a だけで、色は 7 つの章が持つ。 章ごとに地の色と文字色（黒か白）を 1 組ずつ持たせていて、季節や特集が変わっても枠は作り直さない作りです。
• 最初の画面は画像でなく空室検索。 ヒーロー画像はなく、白地に入力欄と黒いボタンだけが出ます。
• 章の境目は波で、動き続ける。 波は Lottie の SVG で、prefers-reduced-motion も saveData も見つからず、止められません。真似しないほうの例として記録しました。
• 白い文字の章は、コントラストが足りない。 金の地（#c0a166）に白は 2.46:1、珊瑚の地（#ee9d9d）に白は 2.11:1 でした。同じ地に #1a1a1a を載せると 7.07:1 と 8.24:1 です。

ここから「旅・宿泊」の型を品質基準に足しています。「最初の 6 サイトに共通していたこと」の節は、6 サイトの時点のままです。

このあいだに、解剖で得た基準を別のリポジトリへ当てる作業も進めました。梅田地下ナビには、文字の大きさを 6 段にまとめたことと、温かい飲食の型（紙の色 2 色・枠線なしの茶の影・焦げ茶の文字）を当てています（梅田地下ナビの記事）。