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 株式会社は、神戸三宮オフィスまで週1出社(それ以外はリモートワーク)できる「デザイナー」「エンジニア」を募集しています。

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

同じテーマの記事

齋藤 公一齋藤 公一 / 2024年3月26日

業務システムこそデザインにこだわった方が良い理由

山本 明子山本 明子 / 2024年3月22日

肩首伸ばしてスッキリ!座りながらできるストレッチ

本田 顕本田 顕 / 2024年3月13日

マック・ミラーが最高

西山秀治西山秀治 / 2024年2月16日

PHP8について

お問い合わせ

BtoBサービスのデザイン・開発に関することならお気軽にご相談ください

一緒に働く仲間を募集しています

採用情報

デザイナー、エンジニア共に募集をしています。

パートナー募集

現在は主に開発領域に対して募集しています。