名称未設定

Size: px

Start display at page:

Download "名称未設定"

きのこえいさか
5 years ago
Views:

解答群ア. すべての機器に対して, 共通のURL,HTML, CSSを用いる. イ.

1 エキスパート練習問題 1 以下は,Web サイトの閲覧機器に関する問題である.a d の問いに最も適するものを解答群から選び, 記号で答えよ. a. レスポンシブウェブデザインのしくみを示した図として, 適切なものはどれか. 解答群ア. イ. ウ. エ. b. レスポンシブウェブデザインの特徴に関する説明として, 適切なものはどれか. 解答群ア. すべての機器に対して, 共通のURL,HTML, CSSを用いる. イ. データを送信する側の機器で要素の配置や大きさの変更, 表示非表示を切り替え, 閲覧機器でWebページを見やすいよう自動的にレイアウトを変更する. ウ. 閲覧するWebブラウザにおけるビューポートの高さを基準に, 自動的にレイアウトが変更される. エ. 対応していないスマートフォンの機種もあるため, サーバから機器へ送信するデータにはJavaScriptを含めない.

c. 図 1 は, レスポンシブウェブデザインによって作成されたある Web ページを PC( パーソナルコンピュータ )

また, 図 2 から図 4 は, 図 1 と同じ Web ページをスマートフォンに表示させた状態を想定した図である.

閲覧する機器にかかわらずPCとスマートフォンに同じコンテンツセットが適用されるので, スマートフォンには図 2しか表示されない. イ.

静的なCMSを用いることで, スマートフォンに図 3を表示できる. エ. CSS3を用いることで, スマートフォンに図 4を表示できる. d.

2 c. 図 1 は, レスポンシブウェブデザインによって作成されたある Web ページを PC( パーソナルコンピュータ ) に表示させた状態を示している. また, 図 2 から図 4 は, 図 1 と同じ Web ページをスマートフォンに表示させた状態を想定した図である. レスポンシブウェブデザインのページレイアウトに関する説明として, 適切なものはどれか. 図 1 図 2 図 3 図 4 解答群ア. 閲覧する機器にかかわらずPCとスマートフォンに同じコンテンツセットが適用されるので, スマートフォンには図 2しか表示されない. イ. PCとスマートフォンで別々のコンテンツセットが適用されるので, スマートフォンには図 3を表示できる. ウ. 静的なCMSを用いることで, スマートフォンに図 3を表示できる. エ. CSS3を用いることで, スマートフォンに図 4を表示できる. d. レスポンシブウェブデザインの長所に関する説明として, 適切なものはどれか. 解答群ア. モバイルURLや動的な配信に比べて不具合を生じにくい. イ. 各機種の特性に合わせてUIやデザインなどをつくり込める. ウ. 最大公約数的なデザインにできる. エ. モバイルURLや動的な配信に比べてダウンロードデータが軽くなる可能性がある.

3 問題テーマさまざまな閲覧機器出題のねらい ( 作問意図 ) この問題は, 閲覧機器への対応方法の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 点満点 )

4 エキスパート練習問題 2 以下は, スマートフォンのナビゲーションに関する問題である. 図 1 から図 4 は, Step 1 上に示したタップ操作を実行すると Step 2 になることを示した, スマートフォンの画面遷移図である.a d の問いに最も適するものを解答群から選び, 記号で答えよ. 図 1 図 2 図 3 図 4

5 a. 深い階層まで存在する大規模な Web サイトに適した手法を示した図はどれか. 解答群ア. 図 1 イ. 図 2 ウ. 図 3 エ. 図 4 b. 図 1 に示した手法の短所に関する説明として適切なものはどれか. 解答群ア. コンテンツにたどり着くまでのアクション数が多い. イ. タブによって選択肢を一目で把握しやすい. ウ. ナビゲーション項目数が多くなると操作性が下がる. エ. 選択肢ごとの必要度の差が大きくなると不要な情報が多くなる. c. 図 2 に示した手法のよび方と特徴に関する説明として適切なものはどれか. 解答群ア. ドロワーとよばれ, 同格の選択肢をユーザに提示する場合に適した手法である. イ. ダッシュボードとよばれ,1タップで目的のコンテンツへ移動させられる手法である. ウ. ドリルダウンとよばれ,Webサイトの情報構造に柔軟に対応できる手法である. エ. スプリングボードとよばれ, 階層化された情報をユーザに提示したい場合に適した手法である. d. スマートフォンの画面構成を考える場合に考慮すべき工夫として, 適切なものはどれか. 解答群ア. スマートフォンの画面は年々大型化が進んでいるため, 今日のスマートフォンの画面構成を考えるうえで, コンテンツエリアとナビゲーションエリアを同時に画面上へ配置させる工夫が必要である. イ. スマートフォンの操作は指で画面を直接タッチして行えるように, 個々のナビゲーションパーツは大きさを考慮して作成する必要がある. ウ. スマートフォンの操作は指によるタップによって行われるため, 必ず1タップで目的のコンテンツへ移動できるナビゲーションにする必要がある. エ. スマートフォンでもPCと同等の情報を提供する必要があるため,PCとスマートフォンの画面構成は同じように見える工夫が必要である.

6 問題テーマスマートフォンにおけるページレイアウト出題のねらい ( 作問意図 ) この問題は, スマートフォンにおけるページレイアウトを制作する際に重要となる, インタフェースとナビゲーション機能について問うています. 考え方 ( 問題の解法解説 ) a: ナビゲーション要素が多く, 階層が深い場合など規模の大きなサイトにおけるスマートフォンのナビゲーションには, ドロップダウンが適しています. ドロップダウンは, 画面上部に設けたメニューボタンをタップすると, そこからナビゲーションエリアが下方に向かって滑りこむように入ってきて表示されます. そのことを表しているエの図 4が正解答になります. b: 図 1は, タブとよばれるスマートフォンのナビゲーション手法です. タブの長所には, 選択肢を一目で把握しやすいや 1タップで目的画面を表示できる移動のしやすさがあります. また, 短所にはナビゲーション項目数が多くなると各タブが小さくなり, 視認性と操作性が下がるがあげられます. 本問ではタブの短所を問うているため, 正解答はウとなります. c: 図 2は, スプリングボードあるいはダッシュボードとよばれるスマートフォンのナビゲーション手法です. この手法の長所は, 選択肢が一目で把握しやすい 1タップで目的のコンテンツへ移動できるタブよりも多くのナビゲーション項目を表示できるといった点があります. また短所は, 個々の選択肢の必要度に差がありすぎると, ユーザにとって不要な情報の多いナビゲーションになるナビゲーションしかない画面となるため, ほかの手法に比べて情報量が少ないといった点があります. これらからイが正解答になります. d: スマートフォンの画面構成を考える場合に考慮すべき工夫について問うています. スマートフォンの画面は年々大型化が進んでいます. しかし, これまでのスマートフォンにも対応できる画面構成が求められますので, アの説明は適切ではありません. スマートフォンの操作は指によるタップによって行われますが, 階層構造をもつ Web サイトでは1タップで目的のコンテンツへ移動できるようにするのは難しい場合があります. したがって, ウも適切な説明ではありません. スマートフォンにも PC と同等の情報を提供する必要があります. しかし, スマートフォンと PC が同じ画面構成である必要はありません. よって, エの説明も適切ではありません. スマートフォンの操作は指で画面を直接タッチして行うため, 個々のナビゲーションパーツは大きめに作成する必要があります. したがって, イの説明が正解答となります. 正解解答:a. エ b. ウ c. イ d. イ配点: 各 2.5 点 (10 点満点 )

名称未設定

名称未設定エキスパート練習問題 1 以下は,Web サイトの閲覧機器に関する問題である.a d の問いに最も適するものを解答群から選び, 記号で答えよ. a. レスポンシブウェブデザインのしくみを示した図として, 適切なものはどれか. ア. イ. ウ. エ. b. レスポンシブウェブデザインの特徴に関する説明として,