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

デザインルール

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

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

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

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

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

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

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

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

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

具体的には、8の倍数ルール(余白や要素のサイズを8pxの倍数で統一する)や、
メリハリを出すためのアクセントカラーの活用、アイコンのデザイン一貫性などを考慮します。

3. コンポーネント化

次にヘッダーやグローバルナビゲーション、フッターなどの、複数のページで利用するパーツをコンポーネント化し、デザインやコーディングの手間を省きましょう。
※コンポーネント・・・機能を持つ各パーツ(部品)の集合体

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

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

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

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

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

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

制作効率の向上

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

開発期間の短縮

コンポーネント化により、開発期間を短縮できます。
※コンポーネント・・・機能を持つ各パーツ(部品)の集合体

保守・更新の容易さ

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

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

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

デザインルールを決める際のポイント

サイトのコンセプトや目的を明確にする

サイトの目的やターゲットユーザーを明確にし、それに合わせたデザインルールを決定します。

デザイン要素を具体的に定義する

フォントの種類やサイズ、色使い、レイアウト、アイコンなど、デザイン要素を具体的に定義し、ルールを定める必要があります。

デザインツールを活用する

デザインルールを視覚的に表現し共有するために、広く一般的に使用されている以下のAdobe社のデザインツールを活用すると便利です。

• Adobe Photoshop
• Adobe Illustrator
• Adobe XD

また最近ではWebデザインに特化した「Figma」も使い勝手がよいことに加え学習コストも高くないのでおすすめです。

• Figma

デザインガイドラインの作成

ルールをまとめたデザインガイドラインを作成し、チーム内で共有します。

継続的な見直し

デザインルールは、サイトの成長やユーザーニーズの変化に合わせて、継続的に見直しと改善を検討します。

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

ではデザインルールの要素を項目別で具体的に見ていきましょう。

フォント

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

色

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

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

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

レイアウト・余白

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

アイコン

• アイコンのデザイン一貫性を守り、種類やスタイルを統一感のあるデザインにする。(例:線アイコン、フラットアイコン)
• アイコンのサイズや配置、色のルールを定義する。

その他

• ボタンのデザイン、動き
• フォームのデザイン
• ナビゲーションのデザイン
• コンテンツの配置
• ページの構成