美しいWebサイトには、決まって整合性があります。
あるルールに従って適切な要素が綺麗に配置されているからです。そのルールから外れてしまうと整合性がなくなり、美しいWebサイトから遠ざかってしまいます。
そこで今回は、TCDテーマを使ったサイトを例に、整合性の有無による印象の違いを検証していきたいと思います。当記事を参考にデザインの整合性を図ると、より美しいWebサイトに近づくので、ぜひご一読いただけますと幸いです。
美しいWebサイトにおける整合性とは
Webサイトにおける整合性とは、全コンテンツが一貫したルールに基づいて構成されているかの基準です。
ページやサイト内の各要素のサイズや量、種類が適切で辻褄が合っている場合、整合性があるWebサイトといえます。例えば、次のようなルールがあるとします。
- 大見出しのフォントサイズは42px
- 小見出しのフォントサイズは32pxs
- フォントタイプはすべてゴシック体で統一
- 配色は黒、白、青の3色のみを使用
- 小見出しの下には、2行の説明文を配置
- コンテンツ間のマージンは70pxずつあける
ほんの一例ですが、こういったルールに基づいて構成されているサイトは、整合性があり美しいです。条件によって配置するコンテンツや要素のタイプを棲み分けているため、デザインに矛盾が生じないからです。
TCDテーマで整合性をとるためのポイント
多くのTCDテーマは、コンテンツ間のマージン（スペース）やフォントや配色の設定などをあらかじめ制限しており、整合性のある美しいデザインを誰もが再現できる仕様になっています。
ですが、設定方法や使い方によっては少し惜しい形になってしまうときがあります。
例えば、文字のサイズに統一感が無く、一部の配色が明らかに浮いていたり、各所のコンテンツ量がバラバラになっている場合です。TCDテーマを使う場合は、次の3点に注意するだけでより整合性のある美しいサイトに仕上がるので、ひとつずつ解説していきます。
フォントサイズ・タイプを統一する
まずはフォントサイズやタイプを確認しましょう。全体を通してルールを守っているかが重要です。
- 悪い例
- 良い例
Clik here to view.
各所のフォントやサイズがバラバラ
Clik here to view.
各所のフォントやサイズが揃っている
参考TCDテーマ：Beyond
わずかな差のようですが、悪い例では各所のフォントのサイズやタイプがバラバラです。また、最上部に表示されている見出しが、ページ下部の見出しよりも小さくなってしまっています。
サイトデザインにもよりますが、基本的に大中小のフォントサイズを決めておき、設置する箇所によって使い分けると整理しやすいです。フォントタイプは、基本的に全箇所共通の方が整合性はとりやすいです。
多くのTCDテーマでは然るべき箇所は一括でフォントのタイプやサイズが変わる仕様ですが、フリースペースで追加されたコンテンツや画像内のテキストには、テーマの共通設定が反映されません。
そのため、サイト全体のフォントサイズやタイプを一定のルールに当てはめてチェックするのがオススメです。例えば、次のようなイメージです。（）内は文字のサイズです。
- トップ&下層ページのヘッダー見出しのフォントサイズを同じにする（大）
- ヘッダーより下の各見出しは一回り小さくする（中）
- 本文のサイズと各所の説明文等のサイズは同じにする（小）
- フォントタイプはゴシック体で統一
バナーなどのオリジナルコンテンツを設置する際も上記のようなルールに従って制作します。あえて見出しのみのフォントタイプのみを変更するなどのアレンジもありですが、全見出しのフォントタイプを変更しなければ整合性が欠けてしまう点に注意しましょう。
色数を使いすぎない
サイト内の配色もWebサイトの整合性に影響します。色数は少ない方が整合性をとりやすいです。
- 悪い例
- 良い例
Clik here to view.
各所のカラーに統一性がない
Clik here to view.
各所のカラーが統一されている
参考TCDテーマ：CURE
上記の悪い例では、各所のカラーが統一されておらず、煩雑な印象です。重要な部分の文字色を変えたり、アンダーラインを引いても目立たせることができなくなっています。
基本的には2〜3色の同系色を選んでおくといいです。サイト全体が同系色で構成されていれば、極端にちぐはぐな印象にはならないからです。配色選びに便利なツールは下記記事でご紹介しています。
Clik here to view.
TCDテーマの場合は配色も一括変更されますが、フォント部分と同様で、オリジナルで追加したコンテンツは範囲外です。
オリジナルのボタンやバナーを追加した場合は、その配色に整合性を乱すものが含まれていないか確認しておきましょう。
また、写真を際立たせたいギャラリーサイトなどでは色数はさらに少なくするか、目立たないものにするのもありです。写真内の色数が多い場合、その他の色数を減らすことで全体の均衡を保てます。
コンテンツ量を一定に保つ
各所のコンテンツ量にある程度一定にすることで整合性のあるサイトになります。以下の悪い例をスクロールすると、ページ全体を通してばらつきがあることがわかります。
- 悪い例
- 良い例
Clik here to view.
コンテンツの幅が広すぎたり、文章量が偏っている
Clik here to view.
コンテンツ幅や文章量が一定に保たれている
参考TCDテーマ：TENJIKU
良い例では、すべての見出しと各所の説明文のボリュームが一定になっています。下層ページのヘッダーの文章量も全ページで一定です。
また、次のような横並びのコンテンツも量を均一にしておくのがベターです。段違いになっているよりピシッと揃っている方が綺麗ですよね。
- 悪い例
- 良い例
Clik here to view.
Clik here to view.
参考TCDテーマ：HORIZON
下記のような対を成すレイアウトでもコンテンツ量を同じぐらいに揃えると綺麗にまとまります。
- 悪い例
- 良い例
Clik here to view.
Clik here to view.
参考TCDテーマ：DROP
一文字単位で完璧に揃える必要はありませんが、極端にばらつきがあったり、文字が占める領域が揃っていない場合に整合性を乱してしまいます。
見落としがちで差が出やすい部分でもありますので、綺麗に調整しておくのがオススメです。特に横並びのデザインや、対を成すようなレイアウトではコンテンツ量を一定に保つように意識するとバランスが整います。
まとめ
美しいWebサイトは大枠のレイアウトが美しいのはもちろん、細部まで調整されているものです。一見綺麗なサイトでも細かい部分の整合性がなければ、どこか違和感を感じてしまいます。
TCDテーマをお使いの方は、次のポイントをおさえるだけでより整合性のある美しいサイトに仕上がります。
細部に至るまで一定のルールに沿ってコンテンツを制作していくことが肝心です。
TCDのデモサイトはすべて微調整を加えています。フォントサイズや色数、コンテンツ量をそのまま参考にしていただければ、より美しくなるはずです。ぜひお試しください。