超重要!Webデザインではデザインルールを決めよう

デザインルール

今回はWebサイトデザインの制作時に必ず設定しなければいけないデザインルールについて解説します。
このデザインルールは「思うようにデザインできない」「どうレイアウトしてもダサく感じる」など、
ほとんどのデザイン初心者が直面する悩みの解決に直結しています。

Webサイトのデザインルールを定めることは、一貫性のある見た目とUX(ユーザー体験)の質を向上させるために重要です。
デザインルールには、色、フォント、レイアウト、余白、画像など、様々な要素が含まれます。

デザインルールとは

デザインルールとは、デザインを作成する際に守るべき一連の規則やガイドラインのことで、
デザインの統一性や、ユーザーの使いやすさを確保するために設けられ、具体的には以下のような要素に関するルールが含まれます。

デザインルールの要素

要素	詳細
配色	ベースカラー、メインカラー、アクセントカラー、 テキストカラー、リンクカラーなど、 デザインで使用する配色に関するルール。
タイポグラフィ	フォントの種類、サイズ、太さ、行間、トラッキングなど、 文字に関するルール。
レイアウト・余白	要素間の間隔や配置に関するルール。
UIパーツ	アイコン、ボタン、入力フォームなど、 UI(ユーザーインターフェース)要素に関するルール。

デザインルールはWebサイトやアプリのデザイン、印刷物、製品デザインなど、様々なデザイン分野で適用されます。
デザインルールは、デザインの目的やターゲットユーザーに合わせて柔軟に設定する必要があり、
また時代や技術の変化に合わせて、継続的にルールの見直しを行うことも重要です。

デザインルールの作成プロセス

次に、デザインルールの作成プロセスは以下のようになります。

1. デザインコンセプトの決定
2. パーツごとのルール策定
3. コンポーネント化
4. デザインガイドラインの作成・共有
5. 継続的な見直し

1. デザインコンセプトの決定

まず、デザインの方向性やコンセプトを明確にすることで、デザインルールの基礎を築きます。
Webサイトの目的・役割やターゲット層、ブランドイメージなどを考慮し、デザインの方向性を明確にしておきましょう。

目的・役割

Webサイトには必ず目的や役割があり、デザインコンセプト決定のキーになります。
例えば、採用活動・情報発信・顧客獲得・信頼性向上・販売促進などです。

ターゲット層

そのWebサイトが主に誰に見てもらいたいか、つまり、想定される訪問者層のことです。年齢・性別・職業・興味関心・ライフスタイルなど、様々な要素を組み合わせて定義されます。ターゲット層を明確にすることで、効果的なWebサイト制作やコンテンツ作成、マーケティング戦略に繋がります。

ブランドイメージ

Webサイトにおけるブランドイメージとは、ユーザーが企業や製品に対して抱く総合的な印象やイメージのことです。「高級」「信頼がある」「親近感がわく」など、連想するブランドの価値観を象徴するものです。

2. パーツごとのルール策定

次に、ページの構成をもとに作る構成案「ワイヤーフレーム」をベースに、具体的な要素に対して、
パーツごとのルール(フォントの種類やサイズ、色使い、レイアウトの基本原則、余白のサイズなど)などを定義します。

具体的には、8の倍数ルール(余白や要素のサイズを8pxの倍数で統一する)や、
メリハリを出すための配色(メインカラー・ベースカラー・アクセントカラー)の活用、
使用するUI(メールアイコン・電話アイコン・ボタン・入力フォームなど)のデザイン一貫性などを考慮します。

ワイヤーフレーム

ワイヤーフレームとは、Webサイトやアプリケーションの設計図であり、画面のレイアウトやコンテンツの配置を、線や図形を使ってシンプルに表現したものです。
デザインや詳細なビジュアル要素は含まれず、主に構造と機能に焦点を当てます。

8の倍数ルール

8の倍数ルールとは、WebデザインやUIデザインにおいて、要素のサイズや間隔を8の倍数(8px・16px・24px・32px・・・)で統一するデザイン手法です。このルールを適用することで、デザインに一貫性が生まれ、見た目が整って見える効果があります。また、レスポンシブデザインにも対応しやすく、様々なデバイスのモニターサイズの横幅が8の倍数であるため、綺麗に表示できるという非常に大きなメリットもあります。
なおすべてが8の倍数ではなく、12や20など4の倍数で作る場合もあります。

参考:8の倍数ルールでデザインする理由とメリット・デメリット | Blog | Yuya Kinoshita

3. コンポーネント化

次は、ヘッダーやグローバルナビゲーション、フッターなどの複数のページで利用するパーツをコンポーネント化して、一度作ったパーツを複数回作ることなく、デザインやコーディングの手間を省きましょう。

コンポーネント

コンポーネントとは機能を持つ各パーツ(部品)の集合体であり、Webサイトの場合はWebページを構成する再利用可能な部品のことです。
例えば、ヘッダー・フッター・ナビゲーション・ボタン・入力フォームなどがコンポーネントとして挙げられます。これらのコンポーネントを組み合わせることで、Webサイトを効率的に構築・管理できます。
コンポーネントは一度作成すれば、複数のページで使い回すことができます。これにより、開発効率が向上し、サイト全体のデザインの一貫性を保つことができます。

4. デザインガイドラインの作成・共有

ルールを定めたら、設計したルールをドキュメントに落とし込んでデザインガイドラインとしてまとめます。
チームで共有することで、デザイン作業を効率化し、運用をスムーズに進めることができます。

デザインガイドライン

デザインガイドラインとは、Webサイトやアプリ開発におけるデザインの一貫性を保つためのルール集です。具体的には、色・フォント・レイアウト・UIパーツ・アイコンなど、デザインに関する様々な要素のルールを定義します。
これにより、デザインの統一感を出すだけでなく、開発効率の向上やブランドイメージの統一にも繋がります。

デザインガイドラインは以下のデザインルールテンプレートのようなパッと見てわかりやすい状態にしておくと、
チーム内で共有をした際に、齟齬などが最小限になるため、認識違いなどを防ぐことができます。

デザインルールテンプレート

5. 継続的な見直し

デザインルールの継続的な見直しとは、一度策定したデザインルールをそのままにせず、
状況の変化に合わせて定期的に見直し、改善していくことを指します。

これはWebサイトやアプリケーションの成長、ユーザーニーズの変化、技術の進化などの様々な要因によって、
デザインルールが陳腐化したり、最適でなくなったりする可能性があるため、常に最適なデザインを維持するために重要です。

デザインルールを決める主なメリット

すでに前述していますが、デザインルールを決めて制作を進めると以下のようなメリットがあります。

デザインの一貫性・統一感の向上

サイト全体で見た目と雰囲気に統一感や一貫性のあるデザインを実現でき、
UX(User Experience:ユーザー体験)の質を向上することができます。
ユーザーが分かりやすい、使いやすいと感じるWebサイトを構築することが本来の「Webデザイン」です。

制作効率の向上および開発期間の短縮

フォント、色、レイアウト、余白などのルールを定着させることで、
デザイナーや開発者の作業時間が短縮され、生産性や作業効率が向上します。
また、コンポーネント化により、開発期間を短縮できます。

保守・更新の容易さ

デザインルールに従って制作されたサイトは、ルールをもとに保守作業を行うことができるため、
変更や更新がスムーズに行えます。

チーム間のコミュニケーション・連携の円滑化

デザインルールを共有することで、チーム間のコミュニケーション・連携が円滑になり、
スムーズに作業を進めることができます。

デザインルールの具体的な要素

ではデザインルールの要素、主に上記「2. パーツごとのルール策定」の内容を、項目別で具体的に見ていきましょう。

配色

• ベースカラー、メインカラー、アクセントカラー、テキストカラー、リンクカラーを決め、配色を統一する。
• Webサイトのブランドイメージに合った色使いを心がける。
• クリック時やホバー時のリンクカラー、ボタンの色などはユーザーに分かりやすい色使いを心がける。
• アクセントカラーを効果的に使い、メリハリを出す。
• 全ての人が快適に使える色の組み合わせにする(カラーユニバーサルデザイン)

色に関しては、以下のWebサイトを参考にすることがとても有効です。

• Color Hunt – Color Palettes for Designers and Artists
• Color Palette Generator – ColorDrop

Figmaでのデザイン制作時には配色を色スタイルに登録しましょう。

[Figma] 09 Figmaで色スタイルをライブラリに登録して再利用する方法

タイポグラフィ

• メインフォントとサブフォントを決め、見出し、本文、ボタンなどのフォントサイズを定義する。
• 読みやすいフォント(ゴシック体、明朝体など)を選び、視覚的に心地よいフォントの組み合わせにする。
• 8の倍数ルールを参考に、フォントサイズを統一する.
• フォントの明暗比(WCAGの基準など)

Figmaでのデザイン制作時にはフォント関連指定をテキストスタイルに登録しましょう。

[Figma] 10 Figmaでテキストスタイルを登録して再利用する方法

レイアウト・余白

• レイアウトの基本構造(グリッド、余白など)を定義する。
• 8の倍数ルールで要素のサイズや余白のサイズを統一し、視覚的に整然とした印象を与える.
• 余白(マージン・パディング)のルールを決め、要素間の距離を統一する。
• レイアウトの基本原則(近接、整列、強弱、反復)を意識して、情報を整理しやすくする。
• 画像のサイズや配置・位置をルールとして定義し、一貫性を持たせる。
• モバイルフレンドリーなデザインを心がけ、レスポンシブデザインを考慮する.

UIパーツ

• アイコンのデザイン一貫性を守り、種類やスタイルを統一感のあるデザインにする。(例:線アイコン、フラットアイコン)
• アイコンのサイズや配置、色のルールを定義する。
• ボタンのデザイン、動き
• フォームのデザイン
• ナビゲーションのデザイン
• コンテンツの配置
• ページの構成

まとめ

いかがでしたか?
デザインルールを決める目的として最も重要なのは、UX(ユーザー体験)の質の向上ですが、
むしろデザインを制作する側が迷わないためにも非常に重要です。

もしデザインに勝ち負けがあるとしたら、どれだけ無意識で使わせることができるかで勝敗が分かれます。
ユーザーが意識せず使うことができるようにするためには、制作する側が考えに考え抜くしかありません。