ブログ

脱Adobe。次世代ソフトたちでWebデザインの仕事をしてみた - 素材篇

最近、Adobe製品を全部消してしまって仕事しています。Adobe製品ではない、次世代ソフトで仕事をしていますが、Webデザイナーがいわゆる「脱Adobe」するとどうなるかなどを書いてみたいと思います。第2回目は実際に「脱Adobe」してみてでてきた課題を書いてみたいと思います。

ベクター形式の素材は取り扱いがちょっとややこしい

Webサイト制作では、レスポンシブWebデザインが一般化しつつあります。
レスポンシブWebデザインの案件が増えることで、ベクター形式で納品を指定されたり、素材を支給される事が多くなりました。

ベクター形式の素材を取り扱う場合、データファイルに「PDF保存オプション」を指定しているかどうかが鍵になります。
ファイルをAdobe illustrator形式やEPS形式などに保存するときに「PDFデータ」が含まれている場合は、他のアプリケーションで開ける確率が高くなります。
Adobe illustrator形式のファイルで「PDFデータ」が含まれていない場合は、他のアプリケーションで開く事ができません。

最近は、「PDF保存オプション」を指定して保存することが当たり前になりましたが、素材配布サイトなどで、「PDF保存オプション」を指定していないファイルが配布されていることがあるので注意が必要です。

脱Adobeのためにやった素材のデータフォーマットの変更 - AI形式・EPS形式のファイルは、SVG形式に変換<

この機会に素材を整理したので、ベクター形式のデータを中心に素材のデータフォーマットを変更しました。
Adobe Illustrator形式・EPS形式のファイルは、SVG形式に変換しました。

ほとんどが、だいぶ昔に買ったアイコン素材です。ここ3年ほどは、アイコンなどはSVG形式かアイコンフォントしか利用しないケースがほぼ100%です。この機会にPNG形式などの他のデータは削除しました。

データの変換は、「Adobe Illustrator」でバッチを利用しました。素材の中に「PDFデータ」が含まれていないものがあると面倒な話になるので、「Adobe Illustrator」で変換するのが無難だと思います。

脱Adobeのためにやった素材のデータフォーマットの変更 - パターンファイルはEPS形式で統一

「Sketch」では、パターンとしてPNG形式やEPS形式のファイルがそのまま使えます。ただし、SVG形式のファイルはパターンとして読み込むことができません。

「Sketch」ではインターネットで配布されているパターンをそのまま使うことができます。ただ、PNG形式のパターンをそのまま使うのは、パターンの色味を変更するなどするときに加工しにくいときがあります。よく使うパターンや作りやすいパターンファイルはEPS形式で用意しておきましょう。

脱Adobeのためにやった素材のデータフォーマットの変更 - アイコンフォントやSVGアイコンはicomoon appで管理

アイコンフォントやSVGアイコンはicomoon appで管理することにしました。

アップロード後に、アイコンフォントのJsonファイルをダウンロードしておけば、設定したデータを復元することができます。もしもの時に備えて、ローカルにはSVGファイルを保存して管理しています。

素材コンバートサービスを利用してデータを変換

ベクター素材などをSVG形式などにコンバートする場合は、コンバートサービスを利用する方法もあります。

これらのサービスを使って素材をSVG形式にコンバートしておくのもいいでしょう。
ただ、多数の素材がある場合はAdobe illustratorでバッチを利用して変換するのが早いと思います。

「Sketch」は素材の変換に利用しないのが無難

「Sketch」はUI制作には便利なツールですが、素材の読み込みに多少問題があります。

「Sketch」ではAdobe illustrator形式やAdobe Photoshop形式のファイルは1枚画像になってしまいます。また、読み込ませる素材によっては正確に描画できません。

Adobe Photoshop形式のファイルや、容量が大きいベクター素材や「Affinity Designer」 で変換したのち、「Sketch」で読み込ませて利用することをおすすめします。

「Affinity Designer」・「Affinity Photo」を素材変換に利用する

Adobe Illustrator形式のファイルは「Affinity Designer」や「Affinity Photo」なら編集可能です。ただし、素材によっては正確に描画できません。同じ素材でも、Adobe illustrator形式のファイルではなくEPS形式のファイルなら正常に開くことが可能なケースが多いです。

Adobe Photoshop形式のファイルを「Sketch」で読み込ませるには、「Affinity Designer」や「Affinity Photo」で変換します。
PDF形式でエクスポートしたのち「Sketch」で読み込ませればほぼ正確に描画可能です。

まとめ

「脱Adobe」するときに考慮しなければいけないのは素材をどう扱うかでしょう。Adobe illustrator 形式のファイルなどで変換できないものもあったりして以外と面倒でした。
また、Adobe製品で仕事をせざるを得ないケースもあるでしょう。そのような時に備えて、素材フォーマットはAdobe製品でも使える汎用的な形式に統一しておいた方がいいと思います。
次回は、Adobe製品を使わずに仕事してみて、感じた課題などを書いてみたいと思っています。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。