Web関連

海外のWeb制作会社では主流?Illustratorを使用したWebデザイン制作手法

この記事を読んでいるデザイナーの皆様、もしくはWeb関連の仕事を毎日頑張っている皆様、Webサイトのデザインって何のソフトを使って作りますか?私は、Photoshopを使っています。
海外では、Illustratorを使って作業をするデザイナーが多くいるようですね。
日本でも、Illustratorを使ってWebデザイン制作をしている企業が増えてきているようです。
そこで今回は、Illustratorを使ったWebデザイン制作についてご紹介したいと思います。

Illustratorって印刷物用のツールだよね?

はい。もともとIllustratorは印刷物を作るためのソフトです。
なので、Webとの相性は良いとは言えない状態でしたよね。
オーサリングツールで開いた時の、各パーツの汚さだったり、細かいズレだったり…。
ただ最近では、Illustratorの機能も充実してきており、Webにも対応できるようになってきています。

Illustratorが使われ始めた理由

Illustratorの機能の充実により、Photoshopに劣らないほど便利になってきているのが一番の要因です。
では、実際なにが便利なのでしょうか。

1ファイルでレスポンシブWebデザイン制作に対応できる

Illustratorでは、複数のアートボードをひとつのファイルとして扱うことが出来ます。
Photoshopでレスポンシブデザインを作る場合、PC用のデザインデータ、タブレット用のデザインデータ、スマートフォン用のデザインデータと3ファイル必要になります。
ただ、Illustratorの場合、1ファイル内に複数のアートボードを設けられるので、PCデザイン、タブレットデザイン、スマートフォンデザインの3画面サイズを横に並べてデザインを作ることが出来ます。
それぞれの画面サイズでの比較も容易ですし、修正も一気にまとめて対応することが可能です。

ピクセルパーフェクトが実装

こちらは随分前になりますが、ピクセルパーフェクトの実装によりピクセルズレなどがなくなりました。
この実装により、今までのようなズレやぼやけがなくなりました。

文字スタイルの保存

この機能はPhotoshopにない、魅力的な機能です。
その名の通り、文字のスタイルを設定することができ、適用することもできます。
この機能を使用することで、全体のデザインの統一性を持たせることが可能です。

CSSコードをコピー可能

Illustratorで作れば、もれなくCSSコードがついてきます。
時間短縮にはもってこいの機能ですよね。
ちなみに、SVGコードでもコピー可能です。

IllustratorでWebサイト制作する場合の注意点

これほど便利な、Illustrator。
ただ、注意点ももちろんあります。
必須で守っておきたい基本的な注意点を2つほど

カラーモードは「RGB」

Illustratorの場合、紙媒体でよく使用されるためCMYKにデフォルトで設定になっている
場合があります。
Webでは、RGBなのでこちらの設定変更を間違えないようにしましょう。

単位は「ピクセル」

こちらもRGB同様、mmやptがデフォルトで設定になっている場合があります。
mmやptは絶対単位と呼ばれ、どのような環境でも大きさが変わらない単位です。
Webでは、見る人によって環境が異なるため一般的に相対単位と呼ばれるものを使用します。
なので、単位はWebで一般的なpxを選定しましょう。

まとめ

海外では浸透しつつある、Illustratorを使ったWebサイト制作。
フラットデザインやモバイルファーストが主流になった今、Illustratorを使用したWebサイト制作のほうが便利なのかもしれないです。(実は、私も個人的に勉強中です)
ただ、やはりPhotoshopはIllustratorにない良いところはあるので迷ってしまいますね。
フラットデザインかつマルチデバイス対応が主軸の場合は、Illustratorで作成し、写真メインのポートフォリオやギャラリーサイトの場合は、Photoshopを使用するなど用途によって使い分けられると良いですね。

Web制作でお困りの方はWeb制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

知らなきゃ危険!!webに動画を掲載する前に著作権を知っておこう前のページ

顧客がいないならば育てればいいじゃない。マーケティングオートメーション(MA)ツールで顧客育成をしていこう!次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    聞いた事ある?マーケティングオートメーション

    なにやら巷には「マーケティングオートメーション」なるものがあるようで、…

  2. Web関連

    【業務・会計担当必見】医療控除の困った!はコレで解決!

    確定申告の時期になりました。その中でも確定申告で医療控除を行う方もいら…

  3. Web関連

    スマート家電を利用してカッコいい生活を!

    皆さんはスマート家電ってご存知でしょうか?スマート家電とは、…

  4. Web関連

    デジタルファブリケーションで創る!

    皆さん、デジタルファブリケーションという言葉ご存知でしょうか?…

  5. Web関連

    Webデザインで使える配色ツール5選!

    みなさんはじめまして。デザイナーの松田です。今回はタイトル通り、Web…

  6. Web関連

    AWSってなぁに?

    Webを公開するために必要になってくるものといえば、、、サーバーで…

おすすめ記事

最近の記事

  1. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  2. 人が対応するのが正しいの?DX(デジタルトランスフォーメーシ…
  3. 人間拡張って聞いたことがありますか?デジタル化が背中を押して…
  4. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  5. 【初心者向け】ここに注目!スマートフォン用バナーを作成しよう…

アーカイブ

  1. Web関連

    採用情報の登録系業務の98%はRPAにお任せ!求職者により多くの魅力を伝えよう!…
  2. Web関連

    構成でコラムの「土壌」を整えよう!
  3. Web関連

    テレビで見たあの場所へ。あの撮影スポットは千葉 のここだった!3選
  4. AI関連

    自動運転のメリット・デメリット
  5. AI関連

    AI×最新マーケティング|ペルソナ分析+グロースハック
PAGE TOP