20 REFERENCES / FIND THE CENTER OF GRAVITY
AIは、うまく整える。
だから、画面は平均値へ寄っていく。
同じ角丸、同じカード、同じグラデーション、同じ「見出し＋説明＋CTA」。AIへ無条件に任せると、既視感のある整ったSaaS画面へ近づきます。ここでいう「Claudeっぽい」はClaude自体の批判ではなく、AIが出しやすい平均的な完成形を指す言葉です。
必要なのは、生成力より「重心を決める力」
コピー、写真、操作、ブランドの思想。どこへ画面の重心を落とし、何を弱くし、何を捨てるか。その判断力と審美眼を磨くために、20サイトを見ます。表面を真似るための一覧ではありません。
主役へ重心を置く
余白が多いから良いのではありません。見せたいものが決まり、それ以外を下げた結果として余白が生まれます。
01
Apple
- 選んだ理由
- 一画面の主役を一つに絞る判断が見えやすい。
- 良さの仕組み
- 製品写真、短い見出し、購入導線の順に強さが下がり、視線が競合しません。
- 学ぶこと
- 最初に「一つだけ覚えてほしいもの」を決める。
- 真似しないこと
- 白背景、大きな写真、短いコピーという表面だけを借りない。
02
Calendly
- 選んだ理由
- サービスの便益を、一文目で曖昧にしない。
- 良さの仕組み
- 機能一覧より先に、日程調整が楽になるという結果を置きます。
- 学ぶこと
- 機能名ではなく、使った後の変化から書く。
- 真似しないこと
- 短くすることを目的にして、意味まで削らない。
03
Aesop
- 選んだ理由
- ECでも購入ボタンではなく、ブランドの時間感覚へ重心を置く。
- 良さの仕組み
- 色、写真、言葉の温度が揃い、販売導線だけが浮きません。
- 学ぶこと
- CTAの強さを、ブランドの話し方に合わせる。
- 真似しないこと
- ベージュや明朝体を使えば上品になる、と考えない。
04
Kinfolk
- 選んだ理由
- 情報量ではなく、編集の間へ重心を置いて読ませる。
- 良さの仕組み
- 写真と文字の距離、改行、次の記事の見せ方が読む速度を作ります。
- 学ぶこと
- 余白を空きではなく、時間として使う。
- 真似しないこと
- 要素を減らしただけの、内容が薄い画面にしない。
05
The Gentlewoman
- 選んだ理由
- 派手なUIではなく、文字と写真の格へ重心を置く。
- 良さの仕組み
- 見出しの大きさ、行長、写真の切り方に明確な編集判断があります。
- 学ぶこと
- 文字を装飾ではなく、画面の骨格として設計する。
- 真似しないこと
- 巨大なセリフ体を置くだけで雑誌風にしない。
読む順番へ重心を置く
情報が多いことは悪くありません。全部を同じ強さで見せることが、AI的な平均化と読みにくさを生みます。
06
Stripe
- 選んだ理由
- 複雑な金融機能でも、理解する順番を失わない。
- 良さの仕組み
- 大きな価値、具体例、技術詳細へと段階的に深くなります。
- 学ぶこと
- 情報を減らせないときは、理解の深さを分ける。
- 真似しないこと
- グラデーションや斜め背景だけを「Stripe風」として借りない。
07
Notion
- 選んだ理由
- 多機能でも、最初の理解を用途へ置いて心理的な重さを下げる。
- 良さの仕組み
- 機能説明に、人の言葉、具体的な用途、軽い図解を混ぜます。
- 学ぶこと
- 難しい機能ほど、最初は用途と手触りから伝える。
- 真似しないこと
- 手描き風イラストを置くだけで親しみを演出しない。
08
Slack
- 選んだ理由
- 対象者や用途が多くても、入口の優先順位が明確。
- 良さの仕組み
- 最初のCTAは絞り、その後でチーム規模や課題ごとの分岐を出します。
- 学ぶこと
- 選択肢は、必要になる場所で初めて見せる。
- 真似しないこと
- カラフルな形で複雑さをごまかさない。
09
Shopify
- 選んだ理由
- 強い販売訴求を、読みやすい順序へ変えている。
- 良さの仕組み
- 約束、信頼材料、機能、事例が役割ごとに分かれています。
- 学ぶこと
- 売りたい情報ほど、同時に叫ばず役割を分ける。
- 真似しないこと
- 数字やロゴを根拠なく並べて、信頼を装わない。
10
Webflow
- 選んだ理由
- 高密度な情報を、密度の差で読ませている。
- 良さの仕組み
- 濃い面、静かな面、実演の面が交互に現れ、長いページに呼吸が生まれます。
- 学ぶこと
- ページ全体を均等に埋めず、集中と休憩を交互に置く。
- 真似しないこと
- すべてのセクションを見せ場にしない。
体験へ重心を置く
「できます」と説明するより、できる瞬間を見せる。プロダクトの価値を画面そのものが証明している例です。
11
Linear
- 選んだ理由
- 速度や精密さを、動きの感触として伝える。
- 良さの仕組み
- モーション、光、実画面が同じ「速く静か」という印象を共有します。
- 学ぶこと
- 動きは、伝えたい性質を実演するときだけ使う。
- 真似しないこと
- 暗色、ぼかし、光彩だけで未来感を作らない。
12
Framer
- 選んだ理由
- サイト自体が、製品で作れる表現のデモになっている。
- 良さの仕組み
- 文章の前に、編集、動き、公開後の見え方を触れる形で見せます。
- 学ぶこと
- 説明文の一部を、本物の操作や結果へ置き換える。
- 真似しないこと
- 動く要素を増やすことを、体験設計だと思わない。
13
Pitch
- 選んだ理由
- B2Bの機能紹介を、完成物の魅力へ変換している。
- 良さの仕組み
- UI部品ではなく、実際に作れるプレゼンの見え方を主役にします。
- 学ぶこと
- ツールではなく、そこから生まれる成果を見せる。
- 真似しないこと
- スクリーンショットを傾けて並べるだけで実演した気にならない。
14
Superhuman
- 選んだ理由
- 「速い」を性能表ではなく、使う人の感覚として見せる。
- 良さの仕組み
- コピー、切り替えのテンポ、プロダクト画面が同じ速度感を作ります。
- 学ぶこと
- 抽象価値は、言葉・動き・画面のリズムを揃える。
- 真似しないこと
- 機能名や秒数を並べるだけで、速さが伝わると思わない。
15
Airbnb
- 選んだ理由
- 検索機能より、旅を想像する感情へ重心を置く。
- 良さの仕組み
- 入力欄、写真、場所の言葉が一続きになり、探す行為が旅の入口になります。
- 学ぶこと
- 機能の前後にある感情まで含めて操作を設計する。
- 真似しないこと
- 大きな写真を置くだけで、感情的な体験になったと思わない。
人格へ重心を置く
AIは整列が得意です。しかし、サイトを覚えてもらうには、そのブランドでなければ選ばない言葉、写真、間が必要です。
16
Arc
- 選んだ理由
- プロダクトの癖を隠さず、違いとして見せる。
- 良さの仕組み
- 色や言葉は個性的でも、情報の骨格は整列と反復で支えています。
- 学ぶこと
- 個性を出す場所と、普通に使いやすくする場所を分ける。
- 真似しないこと
- すべての部品を変形させて、使い方まで独自にしない。
17
Dropbox
- 選んだ理由
- 安心感が必要なサービスに、人の作業と創造性を残す。
- 良さの仕組み
- 機能だけでなく、誰が何を作るために使うかを写真と言葉で補います。
- 学ぶこと
- 信頼は無機質さではなく、使う場面の具体性からも作れる。
- 真似しないこと
- イラストや原色を足すだけで、人間味を演出しない。
18
Medium
- 選んだ理由
- 文章へ重心を置きながら、サービスの人格も残す。
- 良さの仕組み
- 文字サイズ、行長、著者情報の順序が、読む行為を中心に組まれています。
- 学ぶこと
- 文章のページでは、装飾より先に読む速度と行長を決める。
- 真似しないこと
- セリフ体と黒線だけを借りて、読みやすさの検証を省かない。
19
Patagonia
- 選んだ理由
- 商品ではなく、ブランドが守る価値観へ重心を置く。
- 良さの仕組み
- 写真、記事、商品が同じ姿勢を語り、企業の主張と販売が分離しません。
- 学ぶこと
- 「何を売るか」と同じ強さで「なぜ続けるか」を設計する。
- 真似しないこと
- 社会的な言葉を借りるだけで、行動の根拠を欠かない。
20
Studio Ghibli
- 選んだ理由
- 現代的なSaaSの平均形に寄せず、長年の人格を優先する。
- 良さの仕組み
- 作品、ニュース、言葉の置き方に固有の空気があり、別ブランドへ置換できません。
- 学ぶこと
- 最適化で消してはいけない「その人らしさ」を先に決める。
- 真似しないこと
- 古さや不揃いさ自体を、個性として正当化しない。
審美眼とは、平均からずらす理由を持つこと
- 画面の重心を一つ決める。 コピー、写真、操作、思想のどれを先に見せるか。
- 参考を言葉にする。 「好き」ではなく、何が、なぜ効いているかを書く。
- 表面と仕組みを分ける。 色や角丸ではなく、その形になった判断を持ち帰る。
- 比較する。 AIへ一案を完成させず、重心だけ変えた案を並べさせる。
- 最後は自分で捨てる。 平均的に正しい要素を一つ消し、意図を強くする。
平均的に整ったSaaSデザインを完成させないでください。
まず、このページの重心候補を「コピー・写真・操作・思想」から3案出してください。
各案で、強くするもの、弱くするもの、捨てるものを決めてください。
参考サイトからは見た目ではなく、判断を3つだけ借りてください。
最後に、なぜその重心を選んだのかを1行で説明してから実装してください。
サイトのデザインやURLは変わります。2026年8月25日に公式URLを確認。自動取得で正しい画面を取得できなかったAesop、Medium、Patagoniaは、案内表示を閉じた公式トップを実ブラウザで撮影。Patagoniaは稼働中の欧州公式入口へリンクしています。
AIっぽくない参考、保存しました。配色と余白の使い方が特に勉強になります。スライド作るときはHaviを使うことが多くて、文章を貼るとレイアウトと画像を自動で組んでくれるので、あとは微調整するだけで済みます。www.havi.ai