エキスパート 練習問題１

以下は，Web サイトの閲覧機器に関する問題である．a〜dの問いに最も適するものを解答群

から選び，記号で答えよ．

a. レスポンシブウェブデザインのしくみを示した図として，適切なものはどれか． 【解答群】

ア．

イ．

ウ．

エ．

b. レスポンシブウェブデザインの特徴に関する説明として，適切なものはどれか． 【解答群】

ア． すべての機器に対して，共通のURL，HTML， CSSを用いる．

イ． データを送信する側の機器で要素の配置や大きさの変更，表示･非表示を切り替え，閲

覧機器でWebページを見やすいよう自動的にレイアウトを変更する．

ウ． 閲覧するWebブラウザにおけるビューポートの高さを基準に，自動的にレイアウトが変

更される．

エ． 対応していないスマートフォンの機種もあるため，サーバから機器へ送信するデータ

にはJavaScriptを含めない．

c. 図１は，レスポンシブウェブデザインによって作成されたあるWebページをPC（パーソナル

コンピュータ）に表示させた状態を示している．また，図２から図４は，図１と同じWebペー

ジをスマートフォンに表示させた状態を想定した図である．レスポンシブウェブデザインの

ページレイアウトに関する説明として，適切なものはどれか．

図１ 図２ 図３ 図４

【解答群】 ア． 閲覧する機器にかかわらずPCとスマートフォンに同じコンテンツセットが適用される

ので，スマートフォンには図２しか表示されない．

イ． PCとスマートフォンで別々のコンテンツセットが適用されるので，スマートフォンに

は図３を表示できる．

ウ． 静的なCMSを用いることで，スマートフォンに図３を表示できる．

エ． CSS3を用いることで，スマートフォンに図４を表示できる．

d.レスポンシブウェブデザインの長所に関する説明として，適切なものはどれか．

【解答群】 ア．モバイルURLや動的な配信に比べて不具合を生じにくい．

イ． 各機種の特性に合わせてUIやデザインなどをつくり込める．

ウ． 最大公約数的なデザインにできる．

エ． モバイルURLや動的な配信に比べてダウンロードデータが軽くなる可能性がある．

問題テーマ

さまざまな閲覧機器

出題のねらい（作問意図）

この問題は，閲覧機器への対応方法の１つであるレスポンシブウェブデザインについて問うて

います．

考え方（問題の解法・解説）

a: レスポンシブウェブデザインは，すべての機器に対して共通の URL へアクセスさせ，共

通の HTML や CSS を送信する手法です．その流れを示しているウが正解答となります．

b: レスポンシブウェブデザインの特徴の１つは，Web ページのデータ送信側の機器ではな

く，データ受信側の機器において見やすいよう自動的にレイアウトを変えることです．そ

のため，イは不正解となります．また，レスポンシブウェブデザインは，閲覧する Webブラウザのビューポートの高さではなく，幅を基準に自動的にレイアウトが変更されま

す．そのため，ウも不正解となります．そして，レイアウトを行う際，要素の配置や大き

さの変更，表示･非表示の切り替えに JavaScript の機能を用いることもあり，サーバから機

器へ送信するデータに JavaScript を含めることもあります．すべての機器に対して，共通

の URL，HTML，CSS を用いるのがレスポンシブウェブデザインの特徴のため，正解答は

アとなります．

c: レスポンシブウェブデザインでは，PC とスマートフォンに同じコンテンツセットが適用

　　されますが，閲覧する機器に応じて自動的に異なるページレイアウトが構成されます．そ

　　のため，スマートフォンに PC と同じレイアウトの図２が表示されるとは限りません．そ

　　のためアは不正解です．レスポンシブウェブデザインを用いることでスマートフォンに図

　　３を表示させることもできます．ただし，それは PC とスマートフォンで別々のコンテン

　　ツセットが適用されるのではなく，同じコンテンツセットで可能とします．そのためイも

　　不正解です．動的なCMSを用いればスマートフォンに図３を表示することもできますが，

静的な CMS では不可能です．そのためウも不正解となります．CSS3 や JavaScript の機能

を用いることで，要素の配置や大きさの変更，表示･非表示を切り替えることができます．

そのため，エリア A を非表示にし，エリア D を表示させた図４をスマートフォンに表示

できます．これらからエが正解答です．

d: 各機種の特性に合わせてUIやデザインなどをつくり込めるのは｢動的な配信｣の長所です．

また最大公約数的なデザインになるのは，レスポンシブウェブデザインの短所です．そし

てレスポンシブウェブデザインでは，コンテンツ内容やデザインによっては PC あるいは

スマートフォンのみでしか使用しないデータを含むこともあるため，ダウンロードデータ

が重くなる可能性があります．モバイル URL や動的な配信に比べて１つのコンテンツセ

ットだけで良いため不具合を生じにくいのがレスポンシブウェブデザインの長所である

ため，アが正解答です．

正解答

【解答：a. ウ b. ア c. エ d.ア】

【配点：各 2.5点（10点満点）】

エキスパート 練習問題２

以下は，スマートフォンのナビゲーションに関する問題である．図１から図４は，｢Step 1｣上に示したタップ操作を実行すると｢Step 2｣になることを示した，スマートフォンの画面遷移

図である．a〜d の問いに最も適するものを解答群から選び，記号で答えよ．

図１ 図２

図３ 図４

a.深い階層まで存在する大規模なWebサイトに適した手法を示した図はどれか．

【解答群】 ア． 図１ イ． 図２ ウ． 図３ エ． 図４

b.図１に示した手法の短所に関する説明として適切なものはどれか．

【解答群】 ア． コンテンツにたどり着くまでのアクション数が多い．

イ． タブによって選択肢を一目で把握しやすい.

ウ． ナビゲーション項目数が多くなると操作性が下がる．

エ． 選択肢ごとの必要度の差が大きくなると不要な情報が多くなる．

c.図２に示した手法のよび方と特徴に関する説明として適切なものはどれか．

【解答群】 ア． ｢ドロワー｣とよばれ，同格の選択肢をユーザに提示する場合に適した手法である．

イ． ｢ダッシュボード｣とよばれ，１タップで目的のコンテンツへ移動させられる手法であ

る．

ウ． ｢ドリルダウン｣とよばれ，Webサイトの情報構造に柔軟に対応できる手法である.

エ． ｢スプリングボード｣とよばれ，階層化された情報をユーザに提示したい場合に適した

手法である．

d.スマートフォンの画面構成を考える場合に考慮すべき工夫として，適切なものはどれか．

【解答群】 ア． スマートフォンの画面は年々大型化が進んでいるため，今日のスマートフォンの画面

構成を考えるうえで，コンテンツエリアとナビゲーションエリアを同時に画面上へ配

置させる工夫が必要である．

イ． スマートフォンの操作は指で画面を直接タッチして行えるように，個々のナビゲーシ

ョンパーツは大きさを考慮して作成する必要がある.

ウ． スマートフォンの操作は指によるタップによって行われるため，必ず１タップで目的

のコンテンツへ移動できるナビゲーションにする必要がある．

エ． スマートフォンでもPCと同等の情報を提供する必要があるため，PCとスマートフォン

の画面構成は同じように見える工夫が必要である．

問題テーマ

スマートフォンにおけるページレイアウト

出題のねらい（作問意図）

この問題は，スマートフォンにおけるページレイアウトを制作する際に重要となる，インタフ

ェースとナビゲーション機能について問うています．

考え方（問題の解法・解説）

a: ナビゲーション要素が多く，階層が深い場合など規模の大きなサイトにおけるスマートフ

ォンのナビゲーションには，｢ドロップダウン｣が適しています．ドロップダウンは，画面

上部に設けたメニューボタンをタップすると，そこからナビゲーションエリアが下方に向

かって滑りこむように入ってきて表示されます．そのことを表しているエの図４が正解答

になります．

b: 図１は，｢タブ｣とよばれるスマートフォンのナビゲーション手法です．タブの長所には，

｢選択肢を一目で把握しやすい｣や｢１タップで目的画面を表示できる移動のしやすさ｣が

あります．また，短所には｢ナビゲーション項目数が多くなると各タブが小さくなり，視

認性と操作性が下がる｣があげられます．本問ではタブの短所を問うているため，正解答

はウとなります．

c: 図２は，｢スプリングボード｣あるいは｢ダッシュボード｣とよばれるスマートフォンのナビ

ゲーション手法です．この手法の長所は，｢選択肢が一目で把握しやすい｣｢１タップで目

的のコンテンツへ移動できる｣｢タブよりも多くのナビゲーション項目を表示できる｣とい

った点があります.また短所は，｢個々の選択肢の必要度に差がありすぎると，ユーザにと

って不要な情報の多いナビゲーションになる｣｢ナビゲーションしかない画面となるため，

ほかの手法に比べて情報量が少ない｣といった点があります．これらからイが正解答にな

ります．

d: スマートフォンの画面構成を考える場合に考慮すべき工夫について問うています．スマー

トフォンの画面は年々大型化が進んでいます．しかし，これまでのスマートフォンにも対

応できる画面構成が求められますので，アの説明は適切ではありません．スマートフォン

の操作は指によるタップによって行われますが，階層構造をもつ Web サイトでは１タップ

で目的のコンテンツへ移動できるようにするのは難しい場合があります．したがって，ウ

も適切な説明ではありません．スマートフォンにも PC と同等の情報を提供する必要があ

ります．しかし，スマートフォンと PC が同じ画面構成である必要はありません．よって，

エの説明も適切ではありません．スマートフォンの操作は指で画面を直接タッチして行う

ため，個々のナビゲーションパーツは大きめに作成する必要があります.したがって，イ

の説明が正解答となります．

正解

【解答：a. エ b. ウ c. イ d.イ】

【配点：各 2.5点（10点満点）】