美しいWebサイトには、決まって整合性があります。
整合性とは、つじつまが合っていること、矛盾なく整っていることです。つまり、バランスがいいということです。Webサイト内のそれぞれのパーツの場所、並び、大きさなど、あらゆるものに整合性があるため、人々は美しいと感じます。
本記事では、どうすれば整合性のとれたトップページを作れるのか、バランスを崩しやすい要因を6つ事例として紹介します。より美しいWebサイトに近づけるため、ぜひご一読いただけますと幸いです。
美しいWebサイトにおける整合性とは
Webサイトにおける整合性とは、全コンテンツが一貫したルールに基づいて構成されているかの基準です。
そのルールをつくるのは設計者。つまりウェブデザイナーです。ウェブデザイナーの脳内にある構想や思想、感性に基づいて、ルールは自ずと生まれていくもの。言い換えれば、思想のないデザイナーが作ったウェブデザインには、ルールも生まれません。
違和感のないデザインほど、設計者の作成したルール下でデザインされ、それぞれのパーツが矛盾なく置かれてある。違和感がないからこそ、人々は美しいと感じるものです。
手前味噌ですが、TCDテーマはすべてのマージンが計算して設計されていますが、そこから全体の整合性に繋がっていっているという感じです。
>> TCDデモ例1： FORCE
>> TCDデモ例2： Beyond
ですから、本稿では整合性を失うことなく綺麗なトップページがつくれるよう、悪い例・良い例を並べて解説していきます。
TCDテーマを使っているのに
バランスが悪くなってしまう例6選
多くのTCDテーマは、コンテンツ間のマージン（スペース）やフォントや配色の設定などをあらかじめ制限しており、整合性のある美しいデザインを誰もが再現できる仕様になっています。
ですが、設定方法や使い方によっては少し惜しい形になってしまうときがあります。
例えば、文字のサイズに統一感が無く、一部の配色が明らかに浮いていたり、各所のコンテンツ量がバラバラになっている場合です。TCDテーマを使う場合は、次の点に注意するだけでより整合性のある美しいサイトに仕上がるので、ひとつずつ解説していきます。
- フォントサイズ・タイプがバラバラ
- 使う色が多すぎる or 相性が悪い
- 見出しの一行あたりの文字数が多すぎる
- スマホで見た際に改行位置がおかしい
- 隣接コンテンツと行数が異なる
- 同パーツなのにボリュームがバラバラ
1. フォントサイズ・タイプがバラバラ
まずはフォントサイズやタイプを確認しましょう。全体を通してルールを守っているかが重要です。
- 悪い例
- 良い例
各所のフォントやサイズがバラバラ
各所のフォントやサイズが揃っている
参考TCDテーマ：Beyond
わずかな差のようですが、悪い例では各所のフォントのサイズやタイプがバラバラです。また、最上部に表示されている見出しが、ページ下部の見出しよりも小さくなってしまっています。
サイトデザインにもよりますが、基本的に大中小のフォントサイズを決めておき、設置する箇所によって使い分けると整理しやすいです。フォントタイプは、基本的に全箇所共通の方が整合性はとりやすいです。
多くのTCDテーマでは然るべき箇所は一括でフォントのタイプやサイズが変わる仕様ですが、フリースペースで追加されたコンテンツや画像内のテキストには、テーマの共通設定が反映されません。
そのため、サイト全体のフォントサイズやタイプを一定のルールに当てはめてチェックするのがオススメです。例えば、次のようなイメージです。（）内は文字のサイズです。
- トップ&下層ページのヘッダー見出しのフォントサイズを同じにする（大）
- ヘッダーより下の各見出しは一回り小さくする（中）
- 本文のサイズと各所の説明文等のサイズは同じにする（小）
- フォントタイプはゴシック体で統一
バナーなどのオリジナルコンテンツを設置する際も上記のようなルールに従って制作します。あえて見出しのみのフォントタイプのみを変更するなどのアレンジもありですが、全見出しのフォントタイプを変更しなければ整合性が欠けてしまう点に注意しましょう。
2. 使う色が多すぎる or 相性が悪い
サイト内の配色もWebサイトの整合性に影響します。色数は少ない方が整合性をとりやすいです。
- 悪い例
- 良い例
各所のカラーに統一性がない
各所のカラーが統一されている
参考TCDテーマ：CURE
上記の悪い例では、各所のカラーが統一されておらず、煩雑な印象です。重要な部分の文字色を変えたり、アンダーラインを引いても目立たせることができなくなっています。
複数の配色を使う場合の注意点
ウェブサイト内に様々な色をカラフルに使いたい場合、次の2パターンのどちらにするかで色の決め方も違ってきます。
- 同系色の場合
- 相配色の場合
同系色の場合
同系色でまとめる場合、まず最初にキーカラーを決め、そこからサブカラーを決めると良いでしょう。同系色でサブカラーを決めるやり方は、比較的カラーセンスが問われないため、初心者にはおすすめです。
- メイン： #58b4e3■
- サブ： #4ba5c8■ #347791■
相配色の場合
同系色ではなく、色んな色を組み合わせたい場合（相配色・反対色）、カラーセンスが問われます。
- メイン： #3d8a8c■
- サブ： #2e5f17■ #80170e■ #1e4b64■
身近なデザイナーに相談するのが一番良いですが、いない場合は配色ツールを参考にすると良いでしょう。
あなたは色を決める時、どのように検討を重ねているでしょうか。そして何を決め手に最終的な配色を決定しますか？この記事では配色を検討する時に便利なツールとなんか垢ぬけない印象の配色となってしまいがちな理由について書いていきます。日々のヒントとして参考にしていただけたら嬉しく思います。 カラ...
3. 見出しの一行あたりの文字数が多すぎる
各所のコンテンツ量にある程度一定にすることで整合性のあるサイトになります。以下の悪い例をスクロールすると、ページ全体を通してばらつきがあることがわかります。
- 悪い例
- 良い例
コンテンツの幅が広すぎたり、文章量が偏っている
コンテンツ幅や文章量が一定に保たれている
参考TCDテーマ：TENJIKU
良い例では、すべての見出しと各所の説明文のボリュームが一定になっています。下層ページのヘッダーの文章量も全ページで一定です。
4. スマホで見た際に改行位置がおかしい
文字数を調整した際は、スマホでの見え方も併せて確認しておきましょう。PCで綺麗に調整しても、スマホでは次のようになってしまっていることがあるからです。
- 悪い例
- 良い例
参考TCDテーマ：FALCON
PC用に調整したテキストがそのままスマホで表示されるため、改行位置がおかしくなったり、ボリュームが多すぎたりするんですよね。TCDテーマにはスマホ用テキストの入力欄があるので、それらを利用して適切なバランスに調整しておくのがオススメです。
スマホ用の入力欄が無い場合は、改行位置を変更して対応するのもありです。
スマホからWEBサイトを閲覧することはもう当たり前です。 サイトを制作する側も、スマホからの見え方を必ず意識する必要があります。WordPressを活用する際もレスポンシブ対応のテーマを使って終わりではありません。デザインや大枠の部分は最適化されて表示されても、テキスト部分はどうでしょうか？変...
5. 隣接コンテンツと行数が異なる
次のような横並びのコンテンツもボリューム（行数）を均一にしておくと綺麗ですよね。段違いになるだけでバランスが悪い印象を与えます。
- 悪い例
- 良い例
参考TCDテーマ：HORIZON
6. 同パーツなのにボリュームがバラバラ
下記のような対を成すレイアウトでもコンテンツ量を同じぐらいに揃えると綺麗にまとまります。
- 悪い例
- 良い例
参考TCDテーマ：DROP
一文字単位で完璧に揃える必要はありませんが、極端にばらつきがあったり、文字が占める領域が揃っていない場合に整合性を乱してしまいます。
見落としがちで差が出やすい部分でもありますので、綺麗に調整しておくのがオススメです。特に横並びのデザインや、対を成すようなレイアウトではコンテンツ量を一定に保つように意識するとバランスが整います。
まとめ
美しいWebサイトは大枠のレイアウトが美しいのはもちろん、細部まで調整されているものです。一見綺麗なサイトでも細かい部分の整合性がなければ、どこか違和感を感じてしまいます。
TCDテーマをお使いの方は、次のポイントをおさえるだけで整合性のある美しいサイトに仕上がります。
- フォントサイズ・タイプがバラバラ
- 使う色が多すぎる or 相性が悪い
- 見出しの一行あたりの文字数が多すぎる
- スマホで見た際に改行位置がおかしい
- 隣接コンテンツと行数が異なる
- 同パーツなのにボリュームがバラバラ
TCDのデモサイトはすべて微調整を加えています。フォントサイズや色数、コンテンツ量をそのまま参考にしていただければ、より美しくなるはずです。ぜひお試しください。
第1回：トップページでやってはいけないこと（当記事）
第2回：ヘッダーバーでやってはいけないこと
第3回：フッターでやってはいけないこと
コメント