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. 新しい販売形態であるDtoCについて考えてみる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    「LINEHERE」という便利なアプリが登場!

    みなさんは、友達や家族と待ち合わせをした時なかなか相手を見つけられない…

  2. SNS関連

    旅行いきたい!!となること間違いなしのinstagramアカウント5選

    水原希子さんやROLAさん、中村アンさんといった人気モデルをフ…

  3. SEO関連

    【Web制作会社が教える】SEO対策で文章作成に困ったときに使える3つのポイント

    文章を書くのって難しいですね。ワタシは、仕事柄、文章を書くこと…

  4. Web関連

    思い通りのWebサイトにぐっと近づく!プロトタイピングツール「AdobeXD」の嬉しいポイント4選!…

    こんにちは!デザイナーの石井です。皆さん、日頃の業務ではどんなツー…

  5. Web関連

    ブランドの力ってスゴイ ~百味ビーンズに見る、ハリー・ポッターのブランド力

    突然ですが、「百味ビーンズ」ってご存知でしょうか。かの有名な「ハリー・…

  6. Web関連

    ギャップで魅力的なリクルートサイトにしよう

    世の中、ギャップによって印象や魅力が増進・半減とありますが、人やモノだ…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    【人工知能(AI)×災害対策】AIで洪水・防災対策を進める
  2. Web関連

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

    その投稿、大丈夫?!SNSユーザーが注意すべき著作権とは
  4. Web関連

    小売業界必見!ビジネスの見方が変わる!?小売業界のミライ予測
  5. Web関連

    Web制作をする上で知っておきたいマーケティングのトレンドを知ろう!
PAGE TOP