マーカーネット株式会社

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制作の仕事をず~~~っとやっていると専門的な事も基本的なことと勘違いしてしまいがちです。私もwebに触れる前は「ブラウザって何?」「 …

【Illustrator】幾何学模様の作り方

【Illustrator】幾何学模様の作り方

みなさまこんにちは、新人Aです。 三角形で作る幾何学模様の作り方をご紹介します。 これはパターンにするよりもランダムに色を置いていったほうが幾何学模様の雰囲気がぐっと増すと思うので、 少し面倒ですがパ …

WYSIWYGエディタCKEditor + KCFinderで画像の保存先を動的に指定する方法。

WYSIWYGエディタCKEditor + KCFinderで画像の保存先を動的に指定する方法。

ブログの記事の編集などにWYSIWYGエディタCKEditor + KCFinderを導入しているサイトでログインするユーザごとに画像のアップロード先を切り替えたい状況がございます。 その方法を紹介し …

知らなかった!じゃ済まされない。フラットデザインの落とし穴

こんばんわ!WEBデザイナー歴10年目に突入間近のHです! 以前、2015年に流行るWEBデザインのトレンドを3つ、ご紹介させて頂きました。 ①フラットデザインの更なる普及 ②クリックを出来るだけ減ら …

【フラットデザインに+α】2014年のWebデザイントレンド3選

【フラットデザインに+α】2014年のWebデザイントレンド3選

近年、あちこちのサイトで見かけるようになったフラットデザイン。 レスポンシブと組み合わせたり、フルスクリーン表示にさせたりと応用法も様々に、オシャレなWEBサイトが増えていますね! そこで、今回はこの …