【ウェブデザイン技能検定】3級の実技試験のコツと勉強方法

6月 1, 201910月 6, 2023ウェブデザイン技能検定

この記事では、ウェブデザイン技能検定3級について、実技試験の勉強方法を中心に解説します。

狒々山

ウェブデザイン技能検定3級の実技試験について、勉強方法や解答のコツを知りたい人におすすめの記事です。

学科試験対策については、以下の記事で紹介していますので、参考にしていただければと思います。

【ウェブデザイン技能検定】3級・2級の学科試験の勉強方法について

この記事では、ウェブデザイン技能検定の3級と2級について、学科試験の勉強方法について解説します。 ...

https://shikaku-benkyou.com/web-design-ginou-kentei-benkyou-...

ウェブデザイン技能検定の概要

試験日：
1級学科：11月下旬頃
1級実技：2月下旬頃
2・３級：5月下旬頃、8月下旬頃、11月中旬頃、2月下旬頃の年4回
申込日：
1級学科：10月上旬～下旬頃
1級実技：12月下旬～翌年1月中旬頃
2・３級：４月上旬～下旬頃、7月上旬～下旬頃、10月上旬～下旬頃、12月下旬～翌1年月中旬頃の年4回
合格発表：
1級学科：12月中旬頃
1級実技：3月中旬頃
2・3級：６月下旬頃、9月下旬頃、12月中旬頃、３月下旬頃
試験時間：
1級：学科90分、実技180分、ペーパー実技60分
2級：学科60分、実技120分
3級：学科45分、実技60分
受験料：
1級：学科7,000円、実技25,000円
2級：学科6,000円、実技12,500円（35歳未満は実技7,000円）
3級：学科5,000円、実技5,000円（35歳未満は実技3,000円）
合格基準：全ての試験で70点/100点以上（ただし、実技は試験要項に示す各作業分類で60%以上の得点が必要）
受験資格：
1級：実務経験必須
2級：実務経験、大学での学習経験、3級合格など
3級：とくになし
想定勉強時間：
1級：不明（難易度はかなり高い）
2級：50～100時間程度（未経験から学習する場合）
3級：15～30時間程度（未経験から学習する場合）
公式サイトはこちら

準備：必要なものは「テキストエディタ」「過去問」

「3級実技試験概要」を確認するとわかりますが、3級で準備されているアプリケーションは「サクラエディタ」「TeraPad」「Sublime Text」のようなテキストディタです。無料で入手できますので、持っていない人はどれかお好きなものを一つインストールしていただければと思います。

狒々山

ちなみに、Sublime Textには有料版もあります

出題内容はコードの修正やアンカーリンクの設定など、比較的簡単なものが中心ですので、短時間でも十分対策が可能だと思います。

教材は、合格を優先するなら、過去問による学習が最適です。

最新3回分の過去問は公式サイトの「過去問題の公表」から、平成25年第4回の過去問は、過去問題集のページからダウンロードが可能です。

過去問で素材がダウンロードできるのは過去問題集のページにある「平成25年第4回」試験分だけであり、素材がないと作業が行えないため、実際に過去問で練習できるのはこの「平成25年第4回」だけとなります。とはいえ、毎年問題用紙上では変化がない試験ですので1年分だけ対応できれば、あとはちょっとした指示の変化に対応できれば問題ありません。

また、公式サイトに「練習問題」もありますので、過去問に慣れたら、練習問題も利用しましょう。

狒々山

過去問だけでも簡単に合格できてしまいますが、せっかく勉強するのであれば、「Progate」などの無料で学習できる範囲で、基礎はおさえておきましょう。有料ですが、私は「Udemy」のウェブデザイナー向け講座を利用しています

難易度：かなり簡単。毎年ほぼ同じ問題

過去問についての解説を読んでいただければわかると思いますが、難易度はかなり簡単です。

私はHTMLやCSSの知識はほぼありませんでしたが、「WordPressを使ってサイト運営していれば、嫌でも理解できる程度の知識」でほとんどの内容はカバーできる印象です。

CSSファイル関連は、少し勉強が必要だと思いますが、覚えることが非常に少ないため、仮に知識が足りなくても、数時間勉強すれば対応できるようになるでしょう。

また、毎年同様の問題が出題されるため「勉強した内容がでなかった！」ということも、まずありません。3級の合格率はかなり高いですが、実技試験で落ちるとしたら「完全な素人だけど、過去問をやらなかった人」か「指示を根本的に勘違いしてしまった人」くらいだと思います。

3級の過去問解説（平成25年第4回）

簡単に作業について解説します。詳細な解説が必要な場合は、過去問題集のページから素材と一緒にダウンロードできますので、そちらをご確認いただければと思います。

作業1

「fs.jpg」という画像ファイルのディレクトリ構成どおりにファイルを配置できるよう、フォルダを作成して、適宜用意されたファイルを移動させる作業です。

また、移動に伴ってパスが変化してしまうので「index.html」ファイルと「style.css」ファイルの編集が必要となります。

例えば「index.html」のCSSファイルまでのパスであれば

変更前：<link href="style.css" rel="stylesheet" type="text/css">

変更後：<link href="style/style.css" rel="stylesheet" type="text/css">

といった具合です。恐らく、実際の試験ではディレクトリ構成の指示が少し変化すると思いますので、必要に応じてパスの編集も変化させる必要があります。

作業1のポイントとしては、パスの編集について、やり方と法則を理解しておくことです。「どのようなディレクトリ構成の場合、パスはどのように書けば良いのか？」がわかっていれば、まず間違えることはないでしょう。

作業2

リンクの設定と、テキストの修正を行う作業です。

テキストの修正については、指示のとおり、対象のファイルの対象の箇所を修正するだけですので、悩むことはないでしょう。

作業2のポイントは、リンクの設定ができるか。リンクについては「どの部分がリンクか？」を判断できれば問題ないでしょう。

念の為、「global_nabi」で指定された「HOME」のリンク先を「index.html」に設定する部分を抜粋します。

変更前：<a href="#“><img src="img/gl_bt_home.gif" alt="HOME"></a>

変更後：<a href="index.html“><img src="img/gl_bt_home.gif" alt="HOME"></a>

作業3

用意されたjpegファイルを確認し、イメージとウェブブラウザで同じ表示結果となるように、用意されたCSSファイルから正しいものを選択する作業です。

各jpegファイルとCSSファイルを見比べて回答するのでも問題ありませんが、一番手っ取り早いのは「index.html」ファイルのCSSファイルに関する記述を修正し、実際に用意されたCSSファイルを適用して表示結果を確認することです。

つまり「CSSファイルのパスを修正する」能力さえあれば、この問題も回答が可能です。

正直、作業3については「何をさせたいのか？」という指示を読み取るのが一番難しいところだと思います。

作業4

CSSファイルを編集し、h1要素に関連する背景の色と、文字の色を変更する作業です。

ポイントは「背景色の指定」と「文字の色の指定」方法を知っているかですが、元のCSSファイルに「background-color」や「color」の記述がありますので、記述方法を忘れても、現地で試行錯誤すればなんとかなるかと思います。

狒々山

記述方法を忘れていても合格はできますが、かなり基礎的な知識ですので、覚えてから受験していただければと思います。

作業5

完成イメージからCSSファイルを編集する作業です。

完成イメージと同じ表示結果になるように、背景画像を適用するという問題ですが、作業3や作業4のCSSファイルを参考にすれば、どの部分を編集すればいいかは容易に検討がつくと思います。

具体的には、以下の赤文字部分をCSSファイルに追加すればOKです。

body {
　　padding: 0px;
　　margin: 0px;
　　background-color: #FFFFFF;
　　background-image: url(img/bg3.gif);
}
#wrap {
　　background-color: #FFFFFF;
　　width: 690px;
　　padding: 5px;
　　margin: 0px auto;
　　border: 1px solid #333333;
　　background-image: url(img/bar3.gif);
}

狒々山

赤文字部分は、作業4のCSSファイルからコピペした内容を修正するでも対応できます。ほぼ暗記不要ですが、試験内容の変化によっては対応できなくなる可能性もあるので、念の為覚えておきましょう