クローンしたWebサイトをブランドに変える5つのデザイン判断

1つのアクセントカラー、セリフ体の声、余白、実物で示す証拠、design tokens。クローンしたページをコピーっぽく見せず、自分のブランドに変えるための5つの判断です。

クローンは構造をくれます。ブランドにするのは、その後のデザイン判断です。

テンプレートっぽさとブランドらしさの差は、多くの場合、機能の数ではなく少数の視覚判断で決まります。ここでは、Clonesite自身のリデザインで使った5つの判断を紹介します。

1. パレットではなく、1つのアクセントカラー

アクセントカラーは1つに絞り、役割も絞ります。見出しの強調、リンク、primary button、focus state。その他はニュートラルに保ちます。

以前のページは緑をアクセントにも背景の雰囲気にも使っていました。新しいページでは#4f66d8のindigoだけを使います。控えめな1色は意図に見えます。何でも色づけすると、ダウンロードしたテーマに見えます。

#4f66d8を中心にしたindigoのアクセントカラースケール。

見出しをセリフ体に、本文を読みやすいsansにすると、同じプロダクトでもdashboardではなく編集者のように聞こえます。

ClonesiteではLibre Baskervilleを見出しに、Interを本文に使いました。heroの言葉も2拍に分けられます。

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

セクションごとにグレー背景を交互に置くより、白いキャンバスと1つだけ強い暗色帯を使うほうが記憶に残ります。

コントラストは少ないから効きます。全セクションが目立とうとすると、どれも目立ちません。

ページ全体の前後比較。グレーの箱が、白いキャンバスと1つの暗色帯に変わっています。

「編集できます」と書くより、実際のpreviewを見せます。

古いheroはtrust badgeで説明していました。新しいheroは、ブラウザframeの中で実際のcloneを見せ、色や書体を変えられることを示します。編集可能なコードという抽象概念が、見える成果になります。

新しいheroは、ブラウザframe内に実際のclone previewを表示しています。

色、書体、余白をtokensとして定義すると、pricing、gallery、FAQ、footerまで同じブランド感を保てます。

1ページをきれいにするだけなら簡単です。ブランドにするには、次のページにも継承される仕組みが必要です。

ここで借りているのはassetではなく判断です。色数、書体の組み合わせ、コントラストの置き方。最後に、logo、copy、画像、claimをすべて自分のものに置き換えます。

借りた判断と自分の内容ならブランドになります。借りたassetのままだとコピーであり、法的にも危険です。

最初の構造が必要なら、template galleryでStripe、Notion、Slackなどの編集可能なcloneを使えます。

クローンしたWebサイトはどうカスタマイズすればいいですか?+

アクセントカラーを1つに絞り、見出し用の書体を変え、余白を増やし、借り物の証拠を自社の証拠に置き換えます。最後に色、書体、余白をdesign tokensとして固定すると、ページ全体がブランドとしてまとまります。

Webサイトクローンをオリジナルに見せるには?+

元サイトを正確に再現し続けないことです。1つのアクセント、違う書体、自社のストーリーに必要なセクションだけを残すことで、構造は借りても印象は自分のものになります。

design tokensとは何ですか?+

色、フォント、余白、角丸などの値に名前を付けて再利用する仕組みです。単発の見た目ではなく、複数ページに広がる一貫したデザインシステムになります。

コードを書けないと編集できませんか?+

色、フォント、コピーの変更はビジュアルpreview上でできます。コンポーネント構造まで変える場合にだけ、コード編集が必要です。