用語集は行

ベクターデータ

画像を「点と線の数式情報」で表現する形式のデータです。JPGPNGなどのラスター(ピクセルという点の集まりで表現する)形式とは異なり、「どれだけ拡大しても画質が一切劣化しない」「ロゴやアイコンのようなシンプルな図形ならファイルサイズが非常に軽い」「後から色や形の編集がしやすい」という強力なメリットがあります。代表的なフォーマットは、SVG(Web 用)、AI(Illustrator 用)、EPS などです。

現場での活用ポイント:ベクターデータを標準素材として死守する

コーポレートロゴやサービスロゴ、アイコン素材などは、必ずベクターデータ(AI や SVG)で全社管理・保管してください。

Web 用には「SVG」、印刷やオリジナル保管用には「AI」とセットで管理しておけば、名刺から巨大な看板、Web サイトまであらゆる媒体で使い回すことができ、新規制作のたびにロゴを作り直す(トレースする)無駄なコストと手間を省けます。

Web 領域における「SVG」の絶大な威力

現在の Web 制作において、ロゴやアイコンは SVG 形式を使うのが標準です。スマホや高解像度ディスプレイ(Retina など)でも一切ボヤけず綺麗に表示されるだけでなく、エンジニアがコード(CSS)を使って「マウスオーバー時に色を変える」「フワッと動かす」といった柔軟なカスタマイズが容易になります。

現場でよくある「痛い失敗」と対策

新任担当者が最も陥りやすい罠が、自社のロゴを「PNG や JPG」の画像データでしか持っていないケースです。Web サイトのリニューアル時に制作会社から「ロゴの元データ(パスデータ)をください」と言われた際、PNG しか出せないと「拡大するとガビガビに荒れるため、デザインの自由度が下がる」か「制作会社に数万円払ってロゴをベクター化(トレース)してもらう」という事態に陥ります。

ロゴなどを新しく作る際は、納品物に必ず「AI データ(Illustrator データ)」を含めるようデザイナーへ依頼し、それを社内の宝として厳重に保管しておきましょう。

言葉をよく利用する人

  • デザイナー
  • Web 担当者(発注側)
  • コーダー / フロントエンドエンジニア
  • イラストレーター

会話上での使用例

ロゴ素材の管理方法をデザイナーと整える場面

  • デザイナー
    バラバラに保存されているロゴ素材を、この機会に整理しておきたいです。
  • Web担当者
    でしたら ベクターデータ で保管しておきましょう。Web 用に SVG、印刷用に AI でセット管理しておけば、媒体ごとに作り直す手間がなくなります。
  • デザイナー
    了解です。元データから書き出して両形式で揃えておきます。

アイコンを大きく見せたいプロデューサーに対応する場面

  • プロデューサー
    トップのアイコンをもっと大きく目立たせたいんですが、ぼやけたりしませんか。
  • Web担当者
    今いただいているのが PNG なので、拡大するとぼやけてしまいます。ベクターデータ の SVG にすれば、どれだけ大きくしても劣化しません。デザイナーさんに SVG 化を依頼しておきます。
  • プロデューサー
    それなら安心して大きく使えますね。お願いします。

関連 Lesson(本書本文)

Lesson 5-3 写真・動画素材の選び方