エキスパート練習問題 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.5 点 (10 点満点 )
エキスパート練習問題 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. イ 配点: 各 2.5 点 (10 点満点 )