エキスパート 練 習 問 題 1 以 下 は,Web サイトの 閲 覧 機 器 に 関 する 問 題 である.a d の 問 いに 最 も 適 するものを 解 答 群 から 選 び, 記 号 で 答 えよ. a. レスポンシブウェブデザインのしくみを 示 した 図 として, 適 切 なものはどれか. ア. イ. ウ. エ. b. レスポンシブウェブデザインの 特 徴 に 関 する 説 明 として, 適 切 なものはどれか. ア. すべての 機 器 に 対 して, 共 通 のURL,HTML, CSSを 用 いる. イ. データを 送 信 する 側 の 機 器 で 要 素 の 配 置 や 大 きさの 変 更, 表 示 非 表 示 を 切 り 替 え, 閲 覧 機 器 でWebページを 見 やすいよう 自 動 的 にレイアウトを 変 更 する. ウ. 閲 覧 するWebブラウザにおけるビューポートの 高 さを 基 準 に, 自 動 的 にレイアウトが 変 更 される. エ. 対 応 していないスマートフォンの 機 種 もあるため,サーバから 機 器 へ 送 信 するデータ にはJavaScriptを 含 めない.
c. 図 1は,レスポンシブウェブデザインによって 作 成 されたあるWebページをPC(パーソナル コンピュータ)に 表 示 させた 状 態 を 示 している.また, 図 2から 図 4は, 図 1と 同 じWebペー ジをスマートフォンに 表 示 させた 状 態 を 想 定 した 図 である.レスポンシブウェブデザインの ページレイアウトに 関 する 説 明 として, 適 切 なものはどれか. 図 1 図 2 図 3 図 4 ア. 閲 覧 する 機 器 にかかわらずPCとスマートフォンに 同 じコンテンツセットが 適 用 される ので,スマートフォンには 図 2しか 表 示 されない. イ. PCとスマートフォンで 別 々のコンテンツセットが 適 用 されるので,スマートフォンに は 図 3を 表 示 できる. ウ. 静 的 なCMSを 用 いることで,スマートフォンに 図 3を 表 示 できる. エ. CSS3を 用 いることで,スマートフォンに 図 4を 表 示 できる. d.レスポンシブウェブデザインの 長 所 に 関 する 説 明 として, 適 切 なものはどれか. ア.モバイルURLや 動 的 な 配 信 に 比 べて 不 具 合 を 生 じにくい. イ. 各 機 種 の 特 性 に 合 わせてUIやデザインなどをつくり 込 める. ウ. 最 大 公 約 数 的 なデザインにできる. エ. モバイルURLや 動 的 な 配 信 に 比 べてダウンロードデータが 軽 くなる 可 能 性 がある.
問 題 テーマ さまざまな 閲 覧 機 器 出 題 のねらい( 作 問 意 図 ) この 問 題 は, 閲 覧 機 器 への 対 応 方 法 の1つであるレスポンシブウェブデザインについて 問 うて います. 考 え 方 ( 問 題 の 解 法 解 説 ) a: レスポンシブウェブデザインは,すべての 機 器 に 対 して 共 通 の URL へアクセスさせ, 共 通 の HTML や CSS を 送 信 する 手 法 です.その 流 れを 示 しているウが 正 解 答 となります. b: レスポンシブウェブデザインの 特 徴 の1つは,Web ページのデータ 送 信 側 の 機 器 ではな く,データ 受 信 側 の 機 器 において 見 やすいよう 自 動 的 にレイアウトを 変 えることです.そ のため,イは 不 正 解 となります.また,レスポンシブウェブデザインは, 閲 覧 する Web ブラウザのビューポートの 高 さではなく, 幅 を 基 準 に 自 動 的 にレイアウトが 変 更 されま す.そのため,ウも 不 正 解 となります.そして,レイアウトを 行 う 際, 要 素 の 配 置 や 大 き さの 変 更, 表 示 非 表 示 の 切 り 替 えに JavaScript の 機 能 を 用 いることもあり,サーバから 機 器 へ 送 信 するデータに JavaScript を 含 めることもあります.すべての 機 器 に 対 して, 共 通 の URL,HTML,CSS を 用 いるのがレスポンシブウェブデザインの 特 徴 のため, 正 解 答 は アとなります. c: レスポンシブウェブデザインでは,PC とスマートフォンに 同 じコンテンツセットが 適 用 されますが, 閲 覧 する 機 器 に 応 じて 自 動 的 に 異 なるページレイアウトが 構 成 されます.そ のため,スマートフォンに PC と 同 じレイアウトの 図 2が 表 示 されるとは 限 りません.そ のためアは 不 正 解 です.レスポンシブウェブデザインを 用 いることでスマートフォンに 図 3を 表 示 させることもできます.ただし,それは PC とスマートフォンで 別 々のコンテン ツセットが 適 用 されるのではなく, 同 じコンテンツセットで 可 能 とします.そのためイも 不 正 解 です. 動 的 なCMSを 用 いればスマートフォンに 図 3を 表 示 することもできますが, 静 的 な CMS では 不 可 能 です.そのためウも 不 正 解 となります.CSS3 や JavaScript の 機 能 を 用 いることで, 要 素 の 配 置 や 大 きさの 変 更, 表 示 非 表 示 を 切 り 替 えることができます. そのため,エリア A を 非 表 示 にし,エリア D を 表 示 させた 図 4をスマートフォンに 表 示 できます.これらからエが 正 解 答 です. d: 各 機 種 の 特 性 に 合 わせて UI やデザインなどをつくり 込 めるのは 動 的 な 配 信 の 長 所 です. また 最 大 公 約 数 的 なデザインになるのは,レスポンシブウェブデザインの 短 所 です.そし てレスポンシブウェブデザインでは,コンテンツ 内 容 やデザインによっては PC あるいは スマートフォンのみでしか 使 用 しないデータを 含 むこともあるため,ダウンロードデータ が 重 くなる 可 能 性 があります.モバイル URL や 動 的 な 配 信 に 比 べて1つのコンテンツセ ットだけで 良 いため 不 具 合 を 生 じにくいのがレスポンシブウェブデザインの 長 所 である ため,アが 正 解 答 です. 正 解 答 解 答 :a. ウ b. ア c. エ d.ア
エキスパート 練 習 問 題 2 以 下 は,スマートフォンのナビゲーションに 関 する 問 題 である. 図 1から 図 4は, Step 1 上 に 示 したタップ 操 作 を 実 行 すると Step 2 になることを 示 した,スマートフォンの 画 面 遷 移 図 である.a d の 問 いに 最 も 適 するものを 解 答 群 から 選 び, 記 号 で 答 えよ. 図 1 図 2 図 3 図 4
a. 深 い 階 層 まで 存 在 する 大 規 模 なWebサイトに 適 した 手 法 を 示 した 図 はどれか. ア. 図 1 イ. 図 2 ウ. 図 3 エ. 図 4 b. 図 1に 示 した 手 法 の 短 所 に 関 する 説 明 として 適 切 なものはどれか. ア. コンテンツにたどり 着 くまでのアクション 数 が 多 い. イ. タブによって 選 択 肢 を 一 目 で 把 握 しやすい. ウ. ナビゲーション 項 目 数 が 多 くなると 操 作 性 が 下 がる. エ. 選 択 肢 ごとの 必 要 度 の 差 が 大 きくなると 不 要 な 情 報 が 多 くなる. c. 図 2に 示 した 手 法 のよび 方 と 特 徴 に 関 する 説 明 として 適 切 なものはどれか. ア. ドロワー とよばれ, 同 格 の 選 択 肢 をユーザに 提 示 する 場 合 に 適 した 手 法 である. イ. ダッシュボード とよばれ,1タップで 目 的 のコンテンツへ 移 動 させられる 手 法 であ る. ウ. ドリルダウン とよばれ,Webサイトの 情 報 構 造 に 柔 軟 に 対 応 できる 手 法 である. エ. スプリングボード とよばれ, 階 層 化 された 情 報 をユーザに 提 示 したい 場 合 に 適 した 手 法 である. d.スマートフォンの 画 面 構 成 を 考 える 場 合 に 考 慮 すべき 工 夫 として, 適 切 なものはどれか. ア. スマートフォンの 画 面 は 年 々 大 型 化 が 進 んでいるため, 今 日 のスマートフォンの 画 面 構 成 を 考 えるうえで,コンテンツエリアとナビゲーションエリアを 同 時 に 画 面 上 へ 配 置 させる 工 夫 が 必 要 である. イ. スマートフォンの 操 作 は 指 で 画 面 を 直 接 タッチして 行 えるように, 個 々のナビゲーシ ョンパーツは 大 きさを 考 慮 して 作 成 する 必 要 がある. ウ. スマートフォンの 操 作 は 指 によるタップによって 行 われるため, 必 ず1タップで 目 的 のコンテンツへ 移 動 できるナビゲーションにする 必 要 がある. エ. スマートフォンでもPCと 同 等 の 情 報 を 提 供 する 必 要 があるため,PCとスマートフォン の 画 面 構 成 は 同 じように 見 える 工 夫 が 必 要 である.
問 題 テーマ スマートフォンにおけるページレイアウト 出 題 のねらい( 作 問 意 図 ) この 問 題 は,スマートフォンにおけるページレイアウトを 制 作 する 際 に 重 要 となる,インタフ ェースとナビゲーション 機 能 について 問 うています. 考 え 方 ( 問 題 の 解 法 解 説 ) a: ナビゲーション 要 素 が 多 く, 階 層 が 深 い 場 合 など 規 模 の 大 きなサイトにおけるスマートフ ォンのナビゲーションには, ドロップダウン が 適 しています.ドロップダウンは, 画 面 上 部 に 設 けたメニューボタンをタップすると,そこからナビゲーションエリアが 下 方 に 向 かって 滑 りこむように 入 ってきて 表 示 されます.そのことを 表 しているエの 図 4が 正 解 答 になります. b: 図 1は, タブ とよばれるスマートフォンのナビゲーション 手 法 です.タブの 長 所 には, 選 択 肢 を 一 目 で 把 握 しやすい や 1タップで 目 的 画 面 を 表 示 できる 移 動 のしやすさ が あります.また, 短 所 には ナビゲーション 項 目 数 が 多 くなると 各 タブが 小 さくなり, 視 認 性 と 操 作 性 が 下 がる があげられます. 本 問 ではタブの 短 所 を 問 うているため, 正 解 答 はウとなります. c: 図 2は, スプリングボード あるいは ダッシュボード とよばれるスマートフォンのナビ ゲーション 手 法 です.この 手 法 の 長 所 は, 選 択 肢 が 一 目 で 把 握 しやすい 1タップで 目 的 のコンテンツへ 移 動 できる タブよりも 多 くのナビゲーション 項 目 を 表 示 できる とい った 点 があります.また 短 所 は, 個 々の 選 択 肢 の 必 要 度 に 差 がありすぎると,ユーザにと って 不 要 な 情 報 の 多 いナビゲーションになる ナビゲーションしかない 画 面 となるため, ほかの 手 法 に 比 べて 情 報 量 が 少 ない といった 点 があります.これらからイが 正 解 答 にな ります. d: スマートフォンの 画 面 構 成 を 考 える 場 合 に 考 慮 すべき 工 夫 について 問 うています.スマー トフォンの 画 面 は 年 々 大 型 化 が 進 んでいます.しかし,これまでのスマートフォンにも 対 応 できる 画 面 構 成 が 求 められますので,アの 説 明 は 適 切 ではありません.スマートフォン の 操 作 は 指 によるタップによって 行 われますが, 階 層 構 造 をもつ Web サイトでは1タップ で 目 的 のコンテンツへ 移 動 できるようにするのは 難 しい 場 合 があります.したがって,ウ も 適 切 な 説 明 ではありません.スマートフォンにも PC と 同 等 の 情 報 を 提 供 する 必 要 があ ります.しかし,スマートフォンと PC が 同 じ 画 面 構 成 である 必 要 はありません.よって, エの 説 明 も 適 切 ではありません.スマートフォンの 操 作 は 指 で 画 面 を 直 接 タッチして 行 う ため, 個 々のナビゲーションパーツは 大 きめに 作 成 する 必 要 があります.したがって,イ の 説 明 が 正 解 答 となります. 正 解 解 答 :a. エ b. ウ c. イ d.イ