Arc Browser

Experience a calmer, more personal internet in this browser designed for you. Let go of the clicks, the clutter, the distractions.

第一印象

Arcの公式LPは、開いた瞬間に「これは普通のテック企業のLPではない」と感じさせる。淡いコーラル、ピンク、ライラック、ターコイズが水彩のようににじみ合うグラデーション背景の上に、サンセリフの巨大な見出しが浮かぶ。Webブラウザという最も触る回数の多いソフトウェアを「日々の儀式に値する道具」として再定義したい、というプロダクト思想がそのままビジュアルに翻訳されている。

レイアウトとグリッド

ファーストビューは大胆な左寄せタイポ＋右上のCTAという、メディア的でもエディトリアル的でもある構成。スクロールするとセクションごとに余白がたっぷり取られ、デモ動画と説明文が交互に登場するシネマティックな流れになる。極端なフルワイドではなく、最大1200px前後の中央寄せコンテナを基本にして、可読性を保ちながら没入感を確保しているのが上手い。

配色とコントラスト

ベースカラーは Arc のシグネチャである暖色グラデーション（FE7E6D系のコーラル → FBBC04系のピーチ → A855F7系のラベンダー）。ボディは純白に近いオフホワイト、テキストはほぼ黒という強コントラスト構成で、グラデーション背景の鮮やかさが浮き立つ仕組み。アクセントとして黒のソリッドボタンを差し込み、視線誘導と販促CTAの強度を両立している。

タイポグラフィ

見出しは Inter 系の幾何学サンセリフを extra-bold で大きく組み、行間を詰めて「彫刻のような塊」として見せている。本文は同じファミリーの細めウェイトで、行間と字間に余裕を持たせて読みやすさを担保。日本のSaaS LPにありがちな「Noto Sans JP + 小さめ本文 + ベタ並べ」とは対照的な、Western Editorial 的なリズムが特徴。

モーションとインタラクション

スクロール連動でグラデーションの位置がじわっとシフトし、見出しが下から薄くフェードインしてくる。動画デモは autoplay loop で重さを感じさせない短尺カットを連発。マウスホバーでボタンが微妙に膨らみ、フォーカスリングが鮮やかなグラデーションで描かれるなど「触っていて気持ちいい」を細部まで作り込んでいる。

テクニカルな印象

Next.js + Tailwind CSS による組み立てが推測される。画像は WebP/AVIF で軽量化、動画は短尺ループで Lazy 読み込み。フォントは self-host で First Paint を稼ぐ実装に見える。総じて「重くなりがちな表現リッチLPを軽快に見せる」という、現代のフロントエンド最適化手法の教科書的な見本。

受託・自社サービスへの応用ヒント

• SaaSやアプリのLPで「機能を箇条書きする」のをやめて、グラデーション×大型タイポ×動画デモの3点に絞ると一気に印象が変わる
• 暖色グラデーションは「親しみ + 革新」を同時に出せる便利な引き出し。技術的だが冷たくない、を狙いたいプロダクトに有効
• 動画は10秒以内×複数の短尺ループに刻むと、ページ全体が軽快に保てる
• 本文に Noto Sans JP を使う場合も、英語見出しは Inter / Söhne / GT America のような geometric sans を併用するとArc的なトーンに寄せられる
• CTAは「黒の角丸ボタン」をグラデ背景の中で1つだけ強烈に置く、というコントラスト戦略が学べる

このデザインを再現するAIプロンプト

Cursor / Claude Code / v0 にこのまま貼り付けると、近いトーンのLPが生成できます。

デザインの特徴

カラフルなグラデーション背景 × 大型サンセリフタイポ × 短尺動画デモを組み合わせた「次世代SaaS LP」の代表例。Webブラウザという地味な題材を、エディトリアル誌のような没入感で語り直している。

Design Tokens（DOM解析データ）

このサイトを 1440×900 でレンダリングして、実際のCSS値から自動抽出した数値データです。「同じ感じ」を再現する材料になります。