本記事では、ウェブデザイン技能検定の2級実技試験の作業2の解説・回答を行います。
問題については、令和5年度第2回をベースに問題解説を行います。
実技試験については、毎回ほぼ同一問題のため、今回の演習で試験対策を行えます。
2級実技試験の概要解説は下記よりアクセスできます。
-
-
参考【ウェブデザイン技能検定】2級実技試験の概要と対策の解説
続きを見る
①作業2の概要
作業2の概要は下記の通りです。
JavaScriptによるアニ メーションもしくはGIF形式いずれかでアニメーションバナーを作成します。
仕様は下記の通りです。
- 幅800px、高さ48pxとし、指定された画像より 2 つ選択し、加工して必ず使用する。 「img001.bmp、img002.jpg、img003.png」
- バナーに掲載する情報はテキストファイルの文章を利用することとし、テキストの文字は可読であること。 「banner_copy.txt」
- アニメーションでいずれかの要素が変化(動き・切替等)する設定をする。
- ファイルの総容量は500kB以内にする（jQuery ファイルを使用した場合はそれらも含む）。
詳しい問題の文章や内容は、ウェブデザイン技能検定の過去問題の公表を参考ください。
②成果物
任意の画像を2つ選択し、アニメーションバナーを作成します。
成果物の例は下記の通りです。
③指定素材
「img001.bmp、img002.jpg、img003.png、banner_copy.txt」が試験本番に試提供されています。
今回は、仮の素材として下記を用意しておきます。
「作業2の素材」フォルダデータはこちらよりダウンロードもできます
【img001.bmp】
【img002.jpg】
【img003.png】
【banner_copy.txt】
- 国家検定
- ウェブデザイン技能検定
④回答・解説
1.Photoshopを起動し「新規ファイル」を クリックします。
2.①「カスタム」をクリックし、②幅「800」「ピクセル」、高さ「48」、解像度「72」「ピクセル/インチ」、カラーモード「RGBカラー」を入力し、③「作成」をクリックします。
※作業2の仕様の「幅 800px 高さ 48px」より、アニメーションバナーを幅 800px 高さ 48pxで作成します。
3.ここからアニメーションバナーのオブジェクトを作成していきます。
4.アニメーション用のタイムラインを表示させます。
タイムラインが表示されてない場合は、「ウィンドウ」の「タイムライン」クリックして、タイムラインを表示させます。
5.「作業2の素材」フォルダに格納されている画像データをフォトショップに展開します。
「img001.bmp」をドラッグアンドドロップでフォトショップに展開します。
6.画像をオブジェクトサイズを超えるように、拡大していきます。
7.テキストツールでメニューの文字を作成します。
①「テキストツール」をクリックします。
②「banner_copy.txt」内のテキスト「国家検定」を挿入します。
8.タイムラインを作成していきます。
「ビデオタイムラインを作成」をクリックします。
1秒おきに画像とテキストが切り替わるアニメーションを作成します。
※作業 2 仕様では、指定がありませんが、今回は1秒おきに切り替わるアニメーションとします。
「紫色のタイムゲージ」を移動させて、表示時間を調節します。
「国家検定」「img001」ともに01:00fに合わせます。
9.アニメーション画像2枚目を挿入します。
作業2の素材フォルダに格納されている画像データをフォトショップに展開します。
「img002.jpg」をドラッグアンドドロップでフォトショップに展開します。
「img002.jpg」をオブジェクト全体を含むよう、拡大します。
10.テキストツールでメニューの文字を作成し、アニメーション時間を調整します。
①「テキストツール」をクリックします。
②「banner_copy.txt」内のテキスト「ウェブデザイン技能検定」を作成していきます。
③「紫色のタイムゲージ」を移動させて、表示時間を調節します。「ウェブデザイン技能検定」「img002」ともに02:00fに合わせます。
11.作成物を保存します。
「ファイル」より、「書き出し」から「Web用に保存」をクリックします。
ファイルの保存形式を「GIF」を選択し、保存をします。データ名は「banner.gif」にします。
（データ名は任意ですが、後の問題でも本データを使用するためbanner.gifのよう、わかりやすいデータ名がおすすめです。）
本データを任意のフォルダに格納します。（試験では、保存フォルダの指定があります。）
格納データは下記の通りです。
データ名：banner.gif
上記のデータをフォルダに格納までで、作業2は終了です。