UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 UIコーダー 齋藤 (@31mskz10) です。

デザインツールを使っていると、ツールにある「整列」機能を頻繁に使います。

選択した要素をぴったり整列してくれて便利なのですが、実は数値的には整列されてあったとしても、揃っていないように見えるパターンがあります。

揃っていないように見えるパターン

再生ボタン

有名な事例が「再生ボタン」です。
右向きの三角形ですが、YouTubeのアイコンは中心から少しズレています。

ロゴを中心に配置して、数値的に中心の場所に線を引くとよく分かります。

三角形を右向きにすると左半分と右半分で面積が違うため、面積が広い方が大きく見えてしまいます。

そのため、数値的に中心にしても揃っていないように錯覚してしまうのです。

それを避けるために、わざと少し右にズラして配置しています。

Switchのロゴ

Switchのロゴも有名です。

以前『さまざまな企業のロゴに隠された面白い意味や遊び心まとめPart6』でも紹介したのですが、Switchのロゴは左右で「線だけ」か「塗りもある」かが違います。

先ほど同様に面積の問題で、大きさ数値的に同じにしてしまうと、右側が大きくみえてしまいます。

それを避けるために、位置ではなく横幅を変えて対応しています。

こちらも先ほど同様に、中心に線を引くとよく分かります。
今まで気にしたことがなかったかもしれませんが、改めて見ると結構サイズが違っていて驚くのではないでしょうか？

自分の目を養うことと事例を知ることが大切

「数値的に揃っているから大丈夫」とツールを過信するのではなく、自分の目を養うことが大切です。

また、目を養ったとしても、作っている本人はなかなか気がつけないのかもしれません（実際にツールで整列している先入観もあるため）。

事例を知ったり、しばらく時間を置いてから見直すなど、工夫も必要なのかなと感じました。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！

saito

高校時代にIT・Web業界に興味を抱き、神戸電子専門学校で2年間デザインやWeb実装について知識を得た後、新卒でN′sCreates株式会社のデザイナーとして入社。ミッションである｢解で快を創る｣を実現するべく日々の業務に向き合い、より良い提案を心掛けています。また、学生時代からWeb制作に関わる方のためのセミナーイベント「CSS Nite in KOBE」のスタッフとして業界の最先端に触れ、自主的に学習してきた知識やスキルを武器に、常に成長を続けている。