こんにちは。CXデザイナー事業本部のスギヤマです。普段はモバイルアプリケーションやLINEアプリケーション開発に携わっております。
ブログ勉強会2023 #5 は「デザイン回」
今回のブログ勉強会2023 #5では、デザインに焦点を当てたプレゼンテーションを行いました。魅力的な記事を制作するために必要な「画像やアイキャッチなどの取り扱い」について要点を共有しました。
具体的には
① ブログ記事で使用される画像に関する基本的な知識
（「これを知れば記事のクオリティがさらにUPする画像データの基礎知識」）
② Figmaを使用した具体的な画像の制作方法
③ DevIOのアイキャッチ制作プロセスにおける考慮事項
（「「アイキャッチ」ってなんだろう？」）
それぞれを詳細に説明し、基本から応用までの段階を構築しました。
導入として、自分は画像の基礎知識に焦点を当てました。デザイナーやフロントエンドエンジニアにとっては日常的に業務で扱う内容かもしれませんが、他の領域のエンジニアやスタッフにとっては新しい情報かもしれません。一つでも新しい学びがあればと思いまとめています。
アジェンダ
- この記事のゴール
- ラスター画像とベクター画像
- 画像ファイル形式とは
- おまけ「その他の画像フォーマットの例」
- もっとよくなる画像の使い方
- おまけ「@1x @2x @3xとは…」
- まちがいさがし
- まとめ
この記事のゴール
- 画像のしくみを知ることで、なんとなくではない、正しい使い方ができるようになる
- 記事中の画像を正しく使うことで、読者に説得力、信頼感をさらに与えられる
ラスター画像とベクター画像
画像には大きく２つに分けることができます。たとえば、左端の兎の画像を拡大したときに、ドットが見えるのがラスター画像、どこまでも綺麗なものがベクター画像です。
ラスター画像とベクター画像は、デジタル画像を表現するための異なるアプローチを取る2つの主要な画像形式です。
簡単に言えば、ラスター画像はドットで表現され写真や複雑なイメージに向いており、ベクター画像は数学的表現で図形やシンプルなイラストに向いています。使用ケースに応じて適切な画像形式を選択することが重要です。
画像ファイル形式とは
画像ファイル形式は、デジタル画像をコンピュータで保存、圧縮、転送するためのファイル形式や規格のことです。
これらのファイル形式は、画像のデータを効率的に保存し、特定の特性（透明度、色の表現、圧縮率など）を制御できるように設計されています。
さまざまな画像ファイル形式があり、それぞれが異なる使用ケースや特徴を持っています。
JPEG (Joint Photographic Experts Group)
ラスター画像。1992年に誕生。JPEGは主に写真や連続トーンの画像に適しており、圧縮率を調整できます。 色情報の損失が生じることがありますが、ファイルサイズを小さく保つことができます。
JPGに適した画像の例 Image by Unsplash / Josh Durham
このような微妙なトーンの美しい写真や、色彩鮮やかなイメージを表現するのに適しています。
圧縮率とは
左はAdobe Photoshop上で、画質を１００に設定してJPG出力した248KBの画像、右は０に設定してJPG出力した18KBの画像です。
画質を下げればもちろんファイルは軽くなりますが、ジャギジャギに劣化してしまいます。そのため、JPGを扱うときにはどの程度圧縮するか、どの程度のサイズにするか、このバランスを確認する必要があります。
JPEG公式サイト： https://jpeg.org/jpeg/
PNG (Portable Network Graphics)
ラスター画像。1995年に誕生。PNGは非可逆圧縮形式で、透明度をサポートしています。 主に図形、アイコン、テキストなどの画像に適しており、高品質な画像を保存できます。
PNGに適した画像の例 背景色を透過することが可能 Image by 写真AC / のだありさ
PNG8とPNG24・32の違い
PNGにはさらに大きく分けて２種類あります。256色のインデックスカラーモードのPNG8と、フルカラーの通常PNGです。
PNG8はファイルサイズが小さいため、ウェブサイトやサービス上など、読み込みの速さが求められるケースで活躍します。通常のPNGはファイルサイズは大きいものの、フルカラーで画像を保存できるため、編集データの保存や、成果物の品質が求められるケースで活躍します。
またPNG32はPNG24を更に高画質に、そして透過情報を持たせたものです。約1,677万色と、256段階の透明度が利用できます。PNG24は透過情報を持ちません。PNG24に透過情報を加えたものがPNG32とされます。
PNG公式サイト： http://www.libpng.org/pub/png/
GIF (Graphics Interchange Format)
ラスター画像。1987に誕生（1989年に透過とアニメーションがサポートされる）。GIFは非可逆圧縮形式で、透明度を表現できます。
主にシンプルなアニメーション、アイコン、ユーモアなどの短いビデオクリップに適しており、ウェブ上で広く使用されています。
GIFに適した画像の例 image by telopict
SVG (Scalable Vector Graphics)
ベクター画像。2001年に誕生。SVGは可逆圧縮形式で、スケーラビリティに優れています。
主に図形、アイコン、ロゴなどのベクターグラフィックスに適しており、さまざまな解像度で鮮明な画像を表示できます。
また、テキストデータやアニメーションもサポートしています。
SVGに適した画像の例。ベクター画像であるため拡縮しても劣化しない
ウェブサイト上など、フレキシブルに表示したいシチュエーションで特に有用です。
（SVGは現在Developers IOでは表示サポートされていません）
W3C「SVG」：https://www.w3.org/Graphics/SVG/
Adobe「SVGファイル」：https://www.adobe.com/jp/creativecloud/file-types/image/vector/svg-file.html
画像ファイル形式の比較
今回取り上げた４つの代表的な画像ファイル形式についてまとめました。画像使用の際は「主な用途」の部分をご参考ください。
正しい画像ファイル形式を使用することで、結果的によりよいユーザー体験を実現することができます。
おまけ「その他の画像フォーマットの例」
BMP (Bitmap):
Windowsで広く使用されるラスター画像形式。非圧縮のビットマップデータを格納します。高品質で大容量のファイルとなります。
TIFF (Tagged Image File Format):
ティフ。非常に高品質な画像データを保存するためのフォーマット印刷業界やグラフィックデザインなどで使用されます。
WebP
ウェッピー。Googleが開発した新しい画像フォーマット。高圧縮率と高品質を提供し、ウェブ用途に適しています。
HEIF (High Efficiency Image File Format):
ヒーフ。iOSデバイスで一般的に使用され、効率的な圧縮と高品質を提供します。
RAW
ロー。デジタルカメラで使用されるもので、生のセンサーデータを格納し、後から画像処理を行うのに便利です。
PSD (Adobe Photoshop)
Adobe Photoshopのプロジェクトファイル形式で、レイヤーやエフェクトなどのデザイン要素を保存します。
もっとよくなる画像の使い方
ではこの画像ファイル形式の知識を踏まえて具体的にブログで画像を取り扱う際に、どんな改善ができるかという４つのポイントと気軽に使えるサービスをご紹介します。
確認できると嬉しい４つのポイント
画像の形式
JPEG、PNG、GIF、SVGと紹介をしました。画像ファイル形式にはそれぞれ特性があります。扱いたい画像がどの画像ファイル形式に適しているのか、確認します。
画像サイズ
あまりにも画像サイズが大きすぎると、ユーザーにとって大きな負荷になります。特に記事やウェブサイト、サービスにおいて、沢山の画像を一度に掲載したいときには要注意です。JPEGの圧縮率や、PNG8やGIFを有効に使ってみます。
クオリティや比率
画像の文字はきちんと読めるでしょうか？ジャギジャギに劣化した写真を使ってはいないでしょうか？またお借りした画像やロゴの比率を変形させていないでしょうか？注意します。
著作権とライセンス
世の中には沢山の無料で使える画像のダウンロードサービスがあります。使用の際には規約を確認し、必要であれば出典を明記します。
インストールなしで使える無料サービス
しかし非デザイナーが画像を扱うのは難易度が高い部分もあります。そのためAdobe製品や特別なアプリケーションを使わなくても、簡単に上記のポイントに気をつけることができるウェブサイトをご紹介します。
adobe Express
https://www.adobe.com/jp/express/feature/image/resize
画像を切り出す、トリミングが苦手な方におすすめ。画像をアップすると、自由なサイズや各SNSに最適なサイズでリサイズできる。大きめの画像を用意してアップするとGOOD。
Kakudai AC
画像のクオリティを保つために使えるサービス。どうしても小さい画像を使わなくていけないシーンでおすすめ。画像をアップすると2倍・4倍・8倍・16倍に拡大できる。
squoosh（スクーシュ）
Googleが開発。画像をアップするとリサイズや圧縮などができる。中央のスライダーを動かすことで、加工前と加工後の圧縮イメージ（どの程度劣化するか）どれだけサイズが軽くなるかも数字で見える。
おまけ「@1x @2x @3xとは…」
高解像度デバイス（Retinaディスプレイなど）に対応するため、モバイルアプリやウェブサービスでは、通常、画像を1倍、2倍、3倍の解像度で用意する必要があります。これにより、画像やアイコンが鮮明に表示され、ユーザーエクスペリエンスが向上し、多様なデバイスに対応できます。
SVGなどのベクター画像は解像度に影響しませんので、用意する必要がありません。
たとえばfavicon作成時に様々な画像を用意する必要があるのはこのためです
まちがいさがし
最後に以上の知識を踏まえて間違い探しです。画像のどこが間違っているでしょうか、またどのように改善すればいいでしょうか。
間違いの画像
↓
↓
↓
正解
上の図
JPEG画像で圧縮率を上げすぎて文字がジャギジャギに劣化し、読み取ることができない状態です。JPEG画像を扱う際は、正しく情報が伝わるように圧縮率とサイズのバランスを取る必要があります。
左下の文字画像
文字の比率が縦長に変形しています。また右の白い空間が無駄になってしまい、余計な画像サイズを取っています。
右下のロゴ
借りてきた他社さまのロゴが変形してしまっています。お借りした画像や素材は特に取り扱いに注意しなくてはなりません。
画像の品質はプロフェッショナルの証明
きっとハイブランドのウェブサイトでも、たとえばロゴの比率が間違っていたり、商品写真がジャギジャギだと多くの人が「詐欺サイトではないか」「ここで買うのはやめよう」と思ってしまうでしょう。
画像の品質は、信頼性や専門性を示します。
ユーザーに適切な情報を受け取っていただくためにも、品質を保ちたいものですね。
まとめ
- 画像には大きくラスターとベクターの２種類がある
- 画像の掲載には以下のことに気を配れると嬉しい
- 画像の形式 → JPGかPNGかGIFかSVGか。
- 画像のサイズ → 解像度やファイルサイズは問題ないか。
- 画像のクオリティと比率 → 文字や情報が読めるか、おかしな比率になっていないか。
- 画像の著作権とライセンス → フリー素材の規約を確認する。出典を明記しているか。
- 画像をしっかり表示することで、ページ全体やサービスの信頼性・専門性の向上につながる
参考
Adobe「画像ファイル」
https://www.adobe.com/jp/creativecloud/file-types/image.html#
5
