サイトより先のビジュアルアイデンティティ：順番が重要な理由

要点

ビジュアルアイデンティティは、ブランドを見分けられるようにする決定の集まりです。ロゴ、色、書体、そしてそれぞれの使い方のルールです。サイトより先に来るべきなのは、サイトがほぼすべての画面でその決定を使うからです。先送りした決定は、テーマ、写真、バナー、メールのやり直しになります。分厚いマニュアルは要りません。サイトや店舗を始めるには、画面で試した小さな核があれば足ります。デザイナーとして、ネットショップでいちばんよく見るやり直しはここから生まれます。テーマが終わったあとに差し替わるロゴ、コントラストを通らない色、印刷用に選んでスマホでは重い書体です。以下では、その最小の核とは何か、各部品を画面向けにどう試すか、やり直しなしでテーマへどう渡すかを書きます。

1. ビジュアルアイデンティティとは何か、そして何ではないか

ビジュアルアイデンティティはロゴだけではありません。ロゴは一つの部品で、アイデンティティはロゴ、色、書体、写真、アイコンがどう同居するかを決める仕組みです。名前を読まなくても、Instagram、パッケージ、確認メール、商品ページでブランドを見分けられるのは、この仕組みのおかげです。

登録商標とも同じものではありません。INPIにとって、商標は「商品またはサービスを識別する名称および／または図像」です。登録はその名称や図像を守ります。ビジュアルアイデンティティは、それを日常でどう使うかです。この二つはつながっているので、商標の調査はデザインより先に来ます（第6節を参照）。

実際には、アイデンティティが決まっていないまま「サイトがほしい」と言われると、一つの依頼の中に二つの仕事が隠れます。ブランドを決めることと、サイトを作ることです。順番なしに同時に進めると、ブランドを決めるのは選んだテーマであって、会社ではありません。

ゼロからネットショップを計画しているなら、店舗づくりとECプロジェクトのページに、プラットフォーム、カタログ、連携と並んで、アイデンティティがプロジェクトのどこに入るかがまとまっています。

2. サイトを先に作ると何が崩れるか

サイトは主役に見えるので、多くの人がそこから始めます。問題は、サイトがいちばん他の部品に依存するということです。アイデンティティが後から来たときに多いやり直しは次のとおりです。

• 途中で色が変わる。 テーマは仮の色で設定されていました。本番の色が来ると、ボタン、リンク、セールの印、バナー、アイコンを見直す必要があり、いくつかはすでに画像として書き出されています。
• ロゴがヘッダーに収まらない。 看板や名刺向けの、横に長いロゴは、スマホでは極小になります。細いディテールのあるロゴは、ファビコンの大きさで消えます。
• 写真に方向がない。 背景、光、構図のルールがないと、写真のロットごとに仕上がりが違い、商品棚が別々の店を寄せ集めたように見えます。
• 書体を後から変える。 新しい書体は文字の幅を変えます。1行に収まっていた見出しが折れ、ボタンが窮屈になり、メニューがスマホではみ出します。
• バナーを作り直す。 仮のアイデンティティで作ったビジュアルは、すべて作り直しです。

どれも一つだけでは深刻ではありません。重なると、店を良くしない作業、前の決定を取り消すだけの作業に、プロジェクトの時間を使います。

お客様が気づくのは一貫性

Nielsen Norman Groupは、一貫性をユーザビリティの10のヒューリスティックの一つとして説明しています。ユーザーは、違う言葉、状況、操作が同じ意味かどうかを考えなくてよいはずです。製品の内側の一貫性と、市場の慣習との外側の一貫性を分けています。先に決めたビジュアルアイデンティティが、内側の一貫性を可能にします。同じ緑はいつも「購入」を意味し、同じアイコンの調子が至る所に出て、お客様は店を一度覚えれば足ります。

3. サイトに必要なアイデンティティの最小セット

サイトや店舗を始めるのに、アイデンティティが完成している必要はありません。テーマが聞いてくる問いに答える核が必要です。下の表は、テーマエディタを開く前に私が求めるものです。

ファビコンは、この一覧が先に来る理由の良い例です。Googleは正方形のファビコンを求め、サイトのブランドを視覚的に表すよう言っています。Shopifyは32 x 32 pxを推奨し、それより大きい画像はこのサイズに縮小します。名前を全部入れた横長ロゴは、その正方形では機能しません。シンボルを誰も描いていなければ、ファビコンは即席になります。適当な書体で名前の最初の一文字です。

後回しにしてよいもの

文具、サイン、ユニフォーム、適用マニュアル一式、ロゴのアニメーション版。どれも役に立ちますが、サイトを止めません。サイトを止めるのは、表の核です。

4. 色：画面で機能するパレット

印刷用に選んだ色が画面でそのまま使えるとは限りません。ロゴで綺麗な色が、ボタンでも使えるとも限りません。サイトで重要な試験はコントラストです。

W3Cのアクセシビリティ基準であるWCAGの達成基準1.4.3は、通常テキストに少なくとも4.5:1、大きなテキスト（18ポイントから、または太字14ポイントから）に3:1のコントラストを求めます。達成基準1.4.11は、入力欄の境界、アイコン、ボタンの状態のようなインターフェース部品に3:1を求めます。

実務上の結果は二つです。

• ブランドカラーは、白文字のボタン背景に使えないことがある。 黄色や明るい緑のような明るい色は、白文字で失敗しやすいです。コントラスト試験が、場合ごとに確認します。解決策はブランドを変えることではありません。インターフェース用にもっと暗い変種を決めるか、その色の上に暗い文字を使います。
• ロゴは免除され、ボタンは免除されない。 W3Cは、ロゴがブランドアイデンティティに従うため、コントラスト要件から免除されると明記しています。ただしロゴがクリックできるときは、W3C自身が十分なコントラストの別版を使うよう勧めています。だからアイデンティティには、明るい背景用と暗い背景用のロゴが必要です。

サイト用パレットの組み方

1. メインカラー。 白文字または黒文字とのコントラストを通る「インターフェース」版を付ける。
2. ニュートラル。 本文用のほぼ黒、境界と背景用のグレーを二つまたは三つ、全体の背景用の白またはほぼ白。
3. 通知色。 成功、エラー、警告。メインカラーと喧嘩しないこと。ブランドが赤なら、エラーの赤は混同しないくらい違う必要があります。
4. 組を一つずつ試す。 文字と背景の組を、テーマに入れる前にコントラストの道具で確認する。

これから店舗を開く予定で、ブランドがまだ決まっていないなら、使うつもりのプラットフォームと、すでにあるロゴと色を送ってください。サイトを止めるものと、後回しにしてよいものをお伝えします。

プロジェクトを相談

5. タイポグラフィ：書体は少なく、ウェイトも少なく

書体はアイデンティティであると同時に、表示速度でもあります。ファミリーもウェイトも、ブラウザが文字を正しく出す前にダウンロードするファイルです。

Googleのweb.devは、規則をこうまとめています。いちばん速く届けられるフォントは、サイトが最初から要求しないフォントです。同じガイドは、テキストを遅らせるとページの読み込みが遅れ得ること、仮のフォントと最終のフォントが占める場所が違うと、入れ替えがレイアウトを押し出し得ることを説明しています。WOFF2形式はWOFFより30%圧縮が良いとも記しています。

アイデンティティでは、これが三つの決定になります。

• ファミリーは一つまたは二つ。 四つにはしない。見出し用と本文用を分けるか、一つのファミリーでウェイトを変える。
• ウェイトは少なく。 レギュラー、ボールド、場合によって中間を一つ。イタリックも追加のウェイトも、ファイルが一つ増えます。
• 本文の書体は小さい画面向けに。 見出し用の、とても狭い書体や装飾的な書体は、バナーでは良く見えて、小さい文字の分割払い価格では読めなくなることがあります。

ウェブで使うライセンスがある書体を選んでください。印刷用に買ったフォントが、サイトでの使用を含むとは限りません。アイデンティティを固める前に、条件を確認します。

6. 描く前、公開する前に商標を調べる

ロゴ、ドメイン、パッケージ、サイトに投資する前に、その名前を使ってよいかを知る価値があります。INPIの基本ガイドは、登録の最初の手順として、既存の商標の調査を置いています。登録は、名義人に全国土での独占使用権を与え、10年有効で、同じ期間の更新ができます。

デザインにとって順番が重要な理由は単純です。同じ分野ですでに登録された商標と名前が衝突すると、その上に描いたものは変わる必要が出ます。ロゴ、ドメイン、SNSのプロフィール、看板、サイト全体です。先に調べるのは短い時間で済み、店が公開されたあとにアイデンティティをやり直すことを避けます。

商標登録は法律の話です。ここでのデザイナーの役割は、この段階が存在し、重い視覚作業の前に来るのであって、後ではない、と思い出させることだけです。

7. マニュアルからテーマへ：設定になる決定

アイデンティティが決まるのは道の半分です。残りの半分は、決定をサイトへ運び、ページごとに手でコピーするのではなく、いつも同じように適用されるようにすることです。

テーマの全体設定

Shopifyでは、テーマ設定に色（テーマによってパレットまたはカラースキーム）、タイポグラフィ、ロゴ、ファビコン、ソーシャルがまとまり、変更はストア全体に効きます。これは第3節の表の核そのものです。アイデンティティが完成して届くなら、この設定は最初に一度だけで、テーマのすべてのセクションが同じ色と書体を継承します。後から届くなら、誰かがばらばらのセクションに手で入れた色と書体を探すことになります。

他のプラットフォームやオーダーメイドのサイトにも、名前は違っても同じ考え方があります。TrayとShopify：HTML、テーマ、連携の限界の記事は、テーマをどこまで触れるかがプラットフォームごとにどう変わるかを示しています。

デザイントークン：コードが読める形のアイデンティティ

デザイントークンとは、デザインの決定をデータとして保存した名前です。「メインカラー＝この緑」「見出し書体＝このファミリー」「角の半径＝この値」。開発者がマニュアルのPDFから色のコードをコピーする代わりに、トークンの名前を使います。あとで色を変えるのは、一つの値を変えることになります。

W3CのDesign Tokens Community Groupは、2025年10月に、ツールと製品のあいだでデザイン決定を運ぶための、JSONの共通トークン形式の最初の安定版を公開しました。小さな店舗には遠く聞こえるかもしれませんが、考え方は大きさに関係なく成り立ちます。アイデンティティは、綺麗なパレットの画像としてではなく、色と書体のそれぞれに明確な名前を付けてデザインから出るべきです。

開発者に渡すもの

• ベクター（SVG）のロゴ。横長版とシンボル。明るい背景用と暗い背景用。
• 名前とコードの付いた色の一覧。メインカラーのインターフェース版を含む。
• 書体の名前、使うウェイト、ウェブ用ライセンスでダウンロードする場所。
• 写真の方向が分かる参考写真を二、三枚。
• 適用済みのボタン、入力欄、カードの例。誰も推測しなくてよいように。

8. 両方を同時に進めてよい場合

すべてのプロジェクトに、アイデンティティ全体を先に終える時間があるわけではありません。開店日が決まっていることもあります。商品を確かめてからブランドに投資したいオーナーもいます。同時に進めてよい条件は二つです。

1. 第3節の核が先に来る。 簡単でもよい。仮のロゴでも、横長版とシンボルがあること。コントラストを試したメインカラーが一つ。書体ファミリーが一つ。残りはあとから育てられます。
2. すべては全体設定とトークンから入る。 アイデンティティがあとで変わっても、変更は一箇所で起き、ページごとではありません。

機能しないのは、「とりあえずどの色でも」を手でばらまいてサイトを描き、あとからの差し替えは速いと期待することです。速くありません。速度も関係します。重いコーポレートサイトが相手なら、ヘッドレスWordPressとコーポレートサイトの速度の記事が、テーマと書体の選択が読み込みのどこに効くかを示しています。

よくある質問

サイトを先に作り、ビジュアルアイデンティティは後からでよいか

できますが、支払うのはやり直しです。色、書体、ロゴ、写真はサイトのほぼすべての画面に出て、あとから変えるということは全部を見直すことです。期限が厳しいなら、テーマを設定する前に、少なくとも最小の核（横長ロゴ、シンボル、試験済みのメインカラー、書体）を決めてください。

サイトに必要な色はいくつあるか

決まった数はありません。サイトが機能するには、コントラストを通るインターフェース版のあるメインカラー、文字、背景、境界のためのニュートラル、成功、エラー、警告の通知色が必要です。

ロゴはコントラスト検査に通る必要があるか

W3Cは、ロゴをWCAGのコントラスト要件から免除しています。ただしロゴがリンクであるときは、十分なコントラストの別版を使うよう勧めています。だから、明るい背景用と暗い背景用のロゴを持っておく価値があります。

ファビコンのサイズはどれくらいか

Googleは正方形のファビコンを求め、48 x 48 pxより大きいことを勧めています。Shopifyは32 x 32 pxを推奨し、それより大きい画像は縮小します。実務では、とても小さくしても読める単純なシンボルを描きます。

サイトを作る前に商標登録は必要か

サイトを持つために登録は必須ではありません。ただしINPIでの商標調査は、アイデンティティとサイトに投資する前に来るべきです。名前に衝突があれば、その上に描いたものは変わる必要が出ます。登録そのものについては、法律の助言を求めてください。

結論

ビジュアルアイデンティティがサイトより先なのは、サイトがいちばんそれを繰り返す場所だからです。すべてのボタン、すべての価格、すべてのバナー、すべてのメールです。画面向けに試した小さな核（二つの版のロゴ、シンボル、コントラストのあるメインカラー、少ない書体、写真の方向）だけでも、やり直しの大部分を避けられます。ネットショップを開く予定で、ブランドとプラットフォームをまだ決めているなら、何を売るか、すでに持っているブランド、必要な期限を送ってください。先に店舗づくりとECプロジェクトの進め方を見てください。まだShopifyストアを作っていないなら、作る前にご相談ください。ストアは開発ストアとして生まれ、完成した状態で組まれ、あなたの名義に移されます。

プロジェクトを相談