フェンリル

Developer's Blog

ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。

こんにちは、デザイナーの長谷川です。

今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。
デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。

1. 上下左右のマージンを均一に

Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。

2. 内側のマージンは外側のマージンより狭く

レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基本的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。

3. 段落の下は間隔を広く開けます

段落の間隔を広く取ることでまとまりが出て文書が読みやすくなります。

4. 文字を変形しない

長体や平体などの変形は避けましょう。無理やりスペースに文字を収めるより、見出しや文章を適切な長さにまとめることで内容が伝わりやすいスッキリしたデザインになります。

5. 余計な装飾はしない

寂しいから何かを入れるようなデザインは大事な内容を薄れさせます。できるだけ相手に情報を伝えるための最小限の装飾にすることがスッキリしたデザインの秘訣だと思います。

6. 色を使いすぎない

色には大切な役割があり、情報を伝えるための大事な要素です。使いすぎると必要以上の情報が含まれることになります。
同系色でまとめる、アクセントを含めて最大3色~4色程度にしましょう。

 

UI や Web などそれぞれのデザインでユーザーのシーンなどを考え、最適なデザインを作るには、もっと様々な要素や構成を考えないといけませんが、汎用的に考えるとこれくらいで十分スッキリしたデザインが出来るのではないかと思います。

前記事で告知しました WEB+DB PRESS Vol.64 の UI デザイン特集の紙面も、この考えで僕がデザインしました。フェンリルのプロダクトがどういう風にデザインされているのかも詳しく書かれていますので、フェンリルがデザインした紙面特集と共にぜひチェックしてみてください。

 

Facebook コメント

コメント

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。