ウェブデザイン配置のちょっとした「もやもや」をスッキリさせる解決例。

上部詰まり、背景が強いデザイン

before

背景にタイル状のものを敷き詰めるのは、コーディング的に簡単なので初心者の方がよく多用しがちなのですが、デザインのバランスとしては複数の色が散りばめられているので難易度が高くなります。
今回の例では、

・タイトルロゴのデザイン（フォント）の見やすさ
・コンテンツエリアの破線
・全体的な上部への詰まり

といったことに注意して、すこしだけスッキリさせてみます。

after

タイトルロゴのフォントを変更し、境界線に白のラインを引き、
コンテンツ全体を天地中央に。
[Enter]ボタンを背景色と合わせました。
さらに白い枠の破線ラインをとり、角丸に変更し、内側の空間を多く取るようにしています。

縮小画像ではデザインできているように見えるのに、サイトを見ると間延びする

before

サムネイル表示など、縮小した状態で見るとよく出来ているデザインに見えるのに、実際のサイトを見るとどこか間延びする場合、ウェブサイトの表示領域を理解していない、縮小した状態で（小さなノートパソコン等で）デザインを作成した場合に起こります。

・フォントのサイズ
・レイアウトの配置
・オブジェクトのサイズ
・キーカラー

などに注意して、調整してみます。

after

黄色のキーカラーの量が多すぎたので、コンテンツリンク選択時と、マウスホバー時にのみ出現するようにし、ロゴ画像を縮小し、ナビゲーションを縦配置から横配置に変更しました。
さらにコンテンツ全体を２カラムから１カラムへ変更し、まとまりが生まれるようにしました。これで、ページごとに遷移する形でも、スクロールして展開するようなサイトであっても、ナビゲーションやロゴが邪魔することなく展開が考えやすくなりました。

空白マージンを取っているのに、どうしてもぎゅうぎゅうになる

before

枠も線もそんなに多用していないし、各文章には統一したマージンを与えているにもかかわらず、詰まって見えてしまう場合、囲い方やルール付け自身を変更するとうまくいく場合があります。

・各コンテンツの配置
・コンテンツのデザインのルール付け
・枠の意味付け

に注目して、調整してみましょう。

after

枠の意味付けを「ページ全体」ではなく、「コンテンツ個々」に変更し
ロゴやナビゲーションは外に出しました。
各枠のドロップシャドウは浅めにし、さりげない位に落ち着かせました。
レイアウトを２カラムからタイル状へ配置する形へ変更しました。

同じように文字とテキストが多いサイトですが、各コンテンツが独立していることがわかりやすく、「たくさんある」という印象をポジティブに持たせることもできます。
コーディング時にスクロールすると自動読み込みするような仕組みを組み込んでもいいかもしれません。

まとめ

ウェブサイトのデザインでは、

・実際に表示されるスケールの把握
・コンテンツの配置方法
・繰り返す要素のデザインパターン（ルール）の作成

を認識することで、より「様」になるデザインを起こすことができます。
天地中央、左右中央にすること、
ホワイトスペースを活用すること、
どこに区切りを持ってくると見やすくなるかということを
意識してデザインしてみてはいかがでしょうか。

※この記事は他の実際のサイトとの関わりは一切ありません。解説に必要なイメージを作成したものです。