Pitch：パープルステージ上の大胆なジオメトリックな自信

8 分で読める • 113 語
Pitch：パープルステージ上の大胆なジオメトリックな自信 screenshot

「プレゼンテーションを作るためのツールは、それ自体がその場で最も優れたプレゼンテーションであるべきだ。」— Christian Reber、創業者

Pitchは、プレゼンテーションソフトウェアが1990年代に美的進化を止めてしまったことから生まれた。BerlinでChristian ReberとWunderlistの開発チームによって設立されたPitchは、デザイナーがデザイナーのためにプレゼンテーションツールを作るとどうなるかを再構築した。Google Slidesが実用主義的に感じられ、PowerPointが企業的に感じられる中、Pitchはフルブリードのパープルグラデーションヒーローに浮遊する3Dガラスシェイプを配して開幕する——プレゼンテーションのあるべき姿について明確な主張を持つプロダクトであることを即座に示している。

重要なポイント

  1. アクセントではなく、ステージとしてのパープル - ほとんどのブランドは自社カラーをボタンのティントとして使う。Pitchはヒーローセクション全体の環境としてパープルを使い、プロダクトデモンストレーションを兼ねたシアトリカルなオープニングを作り出している。
  2. 極太ウェイトの確信がオーソリティを伝える - 800ウェイトの見出し（ほぼすべてのSaaS競合より太い）は、プロダクトのポジショニングに対するためらいのなさを伝えている。
  3. 2速タイポグラフィがリズムを生む - line-height 1.0の密度の高い太い見出しに続く、line-height 2.0のゆったりとした本文テキストが、「注目を引く」と「じっくり読ませる」の間にドラマティックな緩急を生み出す。
  4. カスタム書体は競争上の堀になる - Eina01のジオメトリックな柔らかさはシステムフォントでは再現不可能であり、Interを使うすべての競合を没個性的に見せる。
  5. テンプレートファーストのオンボーディングが白紙の恐怖を解消する - テンプレートギャラリーが玄関口となり、ユーザーが何かを作り始める前に「良いもの」の基準を示す。

Pitchが重要である理由

Pitchは、生産性ソフトウェアがそれ自体の生成物と同等の視覚的クラフトを持てることを証明した。出力物とまったく異なる外見のツールが支配するカテゴリーにおいて、Pitchは自ら実践している：そのマーケティングサイト自体がプレゼンテーションであり、プロダクトのテンプレートギャラリーはすべてのユーザーの出力物を向上させるクオリティ基準を設定している。

主な成果： - Wunderlistチーム（Microsoftが買収）によって構築され、コンシューマーグレードのデザイン感覚をB2Bソフトウェアに持ち込んだ - デザイン要素としてのカーソル表示によるリアルタイムマルチプレイヤーコラボレーションを先駆け、単なる機能ではなくデザインの一部とした - 複雑さを増すのではなく、ユーザーをより高品質な出力に導くブランド準拠のテキストとビジュアルのためのAIアクションを導入

コアデザイン原則

1. パープルステージ

ヒーローグラデーションは色付きのセクションではない——プレゼンテーションのステージである。鮮やかなパープルグラデーションがビューポート全体を満たし、光を受けて輝く半透明の3Dガラスオブジェクトが配置され、Pitchのマテリアル、奥行き、コンポジションへの理解を示している。プロダクトはプレゼンテーションであることで自らを売り込む。

ヒーローの下では、セクションがクリーンな白い背景と温かみのあるチャコールテキスト（rgb(43,42,53)）に移行する——ブランドアイデンティティに対して厳しいコントラストを作るのではなく、調和するような微妙なパープルのアンダートーンを持つカラーである。

┌─────────────────────────────────────────┐
│  ░░░░ 鮮やかなパープルグラデーション ░░  │
│  ░░░░ 3Dガラスシェイプが浮遊 ░░░░░░░░  │
│  ░░░░░ 白い太字の見出し ░░░░░░░░░░░░░  │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  │
├─────────────────────────────────────────┤
│                                         │
│  クリーンな白セクション                    │
│  温かみのあるチャコールテキスト (43,42,53)  │
│  ゆったりとした line-height 2.0 の本文     │
│                                         │
└─────────────────────────────────────────┘

2. Eina01によるモニュメンタルタイポグラフィ

PitchはEina01を制作した。柔らかく丸みを帯びたターミナルを持つジオメトリックサンセリフ書体で、すべての見出しに独特の温かみを与える。800ウェイト（極太）では、見出しは自分の素材を熟知したキーノートスピーカーの自信を伝える。

タイプスケールは2つの異なるモードで機能する。見出しは密度が高くインパクトがある：80pxのディスプレイテキスト、line-height 1.0、letter-spacing -1.6pxで、アセンダーとディセンダーが行間でほぼ接触し、単なるテキストではなくグラフィック要素を形成する。本文はその逆で——18px、line-height 2.0、非常にゆとりのある行間が、よくタイプセットされた雑誌を読むようなリラックスしたエディトリアルな質を散文に与える。

ネガティブなletter-spacingはサイズに比例して変化する：80px（-1.6px）でも42px（-0.84px）でも-2%を維持し、あらゆる見出しサイズで光学的密度を保っている。

3. 抑制されたインタInterクティブデザイン

すべてのインタラクティブ要素は、シャープな企業的エッジと遊び心のあるコンシューマー的丸みの間のスペースを占める。6pxのボタン半径は「プロフェッショナルなクリエイティブツール」を示す——気づくほどには意図的で、真剣に受け止めるほどには抑制されている。水平方向の24pxのボタンパディングは、広がりすぎることなく快適なクリックターゲットを提供する。

60pxのナビゲーションバーは意図的にコンパクトである。プレゼンテーションツールにおいて、コンテンツは常にクロームより大きく感じられるべきだ。アナウンスメントバーがナビの上に72pxのプロモーションスペースを追加し、レイアウトを圧迫しない。

転用可能なパターン

Pitchのデザインシステムは、他のプロジェクトに直接転用できるいくつかのパターンを提供している。温かみのあるチャコールのテキストカラーが最も即座に適用可能だ：rgb(43,42,53)は純粋な黒の厳しさを避けながら可読性を維持し、その微妙なパープルのアンダートーンはパープル系のブランドパレットとの統一感を生み出す。

2速タイポグラフィシステムは、インパクトと可読性のバランスが必要なあらゆるコンテキストで機能する：

:root {
  /* Pitch inspired 自信に満ちたパープルパレット */
  --color-background: rgb(255, 255, 255);
  --color-text-primary: rgb(43, 42, 53);
  --color-brand-purple: #7B2FF2;
  --color-white: rgb(255, 255, 255);

  /* Typography */
  --font-display: "Eina01", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --nav-height: 3.75rem;
  --button-radius: 6px;
  --button-padding: 0 24px;
}

/* Display headline — dense, heavy, tight */
.display {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -1.6px;
  color: var(--color-text-primary);
}

/* Section headline */
.section-heading {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.84px;
  color: var(--color-text-primary);
}

/* Body — generous breathing room */
.body {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 2.0;
  color: var(--color-text-primary);
}

/* Hero gradient stage */
.hero {
  background: linear-gradient(135deg, #7B2FF2 0%, #4A0E8F 100%);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CTA button — 6px radius, professional creative */
.button-primary {
  border-radius: 6px;
  padding: 0 24px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  background: var(--color-brand-purple);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

iOSアプリケーションでは、同じ原則がシステムウェイトマッピングとSwiftUIのleadingモディファイアを通じて変換される：

extension Color {
    static let pitchBackground = Color.white
    static let pitchText = Color(red: 43/255, green: 42/255, blue: 53/255)
    static let pitchPurple = Color(red: 123/255, green: 47/255, blue: 242/255)
}

extension Font {
    static let pitchDisplay = Font.system(size: 80, weight: .heavy)
        .leading(.tight)
    static let pitchHeading = Font.system(size: 42, weight: .heavy)
    static let pitchBody = Font.system(size: 18, weight: .regular)
        .leading(.loose)
}

struct PitchButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(.horizontal, 24)
            .padding(.vertical, 12)
            .background(Color.pitchPurple)
            .foregroundColor(.white)
            .clipShape(RoundedRectangle(cornerRadius: 6))
            .opacity(configuration.isPressed ? 0.85 : 1.0)
    }
}

デザインの教訓

青の海の中でパープルを選ぶことは報われる。 Slack、Notion、Linear、Figmaがすべてブルーを基調とする中、Pitchのパープルは即座にそれらと一線を画す。パープルはクリエイティビティとプレミアムなポジショニングを連想させる——まさにプレゼンテーションツールに必要な連想である。

ウェイト800はブランドボイスの決断である。 ほとんどのSaaSサイトは見出しに600〜700を使用する。Pitchの極太の選択は可読性のためではない——パーソナリティのためだ。このブランドは試してみることを提案するのではなく、これがそのツールだと告げる。プロダクトのポジショニングがそのレベルの主張を支える場合にのみ、重いウェイトを使用すべきだ。

ディスプレイテキストのline-height 1.0はグラフィック要素を生み出す。 アセンダーとディセンダーがほぼ接触すると、見出しはテキストとして読まれることをやめ、ビジュアルアーキテクチャとして機能し始める。これは個々の文字形が明確に識別できる大きなサイズ（60px以上）でのみ有効である。

カラーブランドでは純粋な黒のテキストを避ける。 Pitchの温かみのあるチャコール（rgb(43,42,53)）は、そのアンダートーンがパープルパレットと調和するため、ページの統一感を維持する。純粋な黒はビジュアルシステムを損なう断絶を生む。

自信を重視するブランドでは細いフォントウェイトを避ける。 Pitchが使用する最も細い見出しウェイトは800である。400の本文テキストが唯一の例外だ。300や400ウェイトの見出しを混在させると、ブランドが確立しようとする自信に満ちたポジショニングが損なわれる。

よくある質問

Pitchのデザインは他のプレゼンテーションツールとどう違うのか？

Pitchは自社のマーケティングサイトを、自社プロダクト哲学のデモンストレーションとして使っている。3Dガラスシェイプを配したフルブリードのパープルグラデーションヒーロー、800ウェイトのEina01見出し、2速タイポグラフィ（密度の高い見出しとゆったりとした本文）が、Google Slidesの実用主義的な印象やPowerPointの企業的な重さとは明確に異なるエステティックを生み出している。

PitchはSaaS製品と比べてどのようにカラーを異なる方法で使っているのか？

ほとんどのSaaSブランドはプライマリカラーをアクセントとして使う——白い背景に色付きのボタン。Pitchはこれを反転させ、ヒーローセクション全体の環境として鮮やかなパープルを使い、装飾的なタッチではなく没入的なステージを作り出している。パープルは臆することなく彩度が高く、グレーや白で薄められることはない。

Pitchはなぜそれほど太いフォントウェイトを使うのか？

800ウェイト（極太）の見出しは意図的なブランドボイスの決断である。このウェイトでは、タイポグラフィが単なるコンテンツのラベル付けではなく、確信と専門性を伝える。プレゼンテーションのあるべき姿について強い意見を持ち、その意見に自信を持つデザイナーによって作られたツールとしてのPitchのポジショニングに合致している。

デザイナーはPitchのマルチプレイヤーコラボレーションのアプローチから何を学べるか？

Pitchはリアルタイムコラボレーションのカーソルや共同編集を、単なる機能のチェックボックスではなく、ビジュアルアイデンティティの一部として扱っている。他の人のカーソルが見えることでツールに生命感を与え、チームアーティファクトの哲学を強化する。教訓は、コラボレーション機能はプロダクトが何をするかだけでなく、どう感じさせるかを形作るデザイン要素であるということだ。

参考文献