TOM CREATIVE(トム クリエイティブ)

MENU

ARTICLE

WEB DESIGN

IllustratorでのWEBデザイン講座 1 / 初期設定編





こんにちは!トミオカです。

前々からやろうやろうと思っていた、
IllustratorでのWEB制作に関する記事。

以前公開した「Illustratorでバナー作成をおすすめする理由」と重複する部分も多数あると思いますが、
WEB制作記事に関してはシリーズ化を考えており、
細かくご説明ができればと思っております。

まずは第1弾として、初期設定の部分からご説明していければと思います。

ドキュメントの設定

まずは新規ドキュメントを作る際の設定です。
※バージョンはCC2018になります。

印刷物を作る場合は下記のような設定だと思います。

プロファイル:印刷
単位:ミリメートル

こちらをWEB用の設定に切り替えます。

下画像のように単純にプロファイルを「WEB」に変更してください。

すると単位も自動でピクセルに変更してくれます。

WEBの世界では、ピクセルという格子状の四角で画面表示をします。

パソコンやスマートフォンの解像度ってありますよね?

解像度というのは「dpi」または「ppi」という単位で、
ピクセルがいくつあるかを表現しています。

※ちなみにdpiとppiとの違いについては別記事でご説明させていただきます。
今は一旦忘れてください。

実はこのドキュメント設定、単位のみらなず細かい設定も自動で行なってくれています。

画像右下の「詳細設定」を押してみます。

まずはプロファイルを印刷にした状態の詳細設定です。

単位:ミリメートル
カラーモード:CMYK
ラスタライズ設定:300ppi
プレビューモード:デフォルト ※こちらは別記事でご説明します。

続いてプロファイルを「WEB」にした状態の詳細設定です。

カラーモード:RGB
ラスタライズ設定:72ppi
プレビューモード:デフォルト ※こちらは別記事でご説明します。

印刷物になれている方は、解像度は「300~350dpi」で「CMYK」に設定するのが基本ですよね?

WEBの世界では解像度は「72dpi」で制作します。またカラーモードは「RGB」です。

この部分が初期設定の基本となるので覚えましょう。

ただ問題はRetinaディスプレイ対応というものです。

Retinaディスプレイ(英語:Retina Display)は、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」(レティナ)は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている[1]、ということから命名された。

引用:フリー百科事典『ウィキペディア(Wikipedia)』

引用にある通り、シェア率が高いアップル製品の従来画面解像度は100〜160ppi、
Retinaになると倍の解像度になります。

すべての閲覧環境に合わせるのは不可能なので
まずスマートフォンに関しては現状シェア率が高いiphone6.7.8を基準に
倍の画面サイズ(横幅750px)でデータ作成をします。

下記スマートフォンの画面サイズ参考です。

出典:Qiita:iPhone画面サイズ早見表(図付き)

またパソコンに関してもRetinaが増えてきたので、
最近では72ppiで原寸作成をすると、解像度が荒い!と言われることが当たり前となってきています。
PC版のデータ作成も倍で作ることも多くなってきました。

そのため仕事として受ける場合はしっかりと事前打ち合わせをし、
何の環境をベースにするかを決めることがとても重要になっています。

もう一度まとめます。

WEB制作におけるドキュメント設定の基本です。

単位:ピクセル
カラーモード:RGB
解像度:72ppi



環境設定

ドキュメントが完成したら、続いて環境設定です。

メニューバーの「illustrator」→「環境設定」 →「単位」をクリックします。

そうすると単位の項目を選べるので、
すべて「ピクセル」に変更してください。

前項でもお話ししましたが、WEBは「ピクセル」が基本です。

これを印刷物と同様「ミリメートル」で設定してはいけません。
サイズ感の確認、コーディング時のスライス、色んな部分で問題がおきてしまいます。

こちらも順を追ってご説明できればと思っています。

まとめ

いかがだったでしょうか。

こちらがIllustratorでWEB制作をする上での第一歩です。

これを知ってる知らないで、制作していく工程の中で大きな差が生まれます。
おそらくめちゃくちゃになって作り直しを余儀なくされると思います。

次回から制作編に移っていこうと思いますので、
是非続けてご覧いただければと思います。

少しでも参考になれば幸いです。