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

関連記事

  1. Web関連

    e-Sportsのこれから

    eスポーツとは「エレクトロニック・スポーツ(electronic sp…

  2. Web関連

    世界中の人たちと教学し合えるClassDo

    みなさんは昔、塾に通っていましたか?私は小学4年生から通っていました。…

  3. Web関連

    WordPressの管理画面を使いやすくカスタマイズ!

    どもっ!岸沢です。またまた、WordPressのプラグインを紹介し…

  4. Web関連

    e-sportsから考える「スポーツ」

    スポーツ --熱き魂のぶつかり合い--熱き魂がフィ…

  5. Web関連

    切っても切れないデザインと色の話

    こんにちは、デザイナーの角田です。毎年こっそり楽しみにしていること…

おすすめ記事

最近の記事

  1. DX(デジタルトランスフォーメーション)・デジタルシフトへの…
  2. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  3. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  4. 非接触がこれからの常識。ウィズコロナ・アフターコロナはIoT…
  5. キャッシュレス決済はウィズコロナでのウイルス対策に繋がってい…

アーカイブ

  1. Web関連

    そもそもUI/UXデザインって何?
  2. Web関連

    web制作初心者必見!見やすいレイアウト構造
  3. Web関連

    ちょっとした工夫で劇的に変わる!ユーザーにウケるブログの書き方
  4. Web関連

    顧客に物を買わせる第一歩!
  5. AI関連

    環境問題をAIの活用によって解決する|グリーンAIとは(その1)
PAGE TOP