マーカーネット株式会社

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

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

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

投稿日:2014年12月5日 更新日:

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

前回、いいデザインと悪いデザインの見分け方・・・マージンの取り方についてご紹介しました。

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

今回は、レイアウトについてちょっとだけご紹介します。

WEBデザインをするときに、見出しや本文、イメージなど色々な要素を掲載しますが、

この要素をそれぞれどう配置するかによって、サイトの見栄えが大きく変わってきます。

実は・・・

ここにもデザイナーの常識・・・最低限のルールがあります!

image

↑は極端な例ですが、左と右で全然、印象が違うことが分かるかと思います。

左は「見出し」「image」「本文」の位置がピシッと揃っています。

比べて右は、「見出し」と「image」の開始位置、「本文」と「image」の上部もバラバラですね。

「本文」については「見出し」の横幅からはみ出しています。

これだけで、まとまりのない乱雑なイメージになりますね。

見やすいサイトはこのレイアウトがしっかりルール付けされています。

WEB制作をご検討される際に、色々な実績をご覧になるかと思いますが、

こういったところもチェックポイントの一つです。

お役立ていただければ幸いです。

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

執筆者:


comment

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

関連記事

もう怖くない!色の配色

皆さん! こんばんは!! webデザインを新人デザイナーKです。 元々色選びに才能が全くない私は、デザインをする際に色んな参考サイトを メチャクチャ調べてから制作に入ります。 でもどうしても配色だけは …

【Vol.3】優れたキャッチコピーを見て、閃き力を上げよう!【ファッション編】

は~るがき~た、は~るがき~た♪ みなさまこんばんは。いかがお過ごしでしょうか? 桜の花が各地で満開を迎え、 日差しもあたたかくなり春を感じることが少しずつ増えていく毎日ですね。 春は出会いと別れの季 …

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

線画イラストの線画だけ抜き出したい!背景を透過したい!!・・・そんな時に役立つphotoshopの小技をご紹介します。   (1)まず、画像をphotoshopで開きます。 (2)メニューの …

失敗しないSEOサイトリニューアル16のポイント!

SEOで失敗しないサイトリニューアル16のポイント! 簡単のようで簡単ではない、いつも心掛けるべきWEBサイトリニューアル時のポイントを記載しました。 WEBサイトのリニューアルは、成功の是非がはっき …

VScodeのおすすめ設定と拡張機能

使用しているエディター こんにちは。2年目コーダーXです。コーデイングをされる方、何のエディターをお使いですか? 私は、コーデイングを始めてからずっと「Sublime Text」を使用してきたのですが …