WEBサービス WEBデザイン WEB制作

デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(1)

投稿日:2014年11月18日 更新日:

デザイナーのAです。こんにちは。

今日はお客様の立場になって、

WEB制作における良いデザインと悪いデザインの見分け方についてご紹介できればと思います。

デザイナーにとっては、基本的なことでも、以外と知られていないルールがあったりなかったりします。

まず、良いデザインのポイントとは…

マージンが統一されているか!

です!!

マージンとは、簡単に言うと外側の余白ですね。

例えば、下の図のようにボタンのデザインひとつにしても、余白を統一してあるかどうかで、見栄えが変わってきます。

image01

当たり前のことかもしれませんが、上下・左右の余白は統一したほうがキレイにみえます。

また、下記のように、見出しと本文。見出し本文のボックスの間隔なども統一されているかチェックポイントですね。

 

image

フラットデザインが主流になり、シンプルなデザインが増えてきている今こそ、余白はとても大切なポイントではないでしょうか。

上記であげた以外にも、グローバルメニューのボタンの間隔の開け方、企業ロゴのまわりの余白など、

しっかり作り込まれたサイトは、ちゃんとルールづけされ、統一化されています。

WEB制作をご検討されている方は、ぜひチェックしてみてください♪

 

-WEBサービス, WEBデザイン, WEB制作

関連記事

2014年秋冬の流行色?

2014年秋冬の流行色?

こんばんは、新人Aです。 すっかり気温も秋めいて来ましたね! 季節が変わると気になるのは流行色!ファッションやデザインには欠かせない流行色ですが、今年は何が流行っているんでしょう? ずばり、【ラディア …

Photoshopの、これだけは押さえておきたい便利機能!!

Photoshopの、これだけは押さえておきたい便利機能!!

こんばんは! webデザイナーのKです。 しばらくマーカブログに登場できなかったのですが、 みなさま、いかがお過ごしでしょうか? 私はパソコンの不具合、というドキドキハラハラな出来事がありました。 お …

レスポンシブにも対応!② グローバルナビゲーションを作成してみました。

レスポンシブにも対応!② グローバルナビゲーションを作成してみました。

この間はレスポンシブでも使える行ごとのブロック要素の高さを自動で合わせるJavaScriptをご紹介致しました。 レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。 レスポンシブで …

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

「SVG」というイメージフォーマットをご存知でしょうか? SVG(Scalable Vector Graphics)とはIllustratorで制作されるような、ベクターデータをWEB上で表示すること …