本記事では、ウェブデザイン技能検定の2級実技試験の作業1の解説・回答を行います。
問題については、令和5年度第2回をベースに問題解説を行います。
実技試験については、毎回ほぼ同一問題のため、今回の演習で試験対策を行えます。
2級実技試験の概要解説は下記よりアクセスできます。
-
-
参考【ウェブデザイン技能検定】2級実技試験の概要と対策の解説
続きを見る
①作業1の概要
作業1の概要は下記の通りです。
Photoshopを使用して、ウェブサイトのヘッダ下部のナビゲーションメニュー用のパーツを作成します。
仕様は下記の通りです。（仕様については、試験ごとに数字等が異なります）
- 幅 800px 高さ 42px 内で 4 つのメニューパーツを作成する(各メニュー項目の幅は任意となっていますが、今回は幅「200」とします）
- 解像度 72ppi(dpi)、GIF 形式、256 色
- ロールオーバーとするため、それぞれ視認性のためのコントラスト（十分に異なる明度差）に配慮した2種のパーツを作成すること
- ナビゲーションメニューの項目は 「HOME」、「大会情報」、「ウェブデザイン技能競技会」、「参加申込」とする
詳しい問題の文章や内容は、ウェブデザイン技能検定の過去問題の公表を参考ください。
②成果物
Photoshopでグローバルナビゲーション用の GIF 作成 メニューは4つでマウスオーバー時の4つと合わせて8ファイル作成します。
成果物の例は下記の通りです。
③回答・解説
1.Photoshopを起動し、新規ファイルをクリックします。
2.①「カスタム」をクリックし、②幅「200」「ピクセル」、高さ「42」、解像度「72」「ピクセル/インチ」、カラーモード「RGBカラー」を入力し、③「作成」をクリックします。
※今回は仕様の「幅 800px 高さ 42px 内で 4 つのメニュー項目を作成すること」より、各メニューを幅 200px 高さ 42pxで作成します。
3.ここからメニューのオブジェクトを作成していきます。
4.左メニューの「長方形作成ツール」をクリックします。
5.枠の端から端まで選択し、「W:200px、H:42px」になるように枠いっぱいの長方形を作成します。
6.長方形を塗りつぶしします。
「編集」から「塗りつぶし」をクリックします。
「カラー」を選択し、「OK」をクリックします。
ライブラリより、任意のカラーを選択し、「OK」をクリックします。（問題によるカラーの指定はありません。）
今回は、黄緑を選択します。
選択したカラーに塗りつぶしされます。
7.テキストツールでメニューの文字を作成します。
「テキストツール」をクリックします。
長方形の内部を指定し、「HOME」と入力します。
文字の大きさ、位置、色を任意に調節します。（問題のよる指定はありません）
これで一つのメニューの作成は終了です。
8.作成物を保存します。
「ファイル」より、「書き出し」から「Web用に保存」をクリックします。
ファイルの保存形式を「GIF」を選択し、保存をします。
任意のフォルダに保存します。（試験の際は、保存フォルダが指定されます。）
ここでデータ名は「home.gif」としてください。（問題によるデータ名の指定はありませんが、後の問題でも本データを使用するためhome.gifのよう、わかりやすいデータ名がおすすめです。）
9.「ホーム」に引き続き「大会情報」、「ウェブデザイン技能競技会」、「参加申込」のメニューを続けて作成していきます。
長方形大きさ、カラーは「ホーム」で作成したもの活かし、下記のようにテキストだけ修正してメニューを作成していくと、作成が楽になります。
10.「HOME」、「大会情報」、「ウェブデザイン技能競技会」、「参加申込」のそれぞれ 4 つのメニュー項目は、ロールオーバーのためにそれぞれ統一感のある 4 つのメニュー項目毎に 2 種の画像を作成し、合計 8 ファイルを作成するようにします。
成果物が下記のようにします。ロールオーバー用は、「カラー赤に、文字色を黒」に設定ました。（試験もカラー、文字色は任意となります。）
データ名は、「home.gif」とロールオーバー用に「home_hover.gif」の2種類に統一します。（データ名も任意です。）
データ名：home.gif
データ名：info.gif
データ名：web.gif
データ名：sanka.gif
データ名：home_hover.gif
データ名：info_hover.gif
データ名：web_hover.gif
データ名：sanka_hover.gif
上記の8データをフォルダに格納までで、作業1は終了です。