ウェブデザイン技能検定3級学科解説その13

ウェブデザイン技能検定3級学科出題範囲

5.ウェブビジュアルデザイン

5-1.ページデザインおよびレイアウト

1.次に掲げるウェブサイトにおけるページデザインに関する要件について一般的な知識を有すること。

1)テキストの種類と利用

2)画像(イメージ) データの種類と加工・利用

3)ウェブカラーデザイン

4)構成について

5)レイアウト手法

2.ウェブサイトのページデザイン、サイト構築について一般的な知識を有すること。

 

ウェブサイトにおけるページデザインに関する要件について

テキストの種類と利用

コンピュータ用語では、通信や解析や表示の対象となる文字データ(文字列)を指す。

文字の表示の仕方などについて何も付加情報がつけられていないものを特に「プレーンテキスト」、

それをファイルに保存したものをテキストファイルと呼び、編集にはしばしばテキストエディタを使用する。

コンピュータ用語とはいえないが、ウェブサイトの内、

特に文章によるコンテンツが充実しているものをテキスト系サイトなどと呼称することがある。

 

画像(イメージ) データの種類と加工・利用

WEBサイト制作では主にJPEG・PNG・GIFの3つの画像フォーマットが中心に使われてる。

これらはすべて主要WEBブラウザで表示でるが、それぞれに特徴があり、用途によって使い分ける必要がある。

 

JPEG(Joint Photographic Experts Group)とは

JPEG(Joint Photographic Experts Group)とは静止画像データの圧縮方式の一種。

規格を制定した組織の略称が方式名として使用されている。

圧縮率が高く、フルカラー(約1,677万色)の画像を扱えるため、デジカメ写真の記録に使用されることが多い。

 

特徴

1. 拡張子が複数存在する

使用するパソコンやソフトによって、有名どころでは「.jpg」や「.jpeg」、

他にも「jpe」「jfif」「pjpeg」「pjp」などの拡張子が混在しているが、

すべて同じものなので基本的には「.jpg」や「.jpeg」を使ったほうが良い。

かつてMS-DOSの時代は拡張子は3文字までという制約があり、

その流れで現在でも拡張子は3文字で表記する習慣が残っているため

「.jpg」を一般的に使用することが多い。

また、Windowsでは大文字と小文字が区別されない。

したがって aaa.jpg も aaa.JPGも同じものとして認識されるが、

UNIX上では大文字と小文字が区別されるので注意が必要である。

 

2. 上書き保存で画質が劣化する

JPEGで加工した画像は、何も気にせず上書き保存すると劣化する場合がある。

JPEGは不可逆圧縮を行うため、画質が劣化してしまうのがデメリットである。

「不可逆圧縮」とは、一度圧縮すると元には戻せない方法のことを指す。

容量が多い画像データをとても小さくできるのがJPEGのメリットではあるが、

圧縮の際に一部のデータを切り捨ててしまうため、画質が劣化してしまう。

 

JPEG圧縮で画像が劣化するしくみ

JPEGによる圧縮では、画像を8×8ドット単位の正方形で区切り、

この正方形をひとつのブロックとして近い色に置き換えている。

その際にデータを切り捨てているため、元に戻すことができない。

また、圧縮しすぎるとブロック単位で色が均一化され、画像がモザイク状になってしまう。

単に画像を開いて閲覧したり、画像のコピーを作成する分には劣化は起こらない。

Photoshopなどの画像加工ソフトで開き、

「上書き保存」や「別名で保存」を行う際に上記の圧縮処理が行われて画像が劣化する。

数回の保存では劣化は目立たないので神経質になる必要はないが、

仕事で画像加工する場合などは注意が必要である。

画像加工ソフトには圧縮率を選択できるものがあるので、

目的に応じて使い分けられるように、設定を確認する必要がある。

 

JPEGの扱い方

圧縮率が高くなるほど画像サイズは小さくできるが、その分画像は劣化してしまう。

JPEGではいくら低圧縮に設定しても多少の劣化は避けられないので、

事前に容量と画質のバランスを見ながら圧縮比を試してから作業する必要がある。

上記に気をつければ、JPEGは写真の圧縮に適した非可逆圧縮方式であり、

写真画像に限ってはJPEGのほうが見た目はそのままにファイルサイズが小さくなることが多い。

 

PNG(Portable Network Graphics)とは

PNG(Portable Network Graphics)とはWEBで

ビットマップ画像を扱うファイルフォーマットとして開発されたものである。

8bit(PNG-8)と24bit(PNG-24)を選択でき、

8bitの場合はGIFと同様に256色でのグラフィックス表示に適した保存ができる。

24bitでは、フルカラーの写真が保存できるほか、透過色を持たせることができる。

 

PNGの特徴

WEB制作などの場面で活躍することが多いPNGの特徴は以下の3つである。

 

1. データを完全に復元できる

PNG形式はデータを復元したときに、完全に元に戻すことができる圧縮方法(可逆性圧縮)である。

PNG圧縮でデータを完全に復元できる仕組み

例えば「赤赤赤赤赤白白赤赤赤赤赤」というデータがあった場合、

このままだと12文字分の容量だが、「赤5白2赤5」と表現すると6文字分に削減することができる。

これがPNG形式の圧縮方法(ランレングス圧縮)である。

また、この方法は「赤5白2赤5」を「赤赤赤赤赤白白赤赤赤赤赤」に簡単に復元することができる。

これが可逆性圧縮である。

ただし、データを切り捨てる圧縮とは違い、容量が数倍大きくなってしまう。

 

2. 透過処理ができる

透過色とは、指定した色に対して透過情報を一括して加えることができる機能のことである。

背景が1色のみで背景を透明にしたいとき、

背景色を透過色に指定すれば一括して背景を透明にすることができる。

また、PNGは1ピクセルに対して8bitから16bitの透過情報を

付加できるようになっている(アルファチャンネル)ため、

α=0を透明、α=MAXを不透明と定義して、αが0<α<MAX の値を取ると、

その色は半透明を表現することができるようになる。

このように透過処理ができることがPNGの特徴である。

 

3. 比較的新しい画像ファイル形式

PNGは1996年に登場した比較的新しいファイル形式で、

後述するGIF形式に対して多くの機能をサポートしたため、

WEBブラウザやグラフィックソフトでのサポートが進み、

インターネットを中心に普及した背景がある。

そのため、古いPCやブラウザ(IE6など)、

携帯電話ではPNGに対応していない場合もあるため、表示されないことがあるのが問題である。

 

PNGの扱い方

イラストやロゴなどの保存はJPEGだと圧縮ノイズが目立ってしまうので、PNGのほうが適している。

また、ファイルサイズもかなり小さくなるので、これらの制作にはPNGのファイル形式が有効だといえる。

また、加工を繰り返す画像はJPEGだと劣化が進んでしまうため、PNGでの保存が望ましい。

 

GIF(Graphics Interchange Format)とは

GIF(Graphics Interchange Format)とは、インターネット回線の帯域がまだ現在ほど大きくなかった時代に、

容量をできるだけ減らし、かつWebページによる表示もできるように開発された画像フォーマットである。

一時期使用に特許料が要求されたために使用が激減したが、このときにPNGが開発された経緯がある。

 

GIFの特徴

現在はアニメーションとしての認知度が高いGIFには以下の3つの特徴がある。

 

1. データ容量が小さい

独自の圧縮アルゴリズム『LZW』を使っており、

そして色数が256色までなので、データ容量が非常に小さくなる。

また、WEBページとの親和性を高くする設計のため、

インターネット経由の画像表示も負荷が少なくなっている。

『LZW』はPNGと同じランレングス圧縮をさらに効率化した圧縮方法。

 

2. 透過処理ができる

一部のGIF形式は透過をサポートしているため、

画像の一部またはすべてを透明にすることができる。

ただし、PNGと異なり「完全な透過」「不透明」の2段階のみサポートしてる(半透明は扱えない)。

また、透過色の指定は1つのみです。

 

3. アニメーションを作ることができる

1つのGIFファイルに複数の画像を入れることで、

パラパラ漫画の原理を使って動画のように見せることができる。

ただし、色数は256色までのため、本格的なアニメーションとしては機能しない。

 

GIFの扱い方

色数に制限があるので、風景写真など多彩な色を使う場面では再現性が乏しくなる。

代わりに単色が多いロゴや簡単なイラストではJPEG特有のノイズが少なくなり

線の境界(輪郭)もキレイに作ることができる。

データ容量も少ないため、WEBサイトでよく使用されるボタンなどはGIF画像で作ると軽くなる。

 

参照元>株式会社LIG >画像ファイル形式の基礎と特徴まとめ(JPEG・GIF・PNGなど)

 

まとめ

次のウェブカラーデザインについても少し長くなりそうなので今回はここまで。

ウェブデザイン技能検定3級学科の過去問では、画像ファイルに関する問題の出現率は高い。

従って、各画像ファイル形式の特徴をしっかりと把握しておく必要がありそうだ。

 

ウェブデザイン技能検定3級学科過去問

各設問において、正しいものは1を、間違っているものは 2 を、該当設問の解答欄に記せ。

Q1.PNG は、ラスターグラフィックスの代表的なファイルフォーマットの一つである。

正解は1なのだが、ここでラスターグラフィックスという言葉の意味を理解していなければならない。

 

ラスターグラフィックスとは

ラスターグラフィックスとは、ビットマップグラフィックス(ビットマップ画像)のことで、

ビットマップグラフィックスとは、コンピューターで画像や文字を表示する際、

色のついたドット(点)の集まりで表現する方式のことである。

一方、線や面などの図形要素に関するパラメーターで表現する場合は、

ベクトルグラフィックスというため、合わせて覚えておきたい。

 

PNGはコンピュータでビットマップ画像を扱うファイルフォーマットであるため、正解は1となる。

ちなみに、点が線状に並んだもの(ラスター線)を

平行に並べた面として画像を表現しているものをラスター表現と言い、

ラスター(raster)とは、熊手のようなもので面を線状になぞる事を意味している。

ウェブデザイン技能検定3級学科でここまで細かい知識を問われたことはないので、

ビットマップ画像(ラスターグラフィックス、ビットマップグラフィックス)の

代表的なファイルフォーマットには、

BMP – Microsoft Windows Bitmap Image
GIFGraphics Interchange Format
JPEGJoint Photographic Experts Group
JPEG XR – Joint Photographic Experts Group eXtended Range
PNGPortable Network Graphics
PNM – Portable anymap (Netpbm format)
TIFF – Tagged Image File Format
XPM – X window Pixel Map
WebP – Weppy

上記のようなファイルフォーマットがあり、

赤字の部分だけ覚えておけば問題なさそうだ。

 

Q2.画像データであれば、拡張子を.jpeg に変更すれば JPEG 形式のファイル形式となる。

正解は2。

この問題の意図は、おそらく拡張子について理解しているかどうかだ。

jpgでもJPEG形式のファイル形式となると言いたいのか、

拡張子が違えばファイルが開けないこともあると言いたいのか定かではないが、

拡張子を変えればファイル形式が変わるとは言い切れないということだろう。

 

Q3.ウェブページの背景に、GIF アニメーションを表示させることはできない。

 

正解は2。GIFは画像ファイルなので背景画像に指定できる。

 

Q4.アルファチャンネルの説明として適切なものを、以下より 1 つ選択しなさい。

1. 画像の彩度を扱うためのデータ領域

2. 画像の透過度を扱うためのデータ領域

3. 画像の圧縮前のデータを保存した領域

4. 画像の圧縮後のデータを保存した領域

 

PNGの特徴の一つである透過度の説明にあるように、

アルファチャンネルは透過度のデータ領域である。

従って正解は2。

 


 

このエントリーをはてなブックマークに追加


マーケティング・経営ランキング

にほんブログ村 経営ブログへ
にほんブログ村
 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です