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

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

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

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

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

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

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

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

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

実は・・・

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

image

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

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

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

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

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

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

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

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

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

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

関連記事

モバイルフレンドリーでいたい!~素敵サイトレスポンシブの旅~

モバイルフレンドリーでいたい!~素敵サイトレスポンシブの旅~

みなさん、こんにちは! web初心者のKです! この度、googleがモバイルフレンドリーな webサイトのランクを上げるアルゴリズムの変更を発表しましたね! http://www.itmedia.c …

【photoshop】素材なしで手軽にテキストを水彩風にするテクニック!

【photoshop】素材なしで手軽にテキストを水彩風にするテクニック!

暑い日が続いておりますが、デザインする時も季節感を演出できたら、より人の目を引くデザインになるかもしれないですね。 ここで夏にふさわしい、テキストを涼しげな水彩風に加工するPhotoshopテクニック …

【簡単に創れるphotoshop小技】キラキラ光る星効果

【簡単に創れるphotoshop小技】キラキラ光る星効果

今回はPHOTOSHOPで簡単に創れる「キラキラ光る星」をご紹介します! 【その1】ブラシで直線を引く 新しいレイヤーを追加し、その上にブラシで線を引きます。 【その2】フィルタのぼかしから線を横長に …

WEB制作において低コスト、低予算でレコメンド機能を導入する

WEB制作において低コスト、低予算でレコメンド機能を導入する

Amazonは昨年12月「予測出荷」と呼ばれる特許を取得しましたね。 これはユーザーが「購入」をクリックする前に商品を発送するしくみです。 米インターネット通販最大手のアマゾンは昨年12月、いわゆる「 …

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

WEBサイトのデザイン素材を紙媒体に使うとき、ベクターのデータがなくて困ったことありませんか? ペンツールでトレースするのも時間がかかるし、Photoshopでパスを作成したら境界がギザギザになってし …