応用情報技術者 2019年 春期 午後 問08

　J社は、コーヒー店をチェーン展開する外食事業者である。J社が運営するコーヒー店のWebサイトは開設後数年が経過し、デザインが古くなっていることから、Webサイトのリニューアルを実施することになった。 　J社のシステム部門に所属するK君は、Webサイトの担当として、リニューアルに当たってのデザイン及び開発方針を整理することになった。 　 〔リニューアルにおけるWebサイトデザインの要件〕 　リニューアルに当たり、システム部門のL部長から“スマートフォンやタブレットからのアクセスが大きな割合を占めることから、Webサイトにアクセスする手段に応じて、Webサイトの表示を切り替え、利用者が見やすいWebサイトにすること”との要件が示された。 　 〔実現案の検討〕 　K君は、スマートフォン、タブレット及びPCをWebサイトにアクセスするデバイスとして想定し、この要件に対する実現方法として、次の2案を比較検討した。 　案1：WebサイトにアクセスするWebブラウザやデバイスのスクリーンサイズ（画面幅）を基準に、表示を切り替える方法 　案2：WebサイトにアクセスするWebブラウザやデバイスのユーザエージェント情報によって、表示を切り替える方法 　案1は、aと呼ばれる手法である。 　K君が調査した両案の特徴を表1に示す。

　K君は表1の両案の特徴を比較し、次の理由から案1を採用する方針とした。 　・J社が運営するコーヒー店のWebサイトでは、デバイスごとに大きくデザインを変更する必要がない。 　・①案2は初期開発や将来のデザイン変更において、開発コストが大きくなると考えられる。 　　 〔デザインイメージの作成〕 　K君は、スマートフォン、タブレット及びPCの3種類のデバイスに対して、それぞれのウインドウ幅に適したデザインイメージを作成した。 　K君が作成したデバイスごとのデザインイメージを図1に示す。 　スマートフォンとタブレットはシングルカラムのレイアウトとし、PCは2カラムのレイアウトとした。また、見出しや画像の水平方向のレイアウトは、スマートフォンではセンタリング、タブレット上では右寄せとし、上下方向のレイアウトはデバイスにかかわらず上寄せとした。画像はデバイスごとのWebブラウザに合わせたサイズ、縦横比の画像を表示することとし、縦長は表示されないこととした。

〔ブレークポイントの決定〕 　案1の実現方法では、デバイスの解像度、ウインドウの幅・向きなどの指定条件に合わせて別々のCSSを適用する“メディアクエリ”の機能によってCSSを切り替える。Webブラウザのウインドウ幅でCSSを切り替える条件を“ブレークポイント”という。ブレークポイントはピクセルで指定し、単位はpxで表す。 　K君は、図1のデザインイメージに合わせて、スマートフォンとタブレットのブレークポイントを768px、タブレットとPCのブレークポイントを1,024pxとし、表2のように対象デバイスごとのWebブラウザで想定されるウインドウ幅の範囲を決定した。

　また、表1に示す案1の特徴から、②非機能要件を考慮して、デバイスごとにサイズの異なる画像を用意し、表2のウインドウ幅の範囲に合わせて、表示する画像を切り替える方針とした。 　 〔CSS の作成〕 　K君は、表2で決定したウィンドウ幅の範囲に合わせて CSS を作成した。CSS で使用する書式及びデータの一部を表3に示す。また、K君が作成した CSS のうち、タブレット用のブレークポイントの指定と画像表示に関する部分の抜粋を図2に示す。ここで、図1中で“タイトル1”の下に表示する画像は、background プロパティを用いて表示することにした。