DXの現場で画像ファイルを適切に扱う意義とポイントまとめ

DX（デジタルトランスフォーメーション）プロジェクトにおいて、新規事業、サービスを開発する場合、その成果物はアプリケーション、Webサイト、業務システムなどさまざまな形でアウトプットされます。
これらの成果物を創り上げるために欠かせない素材として、画像ファイルがあります。
事業側と開発側では、UX・UI設計の段階で画像ファイルをやりとりすることが多くあります。ブランド固有のロゴデータや写真、イラストがある場合はなおさらです。
そこで今回は、主に事業側の担当者から開発チームへ画像ファイルを共有する場合の適切な方法や、ポイントについてお伝えします。

画像ファイルを適切に扱う意義

前提として、「画像ファイルを適切に扱う」とは、画像の種類に応じた適切なファイル形式（拡張子）と画像サイズで、開発チームに渡すことを言います。
画像ファイルを適切に扱う意義は2つあります。

1．成果物の品質向上
2．UI設計の工数削減

UIを設計する作業は、開発ディレクターの指示の下、主にデザイナーが行います。デザイナーは、高品質のUIを迅速にアウトプットすることで、生産性を上げようとします。
しかし、事業側から受け取った画像ファイルの形式が適切ではなかった場合、画像ファイルの再処理をしたり、適切なファイル形式での画像をあらためて請求したりなど、コミュニケーションコストがかかり生産性が下がる場合があります。
そのため事業側はなるべくUI設計者が扱いやすい形式でファイルを渡すことで、UI設計、ひいてはDXプロジェクト全体の生産性を向上させることができます。

種類に応じた適切な画像ファイル形式

それでは、適切な画像ファイルとはどのように考えれば良いのでしょうか。まとめると下表のようになります。

ブランド・企業ロゴ

ブランド・企業ロゴデータの受け渡しには、AI形式、SVG形式、EPS形式などのベクターデータが適しています。ベクターデータとは、パス、シェイプ、テキストなどの画像を構成する要素の集合、ならびに座標などの数値データを画像として再現したデータ形式をいいます。
ファイルを開くたびに再計算が行われるため、拡大、縮小、加工を行っても画質が劣化しないことがポイントです。
そのため、ブランド・企業ロゴ等をきれいに表示したい場合に適しています。
近年、SVG形式に対応するブラウザが増えてきているため、Web上でブランド・企業ロゴを綺麗に表示させたい場合、SVG形式で展開することが一般的です。
手元にベクターデータがない場合は、ブランドの管理元（例：ブランディング室、広報部、マーケティング部など）に問い合わせてみましょう。ベクターデータが保管されている場合があります。ベクターデータがない場合は、PNG形式がおすすめです。

関連記事：
ベクターデータとは（DX技術用語辞典）
SVGとは（DX技術用語辞典）

写真

写真データを扱う場合は、JPEG形式もしくはPSD形式が適しています。

JPEG形式

JPEGはラスターデータと呼ばれるファイル形式です。少ない容量で表現できる色数が豊富です。そのため、色数が多い写真データの保存に適しています。

JPEG形式のデータを扱うときに注意すべき点は、「不必要なファイルの上書き保存をしない」ということです。JPEG形式は、上書き保存を繰り返すと画質が劣化しやすいファイル形式です。なぜなら、一度圧縮するともとに戻せない「不可逆圧縮形式」と呼ばれる方法でファイルを保存するためです。ファイルを保存する際、データを軽量化するために、一部の色彩データが切り捨てられます。

そのためJPEG形式のデータを開発チームに送る際には、なるべくファイルを再保存などせずにそのまま渡すことをおすすめします。

関連記事：
JPEGとは（DX技術用語辞典）

PSD形式

PSD形式とは、Adobe Photoshop固有のデータ形式のことです。「Photoshop Data（又はDocument）」を略したもので、レイヤーやパス、解像度、スマートオブジェクト、カラーモードなど、Photoshopの独自の画像機能が含まれているのが特徴です。文字の大きさを変更したり、色を変更したり、写真の補正や合成をすることも可能で、デザインやイラスト制作の現場でよく使われています。

関連記事：
PSDとは（DX技術用語辞典）

イラスト・グラフ・図

イラスト・グラフ・図を扱う場合は、PNG形式もしくはAI形式のデータが適しています。

PNG形式

PNG形式は、静止画像を扱うためのファイル形式で、JPEG形式と同じくらい世界中に普及しています。

PNG形式はJPEG形式と異なり、色の少ない画像情報を圧縮し、より小さな保存容量で扱うことができることが特長です。そのため、イラストや図、グラフ、パソコン画面のスクリーンショットなどはPNG形式が適しています。

関連記事：
PNGとは（DX技術用語辞典）

AI形式

AIは、Adobe Illustrator特有の保存形態ですが、他のソフトウェアでも開くことが可能です。 Illustratorはベクターデータ形式で出力されるため、拡大・縮小・加工を行っても画質が劣化しません。

AIデータでイラストを渡す場合の注意点は、そこに配置されている画像もすべて送ることです。

AIファイルにさまざまな画像データが配置されている場合、AIファイルは、そのフォルダ情報を読み込んで、リンクされた状態となっています。そのためそのフォルダ内の画像がすべてそろっていることで、AIデータを編集することができます。

AIファイルを構成する全ての画像データを共有することで、スムーズにデザイン作業を進めることが可能です。

関連記事：
AIとは（DX技術用語辞典）

画像ファイル共有時のポイント

画像ファイルをパワーポイント、エクセルに貼り付けない

画像を開発チームに渡す際は、パワーポイント、エクセルに貼り付けないよう注意が必要です。パワーポイントやエクセルはそもそも画像ファイルではないため、デザイナーが適切に処理することが難しくなります。

画像ファイルを送信する時は、画像ファイル形式でそのまま渡すと良いでしょう。

大容量ファイル送信サービスの利用を検討する

開発チームが社外にあり、共有すべき画像データの容量が大きい場合やファイル数が複数ある場合は、ZIP、LZH、RARなどの形式に圧縮し、メールで受け渡しする方法もあります。
しかし、メールに添付できないほど容量が大きくなってしまう場合があります。
その際は、ファイルストレージサービスやファイル送信サービスなど、大容量ファイル送信サービスを利用することをおすすめします。ファイルストレージサービスはオンライン上のデータ保存領域にファイルをアップしてアクセス権を共有するもので、例えばbox、Dropbox、Googleドライブなどがあります。ファイル送信サービスは、ファイルを特定のサービスにアップロードし、ダウンロードリンクを共有するもので、例えばデータ便、ギガファイル便、firestorageがあります。大容量ファイル送信サービスを利用することで、画像ファイルの劣化を招くことなく、データの受け渡しが可能となります。
大容量ファイル送信サービスの利用は、情報セキュリティの観点から、組織のルールで制限されている場合があります。ルールを確認してから利用すると良いでしょう。

アルサーガパートナーズは、お客様のニーズやセキュリティ要件に応じて、さまざまな大容量ファイル送信サービスに対応した開発体制を提供しています。また、セキュリティと利便性のバランスを追求し、貴社に合った大容量ファイル送信サービスをご提案させていただくことも可能です。

サービスやシステムの開発・運用だけでなく、DXを活用した戦略コンサルティングとして、「DX新規事業コンサルティング」、「DXコンサルティング」、「業務コンサルティング」を提供しています。ご相談・お問い合わせはメールフォーム https://www.arsaga.jp/contact/ からお気軽にどうぞ。