UIデザインに違和感が！なにがそう感じさせるのか、デザインに影響を与える心理効果を紐解いたデザイン書 -デザインは重心。

Post on:2026年7月3日

sponsorsr

※本ページは、アフィリエイト広告を利用しています。

デザインの各要素は正確に配置した、余白も十分に取った、カラーやフォントも厳選した、でもなんだかデザインがうまくいかない。

原因はデザイン全体のバランス、重量感と視覚重心にあるかもしれません。そんなデザインの違和感をなくし、デザイン要素の面積、距離、輝度コントラスト、余白、細部量、アンカーなどのテクニックを学べるデザイン書を紹介します。

著者は『サクッと学べるデザイン心理法則108』（Amazon）の321web（三井将之）氏。二冊目となる本書もデザインに効果がある心理法則を分かりやすく解説したデザイン書です。

デザインを見やすくする、分かりやすくする、使いやすくする、誤解されにくくするときに使える心理効果を意図的に利用することで、デザインの効果を大きく引き上げることができます。デザイナーの人であれば、無意識に使用している心理効果もたくさんあると思います。

デザインは重心。
サクッと学べる重さとバランスの心理法則
ISBN 978-4-7981-9545-2
[Amazonでみる]
[楽天でみる]

著者: 321web（三井将之）
出版社: 翔泳社
発売日: 2026/5/25

Kindle版も同時発売されています！

デザインは重心。 Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書は7章構成で、デザインにおける視覚心理について実践的に学べるデザイン書です。特に、デザイン全体における「重量感」と「視覚重心」を学び、デザインのバランスを整えて、目立たせたい箇所はより目立たせ、デザインを分かりやすく見やすく、そして使いやすくするテクニックを学べます。

第1章は「事例で分かる重さと重心の整え方」具体例を見てましょう。
コスメのバナー画像で、左側のビフォーでは右のテキストの重量感が強く左の写真が目立たなくなっています。右側のアフターでは右のテキストのカラーやウェイトで重量感を軽くし、さらに左の写真にも支えを追加して、全体的にバランスよくデザインされています。

ほかにも、「New Price」の矩形を点線の円に替えたり、「円」の表記を「￥」に替えたり、商品写真の見かけの占有範囲を広げたり、細部に至るまでデザインにおける重量感が修正されています。

左右対称に商品を配置したのになぜかバランスが悪い、重要な要素が多すぎてCTAが埋もれてしまう、カード状に整列したのになんだかバラバラ、数値的には揃っているはずなのにズレて見えるなど、あるあるだと思います。

また、最近ではAIでデザイン案をすばやく作れるようになりましたが、そのときに重要なのが「デザインを言語化するスキル」です。AIがあげてきたデザイン案をみて「なんか違う」「もう少し整えて」「バランスよくして」を追加でお願いしても、AIにはうまく伝わりません。デザイナーに対しての修正指示としても同じく伝わりません。

「なんだかバランスが悪いな」と思うことはできても、なぜバランスが悪く見えるのかを具体的な言葉にすることが大切です。

左側のビフォーではアイコンを個々に見ると違和感がなくても、並べてみるとちぐはぐなデザインになっています。たとえば「すべてのアイコンの主線を2.0pxで揃え、線端は丸、角の接合も丸にする」「外枠と四角い主要部品の角丸を12pxに揃える」など、ページの左下にAI用のプロンプトも掲載されています。

第2章から第7章は、いよいよデザインの実践的なテクニックです。

まずは第2章「重さと重心の基本ルール」デザインにおける「重さ」とは物理的な重さではなく、要素がどれだけ強く目に入るかという「見え方の重さ」です。デザインで重量感を動かす基本要因である「面積」「輝度コントラスト」「細部量」を本書では三大レバーとして扱います。

デザイン要素は「面積」が大きいほど重く見え、「輝度コントラスト」は背景との明るさの差が大きいほど重く見え、「細部量」は要素内に細部が多いほど重く見えます。

たとえば、同じ被写体の写真画像は被写体が占める面積が多いほど、その写真画像に重心が偏ります。また、アイコンはシンプルなほど軽く、ディテールが多いほど重くなります。

第3章は「画像・背景の重さと重心」デザイン要素の中でも特に画像は、レイアウト全体の視覚重心に影響を与える存在です。写真は暗部・彩度・細部量・余白で重量感が変わり、背景をぼかしたり、目線の向きで重心を変えたり、トリミングで視覚重心を再配置したりできます。

画像の中でもイラストは、視覚中心が難しい要素です。数値の中心だとずれてしまうイラストは、見た目の中心を見つけることが第一歩となります。写真のように矩形の枠をつけてもよいのですが、多少のずれはごまかせますが、ほとんどの場合はずれてる感は拭えません。

第4章「図形・アイコンの重さと重心」
図形やアイコンは、小さいサイズでも目に止まりやすいデザイン要素です。それだけに視覚的重心がずれていると、違和感が気になります。円・三角・矩形といった基本的な形状をはじめ、ボタンにおけるボーダーのバランス、画像に重ねる形、アイコンのボーダーや細部量、矩形に配置したアイコンの余白の扱い方など、UIデザインでよく見かけるデザインに役立ちます。

第5章「テキストの重さと重心」
テキストを読みやすくデザインするには、ウェイトを間隔と揃えがポイントです。ウェイトが太いほど見た目が重くなり、目立ちます。細いほど見た目が軽くすっきりし、調和し繊細に見えます。また、テキストは見た目の重さと情報の重要度の両方で読まれるため、見た目の強さと重要度の強さが重なると、かなり重く感じられやすくなります。その場合は文字数を減らしたり、ひらがな・カタカナを使うと効果的です。

第6章「重さでつくる視線の流れ」
読ませたい順番は、文章量より重さの配置で決まります。認知学において、人は視覚的に周囲と異なる箇所を重要と判定する性質があります。これは視覚的顕著性と呼ばれるもので、より視覚的に重い箇所に視線が引き寄せられやすくなっています。これは重要な要素を目立たせるのはもちろん、意味のない罫線や整列のズレなどはデザインのノイズになります。

最後の第7章「錯視によるズレの補正」
これはアイコンの配置やロゴのデザインに役立つテクニックです。数値的に中心に配置したのに、ズレて見えることはありませんか？本書では目にとっての中心に配置するための補正方法がまとめられています。左右非対称の形をはじめ、字形が異なる文字の並び、またライトとダークで文字やアイコンの大きさが変わって見えたり、明暗の隣接でも大きさが変わって見えます。