Before/After: Clonesiteのランディングページを「ツール」から「ブランド」に変えた方法

機能するページと、覚えてもらえるページは違います。

以前のClonesite landing pageは、製品説明も手順もあり、conversionもしていました。ただ、ツールっぽく見えました。そこで、ページ全体の視覚言語を作り直しました。

出発点: 明快だがツールっぽい

最初のversionは、緑がかったhero、太いsans-serif headline、sectionごとのグレー背景で構成されていました。情報はありましたが、identityがありませんでした。

1色のアクセントとセリフ体

Before: 緑がaccentにも背景のmoodにも使われていました。

After: #4f66d8のindigoだけを、headline、link、primary button、focus stateに使いました。

さらに、見出しをLibre Baskerville、本文をInterにしました。hero headlineは2拍に分かれます。

Clone any website from a URL. Yours to edit and export.

余白と実物の証拠

グレーのsection背景を減らし、白いeditorial canvasを基本にしました。強い暗色帯は1つだけ、技術的な主張を支える場所に残します。

また、badgeで説明するのをやめ、ブラウザframeに実際のclone previewを出しました。編集可能と言うより、編集できるものを見せるほうが伝わります。

ページではなくシステムにする

一番大きな変更は、1枚のscreenでは見えません。色、type、spacing、dark band、glowをtokensとshared componentsにしました。

だからpricing、gallery、FAQ、footerまで同じブランドとして見えます。1ページだけ整えるのではなく、次のページにも継承される仕組みにしたことが重要でした。

同じworkflowを使う

1. 視覚言語が好きなサイトを探す。galleryには学習用のcloneがあります。
2. Clonesiteでcloneし、screenshotではなく編集可能なsourceを得る。
3. 色、書体、contrast、余白の判断を読む。
4. その判断を自分の内容に適用する。
5. logo、copy、image、claimをすべて自分のものに置き換える。
6. codeをexportして公開する。

cloneは白紙をなくします。ブランドにするのは、その後の判断です。