Webサイトのデザインを統一するには？見出し・ボタン・カードのルールの作り方

同じ役割と、分けるべき役割を見つける

何をそろえるかは、見た目より先に「何のために使うか」で分けます。訪問者が内容のまとまりを読む見出し、相談案内へ進むリンク、サービスの詳しい説明を選ぶカードでは、目的が違います。同じ役割が繰り返される部分を、使い回す部品として扱います。「コンポーネント」は、この部品を指す言葉です。

まず代表する二、三ページを開き、繰り返している部分を指します。ページ題名、節の見出し、案内へ進む部分、サービス一覧の一件などです。それぞれについて「何を伝えるか」「選ぶと何が起きるか」「どこへ進むか」を短く書きます。形が似ていても、役割や結果が違うなら分けます。

見出しも、会社名、ページの題名、節の題、補足の項目をすべて同じ強さにする意味ではありません。同じ階層や役割では書体・余白などをそろえ、階層が違うところは差を残します。本文を短くするために、必要な条件まで消さないようにします。

GOV.UK Design Systemの部品の説明は、再利用する画面の部分に、使い方や見本を添えています。政府サービス向けの部品一覧を、そのまま自社の必須一覧にする必要はありません。自社で繰り返し、いま困っている部分から始めます。

見出し・ボタン・カードの決め方

一つの部品に、用途・内容・動作・使う場面と例外を決め、具体的な見本を添えます。「青い角丸」だけでは、何のための部品か、何を入れてよいかは分かりません。制作担当とは、次のように話を具体化できます。

文字は、決めた言葉をそのまま使う部分と、内容ごとに変える部分を分けます。相談案内の呼び方はそろえる一方、各サービス名や行き先まで同じにするわけではありません。見本には「使う場面」と「使わない場面」を添えます。例えば、サービスを選ぶカードを、緊急のお知らせの代わりには使わない、という分け方です。

重要な操作と補助の操作の差、長い文字が折り返す場合の余白も決めます。デジタル庁デザインシステムのボタンの使い方でも、文字の長さや画面内での役割・重要度を扱っています。その制度で示す寸法・配色・配置や個数を、全企業サイトの正解値として指定するものではありません。

同じ機能を繰り返す部品は、同じものだと見分けられることが大切です。ただし、文脈に合った名前の違いまで禁止する意味ではありません。W3Cの一貫した識別の解説も、同じ機能の繰り返しと、異なる機能を区別しています。色や文言を一律にそろえただけで、サイト全体のアクセシビリティ適合を証明できるわけではありません。

短文・長文・画像なしを見本で確かめる

きれいに収まる一例だけで決めず、実際に入りそうな長さと、資料がない場合も並べます。下は、同じ架空会社の掲載例と、これから決める見本の下書きです。二つの例は修正前後ではなく、動作を試した結果でもありません。

相談案内リンク：同じ用事を、二つのページで比べる

説明図の原画を開く

図の線は、見本と使うページを照らす関係です。自動的に反映される順序ではありません。「相談内容を伝える」は、この例で検討する文字の下書きです。実際の窓口や入力・受付が使えることを認定しません。文言を決める前に、案内先の内容と対象を担当に確かめます。

サービスカード：長い題名と、写真なしを同じ場所で比べる

ここでは、写真なしでもサービス名・説明・次の案内が残る案を扱います。写真がないことをサービスがない意味にせず、代わりに他社の写真を埋めないようにします。写真を必須にしたい場合は、用意できないときの掲載方法を別に決めます。長い題名を収めるために文字を極端に小さくしたり、対象条件を切り落としたりせず、折り返しと余白を制作担当と調整します。

スマートフォンでは一列になることがあります。カードの高さをそろえるためだけに必要な説明を削らず、どのサービスの案内かを読めるかを見ます。見出し、説明、行き先の順序が残るか、画像の読み込み前後でも使えるかは、実装したページで別に確認します。

見本・使用ページ・管理元を結ぶ

見本を置く場所と、公開ページを変える場所は同じとは限りません。紙や画面上の見本を直しても、実ページが自動で変わるとは判断できません。各部品がどのページで使われ、どこを変更すると届くのかを制作担当と確かめます。

1. 使用する場所を挙げる。ページ名だけでなく、「サービス案内の下の相談リンク」のように位置と役割を残します。未調査のページを使用なしとしません。
2. 共通の管理元か、ページごとの写しかを聞く。同じ見た目でも、共通設定を参照するものと、各ページへ複製したものがあります。見本、文字、見た目、動作の管理先が分かれている場合もあります。
3. 例外と担当を決める。写真のないカード、長い題名、特別な案内など、別の扱いが必要な理由を記します。誰が内容を決め、誰が見本と実装を変更するかも分けます。

例えば、共通の文字や余白は制作担当が管理し、サービス名・説明は各ページの原稿担当が変える、といった分担があります。自社サイトが実際にこの構造かは別途確認します。「共通部品です」という回答だけで終えず、変更対象と使用ページを示してもらいます。

既存の見本が実ページと違う場合は、どちらを採用するかを内容と用途から決め、古い見本の扱いもそろえます。例外は理由を添えて残し、見本に合わないものをすべて誤りとしません。ブランド全体の改定や、大きな部品集の整備まで一度に行うことは、この記事の開始条件ではありません。

変更後に、影響する場所を確認する

管理元の変更、各ページへの反映、実際の読みやすさと動作を、別々に確かめます。作業完了の連絡だけで全ページに適用済みとはせず、変更範囲と、まだ確認していない場所を聞きます。

1. 変える目的と対象を伝える。「相談案内へ進むリンクの呼び方をそろえたい。サービス案内と会社概要で、同じ用事だと分かるようにしたい」と、場所と役割を添えます。
2. 影響するページと例外を確認する。管理元と写し、短文・長文・画像なし、狭い画面で扱いが変わる場所を挙げます。変更の範囲と戻し方は、実装担当と決めます。
3. 同じ条件で見直す。スマートフォンとパソコンで、見出し、文字の折り返し、画像なし、内容と行き先を読みます。キーボードで現在位置が分かるかも担当者が確認します。
4. 機能を確かめる。案内リンクなら目的の内容へ到達するか、操作ボタンなら意図した処理かを分けます。入力や送信が関わる場合は、許可された試験方法と結果を別に記録します。
5. 見本と使用先を更新する。確認したページ、未確認の例外、次に調べる担当を残します。公開後も、原稿や写真を変えた際に影響する部品を読み直します。

複数の色や部品を同時に変えた場合、見やすくなった理由や相談件数への影響を、この確認だけで特定できません。利用者に試してもらう場合は、実施条件と観測を別に残します。見本の統一を、全ページの操作成功や成果の保証にはしません。

まず制作案のどこが読みにくいかを整理したい場合は、Webデザインの4原則を使った制作案の見方と修正の伝え方を先に確認できます。この記事では、その一般的な見方を繰り返すだけでなく、再利用する部品ごとの仕様と、使用先・変更の影響を扱っています。

まとめ：同じ役割の二部品から始める

デザインの統一は、すべてを同じ外見にすることではありません。同じ役割の部分は見分けやすくそろえ、違う役割や必要な例外は残します。見本には、用途、必要な文字、動作や行き先、短文・長文・画像なしの条件、使う場面を添えます。

見本と使用ページ、共通の管理元や写し、変更を頼む担当を結びます。管理元を直したことと、実ページの反映・動作・公開後の確認は別に扱ってください。

困っているページと部品の場所、原稿、そろえたい理由が分かる範囲であれば、見本の整理と、実装・公開確認の範囲を分けて相談できます。実際の支援内容と料金、受付可否は個別に確認します。

Webサイトの部品と更新範囲を相談する