「なんかバランスが悪い」を数値化したかった | Webデザイナーが『デザインの重心チェッカー』を作るまで

「なんか左に寄って見えるね」
後輩のデザインを見て、私はそう言ったことがあります。
後輩が「どこがですか?」聞き返してきました。
感覚ではわかるのに説明が難しい…。

要素の位置、色のトーン、コントラスト、視線誘導など。
経験で「分かる」のに、ロジックで説明できませんでした。
Webデザイナーとして10年近くやってきて、何度も繰り返してきたシーンです。

熟練のデザイナーは、デザインを見た瞬間に「重い」「軽い」「傾いている」を感じ取れる。でも、これを後輩や初学者にどう伝えるか課題に感じていました。

私はこれまで、こんな感じで説明していました。

頷いてくれる人もいれば、ピンと来ない人もいます。
経験を積めば腑に落ちるけど、その「経験を積む」段階で挫折する人を何人も見てきました。

この「デザインの重心」という感覚を、誰でも見える形にできないかな。

そう考えて作ったのが、今回紹介する「デザイン重心チェッカー」というツールです。

▼ツール（無料・会員登録不要）はこちら

画像をアップロードすると、その画像の「視覚的な重心」を自動で判定し、ヒートマップとスコアで可視化します。完全無料で、画像はサーバーに送られませんので安心してお使いいただけます。

この記事では、このツールがどういうアルゴリズムで動いているのか、なぜそう設計したのか、そしてWebデザイナーがこういうツールを作る意味について書いていきます。

この記事で書くこと

前半（無料）

• なぜ作ろうと思ったか

• ツールの全体像

• 重心計算の基本的な考え方

後半（有料）

• 6つの係数の詳細設計

• 顔検出と中心バイアスの組み込み

• 試行錯誤の記録

• 完全なソースコード（コメント付き）

• 「ここを変えるとこうなる」改造ガイド

• このツールが目指す思想

完全なソースコードは記事内に掲載しています。
読み終えれば、自分の手元で動かせる・カスタマイズできる状態になります。

先に結論を：6つの係数の積で「視覚的な重さ」を算出する

詳細は後で説明しますが、このツールが計算している式はシンプルです。

ピクセルごとの視覚的な重さ W = 
  W_明度 × W_彩度 × W_色相 × 透明度 × W_エッジ × W_顔 × W_中心バイアス

画像のすべてのピクセルについてこの計算をして、加重平均を取ることで「視覚的な重心」が出ます。

重心X = Σ(x × W) / Σ(W)
重心Y = Σ(y × W) / Σ(W)

7つの係数（透明度含む）それぞれに、人間の視覚研究や経験的な根拠があります。後半でひとつずつ解説していきます。

このツールの独自性

世の中に「画像の重心を計算するツール」はいくつかあります。でも、その多くはピクセルの明るさだけで物理的な重心を出しているだけ。

このツールが他と違うのは、人間が「重い」と感じる場所を出すことを目指している点です。

たとえば人物が写っていれば、顔の周辺が重くなる。テキストが密集している場所、彩度の高い差し色、そういった「人間が無意識に目を向ける場所」を係数で表現しています。

そして、Webデザイナーが設計したという点も重要です。エンジニアが視覚研究の論文だけを頼りに作ったツールではありません。10年近く現場でデザインを見てきた人間が、「自分が感じる重心」と「ツールの出力」を擦り合わせながら調整した結果がこのアルゴリズムです。

Webデザイナーがアルゴリズムを作る意味

有料パートに入る前に、なぜWebデザイナーの私がこういうツールを作ったのかを書いておきたいと思います。

AIに取って代わられると言われ続けるWebデザイナーという職業。
私自身も危機感は強く持っています。

でも、AIが大量にデザインを生成できるようになるほど、「それを判断する力」が重要になるはずです。
作業はAIがやり、品質チェックは人がやる時代。そのチェックをロジカルにできる人だけが、デザイナーとして生き残ると考えています。

そして、ロジカルに判断するためには、感覚を言語化できる解像度が必要です。「視覚的重心」は、その第一歩です。

このツールは、その思想の一つの形と捉えています。

ここから先は有料パートです。完全なソースコードと、設計判断の全てを公開しています。

このツールを「使う」のではなく「理解して自分のものにしたい」「Webデザイナーとしての判断力を上げたい」と思った方に、価値のある内容になっているはずです。

Webデザイン勉強中の方、後輩指導に苦戦している方、視覚的に伝わることによって一気に解像度が上がりますよ。