Webサイト制作でデザインをする時に、企業やお店からロゴデータを提供されることがあります。
ロゴは会社やお店、サービスを表現するとても大切な要素です。
提供されたロゴデータのファイル形式と開くアプリケーション、気をつけることは何でしょうか。
ここでは主にAdobe Illustrator、Photoshopでの取り扱いを説明します。
ロゴデータを扱う便利なアプリケーションは他にもあります。
目次
Adobe Illustratorで開くロゴデータのファイル形式
拡張子
「.ai」「.eps」「.pdf」「.svg」
これらのファイル形式のロゴデータをもらったら、まずはAdobe Illustratorで開いてみましょう。
ほとんどが拡大縮小しても劣化しない「ベクターデータ」(ベクタ形式)で作られています。
AI形式「.ai」
企業のロゴマークは、この形式で保存されていることがほとんどです。
「.ai」データは全ての編集ができる元データのようなもの。
パスを丸ごとコピーしてAdobe PhotoshopのPSDファイルに「スマートオブジェクト」でペーストすると、PSDファイル上でベクター情報を保ったまま拡大縮小もできます。
EPS形式「.eps」
EPS形式のファイルをIllustratorで開いて、ロゴの形の「パス」が確認できればベクターデータです。AIと同様に扱うことができます。
「パス」が無ければラスターデータです。Photoshop EPSというものが存在するので拡大は難しいデータになります。
Photoshop EPSは印刷用Illustratorに配置する写真などに使われるファイル形式です。
PDF形式「.pdf」
PDF形式のファイルをIllustratorで開いて、ロゴの形の「パス」が確認できればベクターデータです。AIと同様に扱うことができます。
「パス」が無ければラスターデータです。写真などもPDF形式で保存することができます。
SVG形式「.svg」
SVG形式はベクターデータなので、AIと同様に扱うことができます。
SVG形式はWeb上で使うことができる拡大縮小が可能なベクター画像です。
最近、Webサイトに使うロゴもSVG形式が増えてきています。
Adobe Illustratorでロゴを拡大縮小するときの注意
ベクターデータで「線」を使っているロゴをIllustrator上で拡大縮小する時は
「角を拡大・縮小」
「線幅と効果を拡大・縮小」
にチェックを入れて、正しいロゴの形を保つようにしましょう。
特に複雑なベクターで作られているロゴに「線」がある場合は要注意です。
チェックを入れないと形が変わってしまいます。
チェックを入れると正しい形状を保ったまま拡大縮小できます。
Adobe IllustratorでロゴデータをSVGで保存
Adobe Illustratorでロゴデータを書き出す場合、「ファイル」→「書き出し」→「Web用に保存」もできますが、
「ファイル」→「別名で保存」→「SVG」をおすすめします。
SVGはWeb上で自由に拡大縮小して使用できるベクターデータだからです。
アドビ ヘルプセンター SVG 形式で書き出す方法 （Illustrator CC）
https://helpx.adobe.com/jp/illustrator/kb/5710.html
Adobe Photoshopで開くロゴデータのファイル形式
拡張子
「.psd」「.gif」「.jpg」「.png」
これらのファイル形式のロゴデータをもらったら、Photoshopで開いてみましょう。
こちらは「ラスターデータ」(ビットマップ画像)といいます。
ピクセルで構成されています。写真データやゲーム画面を拡大するとピクセルが確認できます。
「ベクターデータ」と違い、拡大するとボケたり汚くなったりします。
PSD形式「.psd」
PSD形式はAdobe Photoshopのレイヤーをそのまま残した保存形式です。
自由に編集できるので、制作用素材として保存しておく元データになります。
GIF形式「.gif」
GIF形式はWebサイトに使うロゴの書き出しで最も多いファイル形式です。
RGBのフルカラーのうち256色までの色が使える「インデックスカラー」で、色がはっきりしているロゴ画像ととても相性がいいです。
インデックスカラーの256色は画像によって違うカラーテーブルを持ちます。(赤が多い256色など)
1つのファイルの中に複数の画像が格納できるので、GIFアニメーションも作れます。
特定の1色を透明に設定することもできるので、ロゴの周りが透明な透過GIFも作れます。
JPG形式「.jpg」「.jpeg」
JPG形式は圧縮によって画像が劣化してしまうのでロゴの書き出しには向いていませんが、ロゴデータとしてクライアントから提供されることがあります。
RGBのフルカラーを表現できるファイル形式で、Webサイトの写真などに使われます。
「不可逆圧縮」という特徴があり、一度圧縮して劣化してしまった画質は元に戻せないので注意が必要です。
JPG形式に透過はありません。
PNG形式「.png」
PNG形式は半透明をサポートするので、背景を透明にしたいロゴの書き出しにも使われます。
クライアントから透過PNGをもらうこともあります。
画質の劣化が少ないので使いやすいファイル形式です。
Adobe PhotoshopでロゴデータをWeb用に保存
Adobe Photoshopでロゴデータを書き出す場合は「GIF」「PNG-24」をおすすめします。
GIF形式でWeb用に保存
Photoshopの「ファイル」→「書き出し」→「Web用に保存」→「GIF」
GIF形式で「透明部分」にチェックを入れた場合、右側の「マット」で背景色を指定しましょう。
指定しないとロゴ画像の縁部分がギザギザに見えてしまいます。
PNG-24形式でWeb用に保存
Photoshopの「ファイル」→「書き出し」→「Web用に保存」→「PNG-24」
PNG-24で「透明部分」にチェックを入れても、右側の「マット」指定は必要ありません。
GIFと違って綺麗に透過できます。
PNG-8形式でWeb用に保存
Photoshopの「ファイル」→「書き出し」→「Web用に保存」→「PNG-8」
PNG-8はGIFと同じインデックスカラーで保存されます。
PNG-8で「透明部分」にチェックを入れた場合は、右側の「マット」で背景色を指定しないと縁部分がギザギザになります。
GIFとの違いは…GIFは「アニメーションGIFが保存できる」という特徴があります。
PNG-24形式で画像データ容量が重くなってしまう場合はPNG-8でもいいかもしれません。
エクセルやワードに貼られたロゴデータ
時々、ロゴ画像をエクセルやワードに貼り付けた状態でいただくことがあります。
できれば元画像が欲しいところです。
検索エンジンで「エクセルに貼り付けた写真を取り出す」と検索すると、Excelデータの拡張子を「zip」に変更して元画像を取り出す方法がたくさん出てきます。
バックアップを取って試してみてください。
CMYKのロゴデータを独断でRGBに変換しない
いただいたロゴデータのカラーモードがCMYKだった場合、独断でRGBに変換すると色が変わってしまいます。
クライアントや担当営業に必ず確認しましょう。
「RGBのロゴデータをもらえないか」
または
「RGBに変換した時の数値を教えて欲しい」
Adobe Illustratorで開くロゴデータ「.ai」「.eps」では、印刷用のCMYKデータを提供されることがあります。
結構頻繁にあります。
WebサイトにはRGB画像を使うため、カラーモードを変換しないといけません。
ロゴデータの色を表す場合、
「CMYKの色の数値」「RGBの色の数値」
をそれぞれ別に定めているものがあります。
印刷用の色と、モニタで見る光の色、それぞれイメージにふさわしい色を定めています。
CI(コーポレートアイデンティティ)といって、企業内外で統一したブランドイメージを保つためにロゴの取り扱いを厳密に定めている企業やお店は多いです。
ロゴの色が決まっていない場合は、RGBに変換した色を見てもらいましょう。
「もっと鮮やかな赤がいい」
「黒は真っ黒にして欲しい」
などのご要望をいただくことがあります。
CMYKのロゴデータをもらったら、必ずRGBの数値を確認しましょう。
色についてはこちらでも解説しています。
ロゴの縦横比や色を変えるのは厳禁！
ロゴはそのままの色、形で使わなければいけない大切な情報です。
使用可能な背景色が決まっている場合もあります。
Web制作の現場やDTPでもロゴデータが改変されているのを何度か見たことがあります。
絶対にやめましょう。
ロゴデータを開いたらフォントが無い時
IllustratorやPhotoshop PSDのロゴデータを開いた時に
「フォントがありません」
とアラートが出ることがあります。
これはパソコンやMacにインストールされていないフォントが使われていて、正しい文字の形を表示できないことを意味します。
ロゴ以外の説明文テキストなどのフォントが無い場合は問題ありません。
ロゴそのものに使われているフォントが無い場合は、正しいロゴデータをもらえるよう手配しましょう。
Adobe illustrator の場合
「フォントをアウトライン化したデータをください」
Adobe photoshop の場合
「フォントをラスタライズしたデータをください」
おわりに
企業やお店などにとって大切なロゴ。Webサイト上でも目に付く、ブランドイメージを確立するシンボルでもあります。
Webデザインでロゴデータを提供されたら、ファイル形式は何なのか、RGBになっているか、取り扱いは何に注意したらいいのかを適切に判断してWebサイトを制作したいと思います。
