あきばれホームページ作成
小さく始めて大きく育てるホームページ作成サービス

HPを使ったWEB集客が分かる!経営者向けのメールマガジン『経営塾』

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

関連情報:初心者でも簡単!【ホームページの作り方講座】

経営塾バックナンバー: 2018年2月20日配信

この記事を読むのにかかる時間:約 7 分

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  

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

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

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

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

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

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

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

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

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

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

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

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

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

10分で読める、身につく! ホームページ作成&活用術が、毎週届く!
8500社超の制作実績から生まれたノウハウが手に入るメールマガジンです。

ネット集客がみるみる分かる『経営塾』登録
無料

お客様を増やせる、低価格なホームページ作成サービスのサービス・料金

写真の活用で、高額商品を販売

今週は、「成功事例レポート」と言うことで、あきばれネットのホームページに ついてお話しして…続きを読む

ページの一番上へ

着手可能数(5月20日現在)

  5月 6月 7月 8月
残り 42件 80件 80件 80件
5月は残り42件!申込みはお早めに

お申込みはこちら

※上記は標準パックの申込み状況表です。

※お急ぎの方はお電話(03-5957-1610)でお問合せ下さい。