Web関連

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

0

この記事を読んでいるデザイナーの皆様、もしくは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デザイン

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    初心者でもわかる!グーグルアナリティクスについて

    みなさんはグーグルアナリティクスを利用されていますか?グーグルアナリテ…

  2. Web関連

    お財布にも地球にも優しい!余剰食品がゲットできる「食品ロス削減アプリ」

    こんにちは。糖質制限ダイエットに苦しんだり、諦めてマックを食べたり…

  3. Web関連

    初めてのFintech

    Fintechとはなにかみなさんご存じでしょうか?Fintechと…

  4. Web関連

    「Windows 10」の登場で、web制作は変わるのか?

    2015年の7月末にリリースされたMicrosoftの新OS「Wind…

  5. Web関連

    企業の信頼性向上をCSRにより図りたい

    社会的責任を果たしている企業であることを公表し、信頼性を向上高まる…

  6. Web関連

    なぜ2MBなの!?ビジネスマナーの意外な理由

    私生活では使わなくなったメール機能ですが、実は送信できる容量の限界が決…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    最強のWebマーケターになるための便利ツールご紹介
  2. Web関連

    リモートワークで働く際に知っておきたい6個のポイント
  3. AI関連

    【人工知能(AI)×インバウンド】人工知能によるホテル業界のインバウンド対策
  4. Web関連

    リッチスニペットの新しい手法 schema.orgとは?
  5. AI関連

    【人工知能・AI×インバウンド】今後の狙いは「爆買い」から「○ ○ 」へ!
PAGE TOP