2019年 春期 応用情報技術者試験 問8

Webサイトの開発

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カラムのレイアウトとした。また、見出しや画像の水平方向のレイアウトは、スマートフォンではセンタリング、タブレットとPCでは左寄せとし、上下方向のレイアウトはデバイスにかかわらず上寄せとした。画像はデバイスごとの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プロパティを用いて表示することにした。

⋮
@media screen and (min-width: e) and (max-width: f){
    /* タブレット用のCSSを記述 */
    .keyvisual{
        height: 300px;
        background-image: url("g");
        background-position: top left;
        background-repeat: h;
    }
}
⋮