adobe illustrator2024

イラレでwebデザインするときの注意点がある！

バナーやLPを作る際、Adobeユーザーは何を使いますか？
Photoshopで作る人が多そうですが、実際はどうなんでしょうか？
ちなみに著者は、バナーやwebページはIllustratorで作ってコーダーさんへ納品しています。

元々紙媒体ばかり作っていたこともあり、イラレが圧倒的に使い慣れているためです。
そういう人間も多いためか、実際のところバナーやランディングページをイラレで作ること自体は、全く問題ないようです。

ただし知識不足でイラレで作ったせいで、コーダーさんに迷惑をかけた経験が何度かありました。
私と同じようなweb初心者さんに向けて、納品前にチェックすべき基礎的な注意点をご紹介します。

気になる箇所だけ見ることもできます。
目次から気になる箇所をクリック、またはタップしてください。

１.　Illustratorの環境設定をweb用に変えること

まず作業時の基礎中の基礎ではありますが（念のため）、環境設定をweb用にしましょう。

紙媒体とWebの両方の修正指示がきて急ぎ作業しているときなどに、設定を変え忘れる事が多いと思います。

webはピクセル、紙はメートルなど、それぞれ単位が違います。
1ピクセル１mmではありません！

他にも色も影響が出ます。画面の色=印刷の色ではありません。
RGBをCMYKに変えると濁ってしまいます。

環境設定は必ず制作前に設定しましょう。

さらに、設定を変えたはずなのに変わらないときの対処方法もご紹介しています。
気になる方はこちらからどうぞ。

環境設定のトラブル解決はこちら

イラレ　設定したのに単位が変わらないときの対処法

２.　端数（小数点）がないかを確認する

イラレでLPを作り、イラレデータ（aiデータ）でコーダーさんに納品する場合に気をつけたい点で、端数（小数点）のオブジェクトがないかを確認する必要があります。

各オブジェクトが端数になっているとうまく書き出せず、コーダーさんが修正することになってしまいます。自分では気をつけていても、意図せず端数になってしまうことがあります。

今回は、端数を防ぐ方法をご紹介します。

よくあるミスその１　アートボードの位置が端数（小数点）になっている

まず新規に制作するときには
アートボードのサイズとX軸、Y軸が整数になっているかを必ず確認しましょう！

サイズが端数になることはあまりないと思いますが、位置はなりがちです。
アートボードを整列などで端数になる場合があります。

X軸、Y軸のどちらかが端数（小数点）になっているだけで、サイズが変わってしまいます。

よくあるミスその２　オブジェクトを端数（小数点）で作る

アートボードをきちんと整数（例えば横750px/縦は任意のwebページ）で作っていても、ページの中身のオブジェクトを整数にしていない場合も、書き出しに影響します。

見本のクリックボタンように、
幅Wと高さHが端数でもダメですし、X軸（横位置）、Y軸（縦位置）が端数でも書き出しに影響します。

コーダーさんがページを細かくスライスしてコーディングしていく場合は、細かいアイテムも大きさも位置を整数にする必要があります。

アートボードだけではなくボタンなどのオブジェクトも、
X・Y軸とW/Hサイズともに整数に整える習慣をつけましょう。

よくあるミスその３　線の幅と位置のせいで端数になってしまう

全く同じサイズのクリック用のボタンを、２つ用意しました。
こちらの違いは線の位置だけです。
上のボタンは線の位置を中央にしていて、下のボタンが線の内側になっています。

変形パネル・線パネルを見ると、一見どちらもきちんと整数になっているので問題ないように見えます。

大きさも一見同じに見えますが、この２つのボタンを近づけてみると、、、。

どちらのボタンも同じサイズで左揃えに整列したのに、上の線の位置が中央のボタンのほうがほんのすこし大きくなってしまうのです。

これは線の位置を中央にすると、線の太さの半分の太さの分だけ（今回は２つともボタンの線の太さは6pxなので、３px分）外側に大きくなっているためです。

このため線の太さが割り切れない数値だった場合は端数になってしまい、書き出しに影響してしまいます。

そのためオブジェクトに線がある場合は、線の太さは整数にして更に内側に揃える習慣をつけましょう。

よくあるミスその４　複数のオブジェクトの位置を整数にする方法

よくあるミスその３のボタンの例と似ていますが、Webページなどのたくさんのアイテムがある場合、全ての文字やアイコンなどの位置を整数にするのもかなり手間です。

整数にしているつもりで端数になってしまうことを防ぐために、グルーブ化を活用しましょう。

写真とボタンなど２つ以上のアイテムがある場合、整数の大きさの四角形で２つをクリッピングマスクしてグループ化してしまいましょう。そのマスク（赤い破線）の位置（X軸・Y軸）を整数にすることで楽に整数に整えることができます。

まとめ

私はコーディングの知識がないため、webページを作ってイラレデータ（ai）を納品するときに何度もコーダーさんに微調整させてしまいました。

最初からPhotoshopで作ればこういった端数のミスはおきないので、最初からPhotoshopで作ってもいいかもしれません。

イラレで作った場合は納品前に、ミスがないかをチェックしましょう。

最後まで読んでいただいてありがとうございました🐾

子猫

ちょびとみい

アートディレクター、グラフィックデザイナー

X

都内の広告代理店で働く、アートディレクターです。

デザイナー必須のAdobeアプリの操作方法や、
小技とpremiereproの初心者の備忘録を中心にご紹介しています。

Adobe Illustrator・Photoshop歴／20年
Adobe premierepro歴／2024年5月から始めた超初心者
ブログ歴／2024年2月から始めた超初心者