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

さて、今回はホームページのデザインについてお話ししたいと思います。

現在、さまざまなツールが発達して、ＷＥＢデザイナーさんでなくても自分でホームページを立ち上げられる時代になりました。

しかし、「どうも野暮ったい」「プロのデザイナーさんの仕上がりにはかなわない」というのも事実。

私たちとデザイナーさんの違いはいったい何なのでしょうか？

センスはもちろん１つの要素ですが、いくつかの「基本ルール」をシステマティックに守っているかどうかで、大きな違いが出るのだそうです。

では、そんな基本ルールの中から、「デザイナーさんたちが守っているデザインの４大原則」をご紹介します。

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

「ホームページのデザインは、デザイナーさんに任せているから…」という方も、この４大原則を押さえておくと重宝します。

制作会社にホームページの作成を依頼するときも、デザインの基本ルールを知っていれば、デザインの問題点がわかったり、要望を的確に伝えたり、できるようになります。

ご自身でゼロからデザインを起こす訳でなくても、デザインの良し悪しの判断をつけられた方が、ホームページを作成する際には役立つので、ぜひ読んでみてくださいね。

今回は４大原則のうち、「近接」「整列」の２つを取り上げて、ご紹介していきます。

「近接」とは、関係する情報は近づけて配置することです。

情報をグルーピングして、同じグループは近づけ、違うグループの間には余白を取ります。

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

▼【NextCms】デザインサンプル　Cafe

「Lunch Menu」の下の説明文や画像、リンクバナーは見出しと近い配置になっており、「Dinner Menu」との間は大きく余白を取っています。

それによって、情報のかたまりや境目がはっきりわかります。人は位置的に近いものを「関係がある」と認識する習性があるそうです。

そのため、こうして情報のかたまりや境目を作るだけで、情報が整理され、理解しやすいデザインになります。

皆様のホームページは、どうなっていますか？見出しと本文の間、行間、画像と画像の間など、すべて均等に余白を設定していないでしょうか？

均一にしてしまうと、情報のかたまりが分からなくなってしまうので、視覚的に理解するのが難しいデザインになります。

まずは、情報のかたまりを把握すること。そして、「関係する情報は近く、それ以外は遠く」を意識した余白のとり方を心がけましょう。

【NextCms】のＣＭＳでは、あらかじめ適切な余白が設定されているので、「近接」を意識しなくても、簡単に見やすいデザインが実現できます。

「整列」とは、各要素を一定のルールに基づいて、そろえて並べることです。

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

▼【NextCms】デザインサンプル　日本料理屋

メイン部分にはテキストや見出し、バナー、リンクなど複数の要素が配置されていますが、左側の頭がきちんと揃っているのがわかります。

もしこれがずれてしまっていると、視線に無駄な動きが生まれて読みにくくなったり、まとまりを感じにくくなったりします。

デザイナーさんは意識的に、仕上がったデザインに「見えない線」を引いて、整列しているかを確認するそうです。

情報をただ並べるだけではなく、見えない線を意識することで、まとまりのあるデザイン・見やすいデザインにできます。

【NextCms】のＣＭＳでホームページを作成した場合は、要素を並べるだけで自然と左側の頭が揃って配置されます。

とくに「見えない線」を意識しないで要素を並べても、上記のデザインサンプルのようなホームページを簡単に仕上げることができるので、初めてホームページを作成される方でも安心です。

ご興味ある方は、ぜひ一度当社のホームページ作成教室 NextCms仙台で作成してみませんか？

いかがだったでしょうか。今回はデザインの４大原則のうち、「近接」「整列」の２つをご紹介しました。

次回は残りの２つ、「強弱」「反復」をご紹介します。

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

他にも多数のデザインが掲載されていますので、「近接」「整列」に着目しながらご覧になってみてください。

今なら追加されたばかりの、新しいデザインもご覧いただけます。おしゃれなフォントも使えて、ちょっとした画像加工も簡単にできる、これまでになかった新しいデザインです。

細部までこだわった美しい仕上がりのホームページデザインを、ご興味ある方はぜひご覧ください。

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