経営者向けのメルマガ『経営塾』

デザイナーじゃなくても絶対役立つ「デザイン四大原則」(その1)

このたび、【あきばれホームページ】で提供しているデザインに、これまでになかった、全く新しいデザインが追加されました。

おしゃれなフォントが使えるようになり、画像の丸抜きもできるので、今までよりもさらに素敵なデザインを、より簡単に実現できます。

メニューバーやリンクにマウスを乗せると色が変わるなど、細部までこだわったデザインです。一気に進化した今風のおしゃれなデザインを、ぜひご覧ください。

さて、新しいデザインの追加にちなんで、本日はホームページのデザインについてお話ししたいと思います。

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

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

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

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

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

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

  1. 近接
  2. 整列
  3. 強弱
  4. 反復

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

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

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

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

近接:グルーピングして余白をとる

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

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

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

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

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

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

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

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

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

【あきばれホームページ】が独自開発したCMSでは、あらかじめ適切な余白が設定されているので、「近接」を意識しなくても、簡単に見やすいデザインが実現できます。

整列:はみだしたり、ずらしたりしない

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

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

  

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

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

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

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

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

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

ご興味ある方は、ぜひ一度当社のホームページ作成サービスもご検討くださいね。

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

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

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

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

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

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

ページの一番上へ

初心者でも低コストにお客さんを集客できるホームページ活用法

経営塾

ホームページ作成入門
ホームページ改善
コンテンツ作成ポイント
コンテンツの考え方
反応アップ文章術
デザインテクニック
更新テクニック
ホームページ集客術
アクセスアップ入門
SEOノウハウ
SEO事例集
メルマガ活用ノウハウ
ソーシャル活用
インターネットのトレンド情報
検索エンジンニュース
経営ノウハウのポイント
年度別バックナンバー
初心者でも低コストにお客さんを集客できるホームページ活用法 無料ガイドブックはこちら
初心者むけビジネス用ホームページ作成支援サービスの詳細はこちら

ホームページでお客さんを増やせる!
初心者むけガイドブック無料プレゼント

無料PDF

初心者でも低コスト
お客さんを集客できる
ホームページ活用法

本ガイドブックでは、初心者の方を対象に以下の3つをお話ししています。

  • どうすれば苦手な営業をせずに済むのか
  • どんなホームページを作れば、お客さんを増やすことができるのか
  • 低価格でホームページを作るにはどうすればよいか

集客でお悩みの方、ホームページ活用でお困りの方は、ぜひご一読ください。