マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

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

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

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

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

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

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

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

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

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

です!!

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

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

image01

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

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

 

image

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

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

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

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

 

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

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【これから始めるWEB制作】いろはの”い”!PDCAサイクルって?

突然ですが皆さん、『PDCAサイクル』ってご存知ですか? ある程度、WEB制作に関わったことがある方には馴染み深い言葉かもしれませんが、 もちろん、ご存知ない方も沢山いらっしゃると思います。 実はこの …

phpフレームワークlaravel4でデータベースを操作してみました。

phpフレームワークlaravel4でデータベースを操作してみました。

phpのフレームワークlaravel4でデータベースの操作をためしました。 laravel4では、「Eloquent ORM」が含まれており、簡単にデータベースの操作が可能です。 1. 今回ブログの記 …

親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」

親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」 http://www.markernet.co.jp/blog/2015/07/10/post-5790/ F …

面白い動きや便利な機能をJSで実装! その6:クリックで画像を拡大表示させるアニメーション

記事内の画像をクリックしてその場から拡大表示させるアニメーションを実装したいと思います。 今回使用するjavascriptは「zoom.js」になります。 【これまでの関連記事】 面白い動きや便利な機 …

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

今まで角丸のデザインにするには画像を背景に設定したりしていましたが、 幅や高さが変わるとそれに沿った画像を作成しなくてはならない場合があります。 それだと効率も悪く、修正もしづらいためコーディングが大 …