画像（フォーマット・ファイル形式・処理技術・カラー指定） Web制作用語

ホームページ（ウェブサイト）を制作し、効果的に運営していく上で、画像やバナーの取り扱いは非常に重要です。文字だけの情報に比べて、視覚的な要素はユーザーに直感的な魅力を伝え、直帰率の改善やコンバージョン率の向上に直結します。

ここでは、Web制作やSEO対策の現場で頻繁に登場する画像フォーマット（JPEG、PNG、GIFなど）や、alt属性、キャプションといった専門用語について、より専門的にはどのように扱われているのかを交えながら解説していきます。画像サイズを決定するピクセル（px）の概念から、色を指定するRGBやHEXまで、自社の事業をインターネット上で展開する際に知っておきたい基礎知識をまとめています。

・画像の役割とホームページにおける基本用語

ホームページ（ウェブサイト）を構成する要素として、バナーや画像の適切な配置はサイト全体の印象を大きく左右します。まずは、画像を構成する基本単位や、SEO対策において設定が必要な属性について見ていきます。

・主な画像フォーマットとファイル形式

ホームページ（ウェブサイト）で使用する画像には、いくつかのファイル形式が存在します。写真に適したもの、ロゴやイラストに適したものなど、用途に合わせて適切なフォーマットを選択することが、ページの表示速度改善などにもつながります。ここでは、代表的なファイル形式の特徴を整理します。

・画像処理技術とカラー指定に関する知識

最後に、画像をきれいに表示するための処理方法や、ホームページ上で色を正確に表現するための指定方法について解説します。デザインの意図をブラウザ上で正確に表示し、適切な見え方を維持するために知っておきたい項目です。

バナー（banner）

バナー（banner）は、「旗」「旗印」という意味があり、ウェブサイト（ホームページ）においては、リンク用の小さな画像を意味します。

内部コンテンツに対する内部リンク用の小さな画像もバナーと呼ぶことがあります。

近年ではファイル形式は様々ですが、以前はGIFやGIFアニメーションが一般的でした。

「サイトの看板」としてのバナー

バナーは、狭義にはかつて一般的だった相互リンクなどの際に、リンク元にリンク設定時に使用してもらうための画像として、「サイトの看板」的な意味合いがありました。ロゴなどが入った小さいリンク用画像が一般的でした。商用、非商用問わず主に広告・宣伝用の看板画像の意味合いがあり、画像リンク用の画像として用いられていました。

ホームページ制作の1ポイント

ホームページ制作でバナーを設置して、それが単なる画像ではなくリンク用の画像であることをうまく示すことで、より一層ユーザービリティが高まります。マウスカーソルのポインタは変化しますが、バナーにカーソルが乗った時に透明度が変わるなどの工夫をするとより一層良いでしょう。

ユーザービリティの概念に効率性というものがあります。効率性とは、学習後の熟練ユーザーが決められた作業をいかに速くきちんと終えられるかということだ。リピートユーザーをターゲットとするネットバンクやオンライン証券、会員制メディアサイトなどでは、熟練者の効率性を考慮した設計が必要となります。

px（ピクセル）

px（ピクセル、pixel）は、ホームページ制作においてもよく使用される単位で、コンピュータやウェブページにおいて画像や描画領域を扱う際の、色情報を持つ最小単位、最小要素で画素と呼ばれます。

ホームページ制作（ウェブサイト制作）においては、要素や画像の幅などを指定する際の単位としてこのpxを用います。

Web制作での要素の指定単位

色調や階調を示せる最小要素で、ホームページ制作（ウェブサイト制作）においては、一般的にこのピクセル単位やパーセンテージで各要素の幅や高さを指定します。

ただ、レスポンシブデザインなどでは、ピクセル単位での指定よりもパーセンテージでの要素幅など指定が一般的です。

px（ピクセル、pixel）で表現される画像

なお、px（ピクセル、pixel）で表現される画像は、ベクター画像の対の概念としてビットマップ画像、ラスター形式と呼ばれます（ビットマップイメージ/BMP）。

ホームページ制作・Webデザインの1ポイント

ホームページ制作では、各種幅や高さについてピクセル単位で指定することもパーセンテージで指定することもできますが、ピクセル単位の指定の影響で、スマートフォン表示などにおいてレイアウト崩れが起こることがありますので注意が必要です。

Web用画像の適正な解像度・ピクセル数 スマホ・一眼レフの写真をホームページ用に最適化する方法

alt属性

alt属性（オルト属性）は、ホームページ制作においてimgタグでウェブページに設置する画像に対して、その画像が表示できない時に示す代替テキストを指定します。画像タグの必須属性であり、画像SEOのためにも最適に指定すべき属性です。

ページの読み上げにおいては代替テキストで指定された文字列が読み上げの対象となります。

alt属性は必須指定項目

alt属性の指定は、画像にテキストベースの情報を与えるため、アクセシビリティ、SEOの関係で非常に重要な設定項目で、imgタグにおいて、alt属性は必須指定項目になっています。この属性はホームページにアクセスした際に画像が表示できない、もしくは非表示設定になっている場合に代わりに表示するテキストの指定です。

アクセシビリティ

alt属性は非常に重要で、アクセシビリティの関係でウェブページ読み上げが必要な場合、代替テキストが未指定だと、そのページに訪れるユーザーには画像設置箇所が理解できない場合があります。

SEO

また、検索エンジンクローラーへウェブページのコンテンツ内容をうまく伝えるためにも、alt属性の指定は重要な設定項目です。画像のalt属性の指定は、SEOのひとつです。

ホームページ制作・SEOの1ポイント

ホームページ制作において、画像のオルト属性は必須指定項目になっていますが、未指定でもページの描画には影響がないため、設定しないままになっていることがよくあります。画像内部に画像として組み込まれたテキストの内容を検索エンジンは理解できないため、きっちりと設定することでSEOとしての効果を期待することができます。

キャプション

キャプション（caption）は、ホームページ（ウェブサイト）においては、ウェブページに挿入された画像（写真や図）、表についての付属的説明文です。表のキャプションにはcaptionタグを使用します。概ね画像の下などに小さな文字として掲示されます。

キャプションを示すことで画像の意味を伝える（SEO）

画像に関するキーワードのヒントは前後の文脈を構成する単語であったり、alt（オルト）属性などがメインとなりますが、画像にキャプションを示すことで画像の意味を検索エンジンに伝えやすくなります。画像に対するSEOを検討する場合には、その画像と画像に対するキーワードの関連性を示しましょう。

ホームページ制作・SEOの1ポイント

ホームページ制作において、設置画像のキャプションを設置することは、ユーザーへのヒントになると同時に検索エンジンに対するヒントにもなります。画像とキーワードを関連付けるためには、キャプションの利用も検討してみても良いかもしれません。

ロールオーバー

ロールオーバーは、ホームページ（ウェブサイト）においては、アンカー（リンク）箇所にマウスポインタを合わせた時に、テキスト色や背景色、リンク画像などが切り替わるウェブでの表現のことです。ホームページ制作において画像リンクなどをわかりやすくするために用いられるWeb技法です。通常の画像と画像リンクを区別することでユーザービリティを高めることができます。

リンクであることの強調

ホームページ上のリンク箇所にマウスをあてると、ポインタが切り替わるため、リンクであることはわかりますが、ロールオーバーを施すことで、より一層リンクであることが強調されます。

テキストリンクの場合はテキストデコレーションを無効化していない限りアンダーバーなどによって該当箇所がリンクであることがわかりやすいですが、画像リンクの場合は、Webデザイン性向上のために画像周りのボーダーなどを消す場合が多く、リンクであることがわかりにくい場合があります。こうした時にロールオーバーを施すことで、その場所が画像リンクであることを強調することができます。

ホームページ制作・Webデザインの1ポイント

ホームページの表示において基本的なPC閲覧の場合は、ロールオーバー機能が働き、リンクであることをユーザーに伝えることができますが、iOS端末やアンドロイド端末など、タッチデバイスではタップで操作するため、こうした「リンクであることを伝える」ということは難しくなっています。ホームページ制作時にメディアクエリの使用で、こうしたタッチデバイスに配慮したリンク設置を心がけたほうが良いでしょう。

スクリーンショット

スクリーンショットは、コンピュータのモニタなどに表示されたものをそのまま切り取って保存した画像です。ほとんどのパソコンに標準でインストールされています。

切り取り範囲は全体、または選択した一部分で、jpeg、pngなど様々なファイル形式で保存することができます。スクリーンキャプチャ、キャプチャとも呼ばれます。

サイトの修正箇所の赤入れに

スクリーンショットは、ホームページ制作（ウェブサイト制作）においては、制作中のウェブページにおいて修正箇所の赤入れなどに便利です。標準のツール内に線などを描画する機能がついている場合がほとんどですので、画像を切り取ってすぐに赤入れをすることができます。

ホームページの中で修正対象となるページをスクリーンショットで画像化して、その画像に赤入れをすると、口頭で伝えたり文章で伝えるよりも修正箇所を伝えやすくなります。

ホームページ修正のご依頼方法と修正時の代替案ご案内例

ホームページ制作・Webデザインの1ポイント

スクリーンショットは、スマートフォンの普及を受けて一般的になってきました。スクリーンショットで切り取った画像はファイルサイズが小さいことが多く、ホームページ制作において利用すると画像が荒くなることがあります。ただし、逆にその機能を利用して、ファイルサイズを小さくするということも一つのテクニックかもしれません。

JPEG

JPEG（Joint Photographic Experts Group、ジェイペグ）は、ホームページ制作（ウェブサイト制作）でもよく使用される画像圧縮方式のひとつで、一般的に非可逆圧縮の画像フォーマットです。通常の写真に適した形式ですが、背景の透過はできません。

JPEGの特徴

JPEGは、GIFなどに比べて、写真などの圧縮に適しています。拡張子は.jpg、.jpegです。

一般的に、デジタルカメラやスマートフォンのカメラ機能などで撮影される画像は、JPEG方式で保存されます。

JPEG画像の透過情報

なお、JPEGは画像の透過情報を含めることができません。

背景が透明に指定されていた他形式の画像ファイルをJPEGに変換する際には、背景の透明部分は白で表現されます。

ホームページ制作・Webデザインの1ポイント

JPEGは、ホームページ制作で最も使用される画像ファイル形式の一つです。主に写真等の場合はこのファイル形式が用いられます。JPEGも画質の調整ができるため、ファイルサイズを変えやすいですが、一部CMSでは画像アップロード時にファイルサイズ縮小のために自動的に画質を下げるものがありますので注意が必要です。ロスレス圧縮に関しては、JPEGやPNG、WebPのいずれにおいても、再エンコードによって不要なメタデータの削除、カラープロファイルの軽量化、エントロピー最適化によるサイズ削減が実現可能です。たとえば、JPEG画像に対してmozjpegなどのライブラリを用いた再圧縮を行えば視覚品質を保ちながら20〜40％の転送量削減が可能です。

GIF

GIF(Graphics Interchange Format)は、ホームページ制作（ウェブサイト制作）で使用する画像ファイルで、画像データ圧縮ファイル形式です。拡張子は「.gif」。ファイルサイズが小さめで、背景の透過が可能です。GIFアニメーションを作成できる他、ディザのありなしを設定することができます。

GIFの特徴

GIFは透過情報や256色までの画像をロスレス圧縮することが可能で、色は2（モノクロ）から256までの間の2の乗数の値で指定して保存することができるため、他の画像ファイルに比べて軽量であることが特徴です。

写真などの圧縮には不向きですが、コンピュータで描かれたイラスト等には向いています。

GIF透過情報とファイルサイズ

透過情報を含めることのできるPNG形式と比べられることもありますが、使用カラーが限定されている場合は、GIFの方が圧倒的にファイルサイズが小さいため、今でもサイトの軽量化のためにホームページ制作（ウェブサイト制作）ではよく使われます（なおjpegは透過情報を含めることはできません）。

ホームページ制作・Webデザインの1ポイント

背景が透明である画像の最大のメリットは、その背景にある画像やカラーの上に画像を設置することで、透明部分が透けて、Webデザイン表現を高めることができる点です。

GIFアニメーション

GIFアニメーションは画像ファイルであるGIFを利用したアニメーションで、一つのGIFファイルの中に複数の画像（GIF）を組み込んで連結させ、これらを連続して描画することでアニメーションを可能にしています。各画像への切り替えまで時間、アニメーションループなども設定することができます。

ホームページ制作においてGIFアニメーションを利用することで、軽量で動きのある表現をすることができます。

ホームページ制作では「フラッシュ」の代用として

ホームページ制作（ウェブサイト制作）においては、iOSなどでフラッシュが使えない現状では、GIFアニメーションは、改めて使用されつつある手法です。ファイルサイズも小さく、複数枚の画像をループさせることができるため、簡易的なアニメーションには向いています。

ホームページ制作・Webデザインの1ポイント

ホームページの中に「動く部分」があると、その部分のインパクトは強まりますが、ユーザーによってはそれが本文閲覧に邪魔となり、疎がられることもあります。Webデザイン性を高める場合でも必要最小限の仕様に留めておいたほうがよいかもしれません。

PNG

PNG（Portable Network Graphics、ポータブル・ネットワーク・グラフィックス）は、ホームページ制作（ウェブサイト制作）でもよく使用されるビットマップ画像を扱う画像ファイルフォーマットで、圧縮による画質の劣化のない可逆圧縮が可能です。拡張子は、.png。ファイルサイズはやや大きめですが背景の透過が可能です。

PNG透過情報とファイルサイズ

PNGは、画像に透過情報を含めることができ、また、特許の関係でGIFの利用が制限されていた頃に、GIFの代替物として開発された経緯があるため、GIFとよく比較されますが、フルカラーのためGIFよりもファイルサイズは大きいものの、使用色が多い場合にはその分キレイに表示されます。

PNGのカラーモード

PNGは、16ビットまでのグレースケール（モノクロ）24・48 ビットのRGB、8ビットまでのインデックスカラーモードが使用できます。

ホームページ制作・Webデザインの1ポイント

ホームページ制作で使用する画像の中で、背景の透明情報を設定できるものはGIFとこのPNGです。JPEGは背景色を削除して透明にしようとしても、描画されるときには白として表現されます。ただ一般的にファイルサイズが大きいので、ホームページの表示速度を考える場合には、ファイルサイズに注意しましょう。PNGの場合はzopfli-pngなどのアルゴリズムによって圧縮率を最大化するバイトレベルの最適化が行えます。

ビットマップイメージ/BMP

ビットマップイメージ（bitmap image）/ビットマップグラフィックは、コンピュータ上のグラフィック表現におけるピクセル（画素）を用いた画像の表現形式のことを指します。ホームページ制作で使用するホームページ設置画像は広い意味でのビットマップイメージです。狭義にはWindowsの標準的な無圧縮画像保存形式「BMP」を意味します。

ビットマップイメージの種類

ビットマップイメージは、色のついたドットの集合として画像を表現します。GIF、JPEG、PNG、TIFFもビットマップイメージです。BMPと呼ばれる形式もビットマップイメージの一つですが、狭義のビットマップ形式はこのBMPです。

BMP

BMPは、Windowsの標準的な無圧縮画像保存形式です。JPEGなどの形式は、圧縮保存形式ですが、BMPは基本的に無圧縮です。

ビットマップ画像（ラスター形式）

ベクター画像（ベクターファイル形式）が、線・色・曲線といった描画の表現をすべて数値で管理する形式であるのに対し、ビットマップ画像（ラスター形式）は、ドット（1ピクセルの細かい点）の集合によって画像を生成しています。細かいドットの集まりとして画像が構成されているので、グラデーションによる色の移り変わりなど非常に繊細な表現が可能です。ただ、画像を拡大すると点の配置が歪んでしまい、画像が粗く見え、歪んだり潰れてしまうことがあります。

ホームページ制作において、部分的にベクター形式であるSVG（Scalable Vector Graphics。テキストベースのベクター形式）を利用する場合もありますが、基本的にJPEG、GIF、PNGといったビットマップ画像（ラスター形式）が利用されます（近年では次世代フォーマットも利用されます）。

EPS ベクターファイル形式（ベクター画像）

ホームページ制作・Webデザインの1ポイント

ホームページ制作において、画像を設置する場合、なるべく要素の大きさに合わせて画像のピクセル数を調整したほうがファイルサイズ的にロスが少なく、また、レイアウト崩れなどを防ぐことにも役立ちます。

TIFF

TIFF（Tagged Image File Format）は、画像データのファイル形式のひとつです。タグと呼ばれる識別子を使用して様々な形式のビットマップ画像を表現します。ホームページ制作（ウェブサイト制作）ではほとんど使用されません。

TIFFの記録形式

TIFFは、記録形式の異なる様々なファイルを保存できることが特徴です。TIFFは、非圧縮、LZW圧縮、ZIP圧縮、PackBitsなどの圧縮方法が使用可能です。

拡張子は.tif、.tiff。

ホームページ制作・Webデザインの1ポイント

ホームページを作成する時に画像を使用する場合にも、設置可能な画像ファイルの種類は限定されています。画像SEOは、単に検索エンジン向けに画像を最適化するという表層的な施策にとどまらず、検索インデックスへの露出、表示速度、クローラビリティ、構造化データとの整合性、アクセシビリティに関係しています。インフラレベルでの画像最適化は、単なるファイル軽量化にとどまらず、パフォーマンス向上とUX全体の向上につながります。

EPS

EPS（Encapsulated PostScript）は、Adobe System社が開発したPostScriptで記述された画像ファイル形式です。ベクターファイル形式（線・色・曲線といった描画の表現をすべて数値で管理する形式）で一般的には高品質画像の印刷に用いられます。ホームページ制作においてはそのままEPS形式ファイルを用いることはありません。

EPSは、PostScriptの図版データを画像ファイル化する画像ファイルフォーマットです。拡張子は.eps、.epsf。エンキャプサレイティッド・ポストスクリプト。

ベクターファイル形式（ベクター画像）

ビットマップ画像（ラスター形式）が1ピクセルの細かい点の集合によって画像を生成しているのに対し、ベクター画像（ベクターファイル形式）は、線・色・曲線といった描画の表現をすべて数値で管理する形式です。拡大や縮小、劣化に強い特徴があります。EPSの他は、AI（Adobe Illustrator）、PDF（Portable Document Format）、SVG（Scalable Vector Graphics）などがあります。

ホームページ制作の1ポイント

ホームページを作成する時に使用することのできる画像ファイルフォーマットは限られており、汎用性の高いファイル形式のみとなっています。ホームページ制作において、使用する画像を制作するときは、これらのフォーマットに合わせてファイルを吐き出す必要があります。圧縮率によってファイルサイズが大きく異なり、サイト表示速度に影響を与えるため、画像制作時には圧縮率にも配慮したほうが良いでしょう。

インターレース

インターレース (interlace)は、画像の伝送においてデータ量を増やさずに描画回数を増やす技術で、ファイル情報を端から順ではなく、飛び飛びに転送する転送・描画技術です。ホームページ制作でも設置画像を作成する時によく使用します。

ホームページ制作におけるインターレース

ホームページ制作においてはインターレースGIF、インターレースPNG、プログレッシブJPEGなどのインターレース方式の画像の使用により、転送速度の遅いナローバンド回線や高解像度の画像でも、すべてのファイルの転送が終わる前にから大まかな全体像を伝えることができます。

ウェブサイトでの描画

サイトの描画においても画像ファイルはインターレースによって、画像データの一部を受信した時点から画質は粗いもののの描画が開始されます。こうしたインターレース画像を使用しておくと、完全に描画が終わる前でも全体的なイメージが伝えることができます。

ホームページ制作・Webデザインの1ポイント

ホームページ制作において、インターレース機能を持つ画像を使うと、画像の読み込みが完全に終わる前でもぼんやりと画像の概要が浮かび上がってくるため、イメージは伝わりやすくなります。インターレースによる描画は最初モザイク画のように表示され、画像の読み込みが終わると、その画像がくっきり表示されます。

アンチエイリアス

アンチエイリアスは、画像の斜線や曲線、画像を変換する時などに発生する歪み（エイリアス）を減らすための処理で、アンチエイリアスを施すことによりジャギー（ギザギザ）が減り、境界線がなめらかになります。アンチエイリアシング（anti-aliasing）とも呼ばれます。ホームページ制作においては、設置画像を加工する際に行います。スムージングと呼ばれることもあります。

中間色を擬似的に作りだしてピクセル間を補完

アンチエイリアスを施すことでギザギザ部分の中間色を擬似的に作りだしてピクセル間を補完します。その結果、画像のギザギザ部分が滑らかに表示されるようになります。Webブラウザにおいては画面上のテキストや画像のエッジを滑らかにする効果があります。

ポストプロセスアンチエイリアス

アンチエイリアス （Anti-aliasing）のひとつとしてポストプロセスアンチエイリアス （Post-processing Anti-aliasing）という手法があります。ポストプロセスアンチエイリアスは、画像を画面に表示する前にカメラの画像バッファにフルスクリーンのフィルターと効果を適用する処理のひとつです。ポストプロセスアンチエイリアスの一つにFXAA（Fast Approximate Anti-aliasing）という技術があります。これは既存の画像にアルゴリズムを適用して滑らかにする技術です。:FXAAよりもさらにより高いパフォーマンスを追求したアンチエイリアスとしてTXAA （Temporal Anti-aliasing）という技術もあります。

ホームページ制作の1ポイント

現在ではモバイル端末付属のカメラであっても高解像度の写真画像を撮ることができますが、解像度の低い画像の場合は、こうしたギザギザが発生することがありました。これは画素数だけの問題ではなく、ファイル形式の変換やカメラのレンズの口径などにも影響されます。

ジャギー

ジャギーは、ウェブページにおけるビットマップイメージなどの輪郭に表れるデジタル特有の段々になったギザギザで、低解像度の画像が要素の幅などに合わせて引き伸ばされた時に表れます。ジャギーがあるとテキストや細かいデザイン要素を含む場合に読みにくく不自然に見えることがあります。アンチエイリアシング（アンチエイリアス）によってピクセルの境界に中間色を挿入する処理を行うなどの工夫によってジャギーを滑らかにすることで目立ちにくくすることができます。

ジャギーに対する処理

ホームページ制作において設置画像のジャギーに対する処理はアンチエイリアスなどで行います。

ホームページ制作の1ポイント

低解像度の画像やピントがボケた画像は、あとで加工しようと思ってもなかなか難しいことがあります。なるべく元画像のクオリティを上げた方が、あとで加工によって補正するよりも結果的に手間が省けるでしょう。画像の作成時にはある程度の解像度で作成しておくに越したことはありません。

ディザ

ディザ（dither）は、GIF形式の画像ファイルにおいて、少ない色数で、それらの色を組み合わせて中間色を表現し、より多くの階調を表現する技術です。大半の画像作成ソフトウェアでは、GIFファイル出力時にディザのありなしを選択することができます。

ディザリング

画像処理において画像の色数を削減したり、少ない色数で画像を作成するにディザリング手法が用いられます。主に異なる色の点（ピクセル）を混ぜて配置して中間色を表現します。ディザリング形式には誤差拡散法、ハーフトーンディザリング、ランダムディザリング」などがあります。

ホームページ制作の1ポイント

同じだけの結果であるならば、あとはどれほど手間や時間を削減するかということはビジネスでも同じですが、ホームページ制作においては、手間や時間の他に、「いかにファイルサイズ」ということもポイントとなります。ファイルサイズの縮小や手順の削減によって、サーバー負荷をはじめ、ページの応答速度に影響を与えるからです。

Illustrator

Illustrator（イラストレーター）は、Adobe Systems社が開発したへジェ線などによる描画アプリケーションソフトです。

ホームページ（ウェブサイト）の制作においては、画像パーツの制作をIllustratorで行うことが多く見受けられますが、Photoshopと同様に、ウェブページに挿入する画像は、大きな印刷物などのようには高解像度が必要ではないため、ウェブ制作においては特に必要なソフトではありません。主に印刷業界などでイラスト・ロゴ制作、図面、広告、パッケージな制作などをデザインする描画ツールソフトとして使用されています。なお、タブレットやスマートフォン向けに、Adobe Illustrator Drawというアプリも登場しています。

汎用性・互換性が低いai形式

また、Illustrator独自のai形式などは汎用性が低いため、制作者同士の間のファイルの受け渡しには注意が必要です。
ソフトウェアのバージョンが異なるとaiファイルを開けない、一部の指定が破棄されるなど、汎用性・互換性が低いソフトウェアです。

ホームページ制作・Webデザインの1ポイント

ホームページ制作において、各種ソフトウェア、オーサリングツールがありますが、それぞれの互換性の問題もあり、また、ソフトに頼ると本質的な仕組みが理解できなくなることもあります。

イラストレーターもバージョンの違いによってファイルが開けない事がありますが、編集はできないもののPDFとして開くなどの方法によって、閲覧だけはできることもあります。

Flash（フラッシュ）

Flash（フラッシュ）は、Adobe Systems社が開発したアニメーションコンテンツで、音声、動画、ベクターグラフィックスを組み合わせて制作されます。また、アニメーションの中に操作・入力フォームを組み込むことができます。拡張子は.swf。かつてはホームページ制作でもよく利用されていましたが、iOS端末で表示されないことから最近ではほとんど使用されなくなりました。

Flashはあくまでプラグインツールであり、標準のHTMLに含まれていない機能がたくさんあります。全面Flashのサイトもたくさんありましたが、iOS端末で使えないこともあり、本来のホームページの役割であるコンテンツをユーザーに届けるのを妨げる原因となる恐れがあります。

iOS端末では使えないフラッシュ

ウェブにおいてもフラッシュはアニメーションで多彩な表現ができるため、一昔前までは主流でしたが、近年普及したiOS端末では、フラッシュが再生できないことから、ホームページ（ウェブサイト）で使用されることはほとんどなくなりました。

ウェブサイトでフラッシュを使用する場合は、iPhoneなどに合わせて、スマートフォン用ページを作るか、iOS端末などからのアクセスの際に代わりのコンテンツを表示させるなどの配慮が必要です。こうした二重の手間が必要な点からフラッシュは使用されなくなりました。

ホームページ制作・SEOの1ポイント

一時期フラッシュが多用され、フラッシュサイトだらけになった時期もありましたが、iOS端末で表示されないため、iPhoneなどの普及によって、フラッシュサイトは姿を消していきました。HTML5とjQueryなどを組み合わせると、近いような表現が可能であるため、今後はこれらを利用し、アニメーションを駆使した面白いホームページが現れるかもしれません。SEOにおいてはモバイル端末用にフラッシュを非表示にして代替コンテンツを表示するといった工夫が推奨されています。

RGB

RGBは、赤 (Red)、緑 (Green)、青 (Blue) の三つの原色を使用して表現する色の表現法の一種（加法混合）で、黒に対してRGBの光をあてることによって色を表現します。ホームページ制作におけるCSSによる指定では、HEX値でのカラーの指定が一般的ですが、RGB値でのカラーの指定も可能です。特にアルファ値を指定する場合はRGBでの指定がなされます。

CMYK 減法混色

RGB値での指定（ホームページ作成時）

ホームページ制作（ウェブサイト制作）においては、ウェブページのデザインにおいてウェブカラーの指定をRGBで記述することもできます。R、G、Bそれぞれの値を数値で指定します。

RGBa

またRGBに加えてアルファ値（透明度）を指定する事もできます（RGBa）。

ホームページ作成時に使用する画像は、ディスプレイのカラー表現がRGBのため、それに合わせて制作する必要があります。

ホームページ制作・Webデザインの1ポイント

ホームページを作成する時、設置画像はRGBモードで制作されたものを使用する必要があります。もしCMYKモードで作成された画像をホームページに設置した場合、類似色でしか表現されないことがあります。ホームページで使用する画像をアップロードして表示した時に色合いがおかしい場合は、ローカルでの画像生成・保存時のカラーモードを確認してみましょう。

CMYK

CMYKは、色の表現方式の一つで、シアン（Cyan 水色）、マゼンタ（Magenta 赤紫）、イエロー（Yellow 黄色）、ブラック（Key Plate 黒）といった三つの色料原色と黒を使用して表現する色の表現法の一種（減法混色）で、白に対してCMYKをかぶせることによって色を表現します。ホームページ制作においてはPCモニタなどがRGB表現であるためCMYKを用いることはありません。

ホームページ制作におけるCMYKとRGB

このCMYKは、印刷などで利用され、光による表現であるRGBとは異なるため、ホームページ制作（ウェブサイト制作）においては、ウェブカラーの指定をCMYKで記述することはできません。

CMYKモードで保存された画像は、RGB表現の環境下では類似色で表示されるため、イメージとは異なった色合いになることがあります。こうしたことからホームページ制作においてはCMYKでの表現を用いることはありません。

画像を作成する時はモードに注意する必要があります。

ホームページ制作・Webデザインの1ポイント

CMYKは白い紙に印刷されることを前提としたカラーモードで、RGBは光の混合によって黒い背景に色を表現することを前提としたカラーモードです。ホームページは当然ながらモニタに描画されることを前提としていますので、画像等はRGBモードで作成する必要があります。

パンフレットデータなどをホームページ制作において再利用する場合はカラーモードに注意しましょう。

HEX

HEXは、ウェブページのデザインにおいて、CSSなどのスタイルシートでウェブカラーを16進法（0から9、aからf）で指定・記述する方法です。ホームページ制作においては色の値を指定する場合にこのHEXを使用します。なお、HEXは16進法を意味する「hexadecimal」からこの表記がなされています。

HEXの表現方法

HEXの色表現には、先頭にハッシュ記号（#）をつけて、その後に16進法の色コードを記述します。ホームページを作成するときもこのコード表現ですが、一部描画ソフトでもHEX値でカラーを指定することが可能なものもあります。

基本的には6桁で表現しますが、3桁で表現できるものもあります。また、8桁でアルファ値（透過度）の指定をすることもできます。

例）

#f1f1f1

#000

#e60000d9

ウェブ用カラー

ホームページ制作・Webデザインの1ポイント

HEXは16進法で、カラーを指定しますが、CSSによって、グラデーション表現などをする際にも使用することができます。ホームページを作成するに画像を設置するよりも、CSSでカラー指定したほうがファイルサイズが格段と小さくなるため、ベタ塗り箇所などはなるべくCSSで表現したほうが良いでしょう。

カテゴリ別 Web制作/ホームページ制作用語集

フォトレタッチ

画像ギャラリー・Light Box・スライドショー（スライダー）Web制作用語

アイキャッチ画像（ヘッダ画像）・OGP Web制作用語

画像の非同期デコード「decoding=”async”」と遅延読み込み「loading=”lazy”」

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ