066 ホームページのデザイン四大原則(その2)

さて今回は、前回に続いて「ホームページのデザイン四大原則」をご紹介します。

デザインの４大原則は、以下の４つです。

前回はその中から「近接」と「整列」についてご紹介しました。

続いて残りの「強弱」「反復」について見ていきましょう。

「強弱」は、情報に優先度をつけて、はっきりと違いをつけることです。「コントラスト」「メリハリ」とも言われます。

すべての要素が同じように並んでいるだけだと、どこから読めばいいかわかりません。

また、全部目立たせてしまうと、全部目立ちません。

重要な情報をしっかり認識してもらうために、「はっきりと」違いをつけることが大切です。

たとえば、以下のデザインサンプルを見てみましょう。

▼【NextCms】デザインサンプル　料理教室

向かって右側にあるオレンジ色の背景のキャッチコピー部分に目が行きます。

その中でも「秋期講座」「特別講座」という箇所に目が行ったのではないでしょうか？

一番目立たせたい部分に、はっきりと大胆に違いをつけると、メリハリがつき、重要な情報が分かりやすくなります。

強弱をつけるには主に以下の方法がありますので試してみてください。

【工房ほーほ～】のＣＭＳ【NextCms】では、メリハリのついたパーツ(見出し、画像、ボタン、リンクetc)をご用意しています。

タイトルや誘導リンクなどの目立たせたい部分は、予め文字を大きくしていたり、色を変えていたり、など工夫を凝らしています。

各パーツを配置しただけでも、メリハリのついたデザインが簡単に作れるので、「デザインが苦手……」という方にもおすすめです。ご興味ある方は、ぜひ弊社ＣＭＳをご覧ください。

「反復」は、特徴的なポイントを意識して繰り返し使うことです。

見出しデザインやアイコン、モチーフ、色使いなどの要素を、サイト内の随所で繰り返し使って、デザインに一貫性を持たせます。

以下のデザインサンプルを見てみましょう。

▼【NextCms】デザインサンプル　造園業

このサンプルでは「花」がモチーフとなっており、メインエリアのバナーやアイコンなど随所で、花のモチーフが使われています。

このようにサイト内の全ページを通して統一することが重要です。

サイト内にまったく違うアイコンや色使いのページが１ページあると、違うサイトのように見えます。ユーザーに「あれ？違うサイトに移動したかな？」と不安を与えてしまうので、統一感を意識して「一貫性」を持たせてみてください。

【NextCms】のＣＭＳのテンプレートは、ＷＥＢデザイナーが統一感を意識してデザインしています。

難しく考えなくても、簡単に一貫性を出せるので、これからホームページを作成しようという方はぜひ一度弊社サービスもご検討ください。

以上、「ホームページのデザイン四大原則」をご紹介しました。

この４大原則に共通しているのは「読み手にわかりやすいデザイン」を意識して工夫している点です。

ルールを意識しつつ、ユーザーの視点でわかりやすいかをチェックしてみてください。

事例としてご紹介した【NextCms】のデザインサンプルは、以下のページからご覧いただけます。

他にも多数のデザインを掲載しました。今なら今月追加されたばかりの新しいデザインも掲載していますので、４大原則に着目してぜひご覧くださいね。

▼【NextCms】デザインサンプル
http://www.cms-hp.com/design/