17前期-exp_wd-3.indd

Transcription

1 2017 年前期エキスパートエキスパート CG クリエイター検定 /Web デザイナー検定 /CG エンジニア検定画像処理エンジニア検定 / マルチメディア検定 2017 前期 注意事項 1. 試験開始の合図があるまで, 問題冊子を開いてはいけません. 2. 試験時間は, 単願の場合は80 分, 併願の場合は150 分です. 3. 受験する検定の問題をすべて解答してください. それ以外の問題を解答しても, 採点はされません. 各検定の問題は, 以下の各ページからはじまります. 第 1 問 共通問題 は, 受験者全員が, 必ず解答してください. 第 1 問 共通問題 を解答後, 受験する検定の以下の各ページから解答してください. CGクリエイター検定 5ページ Webデザイナー検定 35ページ CG エンジニア検定 61ページ 画像処理エンジニア検定 89ページ マルチメディア検定 119ページ 4. 解答用紙には, 解答欄以外に3つの記入欄があります. 試験監督者の指示に従い,HB 以上の濃さの鉛筆で記入してください. (1) 氏名欄 マーク例 良い例悪い例 (2) 受験番号欄 ( しっかりぬりつぶされていない, 薄い ) 受験番号を記入し, その下のマーク欄をぬりつぶしてください. 受験番号が正しくぬりつぶされていない場合は, 採点されません. (3) 受験者区分欄受験者区分をマークしてください. 5. 受験する検定の解答欄に記入してください. 第 1 問 共通問題 は, マークシート表面の 共通問題解答 欄にマークしてください. 解答上の注意は以下のとおりです. (1) 解答は, 解答用紙の解答欄にHB 以上の濃さの鉛筆でマーク欄をぬりつぶしてください. 例 : 第 1 問 aの解答としてウをマークする場合 (2)a,b,c, は設問に対応し, それぞれ解答としてア キから選び, マークしてください. (3) 問題文中に注記がない限り,1 つの解答群から同じ記号を2 度以上用いることはできません. 6. 計算機などの電子機器をはじめ, その他試験補助となるようなものの使用を禁止します. 7. 携帯電話,PHS など試験のさまたげとなるような電子機器は電源を切り, 机上に置かずにしまってください. 8. 不正行為が認められた場合は, 失格となります. 9. 気分の悪くなった方, 体調のすぐれない方は, すみやかに試験監督者に知らせてください. 問番 1 題 解答欄 号 ア イ ウ エ オ カ キ a ア イ ウ エ オ カ キ b ア イ ウ エ オ カ キ c ア イ ウ エ オ カ キ

2 注意事項 第 1 問 共通問題 は, 受験者全員が, 必ず解答すること. エキスパート 共通問題 問題数 1 問 問題番号第 1 問 共通問題 CG クリエイター検定 Web デザイナー検定 CG エンジニア検定画像処理エンジニア検定マルチメディア検定 1

3 注意事項第 1 問 共通問題 は, 受験者全員が, 必ず解答すること. 第 1 問 共通問題 以下は, 知的財産権に関する問題である.a~d の問いに最も適するものを解答群から選び, 記号で答えよ. a. 特許権による保護に関して, 保護期間は出願日から何年になるか. ア.10 年 イ.20 年 ウ.50 年 エ.70 年 b. 著作者人格権に関する説明として, 適切でないものはどれか. ア. 著作者人格権は, 著作者の人格的な利益を保護する権利である. イ. 著作者人格権に含まれる同一性保持権は, 著作者の意に反してその著作物に改変を受けない権利であり, ディジタル化された著作物についても, 著作者の許諾がなければ, 自由に改変することはできない. ウ. 著作者人格権には, 同一性保持権のほかに, 氏名表示権と公表権が含まれる. エ. 著作者人格権は, 著作者が死亡したときは, 他者に譲渡することができる. c. 著作権の保護が, 認められるものはどれか. ア. 作家が書いた未発表の小説. イ. コンピュータで検索できるデータベースで, 単に情報を寄せ集めたもの. ウ. 著作物を作成するために必要であったコンセプト. エ. コンピュータプログラムのアルゴリズム. 2

4 d. 会社の Web ページ制作時の行為において, 著作権法上, 著作権侵害に該当するものはどれか. [ 行為 ] 1 新築県庁の正面玄関横に彫刻家 A 氏の作品が常設展示されている.A 氏の彫刻を含む県 庁建物全景の写真を Web ページに掲載した.A 氏には何も連絡しなかった. 2 Web ページを制作した際に,B 氏の Web ページのレイアウトを参考にした. 念のため参 照するリンク情報を掲載した.B 氏には何も連絡しなかった. 3 撮影が許可された作品展で C 氏の作品を撮影した.Web ページにその C 氏の展示作品の 画像のみを掲載した.C 氏には何も連絡しなかったが, 作者の紹介として,C 氏が制作し ている Web サイトのリンク情報を掲載した. ア.1 イ.2 ウ.3 エ. いずれも該当しない. 注意事項 第 1 問 共通問題 を解答後, 受験する検定の以下の各ページから解答すること. CGクリエイター検定 Webデザイナー検定 CGエンジニア検定 画像処理エンジニア検定 マルチメディア検定 5ページ 35ページ 61ページ 89ページ 119 ページ 共通問題 CG クリエイター検定 Web デザイナー検定 CG エンジニア検定画像処理エンジニア検定マルチメディア検定 3

5 エキスパート Web デザイナー検定 問題数 問題番号 10 問第 1 問 共通問題 / 第 2 問 ~ 第 10 問 35

6 注意事項 第 1 問 共通問題 (p.2) は, 受験者全員が, 必ず解答すること. Web デザイナー検定 37

7 注意事項 Web デザイナー検定は, 第 1 問 共通問題 と第 2 問 ~ 第 10 問を解答すること. 第 2 問 以下は, コンセプトメイキングに関する問題である.a~d の問いに最も適するものを解答 群から選び, 記号で答えよ. a. Web サイトを開設するにあたってヒアリング実施後に行うコンセプトメイキングについて, 以下の説明のうち, 適切なものをすべて選んだ組み合わせはどれか. [ 説明 ] 1 コンセプトメイキングにあたっての分析手法の 1つであるシナリオ分析は, 社会的属性や市場動向など現状から提供サービスを分析し, 過去の技術との互換性に配慮したサービスや技術を検討する. 2 コンセプトメイキングにおいては,Webサイトとしてのオリジナリティや, 実現性の検証, 最低限の達成目標などを加味して具体的な内容を決定していく必要がある. 3 Webサイト開設者が想定しているユーザや先進的に提供したいサービスを考慮すると実際のユーザに適合したWebサイトが構築できないため, コンセプトメイキングの際はこれらを考慮しないのが一般的である. 4 コンセプトの設定にあたっては, 分析的なアプローチによって課題や問題点を抽出し, Webサイト開設者へのヒアリングによって Webサイトの制作者が共同してコンセプトメイキングにあたる. 5 Webサイトのリニューアルに際してのコンセプトメイキングでは,Webサイトの刷新が目的であるため, 現在のWebサイトについて分析的なアプローチを用いる必要はない. ア.1,2,3 イ.1,2,5 ウ.2,3,4 エ.1,4 オ.2,4 カ.4,5 38

8 b. Web サイト制作には, 閲覧機器としてパーソナルコンピュータ (PC ) だけでなく, スマート フォンの使用に対応することが重要視されている. スマートフォン用サイトのコンセプト メイキングで考慮すべき点として, 適切なものをすべて選んだ組み合わせはどれか. [ 考慮すべき点 ] 1 スマートフォンのOSや標準アプリのバージョンを十分考慮する. 2 リンクの幅を広くしたり, 隣接するリンクと距離をとったりして, タップしやすいよう配慮する. 3 操作しやすいレイアウトになるように, できる限り段組を取り入れる. 4 動きのあるWebサイトをつくる際には, 閲覧機器に依存しないFlashの技術を利用する. 5 できるだけ階層を深くして, より多くの情報を整理して見せられるようにする. ア.1,2,5 イ.1,4,5 ウ.2,3,5 エ.1,2 オ.2,3 カ.4,5 Web デザイナー検定 c. A 社は, 非常に多種の商品を取り扱うショッピングサイトを運営している. 品揃えや価格, Web サイトへの誘導客数は競合他社と遜色ないが, 他社に比べて客単価が低いことがわ かったため,Web サイトをリニューアルすることにした. リニューアルする場合,A 社が追 加を検討する機能や施策として, 客単価を上げるうえで直接的に効果があると考えられる ものをすべて選んだ組み合わせはどれか. [ 追加を検討すべき機能や施策 ] 1 サイト内検索機能を組み込んで検索結果を最適化して表示する. 2 購入した商品についての評価を書き込める顧客レビュー機能を追加する. 3 高齢者や障がいのある利用者でも購入しやすいよう, アクセシビリティを向上させる. 4 送料や割引, プレゼントなどの特典を付けて, まとめて買ったほうがお得 という雰囲気を演出し, まとめ買いを促進する. 5 この商品をチェックした人はこんな商品もチェックしています といった関連のあるオススメ商品を露出することでほかの商品への興味をもたせる. ア.1,2,4 イ.1,3,5 ウ.2,3,4 エ.1,3 オ.2,5 カ.4,5 39

9 d. ほかの Web サイトやほかのメディアと連携してユーザを誘導するための施策についての説 明として, 適切なものをすべて選んだ組み合わせはどれか. [ 施策についての説明 ] 1 検索連動型広告は, キーワード検索を行った際に検索結果と連動して配信される広告である. テレビや新聞広告と比較して安価な広告費で収まり, 効果的にWebサイトへの誘導が行える. 2 駅貼りポスターやチラシ, 雑誌広告などで見られるQRコードは, 一見して内容はわからないが, 割引や特典が確実に得られる効果を広報できる. 3 キーワード検索結果の上位に表示されたリンクから最初に訪問するランディングページを重視する手法がSEMである. 4 テレビやラジオ番組と連動したユーザ生成コンテンツをWebサイトに用意するとSEO 対策となる. 5 商品の特徴をテレビや新聞広告などで告知してユーザをWebサイトへ誘導し, 商品の詳細をWebサイト上の広告で提供すると効果的である. ア.1,2,4 イ.1,3,5 ウ.2,3,4 エ.1,5 オ.2,5 カ.3,4 40

10 第 3 問 以下は, さまざまな機器への対応手法とコンセプトメイキングに関する問題である.a~d の問いに最も適するものを解答群から選び, 記号で答えよ. a. さまざまな機器に対応する手法のうち, 動的な配信に対応した CMS を用いた Web サイトを 構築する場合のしくみを示した図として, 適切なものはどれか. ア. イ. スマートフォン用 HTML ファイル PC 用 HTML ファイル cgarts.or.jp 共通の URL 共通の URL スマートフォン PC 共通の HTML ファイル cgarts.or.jp スマートフォン用 URL PC 用 URL スマートフォン PC Web デザイナー検定 ウ. スマートフォン用エ. スマートフォン用 HTML ファイル URL 共通の URL cgarts.or.jp スマートフォン 共通の HTML ファイル cgarts.or.jp スマートフォン PC 用 HTML ファイル PC 用 URL PC 共通の URL PC 41

11 b. 以下の文章は, コンセプトメイキングを行う際に考慮すべき外的要素に関する説明であ る. 文章中のに該当する用語の組み合わせとして, 適切なものはどれか. Webサイトの制作者は,Webサイトを単なる情報提供のメディアとしてだけとらえるのではなく,DHTMLやAjaxなどの技術を活用する 1 としてとらえて制作にあたる. さまざまなCMSやECサイト構築システムなど特定の目的をもったWebサイトを構築するシステムにも 2 を利用できるので環境に応じて活用を検討する. 膨大な情報を効率的に扱うことが現実の課題となっており,Webページおよびそのなかに記述された内容について, 情報リソースに意味を付与することで, 人を介さずにコンピュータ自身が自律的に処理できるようにするための 3 は有効な手段となる. 複数の異なる提供元の技術やコンテンツを複合させて新しいサービスを形づくることは 4 とよばれ, 短期間で少ない開発者でサービスを構築することができる ア システムコンセプト オープンソース HTML5 マッシュアップ イ プラットフォーム オープンソース セマンティックWeb マッシュアップ ウ システムコンセプト バックエンド HTML5 フォークソノミー エ プラットフォーム バックエンド セマンティックWeb フォークソノミー オ クロスメディア オープンソース HTML5 マッシュアップ カ クロスメディア バックエンド セマンティックWeb フォークソノミー c.web サイトを閲覧するほとんどの機器に対応するデザイン手法として, レスポンシブウェ ブデザインがある. その特徴に関する説明として, 適切なものをすべて選んだ組み合わせ はどれか. [ レスポンシブウェブデザインの特徴 ] 1 多くの閲覧機器に対応できるため, 従来の制作方法と比較して設計段階や構築段階を単純化することができ, 情報整理が行いやすい. 2 1 つのHTMLファイルで複数の閲覧機器に対応できるため, 制作後はメンテナンスなどが容易になり, 作業工数の軽減になる. 3 1 つのHTMLファイルを使用するため, パーソナルコンピュータ (PC ) とスマートフォンを異なるレイアウトにした場合, 表示されない部分に必要のない要素が読み込まれてしまい,Webページの読み込みが重くなる可能性がある. 4 どの閲覧機器からも単一のURLで閲覧できるため, ユーザにとってはシェアやリンクが容易になる. 5 PCとスマートフォンなど異なったデザインとして考えず, デザインやユーザインタフェースを配信する際にシステムが動的に合体させる. 42

12 ア.1,2,3 イ.1,3,4 ウ.2,3,4 エ.1,2 オ.2,5 カ.3,5 d. インターネットでの購買に関して, 顧客の購買心理プロセスのモデルとして図 1 の AISCEAS 理論がある. この理論に基づいた説明として, 適切なものをすべて選んだ組み合わせはど れか. Attention Interest Search Compare Examination Action Share 認知段階感情段階行動段階 図 1 Web デザイナー検定 [AISCEAS 理論に基づいた説明 ] 1 認知段階においては, 利用メディアとして圧倒的認知率のテレビ広告の利用が有効である. 2 認知段階においては, 検索ワードと広告文を随時検討し改善することが重要である. 3 感情段階においては, ブランド力を付けるために消費者との対話が重要となるため, ブログ対策に注力する. 4 行動段階では, 各種比較サイトの書き込みを参考に意思決定することが多いが, 自社サイトの顧客対応力とは関連が低い. 5 行動段階では, 自社ブランドの認識を定期的にチェックしてブランド改善に役立つ消費者発信型サイト (CGM ) 対策が重要である. ア.1,2,3 イ.1,3,5 ウ.2,4,5 エ.1,5 オ.2,3 カ.3,4 43

13 第 4 問 以下は, 情報の収集, 分類, 組織化および Web サイト構造に関する問題である.a~d の問い に最も適するものを解答群から選び, 記号で答えよ. a. Web サイト構築にあたっては, まずは開発工程 進捗を管理するためのスケジュール策定 が重要である. スケジュール策定に関する説明として, 適切でないものはどれか. ア. スケジュール策定においては,Webサイト構築に関わる工程や節目となる段階をマイルストーンとして設定しておくことが重要である. マイルストーンごとに目標達成度などを検証することで, 適正なスケジュール管理が行える. イ.Webサイト構築に関わる工程は, 一般的に準備期間, プラン構築期間, 実制作期間, テスト検証期間という, 大きく4つの工程に分けることができる. ウ. コンセプトを共有したのち,Webサイト全体のビジュアル化に関してはWebデザイナーなどの担当スタッフに任せるが, 工程管理に関しては各担当スタッフの裁量に任せるのではなく, ディレクタなどが統括して全体の進捗管理を行うのが一般的である. エ.Webサイトのプラン構築期間では, 開発するWebサイトの目的を明確化することが最も重要な要件となる. 目的 目標を明確化し, ディレクタが統括するのではなく, スタッフ間で共有することが重要である. b.web サイトに掲載するコンテンツ情報を整理するにあたっては, 情報の分類という考え方 が重要である. 情報分類についての説明として, 適切でないものはどれか. ア. 一般的な情報の分類は, 位置, 時間, 50 音順, カテゴリ, 連続量 の 5つに大分類することができる. イ. 身体測定などで集計された身長順, 期末試験などで発表された成績順位は, カテゴリによる分類ということができる. ウ. 新着情報や企業沿革など, 時間軸に沿って整理 公開される情報は, 時間による情報の分類ということができる. エ. ドラマや小説などの登場人物の相関関係を表した相関図は, 概念的な位置情報ということができる. 44

14 c. 組織化した情報は, 適切なラベリングによって Web サイトに掲載することが重要である. 情報のラベリングについての説明として, 適切なものはどれか. ア. グローバルナビゲーションやローカルナビゲーションに対しても, 情報の組織化が行われる. その際, ナビゲーションの役割に応じて 顧客主観による組織化 と, トピックによる組織化 を使い分ける. イ. ラベリングには, ユーザの属性によって情報を組織化する 顧客主観による組織化 と情報の主題によって組織化する トピックによる組織化 があるが, 一般的にユーザの理解のしやすさを考慮して 顧客主観 を優先する. ウ. おすすめ情報, 新着情報, お得情報, What s New などは, すでに広く一般的に認知されている用語であるため, 積極的に使いたいラベリングである. エ. ラベリングを考えるにあたっては, まずは情報提供側であるWebサイト運営者が用いる用語を基本とすることが重要である. Web デザイナー検定 d. 組織化した情報をもとに Web サイト構造への展開にあたっての作業の説明として, 適切で ないものはどれか. ア.Webサイト構造を作成するにあたっては, ユーザの情報活用シーンを想定し, ユーザビリティ, ホスピタリティなどを考慮したうえで構造化していくことが重要である. イ. ユーザ導線計画とは, アクセスしてくる一般のユーザにとって等価に扱われる情報を, ターゲットとなるユーザに特化した情報の流れに表示を変えることで, ユーザの行動を最適化することである. ウ.Webサイト構造の設計にあたっては, ツリー型, データベース型, ハイパーテキスト型などがあるが, ユーザが混乱を起こさないためにも, いずれかの型に統一すべきである. エ. ユーザ導線計画では, ユーザがWebサイトにアクセスする際の基点となるページを想定する. 一般的にはWebサイトのトップページが主要な基点となるが, 各コーナのタイトルページも基点となりうる. また, 検索エンジンから直接アクセスされるようなページはランディングページとして特別な基点となることも多い. 45

15 第 5 問 以下は,Web サイトのナビゲーションに関する問題である.a~d の問いに最も適するもの を解答群から選び, 記号で答えよ. a. 図 1 は EC サイトなどでよく使われるカルーセルスライダとよばれる, 項目を横スクロール させていくインタフェースである. このインタフェースの説明として, 適切でないものは どれか. 図 1 ア. 横スクロールであるため, 縦スクロールを多く使うスマートフォンの表示と操作がかぶらず, スマートフォンのインタフェースと相性がよい. イ.Ajaxを活用してサーバと通信することで, ユーザの操作に応じて表示するデータ量をコントロールすることができる. ウ. 少ない面積でより多くの項目を表示することができるため, ページ全体のスクロールやページ遷移を減らすことができ, サイト全体のナビゲーションをわかりやすくする効果がある. エ.Webページ全体をスクロールさせる際に合わせてコンテンツをアニメーションさせることができるため, ユーザの注意を強くひき, コンテンツの訴求効果が高くなる. 46

16 ｂ 以下の文章は ユーザインタフェースに関する説明である 文章中の 用語の組み合わせとして 適切なものはどれか に該当する とは過去の経験に基づく認識から このように動くだろう という 認識や予測のプ ロセスである ② とはモノそのものが自分自身の使い方や 操作法に関する手がかりをあたえるとい う考え方である ③ は 現在の状態をユーザに知らせる役割 ユーザの操作を実行部分に渡す役割 ユーザが行った操作の結果を知らせる役割 という 3 つの役割をもつ ④ は ユーザを目的の情報に効率的かつ柔軟にアクセスさせる役割をもつ ① Webデザイナー検定 ① ② ③ ④ ア アフォーダンス メンタルモデル ナビゲーション ユーザインタフェース イ アフォーダンス メンタルモデル ユーザインタフェース ナビゲーション ウ メンタルモデル アフォーダンス ユーザインタフェース ナビゲーション エ メンタルモデル アフォーダンス ナビゲーション ユーザインタフェース ｃ E 研究所の研究情報を Web サイトで公開することになった メインのターゲット端末はタブ レットである サービスは 9 種類の情報解析結果を視覚的に表すダイアグラムを表示する システムで 表示させる解析結果を選ぶインタフェースとして スプリングボードをナビ ゲーションとして使うことになった 図２の説明として 適切でないものはどれか 図２ ア スプリングボードは Web サイト構造がわかりやすく操作も簡単なので 複雑な階層構造 のサイトに向いている イ 選択肢が多すぎる場合や 項目によって情報の質の違いに差がありすぎる場合には向 いていない ウ 選択領域の面積が大きいため 画面を指でタップして操作する スマートフォンやタブ レット端末などで利用しやすい エ 特定のアイコンを選び 関連する情報を画面いっぱいに表示する 47

17 d. ユーザインタフェースは, ユーザが目的とする操作を達成するためのものである. ユーザ インタフェースの目的の説明として, 適切な組み合わせはどれか. [ 説明 ] 1 サブミットボタンは複数の選択や文字列を入力したあと, サーバに入力内容を送信するために利用する. 2 ナビゲーションバーは, コンテンツの内容を分類によってユーザの目的の情報へ導くインタフェースである. 3 定型以外の自由な入力を行うことができる反面, それを受け取るサイト側は不正入力を行えないように対策する必要がある. 4 セレクトメニューはメニューバーをクリックするとサブメニューが表示されるインタフェースである. 職業や年齢, 出身地など複数の項目から択一的に情報を選択する際に使用することが多い ア 意思決定 指示選択 選択肢 文字入力 イ 指示選択 意思決定 文字入力 選択肢 ウ 意思決定 指示選択 文字入力 選択肢 エ 指示選択 意思決定 選択肢 文字入力 48

18 第 6 問 以下は,Web サイトを効果的に見せるための, 動きと音の効果に関する問題である.a~d の問いに最も適するものを解答群から選び, 記号で答えよ. a. ある Web サイトにアクセスすると, トップページが表示される前に図 1 のようなアニメー ション機能を備えた画面が表示された. この画面の効果についての説明として, 適切なも のはどれか. Web デザイナー検定 図 1 ア. ユーザに回線速度の状況を正確に伝えるために用いられている. イ.Webサイトを本当に閲覧するのか, ユーザが判断する時間を提供するために設置されている. 数値はトップページが表示されるまでの時間を示している. ウ. 非同期通信で読み込んでいるデータの転送速度を上げるために用いられている. エ. エンターテインメント性が高い Webサイトのため, ユーザに期待感をもたせる映画やドラマのオープニングのような効果を意図して設置されている. オ. コンテンツ内容を伝えながら, データ読み込み処理の進捗度合いをビジュアルと数値で示すことで, 操作の中断を余儀なくされているユーザの心理的負担をやわらげている. b. 音を使用したコンテンツは, ユーザに楽しんでもらうためにも事前に検討すべき点がある. 音を使用する際の注意点について, 適切なものはどれか. ア. ブロードバンドの普及で容量の大きなデータを扱うことが容易になったため, 商品のイメージを大事にするブランドサイトでは,BGMとしてハイレゾの音データを用いるとよい. イ. 音データを使用する場合は, 著作権の確認に留意しなければならない. 個人のWebサイトであっても音楽 CDは利用できないため, 著作権フリーの音楽データを使用するとよい. ウ. 視聴覚障がい者へ配慮し, アクセシビリティの高い Webサイトにするために確実に伝えたい情報は音データを併用するとよい. エ. 音データの提供にあたっては, ユーザの閲覧環境を想定し, 各種アプリケーションソフトウェアからも再生可能なデータフォーマットを用意する必要がある. 49

19 c. Web サイト上で, キャンペーンに登録 と書かれた画像にロールオーバの手法を用いて, 図 2 の状態が図 3 の状態に切り替わるような演出を施した. このような視覚表現について の説明として, 適切なものはどれか. キャンペーンに登録 キャンペーンに登録 図 2 図 3 ア. マウスを重ねることで色の変化を施すことにより, ユーザに注目を促し, コンテンツを楽しませる演出をしている. イ. マウスが重なることで操作できることを伝え, ユーザにキャンペーン登録ページへの移動操作を誘導している. ウ. 図 2と図 3を繰り返し表示するループアニメーションにより, ユーザに注意を引きつけ, キャンペーンへの登録意欲を高めてもらうようにしている. エ. クリックすることにより色が変化し, ユーザにキャンペーン登録ページへの移動操作が完了したことを明確に伝えるようにしている. 50

20 d. 以下の文章は, 動画像コンテンツ技術についての説明である. 文章中のに該当す る用語の組み合わせとして, 適切なものはどれか. Windows Media,QuickTime,MPEG -4などの技術で定義されたファイルの保存形式をコンテナフォーマットとよぶ. 動画像コンテンツの場合は, 動画像データや音声データ, 字幕やチャプタ, 作品名などの補助データをひとまとめにして 1つのファイルとして保存している. このコンテナフォーマットに格納されている動画像データや音声データの符号化 ( 1 ) と復号 ( 2 ) を行うための技術を 3 とよぶ. これらの技術で用いられる 3 は, 符号化 ( 1 ) の際に同時にデータの圧縮を, 復号 ( 2 ) の際に同時にデータの伸張を, それぞれ行うのが一般的である. そのため 3 は圧縮技術と混同されがちであるが, けっして圧縮するための技術というわけではない Web デザイナー検定 ア デコード コーデック ストリーミング イ コーデック エンコード プラグイン ウ エンコード デコード コーデック エ プラグイン ストリーミング エンコード 51

21 第 7 問 以下は,Web サイトを実現する技術に関する問題である.a~d の問いに最も適するものを 解答群から選び, 記号で答えよ. a. 視覚能力にハンディキャップをもつユーザや高齢者にも, 同等の情報に接する機会を確保 した Web サイトをデザインしたい. このデザイン手法の説明として, 適切なものはどれか. ア. 英語など他言語での表示にも切り替えられる機能をもたせることで, アクセシビリティを高める. イ. メニューやボタンなどをほかの要素とデザイン的に差別化し, その部分が操作可能であることを明確にすることでユーザビリティを高める. ウ. データを送受信する際,SSLなどのプロトコルを用いて暗号化することで, 個人情報の漏えいを防ぐ. エ. 大きなサイズの文字に表示を切り替えたり, コントラストの高い配色に切り替える機能をもたせるなど, アクセシビリティを考慮してデザインする. b. EC サイトにおすすめ商品を提示する機能を設けたい. この際, あらゆるユーザに同一の商 品を提示するのではなく, ユーザごとの購買状況に応じた商品を提示したい. この機能を 構築する手法の説明として, 適切なものはどれか. ア. マウス操作に合わせてサブメニューや説明を表示するなどのリッチインタフェースを構築する. イ. クレジットカード会社のデータベースサーバとの間で, カード情報を照会するデータ連携機能を構築する. ウ. データベースと連動する Webアプリケーションとして, パーソナライゼーション機能による動的コンテンツを構築する. エ.Webサーバにおいてアクセスログを記録し, これを解析することでマーケティングデータを得るしくみを設ける. 52

22 c. バックエンドで活用する技術についての説明として, 適切なものはどれか. ア.24 時間体制で稼働するWebサイトを運営するためには, 電源や冷却設備, 回線などが整っているデータセンタ内に, 高性能なサーバマシンを設置する必要がある. ただし, こうしたサーバマシンは高価であるため, 通常複数のサービスを同時に稼働させて, 運用費を抑えている. イ.Webサーバソフトウェアを稼働させるプラットフォームであるオペレーティングシステム (OS ) の種類は多く, 同じLinux 系でもさまざまなディストリビューションがある. それぞれでパッケージングされているツールや, ソフトウェア, サポート体制が異なるため, 運営するサービスや体制に応じて最適なOSを選択することが望ましい. ウ.Webサイト制作で用いられるDBMSの1つに,RDBMSがある.RDBMSはオープンソースDBMSであり,MySQL,PostgreSQLがよく利用されている. ただし, どちらも自己責任での運用が必要なため, 厳格なデータの管理が必要な会員制サイトなどの場合は,RDBMSではなく, 商用のDBMSの利用が望ましい. エ.Webサイト制作で用いられる言語を総称して, スクリプト言語とよぶ.WebサーバソフトウェアやDBMSと連携することに特化しているため, 複雑な処理が必要なく, 比較的習得が容易である. 代表的なものとして,Perl,PHP,Python,Rubyなどがある. Web デザイナー検定 d. ユーザがメッセージを書き込むことができるコメント欄を Web サイト上に設けたい. HTML フォーム機能を用いてコメント欄を構築する際に, セキュリティの面で対処すべき 事項の説明として, 適切なものはどれか. ア. クロスサイトスクリプティング対策として,Webブラウザからの送信データ内に,Web ブラウザに不正な動作をさせるスクリプトが埋め込まれても実行されないようにするために, エスケープ処理を行う機能を設ける. イ. 入力されたメッセージに, 全角, 半角のチェックや文字数の制限に違反しているものがないか,CGIプログラムによって検査を行う. ウ. 不正に大量なアクセスを Webサーバへ集中させ, 正常にサービスが提供できない状況に陥らせる攻撃へは, 大量なアクセスを送り込む特定の IPアドレスからのアクセスを遮断する対策を行う. エ.SQL 文が注入されることで, データベースの情報を書き換えられる危険性への対策として, データベース内の情報をすべて暗号化しておく. 53

23 第 8 問 以下は,Web サイトに用いられる言語に関する問題である.a~d の問いに最も適するもの を解答群から選び, 記号で答えよ. a. HTML ファイル内では体裁に関する記述はせず,HTML とは別のファイルに分けて CSS を 記述する. この文書構造と体裁を分離する理由として, 適切なものはどれか. ア.Webサイト全体に影響がおよぶような共通部分のデザイン修正では, 個々のHTML ファイルの修正は不要で, 共有するCSSファイルの書き換えのみで対処できる. イ.HTMLのもつあいまいさを排除し, マークアップの記述内容が一意に解釈できるようになる. これにより省略された終了タグの位置の推測などの余計な処理が不要になる. ウ.Web 標準未準拠のWebブラウザでも, 共通のソースから完全に同じ表示結果を得られる. エ. 健常者用 CSSファイルのほかに, 高齢者用, 弱視者用, 色覚異常者用などのCSSファイルを用意し選択できるようにすることで, ユーザビリティを向上できる. b. 現在の一般的な Web サイトでは, リッチインタフェースの構築やマルチメディア要素の扱 いが求められていることが多い. これを解決する HTML5 と CSS3 を用いた Web サイト構築 の説明として, 適切なものはどれか. ア. 入力データや日時データを用いて集計処理を行い, 結果をページに表示することができる. イ. 映像や音声はプラグインを用いることで, 再生や操作を行う. ウ. グラフィックのサポートが大幅に強化され, ビットマップ画像を描画する機能が加わった. しかし,Flashムービーのような変形アニメーションは表示することができない. エ. インタフェース機能の拡張などにより,Webサイトは情報発信のメディアとしてだけではなく,Webアプリケーションとしての役割も強化された. 54

24 c. 通常のページリクエストによる画面遷移ではなく, スムーズなポップアップメニューやマウスオーバによる画像の拡大など, インタフェースをより魅力的で使いやすいものにしたい.DOMというAPIを用いてページ内容を逐次書き換えることで,Webブラウザの表示を動的に変更させる手法の説明として, 適切なものはどれか. ア.HTML と CSS で構成される Web ページを JavaScript によって書き換えることで, 動的な 要素を Web ページに付加する. イ. リンクのクリックにより Web サーバにリクエストを送り, リクエストに応じて返信された HTML ファイルなどを用いて Web ブラウザの表示全体を書き換える. ウ.CGI プログラムによって条件に応じた HTML 文書を出力することで, 動的にコンテン ツを生成する. エ.HTML 言語の代わりに DHTML 言語でページを記述することで, ドロップダウンメ ニューや項目のドラッグ & ドロップといったリッチインタフェースを作成する. Web デザイナー検定 d. デスクトップアプリケーションと同等な機能を Web ブラウザ上に構築したい. そのために は Web サーバとの通信中でもユーザが操作を継続できるしくみが必要である. データを受信しても画面全体を再描画せず,DHTML による画面制御を邪魔しないしくみで,Web サーバ側での処理結果やあらかじめ読み込んでおけないほど大容量のデータを利用できる ようにする. このしくみの説明として, 適切なものはどれか. ア.RSS の配信データフォーマットとして XML を用いる. イ.Web サーバからのデータ送信を,Web ブラウザからのリクエストがあるまで待つ, WebSocket による片方向通信を用いる. ウ.XMLHttpRequest を利用して,Web サーバと非同期通信を行う Ajax という制御手法を 用いる. エ.Web ブラウザからのリクエストに応じ,Web サーバ内にあらかじめ用意されたコンテン ツを送信する. 55

25 第 9 問 以下は,Web サイトのテストと解析に関する問題である.a~d の問いに最も適するものを 解答群から選び, 記号で答えよ. a.web サイトのテストの時期や環境について, 適切でないものはどれか. ア. インターネットに公開していないサーバを使って行うテストのことを, ローカルテストとよぶ. イ.Webサイトの制作が終わったら, 最初にクライアントユーザに提示してテストしてもらい, 不具合を指摘してもらう. ウ. サイトの制作スケジュールを検討する段階で, テストのために必要な日程も確保しておく必要がある. エ. バックエンドで多数のプログラムを組み合わせる場合, 個々のプログラムが完成した時点でそれぞれのテストを行い, 全部が完成した時点で連動を確認するテストを行う. b.web サイトのテストの項目についての説明として, 適切なものはどれか. ア. 閲覧環境とするすべてのOS/Webブラウザで, 表示が一致することを確認する. イ. フォームの入力テストを行う際には, バックエンド側が想定しているデータのみを入力して, 動作を確認する. ウ.Webサイト内のリンクが正常に動作するかを確認するには, リンクチェックツールでテストするだけでなく, 手作業での検証も必要である. エ. 現在では光ファイバやLTEなどの高速回線が普及しているため, パフォーマンステストでは高速回線のみを想定して行えばよい. 56

26 c. Web サイトの解析手法についての説明として, 適切なものはどれか. ア. アクセスログ解析では, 通常はログファイルをテキストエディタや表計算ソフトウェアで直接開いて解析を行う. イ. アクセスログ解析を使うと, 図 1のような移動経路であっても, 正しく解析を行うことができる. ウ. トラッキングコードを使う解析では,HTMLファイルにJavaScriptのコードを埋め込むことが多い. エ. トラッキングコードを使う解析では, コードを追加するより前のアクセス情報も解析することができる. A Web デザイナー検定 3 リンクによる移動 1 リンクによる移動 C 2 戻る ボタン による移動 図 1 B d. Web サイトの解析に関する用語についての説明として, 適切なものはどれか. ア.Webサイト内のコンテンツ(HTMLファイルやPHPファイル) が何ページ閲覧されたかをカウントしたものを, ヒット数とよぶ. イ.Webサイトを訪問したユーザの延べ人数をカウントしたものを, ユニークユーザ数とよぶ. ウ.Webサイト内のどのページが閲覧されたかを分析することを, リファラ分析とよぶ. エ. ページビューやセッション数に対して, 商品の購入など, そのWebサイトが目的としているアクションに至った割合のことを, コンバージョンレートとよぶ. 57

27 第 10 問 以下は,Web サイトの運用とリニューアルに関する問題である.a~d の問いに最も適する ものを解答群から選び, 記号で答えよ. a.web サイトの運用についての説明として, 適切なものはどれか. ア. スピーディな情報更新を行うために, 社内や部内などの誰もがコンテンツを更新できるようにするほうがよい. イ.Webサイトから不要な情報を削除することは, 更新とはよばない. ウ. 情報の鮮度が重要であるため, 更新のスケジュールはとくに決めずに新しい情報は逐次公開するべきである. エ. ワークフローとして,Webサイトに情報が掲載されるまでに行う作業や, 確認をとるべき人などを定めておくことが重要である. b. Web サイトを運用するツールである CMS(Contents Management System) についての説明 として, 適切なものはどれか. ア.PHP は Web アプリケーションの開発に非常に適しているため, 現在の CMS はすべて PHP で開発されている. イ.CMS へコンテンツを投入する際には, パーソナルコンピュータ ( PC ) にインストールし た投入用アプリケーションを利用する. ウ. 多くの CMS では, コンテンツはデータベースで管理され, 柔軟に組み合わせて出力す ることができる. エ. オープンソースで無償の CMS を使えば, パッケージソフトウェアで有償の CMS よりも つねに低いコストで Web サイトを構築することができる. 58

28 c. Web サイトの評価や調整についての説明として, 適切なものはどれか. ア.Webサイトの種類や目的に関係なく,Webサイトを評価する方法は一定である. イ.Webサイト全体の閲覧数を増やすには,Webサイト内のコンテンツにおいて, 閲覧数が上位のコンテンツの更新作業に注力することが望ましい. ウ. フォームでの離脱が多い場合は, フォームの入力項目を細分化するとよい. エ. リピータが多いほど商品やサービスが売れる可能性が上がるため, ユニークユーザ数に対するリピータの比率は高いほどよい. d. Webサイトのリニューアルについての説明として, 適切なものはどれか. ア. ユーザを飽きさせないために, できる限りリニューアルの頻度は高めるほうがよい. イ. 既存のユーザを迷わせないために, リニューアル前からあるコンテンツはそのまま維持するべきである. ウ. リニューアルしてしばらくしないと成果は判断できないため, リニューアル前には目標を設定しない. エ. リニューアルの際に,SEO( 検索エンジン最適化 ) やSEM( 検索エンジンマーケティング ) を本格的に取り入れることもよくある. Web デザイナー検定 注意事項 Web デザイナー検定の受験者は, 第 1 問 共通問題 と第 2 問 ~ 第 10 問までを解答し, 試験を終える際は, 第 1 問 共通問題 を解答したか, 必ず確認すること. 59

29 公益財団法人画像情報教育振興協会は, 画像情報分野の 人材育成 と 文化振興 を行っています. 活動の詳細につきましては協会 Web サイトをご覧ください. 教育カリキュラムの策定と教材の出版 画像情報分野の検定試験の実施 CG クリエイター検定 /Web デザイナー検定 /CG エンジニア検定 / 画像処理エンジニア検定 / マルチメディア検定 調査研究と教育指導者支援 文化庁メディア芸術祭の企画 運営 学生 CG コンテストの主催 展覧会 イベントプロデュース 本問題冊子の著作権は, 公益財団法人画像情報教育振興協会 (CG-ARTS) に帰属しています. 本書の内容を,CG-ARTS に無断で複製, 翻訳, 翻案, 放送, 出版, 販売, 貸与などの行為をすることはできません. 本書中の製品名などは, 一般に各メーカの登録商標または商標です. 本文中ではそれらを表すマークなどは明記しておりません CG-ARTS All rights reserved.