ajike switch

UIデザインの前に、マージンを整える

こんにちは、デザイナーの石橋です。

早いもので、私が入社してもうすぐ1年が経とうとしています。
毎日学ぶ事があり、充実した1年間だったな、と自信をもって言えますし、
webデザインに対するやりがいも同時に感じています。

今回はそんなヒヨッコの私が日々苦労を痛感している「マージン」の取り方について、自分への戒めの意味も込めて良い例を取り上げつつご紹介します。

1.「マージン」とは?

マージン、つまり「余白」ですね。
余白と考えると、マージンは身の回りにもたくさん潜んでいます。
例えば顔。
人でも動物でも構いませんが、目や鼻、口などそれぞれのパーツの周りには
必ず「余白」が存在していますよね。
もしそれらが、下のような状態になっていたらどうでしょう。。
今回は分かりやすく某キャラクターに登場していただきました。

アンパンマン1
…。
かなり極端な例ですが、すべてのパーツが独立せず、グルーピングがなされていません。というかちょっと気持ち悪いですね。

まぁ、という風にデザインに関わらずマージンがないと世の中が狂ってしまう訳なのです。

 

2.グルーピングについて

マージン

デザイン上の基本ルールとして、マージンというのは必ず外幅は、内幅より広くなくてはなりません。
そうしないとアン○○マンのようになってしまい、情報の優劣が一目で分からなくなりますし、そもそも見にくいです。行間のある文字でもそれは同じですね。

例をあげてみましょう。

スクリーンショット 2016-03-24 0.12.00KYOTOTRIP(https://kyotrip.jp/)

サイトにグリッドを引きました。
明らかにマージンに差を設けており、グルーピングがしっかりされているのが分かりますよね。
これによってユーザーは欲しいコンテンツをすぐさま見つける事ができますし、逆に言うと機能性に優れたUIだとしてもこういった基礎がなっていないとそれは成立しないわけなのです。

3.終わりに

今回は基礎中の基礎を紹介しました。
偉そうにこういった解説をしている私ではありますが、まだまだ未熟者です。
UIの実現に技術が追いついていないところがあるので、今後も勉強をしていきたいものです。

皆さんも悩んだ時は一度初心を振り返ってみるのもいいかもしれません。

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×