このたび、【あきばれホームページ】で提供しているデザインに、これまでになかった、全く新しいデザインが追加されました。
おしゃれなフォントが使えるようになり、画像の丸抜きもできるので、今までよりもさらに素敵なデザインを、より簡単に実現できます。
メニューバーやリンクにマウスを乗せると色が変わるなど、細部までこだわったデザインです。一気に進化した今風のおしゃれなデザインを、ぜひご覧ください。
さて、新しいデザインの追加にちなんで、本日はホームページのデザインについてお話ししたいと思います。
現在、さまざまなツールが発達して、ＷＥＢデザイナーさんでなくても自分でホームページを立ち上げられる時代になりました。
しかし、「どうも野暮ったい」「プロのデザイナーさんの仕上がりにはかなわない」というのも事実。
私たちとデザイナーさんの違いはいったい何なのでしょうか？
センスはもちろん１つの要素ですが、いくつかの「基本ルール」をシステマティックに守っているかどうかで、大きな違いが出るのだそうです。
では、そんな基本ルールの中から、「デザイナーさんたちが守っているデザインの４大原則」をご紹介します。
デザインの４大原則は、以下の４つです。
- 近接
- 整列
- 強弱
- 反復
「ホームページのデザインは、デザイナーさんに任せているから…」という方も、この４大原則を押さえておくと重宝します。
制作会社にホームページの作成を依頼するときも、デザインの基本ルールを知っていれば、デザインの問題点がわかったり、要望を的確に伝えたり、できるようになります。
ご自身でゼロからデザインを起こす訳でなくても、デザインの良し悪しの判断をつけられた方が、ホームページを作成する際には役立つので、ぜひ読んでみてくださいね。
今回は４大原則のうち、「近接」「整列」の２つを取り上げて、ご紹介していきます。
近接：グルーピングして余白をとる
「近接」とは、関係する情報は近づけて配置することです。
情報をグルーピングして、同じグループは近づけ、違うグループの間には余白を取ります。
以下のデザインサンプルを見てみましょう。
「Lunch Menu」の下の説明文や画像、リンクバナーは見出しと近い配置になっており、「Dinner Menu」との間は大きく余白を取っています。
それによって、情報のかたまりや境目がはっきりわかります。人は位置的に近いものを「関係がある」と認識する習性があるそうです。
そのため、こうして情報のかたまりや境目を作るだけで、情報が整理され、理解しやすいデザインになります。
皆様のホームページは、どうなっていますか？見出しと本文の間、行間、画像と画像の間など、すべて均等に余白を設定していないでしょうか？
均一にしてしまうと、情報のかたまりが分からなくなってしまうので、視覚的に理解するのが難しいデザインになります。
まずは、情報のかたまりを把握すること。そして、「関係する情報は近く、それ以外は遠く」を意識した余白のとり方を心がけましょう。
【あきばれホームページ】が独自開発したＣＭＳでは、あらかじめ適切な余白が設定されているので、「近接」を意識しなくても、簡単に見やすいデザインが実現できます。
整列：はみだしたり、ずらしたりしない
「整列」とは、各要素を一定のルールに基づいて、そろえて並べることです。
以下のデザインサンプルを見てみましょう。
メイン部分にはテキストや見出し、バナー、リンクなど複数の要素が配置されていますが、左側の頭がきちんと揃っているのがわかります。
もしこれがずれてしまっていると、視線に無駄な動きが生まれて読みにくくなったり、まとまりを感じにくくなったりします。
デザイナーさんは意識的に、仕上がったデザインに「見えない線」を引いて、整列しているかを確認するそうです。
情報をただ並べるだけではなく、見えない線を意識することで、まとまりのあるデザイン・見やすいデザインにできます。
【あきばれホームページ】のＣＭＳでホームページを作成した場合は、要素を並べるだけで自然と左側の頭が揃って配置されます。
とくに「見えない線」を意識しないで要素を並べても、上記のデザインサンプルのようなホームページを簡単に仕上げることができるので、初めてホームページを作成される方でも安心です。
ご興味ある方は、ぜひ一度当社のホームページ作成サービスもご検討くださいね。
いかがだったでしょうか。今回はデザインの４大原則のうち、「近接」「整列」の２つをご紹介しました。
次回は残りの２つ、「強弱」「反復」をご紹介します。
なお、事例としてご紹介した【あきばれホームページ】のデザインサンプルは、以下のページからご覧いただけます。
他にも多数のデザインが掲載されていますので、「近接」「整列」に着目しながらご覧になってみてください。
今なら追加されたばかりの、新しいデザインもご覧いただけます。おしゃれなフォントも使えて、ちょっとした画像加工も簡単にできる、これ
細部までこだわった美しい仕上がりのホームページデザインを、ご興味ある方はぜひご覧ください。
