Illustratorで作成されたデザインカンプをコーディングする際、「あれ？測って表示されたpxサイズでCSSを指定しているのにデザインカンプより小さくなる。。。」という現象に出くわしたことはありませんか？
僕も同じような経験をしました。
当初は「測って表示されたpxサイズ通りに指定しているからこういうものだ」と諦め、そのままコーディングを進めていました。

実はこの問題、Illustratorの設定に原因があります。

そこで今回の記事では、Illustratorで作成されたデザインカンプをもとにコーディングしている時、測って表示されたpxサイズでCSSを指定しているのにデザインカンプより小さくなってしまう際の解決方法を紹介したいと思います。

Illustratorでpxサイズが実際より大きく見える時の解決方法

「100%ズームで印刷サイズを表示」の設定を確認

この問題が発生している場合、確認していただきたいのは「設定」→「環境設定」→「一般」の項目にある「100%ズームで印刷サイズを表示」にチェックが入っているかどうかです。

Illustratorの設定で「100%ズームで印刷サイズを表示」にチェックが入っていると、測って表示されたpxサイズでCSSを指定しても、表示が小さくなってしまいます。

「100%ズームで印刷サイズを表示」のチェックを外すことで、Illustratorで測って表示されたpxサイズとCSSで指定したpxサイズが一致し、同じ大きさで表示されるようになります。

「100%ズームで印刷サイズを表示」とは？

見た目のサイズが変わってしまうのに、「100%ズームで印刷サイズを表示」があるのは不思議ですね。見た目のサイズが変わることに不便を感じるのは当然ですし、この機能がなければ、より直感的に作業出来るのではないかと考えてしまいます。

そこで、この機能について調べてみると、その理由が判明しました。

Illustratorは主に印刷用のデザインを行うためのデザインツールです。
しかし、モニター上での表示は、実際の印刷サイズよりも小さく表示されてしまうことがあります。
これは、モニターの解像度と1pxの物理的な大きさの関係によるものです。

このズレを補正し、デザインが実際の印刷物と一致するようにするために、Illustrator CC2019で「100%ズームで印刷サイズを表示」機能が追加されたのです。

逆に、チラシやポスターなどの印刷物を作成する際には、この機能を利用することで、実際の印刷されるサイズ感でデザインを調整することが出来ます。

まとめ

いかがでしたか？
Illustratorで測ったサイズとCSSで指定したサイズが同じであるにもかかわらず、見た目の大きさが異なる原因は、Illustrator CC2019で導入された「100%ズームで印刷サイズを表示」機能にありました。WEB制作メインでIllustratorを使う人にはあまり関係ないかもしれませんが、この機能の存在理由はなんとなく納得出来るかもしれませんね。

でも、こうしたちょっとしたことを知っておくと、デザインからコーディングに移る際のトラブルが減るかもしれません。結局、ツールをよく理解して使うことで、仕事がスムーズに進むかもしれませんね！