Design #1. Landing ReLand — ランディングをもう一度着地させる

永遠に通用するプロダクトデザインは存在しません。AI が猛スピードで進化している今なら、なおさらです。要件が積み上がり、コラボレーションの形がますます複雑になるにつれ、「ちょうど今、デザインを作り直すべきなのでは？」とチームは迷います。ただ、それは決して簡単なことではありません——特に、既存のランディングページを週次で回し続けながら、同時並行で新しいものを仕上げる必要があるときには。

なぜ今なのか

Zeabur の最初のランディングページが伝えるべきメッセージは一つだけでした——「私たちは従量課金のデプロイプラットフォームです」。ユーザーが CI/CD と Pay-as-you-go という 2 点を理解できれば、それで十分でした。しかしこの一年、Zeabur のプロダクトの輪郭は広がり続けました：AI Hub、Dedicated Server、Domain、Email、そして直近では Claude Code 上に載せた Skills。私たちはこれらを同じ方法でトップページに押し込み続けてきました——カードを一枚足し、紹介文を少し足し、リンクを一つ足す。一歩一歩は合理的に見えても、実際にページを最後までスクロールしたとき、それはもうプロダクトのホームには見えませんでした。どんどん物が増えていくショーケースのように——見終えることはできるのに、一貫した物語を語れない。

ユーザーがランディングページにたどり着いたときの意図も変わりました。かつてユーザーは上から下へと読んでいました——機能を見て、料金を見て、テンプレートを見る。今では、「とにかくプロジェクトを渡すから、次に何をすべきかは Zeabur に考えてほしい」という人が増えています。だからこそ、ランディングページには本当の意味での AI の入口が必要なのです。

使い捨てではなく、継続的に変えられるもの

最終的に私たちは、この作り直しを「より見栄えのよいランディングページの新バージョンを作る」こととしては計画しませんでした。作りたかったのは、これから先の変化を受け止めていけるランディングページです——つまり、今問うべきは、このバージョンがどれだけ洗練されたかではなく、半年後に次の同僚が section を一つ追加しようとしたときに、心理的な負担を感じるかどうかなのです。

これが ReLand プロジェクトの最下層にある原則でした：ランディングページは生きている、と認めること。これからも手を入れられ続けます。だから私たちは三つのことに力を注ぎました。

一つ目は、色・タイポグラフィ・ボーダーといった細かい要素をコンポーネントから引き剥がし、ひとつの CSS Variable のセットにまとめ直すこと。ライトとダーク、それぞれに token セットを定義し、html.dark で切り替えます。コンポーネントに残るのは「ブランドカラー」「アクティブ状態」「ボーダー」といった意味的な参照だけです。テーマの切り替えは、もうどこか特定のコンポーネントが特別に処理すべきことではなく、ページ全体が自然に持っている能力になりました。

LightDark

二つ目は、各 section が独立して差し替えられるようにしたこと。新しいトップページのブロックはどれも独立したコンポーネントで、section 同士は一定の視覚語彙でつながれています：上下の実線と、その間に挟まれた対角線のストライプのトランジション帯です。対角線は工事現場の注意テープのようで、見るからに「接ぎ目」にあります。私たちはそれを一枚岩に見せようとはしませんでした——むしろ、インターフェースがあり、取り替え可能に見えるよう意図的にしたのです。いつか Skills を足しても、Template を外しても、全体のリズムは崩れません。

三つ目は、AI の入口を視線の最後まで貫通させること。AIBar は追加機能のボタンではなく、ランディングページ全体の視覚的な終着点です。ユーザーは Hero から読み始め、中段で私たちに何ができるかを理解し、そして自然と CTA の上にある AIBar に辿り着きます——コードをそこに放り込めばデプロイを始められ、先にサインアップしたり、先にドキュメントを読んだり、先に Dashboard へ飛んだりする必要はありません。

新しいトップページで最も大きく変わったのは Hero です。

だから、Hero は一から描き直しました。新しい Hero の背景は完全に自作の WebGL シェーダーの層で、ライトは暖かいオレンジ、ダークは紫。テーマ切替の瞬間はハードに切り替わるのではなく、ゆっくりフェードします。ほんのわずかに揺らぐデータの海のように見えます——方向のある光、細かな文字ドットの格子、穏やかなグリッドの歪み。技術を誇示するためではありません——インフラのプラットフォームである Zeabur は、自分たちの一枚目の画面を自分たちで描けるべきだ、ただそれだけの理由です。今の Hero はとても静かです：背景は空気をつくり、tagline は判断材料を与え、AIBar と CTA は行動を促します。

この「一枚ずつ削っていく」やり方は、このプロジェクトで何度も繰り返したことです。デザイナーの直感はたいてい「もう少し足したほうが良くなる」です。より難しい判断は「この一層を取り除いたらもっと良くなるのでは？」というほうです。

信頼

今回の作り直しで、サイト全体の佇まいをほぼ書き換えてしまった決断があります——大きな角丸を捨てたことです。

旧バージョンのランディングページでは、カード・ボタン・コンテナはどれも 16px 以上の角丸を使っていました。ここ数年、大きな角丸は SaaS と消費者向けプロダクトのほぼデフォルトの言語になっていました：フレンドリーで、柔らかく、親しみやすく、UI の攻撃性を下げ、一目で「これは難しくなさそう」と思わせてくれます。新規ユーザーの好意を素早く得たい初期プロダクトにとって、大きな角丸はとても有効な戦略です。

しかし、Zeabur のユーザーが「ちょっと触ってみたい開発者」から「本番のトラフィックを載せているチーム」へと移っていくにつれ、大きな角丸は徐々に負担になり始めました。

大きな角丸は最初の印象に「おもちゃっぽさ」を残します。角丸が大きくなるほど、UI は磨かれた小石のように見えます——きれいで、無害で、手のひらに載せて遊べる。しかしインフラはおもちゃではありません。自社のプロダクション環境を預けようとしているユーザーが見たいのは、耐力壁であって、発泡ブロックではない。デザイン心理の素朴な観察があります：曲率が円に近いほど「かわいい」に近づき、直線に近いほど「まじめ」に近づく。いまの Zeabur に必要なのは後者です。

「受け止められている感」の不足。大きな角丸は、本質的に矩形の四隅を「削り落として」います。角が削られるほど、そのコンテナが収納できるように見える量は少なくなります——視覚的に「これは小さな物体だ」と示唆しているわけです。ですが私たちが見せたいのはクラスタ、プロジェクト、サーバー——どれも重量級の概念です。重いものを軽そうな容器で見せると、ずっと違和感が残ります。

開発者が毎日開くターミナル、IDE、監視パネル、クラウドコンソールで、大きな角丸で印象づけているものはほとんどありません。彼らが使っているのは、抑えめの小さな角丸（4〜8px）、きりっとしたエッジ、密度の高い情報です。Zeabur のランディングページが消費者向けの角丸でインフラの物語を語っていたとき、ユーザーの脳は無意識に私たちを「おもちゃプロジェクトのホスティング」に分類し、「本番を載せられるクラウドプラットフォーム」としては分類していなかったのです。

どの SaaS も 16px 以上の角丸と柔らかいグラデーションを使う時代、大きな角丸はもう何の情報も伝えていません——ただのノイズです。むしろ角丸を引き締め、エッジを直接ぶつけ合わせる勇気のあるブランド（Linear、Vercel、Stripe Dashboard）の方が、視覚的に自然と「大人」に見えます。

もちろん、角丸を完全に捨てるのも答えではありません。直角は別の極端な感情を持ち込みます——冷たさ、よそよそしさ、官僚的な手触り。私たちが欲しいのは、銀行のサイトのような「あなたが理解できるかなんて気にしない」という姿勢ではなく、「あなたが真剣なことをしていると知っている、私も一緒に真剣にやるよ」という姿勢です。

だから新バージョンでは、サイト全体の角丸システムをより抑制されたスケールに収束させました。エッジは明快になり、区切りはより直接的になり、対角線ストライプの鋭いエッジも同じ考え方の一部です——スクロールしていく中でユーザーが目を落とすたび、「これは真剣なプラットフォームだ、本当の業務を載せる価値がある」と伝わるようにしたかったのです。

角丸はあくまでひとつの記号です。けれど、その裏側にあるのはコミュニケーション戦略全体の方向転換です——「ぜひ試してみてください」から「受け止める準備はできています」へ。

最後に

ReLand は一度に発表しましたが、私たちにとってそれは終点ではなく、出発点です。訪問者にとって大切なのは、ページがどれほど見栄えするかではなく、始めやすくなったかどうか。私たち自身にとって大切なのは、次にまた新しいブロックを足したくなったとき、新しいテーマに切り替えたくなったとき、新しいインタラクションに応えたくなったときに、すべてをゼロから作り直さなくて済むことです。

これを通じて、ランディングページという存在そのものも考え直しました。デプロイのプラットフォームにとって、ランディングページの一番大事な指標は「どれだけ高級に見えるか」ではなく、「プロダクトを見てから最初のデプロイに至るまでに何ステップあるか」。AIBar の sticky dock はこの距離を極限まで縮めます：背景をちらっと見て、tagline を一文読んで、三画面ぶんスクロールして、プロジェクトを AIBar に放り込む。

これが「Landing ReLand」の意味するところです——ランディングページはただの展示であってはならず、それ自体がデプロイの最初のステップであるべきなのです。