関連ウェブデザイン技能検定3級学科出題範囲5.ウェブビジュアルデザイン5-1.ページデザインおよびレイアウト1.次に掲げるウェブサイトにおけるページデザインに関する要件について一般的な知識を有すること。データの種類と加工・利用3)ウェブカラーデザイン4)構成について5)レイアウト手法2.ウェブサイトのページデザイン、サイト構築について一般的な知識を有すること。ウェブサイトにおけるページデザインに関する要件についてテキストの種類と利用コンピュータ用語では、通信や解析や表示の対象となる文字データ(文字列)を指す。文字の表示の仕方などについて何も付加情報がつけられていないものを特に「プレーンテキスト」、それをファイルに保存したものをテキストファイルと呼び、編集にはしばしばテキストエディタを使用する。文章によるコンテンツが充実しているものをテキスト系サイトなどと呼称することがある。データの種類と加工・利用WEBサイト制作では主にJPEG・PNG・GIFの3つの画像フォーマットが中心に使われてる。これらはすべて主要WEBブラウザで表示でるが、それぞれに特徴があり、用途によって使い分ける必要がある。Group)とは静止画像データの圧縮方式の一種。規格を制定した組織の略称が方式名として使用されている。圧縮率が高く、フルカラー(約1,677万色)の画像を扱えるため、デジカメ写真の記録に使用されることが多い。他にも「jpe」「jfif」「pjpeg」「pjp」などの拡張子が混在しているが、すべて同じものなので基本的には「.jpg」や「.jpeg」を使ったほうが良い。MS-DOSの時代は拡張子は3文字までという制約があり、その流れで現在でも拡張子は3文字で表記する習慣が残っているため「.jpg」を一般的に使用することが多い。Windowsでは大文字と小文字が区別されない。aaa.JPGも同じものとして認識されるが、UNIX上では大文字と小文字が区別されるので注意が必要である。上書き保存で画質が劣化するJPEGで加工した画像は、何も気にせず上書き保存すると劣化する場合がある。JPEGは不可逆圧縮を行うため、画質が劣化してしまうのがデメリットである。「不可逆圧縮」とは、一度圧縮すると元には戻せない方法のことを指す。圧縮の際に一部のデータを切り捨ててしまうため、画質が劣化してしまう。JPEG圧縮で画像が劣化するしくみJPEGによる圧縮では、画像を8×8ドット単位の正方形で区切り、この正方形をひとつのブロックとして近い色に置き換えている。その際にデータを切り捨てているため、元に戻すことができない。圧縮しすぎるとブロック単位で色が均一化され、画像がモザイク状になってしまう。画像を開いて閲覧したり、画像のコピーを作成する分には劣化は起こらない。「上書き保存」や「別名で保存」を行う際に上記の圧縮処理が行われて画像が劣化する。仕事で画像加工する場合などは注意が必要である。目的に応じて使い分けられるように、設定を確認する必要がある。圧縮率が高くなるほど画像サイズは小さくできるが、その分画像は劣化してしまう。事前に容量と画質のバランスを見ながら圧縮比を試してから作業する必要がある。写真画像に限ってはJPEGのほうが見た目はそのままにファイルサイズが小さくなることが多い。Graphics)とはWEBでビットマップ画像を扱うファイルフォーマットとして開発されたものである。8bit(PNG-8)と24bit(PNG-24)を選択でき、8bitの場合はGIFと同様に256色でのグラフィックス表示に適した保存ができる。24bitでは、フルカラーの写真が保存できるほか、透過色を持たせることができる。PNGの特徴WEB制作などの場面で活躍することが多いPNGの特徴は以下の3つである。データを完全に復元できるPNG形式はデータを復元したときに、完全に元に戻すことができる圧縮方法(可逆性圧縮)である。いうデータがあった場合、このままだと12文字分の容量だが、「赤5白2赤5」と表現すると6文字分に削減することができる。これがPNG形式の圧縮方法(ランレングス圧縮)である。簡単に復元することができる。これが可逆性圧縮である。データを切り捨てる圧縮とは違い、容量が数倍大きくなってしまう。透過処理ができる透過色とは、指定した色に対して透過情報を一括して加えることができる機能のことである。背景色を透過色に指定すれば一括して背景を透明にすることができる。値を取ると、その色は半透明を表現することができるようになる。このように透過処理ができることがPNGの特徴である。後述するGIF形式に対して多くの機能をサポートしたため、WEBブラウザやグラフィックソフトでのサポートが進み、インターネットを中心に普及した背景がある。携帯電話ではPNGに対応していない場合もあるため、表示されないことがあるのが問題である。PNGの扱い方イラストやロゴなどの保存はJPEGだと圧縮ノイズが目立ってしまうので、PNGのほうが適している。ファイルサイズもかなり小さくなるので、これらの制作にはPNGのファイル形式が有効だといえる。加工を繰り返す画像はJPEGだと劣化が進んでしまうため、PNGでの保存が望ましい。容量をできるだけ減らし、かつWebページによる表示もできるように開発された画像フォーマットである。一時期使用に特許料が要求されたために使用が激減したが、このときにPNGが開発された経緯がある。現在はアニメーションとしての認知度が高いGIFには以下の3つの特徴がある。データ容量が小さい独自の圧縮アルゴリズム『LZW』を使っており、そして色数が256色までなので、データ容量が非常に小さくなる。WEBページとの親和性を高くする設計のため、インターネット経由の画像表示も負荷が少なくなっている。『LZW』はPNGと同じランレングス圧縮をさらに効率化した圧縮方法。画像の一部またはすべてを透明にすることができる。PNGと異なり「完全な透過」「不透明」の2段階のみサポートしてる(半透明は扱えない)。透過色の指定は1つのみです。アニメーションを作ることができる1つのGIFファイルに複数の画像を入れることで、パラパラ漫画の原理を使って動画のように見せることができる。色数は256色までのため、本格的なアニメーションとしては機能しない。色数に制限があるので、風景写真など多彩な色を使う場面では再現性が乏しくなる。代わりに単色が多いロゴや簡単なイラストではJPEG特有のノイズが少なくなり線の境界(輪郭)もキレイに作ることができる。データ容量も少ないため、WEBサイトでよく使用されるボタンなどはGIF画像で作ると軽くなる。>画像ファイル形式の基礎と特徴まとめ(JPEG・GIF・PNGなど)まとめ次のウェブカラーデザインについても少し長くなりそうなので今回はここまで。ウェブデザイン技能検定3級学科の過去問では、画像ファイルに関する問題の出現率は高い。従って、各画像ファイル形式の特徴をしっかりと把握しておく必要がありそうだ。該当設問の解答欄に記せ。ラスターグラフィックスの代表的なファイルフォーマットの一つである。正解は1なのだが、ここでラスターグラフィックスという言葉の意味を理解していなければならない。色のついたドット(点)の集まりで表現する方式のことである。線や面などの図形要素に関するパラメーターで表現する場合は、ベクトルグラフィックスというため、合わせて覚えておきたい。PNGはコンピュータでビットマップ画像を扱うファイルフォーマットであるため、正解は1となる。ちなみに、点が線状に並んだもの(ラスター線)を平行に並べた面として画像を表現しているものをラスター表現と言い、ラスター(raster)とは、熊手のようなもので面を線状になぞる事を意味している。赤字の部分だけ覚えておけば問題なさそうだ。形式のファイル形式となる。この問題の意図は、おそらく拡張子について理解しているかどうかだ。拡張子を変えればファイル形式が変わるとは言い切れないということだろう。アニメーションを表示させることはできない。GIFは画像ファイルなので背景画像に指定できる。画像の圧縮後のデータを保存した領域PNGの特徴の一つである透過度の説明にあるように、アルファチャンネルは透過度のデータ領域である。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。人脈が欲しい人に人脈は作れない理由PC作業が圧倒的に楽になる!?そろそろタイピングと真剣に向き合ってみては?ウェブデザイン技能検定2級学科過去問の解説その1人生の目的を見つけるためのワークシート地方がPR下手と言われる理由はマーケティングに対する知識が無いからだ。Stargazer.。